/*
 * ════════════════════════════════════════════════════════════
 *  WAVE DIGITAL — motion library
 * ════════════════════════════════════════════════════════════
 */

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* mosaic stagger reveal — applies to children */
.reveal-mosaic > * {
  opacity: 0; transform: translateY(20px) scale(.96);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-snap);
}
.reveal-mosaic.is-in > * { opacity: 1; transform: translateY(0) scale(1); }
.reveal-mosaic.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-mosaic.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-mosaic.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-mosaic.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-mosaic.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-mosaic.is-in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-mosaic.is-in > *:nth-child(7) { transition-delay: 360ms; }
.reveal-mosaic.is-in > *:nth-child(8) { transition-delay: 420ms; }

/* blur in word by word */
[data-blur-in] .w { display: inline-block; filter: blur(6px); opacity: 0; transform: translateY(8px); transition: all var(--dur-5) var(--ease-out); }
[data-blur-in].is-in .w { filter: blur(0); opacity: 1; transform: translateY(0); }

/* split text reveal */
[data-split] .ch { display: inline-block; transform: translateY(110%); transition: transform var(--dur-4) var(--ease-out); }
[data-split].is-in .ch { transform: translateY(0); }

/* scramble */
[data-scramble] { display: inline-block; cursor: pointer; }

/* magnetic */
.magnetic { display: inline-flex; transition: transform var(--dur-3) var(--ease-out); will-change: transform; }

/* custom cursor */
#w-cursor {
  position: fixed; top: 0; left: 0; width: 12px; height: 12px;
  border-radius: var(--r-full); background: var(--ink);
  pointer-events: none; z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out),
              background var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
  mix-blend-mode: difference;
  display: none;
}
@media (hover: hover) and (pointer: fine) { #w-cursor { display: block; } }
#w-cursor.is-hover { width: 56px; height: 56px; background: var(--c-amber); }
#w-cursor.is-text  { width: 4px; height: 24px; border-radius: 0; }
#w-cursor[data-label]::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--ink); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  white-space: nowrap; opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
#w-cursor.is-hover[data-label]::after { opacity: 1; }

/* scrolly */
.scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); position: relative; }
.scrolly-text { display: flex; flex-direction: column; gap: 60vh; padding: 20vh 0; }
.scrolly-step { opacity: .25; transition: opacity var(--dur-4) var(--ease-out); }
.scrolly-step.is-current { opacity: 1; }
.scrolly-step .num { font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--ink-3); display: block; margin-bottom: var(--s-3); }
.scrolly-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink); margin: 0 0 var(--s-3); letter-spacing: var(--ls-tight); }
.scrolly-step h3 em { font-style: italic; color: var(--accent-warm); }
.scrolly-step p { color: var(--ink-2); max-width: 50ch; }

.scrolly-visual {
  position: sticky; top: 80px;
  height: calc(100vh - 160px);
  background: var(--bg-elev); border-radius: var(--r-16);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  overflow: hidden; align-self: start;
}
.scrolly-stage {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.scrolly-frame {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.92); transition: all var(--dur-5) var(--ease-out);
  padding: var(--s-8);
}
.scrolly-frame.is-current { opacity: 1; transform: scale(1); }

@media (max-width: 800px) {
  .scrolly { grid-template-columns: 1fr; }
  .scrolly-visual { position: relative; top: 0; height: 60vh; margin-bottom: var(--s-8); }
}

/* ════════════════════════════════════════════════════
   SCROLLY ILLUSTRATIONS (the 4 method frames)
   ──────────────────────────────────────────────────── */
.scrolly-illo {
  width: min(88%, 520px);
  aspect-ratio: 1;
  display: block;
}
.scrolly-caption {
  text-align: center;
  margin-top: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  align-items: center;
}
.scrolly-caption .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1;
  letter-spacing: var(--ls-tightest);
}
.scrolly-caption .lbl {
  font-family: var(--font-mono); font-size: var(--fs-12);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ink-3);
}

/* ── 01 ASCOLTO · sonar waves ─────────────────────── */
.scrolly-illo-listen .ring {
  fill: none;
  stroke: var(--c-cobalt);
  stroke-width: 1.5;
  transform-origin: 100px 100px;
  animation: sonar 3s var(--ease-out) infinite;
}
.scrolly-illo-listen .ring.r2 { animation-delay: .75s; }
.scrolly-illo-listen .ring.r3 { animation-delay: 1.5s; }
.scrolly-illo-listen .ring.r4 { animation-delay: 2.25s; }
.scrolly-illo-listen .core {
  fill: var(--c-cobalt);
  animation: corePulse 1.5s var(--ease-in-out) infinite;
  transform-origin: 100px 100px;
}
@keyframes sonar {
  0%   { transform: scale(0.15); opacity: 1; stroke-width: 2.4; }
  90%  { opacity: 0; stroke-width: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes corePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}

/* ── 02 DESIGN · mosaic building itself ──────────── */
.scrolly-illo-design .cell {
  opacity: 0;
  transform-origin: center;
  animation: cellIn 4s var(--ease-snap) infinite;
}
@keyframes cellIn {
  0%   { opacity: 0; transform: scale(0.4); }
  10%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
.scrolly-illo-design .cursor {
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-dasharray: 6 4;
  animation: cursorTrack 8s linear infinite;
}
@keyframes cursorTrack {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(120px, 0); }
  50%  { transform: translate(120px, 120px); }
  75%  { transform: translate(0, 120px); }
  100% { transform: translate(0, 0); }
}

/* ── 03 CODE · stacked lines + scanline ──────────── */
.scrolly-illo-code .line {
  fill: var(--c-orange);
  opacity: .85;
  transform-origin: left center;
  animation: lineWrite 2.4s var(--ease-out) infinite;
}
@keyframes lineWrite {
  0%   { transform: scaleX(0); opacity: 0; }
  20%  { transform: scaleX(1); opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
.scrolly-illo-code .scan {
  fill: var(--ink);
  opacity: .1;
  animation: scanSweep 3s linear infinite;
}
@keyframes scanSweep {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(200px); }
}
.scrolly-illo-code .bracket {
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 04 GROW · bars rising ───────────────────────── */
.scrolly-illo-grow .bar {
  transform-origin: bottom center;
  animation: barGrow 3.2s var(--ease-out) infinite;
}
@keyframes barGrow {
  0%   { transform: scaleY(0); }
  35%  { transform: scaleY(1); }
  85%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.scrolly-illo-grow .axis {
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: .25;
}
.scrolly-illo-grow .arrow {
  fill: none; stroke: var(--c-violet); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: arrowDraw 4s var(--ease-out) infinite;
}
@keyframes arrowDraw {
  0%   { stroke-dashoffset: 240; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scrolly-illo-listen .ring,
  .scrolly-illo-design .cell,
  .scrolly-illo-design .cursor,
  .scrolly-illo-code .line,
  .scrolly-illo-code .scan,
  .scrolly-illo-grow .bar,
  .scrolly-illo-grow .arrow,
  .scrolly-illo-listen .core { animation: none !important; }
  .scrolly-illo-design .cell,
  .scrolly-illo-code .line,
  .scrolly-illo-grow .bar { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-mosaic > * { opacity: 1 !important; transform: none !important; }
}


/* ════════════════════════════════════════════════════════════
   ENTRY ANIMATIONS · libreria "wow"
   ────────────────────────────────────────────────────────────
   Composizione: class="reveal" data-reveal="<name>"
   L'observer aggiunge .is-in quando entra in viewport.
   ────────────────────────────────────────────────────────────
*/

/* Tutti i data-reveal hanno transizione lunga e easing morbido */
.reveal[data-reveal] {
  transition:
    opacity var(--dur-5) var(--ease-out),
    transform var(--dur-5) var(--ease-snap),
    filter   var(--dur-5) var(--ease-out),
    clip-path var(--dur-5) var(--ease-out);
  will-change: transform, opacity, filter, clip-path;
}

/* ── 1. CLIP UP · una tenda sale dal basso ─────────── */
.reveal[data-reveal="clip-up"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}
.reveal[data-reveal="clip-up"].is-in { clip-path: inset(0 0 0 0); }

/* ── 2. CLIP DOWN · tenda scende dall'alto ─────────── */
.reveal[data-reveal="clip-down"] { clip-path: inset(100% 0 0 0); opacity:1; transform:none; }
.reveal[data-reveal="clip-down"].is-in { clip-path: inset(0 0 0 0); }

/* ── 3. CLIP LEFT/RIGHT ────────────────────────────── */
.reveal[data-reveal="clip-l"] { clip-path: inset(0 100% 0 0); opacity:1; transform:none; }
.reveal[data-reveal="clip-l"].is-in { clip-path: inset(0 0 0 0); }
.reveal[data-reveal="clip-r"] { clip-path: inset(0 0 0 100%); opacity:1; transform:none; }
.reveal[data-reveal="clip-r"].is-in { clip-path: inset(0 0 0 0); }

/* ── 4. SLIDE LATERAL · forte movimento ────────────── */
.reveal[data-reveal="slide-l"] { opacity: 0; transform: translateX(-80px); }
.reveal[data-reveal="slide-l"].is-in { opacity: 1; transform: translateX(0); }
.reveal[data-reveal="slide-r"] { opacity: 0; transform: translateX(80px); }
.reveal[data-reveal="slide-r"].is-in { opacity: 1; transform: translateX(0); }

/* ── 5. RISE-BLUR · cinematic ──────────────────────── */
.reveal[data-reveal="rise-blur"] { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(12px); }
.reveal[data-reveal="rise-blur"].is-in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ── 6. BLOOM · da grigio a colore ─────────────────── */
.reveal[data-reveal="bloom"] {
  opacity: 0;
  transform: scale(.85);
  filter: saturate(0) blur(8px);
}
.reveal[data-reveal="bloom"].is-in { opacity: 1; transform: scale(1); filter: saturate(1) blur(0); }

/* ── 7. FLIP UP · 3D rotateX ───────────────────────── */
.reveal[data-reveal="flip-up"] {
  opacity: 0;
  transform: perspective(1200px) rotateX(-65deg) translateY(40px);
  transform-origin: bottom center;
}
.reveal[data-reveal="flip-up"].is-in {
  opacity: 1;
  transform: perspective(1200px) rotateX(0) translateY(0);
}

/* ── 8. ZOOM-IN · entrata "epica" ──────────────────── */
.reveal[data-reveal="zoom"] { opacity: 0; transform: scale(.6); filter: blur(20px); }
.reveal[data-reveal="zoom"].is-in { opacity: 1; transform: scale(1); filter: blur(0); }

/* ── 9. UNCOVER · pseudo elemento color sweep ─────── */
.reveal[data-reveal="uncover"] {
  position: relative;
  opacity: 1; transform: none;
}
.reveal[data-reveal="uncover"] > * {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out) 350ms;
}
.reveal[data-reveal="uncover"]::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 5;
  pointer-events: none;
}
.reveal[data-reveal="uncover"].is-in::after {
  animation: uncoverSweep var(--dur-6) var(--ease-snap) forwards;
}
.reveal[data-reveal="uncover"].is-in > * { opacity: 1; }
@keyframes uncoverSweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  55%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* color sweep variants */
.reveal[data-reveal="uncover"][data-c="cobalt"]::after { background: var(--c-cobalt); }
.reveal[data-reveal="uncover"][data-c="amber"]::after  { background: var(--c-amber); }
.reveal[data-reveal="uncover"][data-c="orange"]::after { background: var(--c-orange); }
.reveal[data-reveal="uncover"][data-c="rose"]::after   { background: var(--c-rose); }
.reveal[data-reveal="uncover"][data-c="violet"]::after { background: var(--c-violet); }
.reveal[data-reveal="uncover"][data-c="cyan"]::after   { background: var(--c-cyan); }

/* ── 10. WIPE · clip-path radial ───────────────────── */
.reveal[data-reveal="wipe"] {
  opacity: 1; transform: none;
  clip-path: circle(0% at 50% 50%);
}
.reveal[data-reveal="wipe"].is-in { clip-path: circle(140% at 50% 50%); }

/* ── 11. WIPE DIAGONAL ─────────────────────────────── */
.reveal[data-reveal="wipe-diag"] {
  opacity: 1; transform: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.reveal[data-reveal="wipe-diag"].is-in {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ── 12. TYPE · per titoli con data-split-words ────── */
[data-words] { display: inline; }
[data-words] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotateX(-40deg);
  transform-origin: bottom center;
  transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-snap);
  will-change: transform, opacity;
}
[data-words].is-in .w {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
[data-words] .w em { font-style: italic; color: var(--accent-warm); }

/* ── 13. CHAR-RISE · per i grandi h2 (più dolce di .ch) ── */
[data-chars] { display: inline-block; overflow: hidden; }
[data-chars] .ch {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-5) var(--ease-out);
  will-change: transform;
}
[data-chars].is-in .ch { transform: translateY(0); }

/* ════════════════════════════════════════════════════
   STAGGER · ritarda i figli di un .reveal
   class="reveal" data-stagger
   ──────────────────────────────────────────────────── */
.reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-5) var(--ease-out),
    transform var(--dur-5) var(--ease-snap);
  will-change: transform, opacity;
}
.reveal[data-stagger].is-in > * { opacity: 1; transform: translateY(0); }
.reveal[data-stagger].is-in > *:nth-child(1)  { transition-delay: 0ms; }
.reveal[data-stagger].is-in > *:nth-child(2)  { transition-delay: 80ms; }
.reveal[data-stagger].is-in > *:nth-child(3)  { transition-delay: 160ms; }
.reveal[data-stagger].is-in > *:nth-child(4)  { transition-delay: 240ms; }
.reveal[data-stagger].is-in > *:nth-child(5)  { transition-delay: 320ms; }
.reveal[data-stagger].is-in > *:nth-child(6)  { transition-delay: 400ms; }
.reveal[data-stagger].is-in > *:nth-child(7)  { transition-delay: 480ms; }
.reveal[data-stagger].is-in > *:nth-child(8)  { transition-delay: 560ms; }
.reveal[data-stagger].is-in > *:nth-child(9)  { transition-delay: 640ms; }
.reveal[data-stagger].is-in > *:nth-child(10) { transition-delay: 720ms; }
.reveal[data-stagger].is-in > *:nth-child(11) { transition-delay: 800ms; }
.reveal[data-stagger].is-in > *:nth-child(12) { transition-delay: 880ms; }

/* stagger "tilt": children sale e si raddrizzano */
.reveal[data-stagger="tilt"] > * {
  transform: translateY(40px) rotate(-3deg) scale(.96);
  filter: blur(6px);
  transition:
    opacity var(--dur-5) var(--ease-out),
    transform var(--dur-5) var(--ease-snap),
    filter var(--dur-5) var(--ease-out);
}
.reveal[data-stagger="tilt"].is-in > * { transform: none; filter: blur(0); }

/* stagger "shatter": children entrano da direzioni diverse */
.reveal[data-stagger="shatter"] > *:nth-child(odd)  { transform: translate(-60px, 30px) rotate(-6deg); }
.reveal[data-stagger="shatter"] > *:nth-child(even) { transform: translate(60px, 30px) rotate(6deg); }
.reveal[data-stagger="shatter"] > * { transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-6) var(--ease-snap); }
.reveal[data-stagger="shatter"].is-in > * { transform: translate(0,0) rotate(0); }

/* ════════════════════════════════════════════════════
   MEDIA SLOT entrance · color wipe per le aree media
   ──────────────────────────────────────────────────── */
.w-media.reveal[data-reveal="curtain"] {
  position: relative;
  opacity: 1;
  transform: none;
}
.w-media.reveal[data-reveal="curtain"] > * {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out) 420ms;
}
.w-media.reveal[data-reveal="curtain"]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c-cobalt), var(--c-cyan), var(--c-amber), var(--c-rose), var(--c-violet));
  transform-origin: left center;
  transform: scaleX(1);
  z-index: 5;
  pointer-events: none;
}
.w-media.reveal[data-reveal="curtain"].is-in::after {
  animation: mediaCurtain 1200ms var(--ease-snap) forwards;
}
.w-media.reveal[data-reveal="curtain"].is-in > * { opacity: 1; }
@keyframes mediaCurtain {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* ════════════════════════════════════════════════════
   SECTION HEAD · counter & line build
   ──────────────────────────────────────────────────── */
.ds-section-head.reveal[data-reveal="head"] {
  opacity: 1; transform: none;
  position: relative;
}
.ds-section-head.reveal[data-reveal="head"] .ds-section-num,
.ds-section-head.reveal[data-reveal="head"] .t-h2 {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-5) var(--ease-out),
    transform var(--dur-5) var(--ease-snap);
}
.ds-section-head.reveal[data-reveal="head"] .ds-section-num { transition-delay: 0ms; }
.ds-section-head.reveal[data-reveal="head"] .t-h2 { transition-delay: 180ms; }
.ds-section-head.reveal[data-reveal="head"].is-in .ds-section-num,
.ds-section-head.reveal[data-reveal="head"].is-in .t-h2 {
  opacity: 1; transform: translateY(0);
}

/* underlining rule that draws itself under h2 */
.ds-section-head.reveal[data-reveal="head"]::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right,
    var(--c-cobalt), var(--c-cyan), var(--c-amber), var(--c-orange), var(--c-rose), var(--c-violet));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-6) var(--ease-out) 400ms;
}
.ds-section-head.reveal[data-reveal="head"].is-in::after { transform: scaleX(1); }

/* ════════════════════════════════════════════════════
   CARD hover float (extra polish, not entry-related)
   ──────────────────────────────────────────────────── */
.w-card-lift { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); }
.w-card-lift:hover { transform: translateY(-6px); }

/* ════════════════════════════════════════════════════
   ACCESSIBILITY · respect reduced motion
   ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal[data-reveal],
  .reveal[data-stagger] > *,
  [data-words] .w,
  [data-chars] .ch {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .reveal[data-reveal="uncover"]::after,
  .w-media.reveal[data-reveal="curtain"]::after,
  .ds-section-head.reveal[data-reveal="head"]::after {
    display: none !important;
  }
}


/* ════════════════════════════════════════════════════
   PATTERN CTA · animated gradient
   ──────────────────────────────────────────────────── */
.pattern-cta {
  background:
    linear-gradient(135deg,
      var(--c-cobalt) 0%,
      var(--c-blue) 12%,
      var(--c-sky) 22%,
      var(--c-cyan) 32%,
      var(--c-teal) 44%,
      var(--c-lime) 54%,
      var(--c-amber) 64%,
      var(--c-orange) 76%,
      var(--c-rose) 88%,
      var(--c-violet) 100%);
  background-size: 320% 320%;
  background-position: 0% 50%;
  animation: ctaGradient 18s ease-in-out infinite;
}

/* enrich the facet overlay with its own slow drift */
.pattern-cta::before {
  animation: ctaFacetDrift 24s linear infinite;
}

/* add a subtle orbiting light at the top */
.pattern-cta {
  position: relative;
  isolation: isolate;
}

@keyframes ctaGradient {
  0%   { background-position:   0% 50%; }
  25%  { background-position: 100% 30%; }
  50%  { background-position: 100% 80%; }
  75%  { background-position:   0% 30%; }
  100% { background-position:   0% 50%; }
}

@keyframes ctaFacetDrift {
  0%   { background-position: 0% 0%; transform: scale(1); }
  50%  { background-position: 6% 8%; transform: scale(1.04); }
  100% { background-position: 0% 0%; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-cta { animation: none !important; }
  .pattern-cta::before { animation: none !important; }
}