/* ─── GSAP Pre-animation States ──────────────────────────────────── */
/*
  Initial states are set via gsap.set() in JS, NOT via CSS.
  This ensures elements are never permanently hidden if GSAP
  fails to load or ScrollTrigger doesn't fire.

  Only the hero elements (above the fold) use CSS opacity:0
  to prevent a flash before GSAP runs. Everything else
  is handled purely in JS.
*/

/* Nav — hidden before GSAP slide-down */
[data-gsap="nav"] {
  opacity: 0;
  transform: translateY(-100%);
}

/* Hero eyebrow, tagline, CTA — above fold, safe to hide in CSS */
[data-gsap="hero-eyebrow"],
[data-gsap="hero-tagline"],
[data-gsap="hero-cta"] {
  opacity: 0;
  transform: translateY(24px);
}

/* Hero title chars */
.hero__title-line .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* ─── Noise texture overlay ───────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}