.effect--fade > [class*="__shell"] {
  opacity: 0;
  transition: opacity var(--effect-fade-duration, 600ms) var(--effect-fade-easing, ease-out) var(--effect-fade-delay, 0ms),
              transform var(--effect-fade-duration, 600ms) var(--effect-fade-easing, ease-out) var(--effect-fade-delay, 0ms);
  will-change: opacity, transform;
}
.effect--fade:not(.is-revealed)[style*="--effect-fade-direction: up"] > [class*="__shell"] {
  transform: translateY(var(--effect-fade-distance, 24px));
}
.effect--fade:not(.is-revealed)[style*="--effect-fade-direction: down"] > [class*="__shell"] {
  transform: translateY(calc(-1 * var(--effect-fade-distance, 24px)));
}
.effect--fade:not(.is-revealed)[style*="--effect-fade-direction: left"] > [class*="__shell"] {
  transform: translateX(var(--effect-fade-distance, 24px));
}
.effect--fade:not(.is-revealed)[style*="--effect-fade-direction: right"] > [class*="__shell"] {
  transform: translateX(calc(-1 * var(--effect-fade-distance, 24px)));
}
.effect--fade.is-revealed > [class*="__shell"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .effect--fade > [class*="__shell"] { transition: none; opacity: 1; transform: none; }
}

.effect--slide-stagger > * {
  opacity: 0;
  transition: opacity var(--effect-slide-stagger-duration, 500ms) ease,
              transform var(--effect-slide-stagger-duration, 500ms) ease;
  will-change: opacity, transform;
}
.effect--slide-stagger:not(.is-revealed)[style*="--effect-slide-stagger-direction: up"] > * {
  transform: translateY(var(--effect-slide-stagger-distance, 16px));
}
.effect--slide-stagger:not(.is-revealed)[style*="--effect-slide-stagger-direction: down"] > * {
  transform: translateY(calc(-1 * var(--effect-slide-stagger-distance, 16px)));
}
.effect--slide-stagger:not(.is-revealed)[style*="--effect-slide-stagger-direction: left"] > * {
  transform: translateX(var(--effect-slide-stagger-distance, 16px));
}
.effect--slide-stagger:not(.is-revealed)[style*="--effect-slide-stagger-direction: right"] > * {
  transform: translateX(calc(-1 * var(--effect-slide-stagger-distance, 16px)));
}
.effect--slide-stagger.is-revealed > * { opacity: 1; transform: none; }
.effect--slide-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.effect--slide-stagger.is-revealed > *:nth-child(2) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 1); }
.effect--slide-stagger.is-revealed > *:nth-child(3) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 2); }
.effect--slide-stagger.is-revealed > *:nth-child(4) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 3); }
.effect--slide-stagger.is-revealed > *:nth-child(5) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 4); }
.effect--slide-stagger.is-revealed > *:nth-child(6) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 5); }
.effect--slide-stagger.is-revealed > *:nth-child(7) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 6); }
.effect--slide-stagger.is-revealed > *:nth-child(8) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 7); }
.effect--slide-stagger.is-revealed > *:nth-child(n+9) { transition-delay: calc(var(--effect-slide-stagger-stagger, 80ms) * 8); }
@media (prefers-reduced-motion: reduce) {
  .effect--slide-stagger > * { transition: none; opacity: 1; transform: none; }
}

.effect--mask-reveal {
  position: relative;
  overflow: hidden;
}
.effect--mask-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-default);
  transform-origin: right center;
  transition: transform var(--effect-mask-reveal-duration, 700ms) cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}
.effect--mask-reveal.is-revealed::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .effect--mask-reveal::before { display: none; }
}

.effect--block-overlap {
  display: flow-root;
}
.effect--block-overlap > [class*="__shell"] {
  position: relative;
  margin-top: calc(-1 * var(--effect-block-overlap-distance, 80px));
  padding-top: var(--spacing-xl, 56px);
  padding-bottom: var(--spacing-xl, 56px);
  background: var(--bg-default);
  border-radius: var(--border-radius-lg, 20px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.effect--pattern-dots {
  position: relative;
  isolation: isolate;
}
.effect--pattern-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    var(--brand-primary) var(--effect-pattern-dots-size, 2px),
    transparent calc(var(--effect-pattern-dots-size, 2px) + 0.5px)
  );
  background-size: var(--effect-pattern-dots-spacing, 20px) var(--effect-pattern-dots-spacing, 20px);
  opacity: var(--effect-pattern-dots-opacity, 0.15);
  pointer-events: none;
  z-index: 0;
}
.effect--pattern-dots > * { position: relative; z-index: 1; }

.effect--pattern-lines {
  position: relative;
  isolation: isolate;
}
.effect--pattern-lines::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    var(--effect-pattern-lines-angle, 45deg),
    var(--brand-primary) 0 var(--effect-pattern-lines-thickness, 1px),
    transparent var(--effect-pattern-lines-thickness, 1px) var(--effect-pattern-lines-spacing, 16px)
  );
  opacity: var(--effect-pattern-lines-opacity, 0.12);
  pointer-events: none;
  z-index: 0;
}
.effect--pattern-lines > * { position: relative; z-index: 1; }

.effect--shape-blob {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.effect--shape-blob[style*="--effect-shape-blob-overflow: bleed-y"] {
  overflow: visible;
  z-index: 2;
  clip-path: inset(-100% 0);
}
.effect-shape-blob-piece[data-effect="shape-blob"] {
  position: absolute;
  width: var(--effect-shape-blob-size, 200px);
  height: var(--effect-shape-blob-size, 200px);
  background: var(--effect-shape-blob-color, var(--brand-primary));
  border-radius: 70% 30% 60% 40% / 30% 60% 40% 70%;
  opacity: var(--effect-shape-blob-opacity, 0.18);
  pointer-events: none;
  z-index: 1;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: translate(-30%, -30%);
}
.effect--shape-blob[style*="--effect-shape-blob-position: top-left"] > .effect-shape-blob-piece[data-effect="shape-blob"] { top: 0; left: 0; transform: translate(-30%, -30%); }
.effect--shape-blob[style*="--effect-shape-blob-position: top-right"] > .effect-shape-blob-piece[data-effect="shape-blob"] { top: 0; right: 0; transform: translate(30%, -30%); }
.effect--shape-blob[style*="--effect-shape-blob-position: bottom-left"] > .effect-shape-blob-piece[data-effect="shape-blob"] { bottom: 0; left: 0; transform: translate(-30%, 30%); }
.effect--shape-blob[style*="--effect-shape-blob-position: bottom-right"] > .effect-shape-blob-piece[data-effect="shape-blob"] { bottom: 0; right: 0; transform: translate(30%, 30%); }
.effect--shape-blob[style*="--effect-shape-blob-shape: blob-asymmetric"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 80% 20% 55% 45% / 25% 75% 25% 75%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: blob-three-pointed"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 50% 50% 50% 50% / 80% 50% 50% 20%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: circle"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 50%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: oval"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 50%; width: calc(var(--effect-shape-blob-size, 200px) * 1.4); height: var(--effect-shape-blob-size, 200px); }
.effect--shape-blob[style*="--effect-shape-blob-shape: rounded-square"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 22%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: rounded-triangle"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 50% 50% 50% 50% / 0% 0% 90% 90%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: petal"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 0% 50% 0% 50%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: wavy"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
.effect--shape-blob[style*="--effect-shape-blob-shape: bean"] > .effect-shape-blob-piece[data-effect="shape-blob"] { border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }
.effect--shape-blob > *:not([aria-hidden="true"]) { position: relative; z-index: 2; }

.effect--shape-blob-2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.effect--shape-blob-2[style*="--effect-shape-blob-2-overflow: bleed-y"] {
  overflow: visible;
  z-index: 2;
  clip-path: inset(-100% 0);
}
.effect-shape-blob-piece[data-effect="shape-blob-2"] {
  position: absolute;
  width: var(--effect-shape-blob-2-size, 200px);
  height: var(--effect-shape-blob-2-size, 200px);
  background: var(--effect-shape-blob-2-color, var(--brand-primary));
  border-radius: 70% 30% 60% 40% / 30% 60% 40% 70%;
  opacity: var(--effect-shape-blob-2-opacity, 0.18);
  pointer-events: none;
  z-index: 1;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: translate(-30%, -30%);
}
.effect--shape-blob-2[style*="--effect-shape-blob-2-position: top-left"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { top: 0; left: 0; transform: translate(-30%, -30%); }
.effect--shape-blob-2[style*="--effect-shape-blob-2-position: top-right"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { top: 0; right: 0; transform: translate(30%, -30%); }
.effect--shape-blob-2[style*="--effect-shape-blob-2-position: bottom-left"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { bottom: 0; left: 0; transform: translate(-30%, 30%); }
.effect--shape-blob-2[style*="--effect-shape-blob-2-position: bottom-right"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { bottom: 0; right: 0; transform: translate(30%, 30%); }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: blob-asymmetric"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 80% 20% 55% 45% / 25% 75% 25% 75%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: blob-three-pointed"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 50% 50% 50% 50% / 80% 50% 50% 20%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: circle"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 50%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: oval"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 50%; width: calc(var(--effect-shape-blob-2-size, 200px) * 1.4); height: var(--effect-shape-blob-2-size, 200px); }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: rounded-square"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 22%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: rounded-triangle"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 50% 50% 50% 50% / 0% 0% 90% 90%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: petal"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 0% 50% 0% 50%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: wavy"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
.effect--shape-blob-2[style*="--effect-shape-blob-2-shape: bean"] > .effect-shape-blob-piece[data-effect="shape-blob-2"] { border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }
.effect--shape-blob-2 > *:not([aria-hidden="true"]) { position: relative; z-index: 2; }

.effect--shape-blob-3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.effect--shape-blob-3[style*="--effect-shape-blob-3-overflow: bleed-y"] {
  overflow: visible;
  z-index: 2;
  clip-path: inset(-100% 0);
}
.effect-shape-blob-piece[data-effect="shape-blob-3"] {
  position: absolute;
  width: var(--effect-shape-blob-3-size, 200px);
  height: var(--effect-shape-blob-3-size, 200px);
  background: var(--effect-shape-blob-3-color, var(--brand-primary));
  border-radius: 70% 30% 60% 40% / 30% 60% 40% 70%;
  opacity: var(--effect-shape-blob-3-opacity, 0.18);
  pointer-events: none;
  z-index: 1;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: translate(-30%, -30%);
}
.effect--shape-blob-3[style*="--effect-shape-blob-3-position: top-left"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { top: 0; left: 0; transform: translate(-30%, -30%); }
.effect--shape-blob-3[style*="--effect-shape-blob-3-position: top-right"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { top: 0; right: 0; transform: translate(30%, -30%); }
.effect--shape-blob-3[style*="--effect-shape-blob-3-position: bottom-left"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { bottom: 0; left: 0; transform: translate(-30%, 30%); }
.effect--shape-blob-3[style*="--effect-shape-blob-3-position: bottom-right"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { bottom: 0; right: 0; transform: translate(30%, 30%); }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: blob-asymmetric"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 80% 20% 55% 45% / 25% 75% 25% 75%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: blob-three-pointed"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 50% 50% 50% 50% / 80% 50% 50% 20%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: circle"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 50%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: oval"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 50%; width: calc(var(--effect-shape-blob-3-size, 200px) * 1.4); height: var(--effect-shape-blob-3-size, 200px); }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: rounded-square"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 22%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: rounded-triangle"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 50% 50% 50% 50% / 0% 0% 90% 90%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: petal"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 0% 50% 0% 50%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: wavy"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
.effect--shape-blob-3[style*="--effect-shape-blob-3-shape: bean"] > .effect-shape-blob-piece[data-effect="shape-blob-3"] { border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }
.effect--shape-blob-3 > *:not([aria-hidden="true"]) { position: relative; z-index: 2; }

.effect--image-decorative {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.effect--image-decorative[style*="--effect-image-decorative-overflow: bleed-y"] {
  overflow: visible;
  z-index: 2;
  clip-path: inset(-100% 0);
}
.effect-image-decorative-piece {
  position: absolute;
  width: var(--effect-image-decorative-size, 220px);
  height: var(--effect-image-decorative-size, 220px);
  background-image: var(--effect-image-decorative-image_url, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--effect-image-decorative-opacity, 1);
  pointer-events: none;
  z-index: 1;
  top: auto; right: auto; bottom: auto; left: auto;
  transform: translate(-30%, -30%);
}
.effect--image-decorative[style*="--effect-image-decorative-position: top-left"] > .effect-image-decorative-piece { top: 0; left: 0; transform: translate(-30%, -30%); }
.effect--image-decorative[style*="--effect-image-decorative-position: top-right"] > .effect-image-decorative-piece { top: 0; right: 0; transform: translate(30%, -30%); }
.effect--image-decorative[style*="--effect-image-decorative-position: bottom-left"] > .effect-image-decorative-piece { bottom: 0; left: 0; transform: translate(-30%, 30%); }
.effect--image-decorative[style*="--effect-image-decorative-position: bottom-right"] > .effect-image-decorative-piece { bottom: 0; right: 0; transform: translate(30%, 30%); }
.effect--image-decorative > *:not([aria-hidden="true"]) { position: relative; z-index: 2; }

.effect--image-background {
  position: relative;
  isolation: isolate;
}
.effect--image-background > [class*="__shell"] { background: transparent !important; }
.effect-image-background-piece {
  position: absolute;
  inset: 0;
  background-image: var(--effect-image-background-image_url, none);
  background-position: center;
  opacity: var(--effect-image-background-opacity, 1);
  pointer-events: none;
  z-index: 0;
}
.effect--image-background[style*="--effect-image-background-coverage: cover"] > .effect-image-background-piece { background-size: cover; background-repeat: no-repeat; }
.effect--image-background[style*="--effect-image-background-coverage: contain"] > .effect-image-background-piece { background-size: contain; background-repeat: no-repeat; }
.effect--image-background[style*="--effect-image-background-coverage: repeat"] > .effect-image-background-piece { background-repeat: repeat; }
.effect--image-background > *:not([aria-hidden="true"]) { position: relative; z-index: 2; }

.effect--block-frontier-bottom {
  position: relative;
  z-index: 2;
  overflow: visible;
}
.effect--block-frontier-bottom > .effect-frontier-bleed--bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--effect-block-frontier-bottom-overhang, 80px);
  background: var(--bg-default);
  pointer-events: none;
  z-index: 1;
}

.effect--block-frontier-top {
  position: relative;
  z-index: 2;
  overflow: visible;
}
.effect--block-frontier-top > .effect-frontier-bleed--top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--effect-block-frontier-top-overhang, 80px);
  background: var(--bg-default);
  pointer-events: none;
  z-index: 1;
}

.has-frontier-neighbor-prev:not([class*="effect--"]),
.has-frontier-neighbor-next:not([class*="effect--"]),
.has-overlap-neighbor-next:not([class*="effect--"]) {
  position: relative;
  z-index: auto;
}
.has-frontier-neighbor-prev > [class*="__shell"],
.has-frontier-neighbor-next > [class*="__shell"],
.has-overlap-neighbor-next > [class*="__shell"] {
  position: relative;
  z-index: 5;
}