/*
 * Motion-layer CSS for the production landing page — loaded only there
 * (see generate-landing-pages.tsx's htmlShell), not on legal pages.
 *
 * Ported from design/prototypes/landing/src/parts/part2c-refine.css's
 * `html.gsap` rules, retargeted from the prototype's BEM selectors
 * (`.asm__piece[data-p="N"]`) onto this build's data-attribute hooks
 * (`[data-asm-piece="N"]` — see Assembly.tsx). `html.gsap` stays the same
 * feature-detection gate: motion.ts only adds it once GSAP is registered
 * and the visitor has not asked for reduced motion, so the plain,
 * un-pinned static layout Assembly.tsx already renders is the correct
 * fallback with zero CSS overrides needed.
 */

/* ── assembly: scroll-pinned scatter → converge ───────────────────── */

html.gsap #asmWrap {
  position: relative;
  height: 260vh;
  padding-block: 0;
}
html.gsap #asmStage {
  position: sticky;
  top: 0;
  height: 100svh;
  justify-content: center;
  gap: 0;
  overflow: clip;
}
html.gsap #asmStage > [aria-hidden='true'] {
  position: relative;
  flex-wrap: nowrap;
  width: min(92vw, 64rem);
  height: min(62svh, 33rem);
  display: block;
  max-width: none;
}
html.gsap [data-asm-piece] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--sx) * var(--k, 1)), calc(-50% + var(--sy) * var(--k, 1)))
    rotate(calc(var(--sr, 0deg) * var(--k, 1))) scale(var(--sk, 1));
}
html.gsap [data-asm-piece='1'] {
  --sx: -26vw;
  --sy: -16svh;
  --sr: -7deg;
}
html.gsap [data-asm-piece='2'] {
  --sx: 24vw;
  --sy: -19svh;
  --sr: 5deg;
}
html.gsap [data-asm-piece='3'] {
  --sx: -30vw;
  --sy: 7svh;
  --sr: 4deg;
}
html.gsap [data-asm-piece='4'] {
  --sx: 29vw;
  --sy: 3svh;
  --sr: -5deg;
}
html.gsap [data-asm-piece='5'] {
  --sx: -17vw;
  --sy: 20svh;
  --sr: 6deg;
}
html.gsap [data-asm-piece='6'] {
  --sx: 20vw;
  --sy: 20svh;
  --sr: -4deg;
}
html.gsap [data-asm-piece='7'] {
  --sx: 1vw;
  --sy: -24svh;
  --sr: 3deg;
}
html.gsap #asmPack {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  opacity: 0;
}
/*
 * `display: block` is load-bearing, not decorative: Assembly.tsx renders
 * every non-default caption with the HTML `hidden` attribute (the correct,
 * semantic no-JS/no-gsap fallback — only `activeIndex` shows), and that
 * attribute is never removed once GSAP takes over, only ever masked. The
 * user-agent stylesheet's `[hidden]{display:none}` sits at normal-priority
 * UA origin, which loses to ANY normal-priority author rule for the same
 * property regardless of selector specificity — so this only needs to
 * exist, not out-specify anything. It must stay on the unconditional base
 * selector, not only the `:not([data-active])` branch: a caption becoming
 * active still needs it every time it does, not just while inactive.
 */
html.gsap #asmStage [data-asm-cap] {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}
html.gsap #asmStage [data-asm-cap][data-active] {
  opacity: 1;
  transform: none;
}
html.gsap .asm-caps-wrap {
  margin-top: 1.8rem;
  height: 3.4em;
}

@media (min-width: 48rem) and (max-width: 64rem) {
  html.gsap #asmWrap {
    height: 220vh;
  }
  html.gsap [data-asm-piece='1'] {
    --sx: -30vw;
    --sy: -20svh;
  }
  html.gsap [data-asm-piece='2'] {
    --sx: 28vw;
    --sy: -22svh;
  }
  html.gsap [data-asm-piece='3'] {
    --sx: -33vw;
    --sy: 6svh;
  }
  html.gsap [data-asm-piece='4'] {
    --sx: 32vw;
    --sy: 2svh;
  }
  html.gsap [data-asm-piece='5'] {
    --sx: -20vw;
    --sy: 23svh;
  }
  html.gsap [data-asm-piece='6'] {
    --sx: 23vw;
    --sy: 23svh;
  }
  html.gsap [data-asm-piece='7'] {
    --sx: 0vw;
    --sy: -27svh;
  }
}

@media (max-width: 47.9375rem) {
  html.gsap #asmWrap {
    height: 220vh;
  }
  html.gsap [data-asm-piece='1'] {
    --sx: -24vw;
    --sy: -24svh;
  }
  html.gsap [data-asm-piece='2'] {
    --sx: 18vw;
    --sy: -28svh;
  }
  html.gsap [data-asm-piece='3'] {
    --sx: -26vw;
    --sy: -6svh;
  }
  html.gsap [data-asm-piece='4'] {
    --sx: 24vw;
    --sy: -12svh;
  }
  html.gsap [data-asm-piece='5'] {
    --sx: -18vw;
    --sy: 14svh;
  }
  html.gsap [data-asm-piece='6'] {
    --sx: 16vw;
    --sy: 20svh;
  }
  html.gsap [data-asm-piece='7'] {
    --sx: -2vw;
    --sy: 26svh;
  }
}

/* ── scroll reveal ─────────────────────────────────────────────────── */

/*
 * `[data-reveal]` starts hidden only once JS has proven it can clear the
 * state again — see motion.ts's `document.documentElement.classList.add('reveal-js')`,
 * set before any element is observed. Without that gate, a visitor whose
 * script fails to load (or hasn't run yet) would see permanently invisible
 * content instead of the prototype's own no-JS fallback (motion.ts's
 * `if (!('IntersectionObserver' in window))` mirror: reveal immediately).
 */
html.reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
html.reveal-js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── aurora canvas ─────────────────────────────────────────────────── */

#aurora {
  opacity: 0;
  transition: opacity 1.1s ease;
}
#aurora.on {
  opacity: 1;
}