/* =====================================================================
   NESAM — three.css   (3D hero WebGL layer + tilt/parallax helpers)
   ===================================================================== */

/* WebGL canvas sits behind the grid and hero content */
.hero__webgl{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__webgl canvas{ display:block; width:100% !important; height:100% !important; }
.hero__grid{ z-index:1; }
.hero__inner{ z-index:2; }

/* When the 3D scene boots, retire the 2D fallback canvas */
.webgl-on .hero__canvas{ display:none; }

/* Tilt targets: GPU-promote, smooth reset (live transform set by JS) */
.tilt3d{ will-change:transform; }

/* The hero logo floats in 3D (artwork itself is never modified) */
.hero__logo{ will-change:transform; backface-visibility:hidden; }

/* Parallax layers shouldn't fight pointer events */
.hero__webgl, .hero__canvas, .hero__grid{ will-change:transform; }

/* Enable-motion button (phones) */
.motion-btn{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:850;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font); font-weight:600; font-size:.85rem; letter-spacing:.01em;
  color:#fff; padding:.7em 1.2em; border-radius:999px;
  background:linear-gradient(95deg,var(--teal),var(--teal-bright));
  box-shadow:0 10px 30px -8px var(--teal), 0 0 0 1px rgba(255,255,255,.12) inset;
  animation:motionPulse 2.6s ease-in-out infinite;
}
.motion-btn::before{ content:"◇"; font-size:1em; }
.motion-btn:active{ transform:translateX(-50%) scale(.96); }
/* CRITICAL: the class sets display, so the [hidden] attribute must win to hide it */
.motion-btn[hidden]{ display:none !important; }
/* Desktops & laptops (precise pointer) never show it, regardless of JS */
@media (hover: hover) and (pointer: fine){ .motion-btn{ display:none !important; } }
@keyframes motionPulse{ 0%,100%{ box-shadow:0 10px 30px -8px var(--teal), 0 0 0 1px rgba(255,255,255,.12) inset; } 50%{ box-shadow:0 12px 38px -6px var(--teal-bright), 0 0 0 1px rgba(255,255,255,.2) inset; } }

@media (prefers-reduced-motion: reduce){
  .tilt3d{ transform:none !important; }
  .hero__webgl, .hero__canvas, .hero__grid, .hero__logo{ transform:none !important; }
  .motion-btn{ animation:none; }
}