/* =========================================================================
   HOME PREMIUM  —  animation + 3D enhancement layer (home page only)
   -------------------------------------------------------------------------
   Loaded only by index.html. Layers premium motion on top of the existing
   design without touching style.css / script.js (so every other page is
   unaffected). Fully reversible: remove the <link>, the boot <script>, and
   the library/home-premium <script> tags in index.html and the base site
   returns exactly as-is.

   Robustness model:
   - .premium            -> added synchronously in <head> (no FOUC)
   - .reduced-motion     -> user prefers reduced motion; all motion disabled
   - .premium-fallback   -> JS failed / timed out; everything forced visible
   - hero elements are pre-hidden by CSS (class-based, before first paint) and
     revealed by GSAP, OR by .premium-fallback if scripts never boot.
   ========================================================================= */

/* ---- Lenis smooth-scroll (official recommended styles) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================================
   HERO — pre-hide (anti-FOUC) + stage + 3D + WebGL aurora
   ========================================================================= */
.premium .hero { overflow: hidden; }
.premium .hero-inner { position: relative; z-index: 2; perspective: 1200px; }

/* Pre-hide the hero bits before first paint; revealed by GSAP. Gated so it
   never applies under reduced-motion or when the JS fallback has fired. */
.premium:not(.reduced-motion):not(.premium-fallback) .hero .eyebrow,
.premium:not(.reduced-motion):not(.premium-fallback) .hero-copy h1,
.premium:not(.reduced-motion):not(.premium-fallback) .hero .hero-tag,
.premium:not(.reduced-motion):not(.premium-fallback) .hero .hero-desc,
.premium:not(.reduced-motion):not(.premium-fallback) .hero .btn,
.premium:not(.reduced-motion):not(.premium-fallback) .hero .hero-photo { opacity: 0; }

/* Safety net: if scripts never boot, show everything. */
.premium.premium-fallback .hero .eyebrow,
.premium.premium-fallback .hero-copy h1,
.premium.premium-fallback .hero .hero-tag,
.premium.premium-fallback .hero .hero-desc,
.premium.premium-fallback .hero .btn,
.premium.premium-fallback .hero .hero-photo { opacity: 1 !important; transform: none !important; }

/* Masked, line-by-line headline reveal */
.premium .hero-copy h1 .hero-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.premium .hero-copy h1 .hero-mask-i { display: inline-block; will-change: transform; }

/* 3D photo card */
.premium .hero-photo { transform-style: preserve-3d; will-change: transform; }
.premium .hero-photo .hero-badge { transform: translateZ(55px); }

/* WebGL aurora canvas sits behind hero content, above the texture layer */
.premium .hero canvas.hero-aurora {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* CSS fallback glow when WebGL is unavailable or disabled (mobile) */
.premium .hero.aurora-fallback::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 55% at 18% 8%, rgba(74,222,128,0.20), transparent 72%),
    radial-gradient(45% 50% at 92% 95%, rgba(45,180,120,0.14), transparent 72%);
}

/* =========================================================================
   SECTION REVEALS — drive-state handled by GSAP; no base hiding needed here
   (JS removes the shared .reveal system to avoid any conflict).
   ========================================================================= */
.premium .reveal { transition: none; }

/* =========================================================================
   BRAND LOGO MARQUEE
   ========================================================================= */
.premium:not(.reduced-motion) .brands.is-marquee .container {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.premium:not(.reduced-motion) .brands.is-marquee .brand-logos {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  gap: 64px;
  will-change: transform;
  animation: premium-marquee 32s linear infinite;
}
.premium:not(.reduced-motion) .brands.is-marquee:hover .brand-logos { animation-play-state: paused; }
.premium:not(.reduced-motion) .brands.is-marquee .brand-logos img { flex: 0 0 auto; }
@keyframes premium-marquee { to { transform: translateX(-50%); } }

/* =========================================================================
   3D TILT CARDS + glare
   ========================================================================= */
.premium .tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.premium .tilt .tilt-glare {
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 4; opacity: 0;
  transition: opacity .3s ease;
  mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,0.22), rgba(255,255,255,0) 45%);
}
.premium .tilt.is-tilting .tilt-glare { opacity: 1; }

/* =========================================================================
   MAGNETIC BUTTONS
   ========================================================================= */
.premium .magnetic { will-change: transform; }

/* Subtle moving sheen across primary buttons */
.premium .btn-primary { position: relative; overflow: hidden; }
.premium .btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: none;
  pointer-events: none;
}
.premium .btn-primary:hover::after { animation: premium-sheen .9s ease; }
@keyframes premium-sheen { from { left: -120%; } to { left: 160%; } }

/* =========================================================================
   CUSTOM CURSOR (desktop fine-pointer only)
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .premium.has-cursor,
  .premium.has-cursor a,
  .premium.has-cursor button,
  .premium.has-cursor input,
  .premium.has-cursor textarea,
  .premium.has-cursor .tilt { cursor: none; }

  .premium .cursor-dot,
  .premium .cursor-ring {
    position: fixed; top: 0; left: 0;
    z-index: 9999; pointer-events: none;
    border-radius: 50%;
    transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  }
  .premium .cursor-dot {
    width: 7px; height: 7px; background: #fff;
    mix-blend-mode: difference;
  }
  .premium .cursor-ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(255,255,255,0.45);
    transition: width .25s ease, height .25s ease, background-color .25s ease, border-color .25s ease;
  }
  .premium.cursor-hover .cursor-ring {
    width: 58px; height: 58px;
    border-color: rgba(74,222,128,0.9);
    background: rgba(74,222,128,0.12);
  }
}

/* =========================================================================
   REDUCED MOTION — show everything, kill motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .premium .hero canvas.hero-aurora { display: none; }
  .premium .brands.is-marquee .brand-logos { animation: none; }
}
.premium.reduced-motion .hero canvas.hero-aurora { display: none; }
.premium.reduced-motion .btn-primary::after { display: none; }