/* ============================================================================
   Evara v2 — living-world layer (loaded after evara.css)
   Adds the persistent WebGL backdrop, graceful fallback, custom cursor,
   3D tilt, and the "3D window" sections. Nothing here removes copy or
   changes semantics — it only makes the existing page move & react.
   ========================================================================== */

/* ---- persistent 3D canvas ------------------------------------------------- */
#webgl{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:-1;
  opacity:0; transition:opacity 1.4s ease; pointer-events:none; display:block;
}
.webgl-ready #webgl{ opacity:1; }
.no-webgl #webgl{ display:none; }

/* hero becomes a window onto the live world; the <video>/<img> is the fallback */
.has-webgl .hero{ background:transparent !important; }
.webgl-ready .hero__media{ opacity:0; transition:opacity 1s ease; }
.no-webgl .hero__media{ opacity:1; }

/* keep the left-aligned hero copy crisp over the moving scene */
.has-webgl .hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(18,12,22,.90) 0%, rgba(18,12,22,.74) 30%, rgba(18,12,22,.50) 50%, rgba(18,12,22,.20) 66%, transparent 82%),
    linear-gradient(0deg, rgba(18,12,22,.44) 0%, transparent 42%);
}
.has-webgl .hero__inner{ position:relative; z-index:2; }
.has-webgl .hero h1{ text-shadow:0 2px 34px rgba(10,7,14,.78), 0 1px 3px rgba(10,7,14,.6); }
.has-webgl .hero__sub{ text-shadow:0 1px 20px rgba(10,7,14,.75); }
.has-webgl .hero .eyebrow{ text-shadow:0 1px 14px rgba(10,7,14,.7); }

/* the scroll cue sits over the scene */
.has-webgl .hero__scroll{ z-index:3; }

/* ---- "3D window" section: let the living world show through -------------- */
/* the first dark section becomes glass so the world continues behind it */
.has-webgl .sect-window{ background:transparent !important; position:relative; }
.has-webgl .sect-window > .wrap{ position:relative; z-index:2; }
.sect-window__glass{
  position:relative; border-radius:28px; padding:clamp(28px,4vw,52px);
  background:linear-gradient(180deg, rgba(20,14,26,.42), rgba(14,10,20,.56));
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---- custom cursor (fine pointers only) ---------------------------------- */
@media (pointer:fine){
  body.has-cursor{ cursor:none; }
  body.has-cursor a, body.has-cursor button, body.has-cursor [data-tilt], body.has-cursor .magnetic{ cursor:none; }
  .v2-cursor, .v2-cursor-ring{ position:fixed; top:0; left:0; z-index:99999; pointer-events:none; border-radius:50%; will-change:transform; }
  .v2-cursor{ width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; mix-blend-mode:difference; }
  .v2-cursor-ring{
    width:34px; height:34px; margin:-17px 0 0 -17px; border:1.5px solid rgba(180,160,235,.7);
    transition:width .28s var(--ease-out), height .28s var(--ease-out), margin .28s var(--ease-out),
               background .28s, border-color .28s, opacity .3s;
  }
  .v2-cursor-ring.hot{ width:66px; height:66px; margin:-33px 0 0 -33px; background:rgba(200,182,255,.14); border-color:rgba(255,255,255,.0); }
  .v2-cursor-ring.hidden, .v2-cursor.hidden{ opacity:0; }
}
@media (pointer:coarse){ .v2-cursor,.v2-cursor-ring{ display:none; } }

/* ---- 3D tilt on cards ----------------------------------------------------- */
[data-tilt]{ transform-style:preserve-3d; will-change:transform; transition:transform .4s cubic-bezier(.2,.7,.2,1); }
[data-tilt] > *{ transform:translateZ(0); }
/* a cursor-tracked sheen that rides the tilt */
[data-tilt]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  opacity:0; transition:opacity .4s ease; mix-blend-mode:soft-light;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.55), transparent 60%);
}
[data-tilt]:hover::after{ opacity:.9; }

/* ---- scrubbed hero copy (parallax out on scroll) -------------------------- */
.hero__copy{ will-change:transform, opacity, filter; }

/* ---- hero copy: robust one-shot entrance ---------------------------------
   The always-on WebGL rAF + GSAP scroll ticker can thrash the class-toggle
   `.reveal` opacity transition for elements that reveal ON LOAD, leaving the
   hero copy stuck part-faded. A CSS keyframe animation can't be interrupted
   that way, and the base opacity:1 guarantees the text is never invisible. */
.has-webgl .hero__copy .reveal{ opacity:1; transform:none; transition:none; animation:heroRise .9s var(--ease-out) both; }
.has-webgl .hero__copy .eyebrow.reveal{ animation-delay:0s; }
.has-webgl .hero__copy h1.reveal{ animation-delay:.12s; }
.has-webgl .hero__copy .hero__sub.reveal{ animation-delay:.30s; }
.has-webgl .hero__copy .hero__cta.reveal{ animation-delay:.44s; }
.has-webgl .hero__copy .hero__trust.reveal{ animation-delay:.54s; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

/* ---- honour reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #webgl{ display:none; }
  .v2-cursor,.v2-cursor-ring{ display:none; }
  [data-tilt]{ transform:none !important; }
}