/* ══════════════════════════════════════════════════════════════
   Port overrides for the Next.js / Vercel build.
   Loaded AFTER main.css so the theme CSS stays verbatim (easy to
   re-diff against askims-theme). Only intentional deltas live here.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero gold fallback (so the hero is NEVER black) ──────────────
   The WebGL canvas fades in over this only after a successful GPU render;
   if WebGL is unavailable / software-rendered / too slow, webgl.js keeps the
   canvas hidden and THIS rich gold gradient stays — evoking the liquid gold. */
.hero {
  background:
    radial-gradient(ellipse 58% 52% at 26% 34%, rgba(163,122,52,0.60) 0%, rgba(163,122,52,0) 60%),
    radial-gradient(ellipse 52% 48% at 79% 60%, rgba(128,94,40,0.55) 0%, rgba(128,94,40,0) 55%),
    radial-gradient(ellipse 72% 62% at 55% 82%, rgba(92,68,30,0.50) 0%, rgba(92,68,30,0) 60%),
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(60,44,20,0.55) 0%, rgba(60,44,20,0) 70%),
    linear-gradient(158deg, #1c1408 0%, #120c05 52%, #0a0805 100%);
}
#webglCanvas {
  opacity: 0;                 /* revealed by webgl.js only after a real GPU frame */
  transition: opacity 0.8s ease;
}

/* ── Hero WebGL canvas over-constraint fix ────────────────────────
   main.css: `#webglCanvas { position:absolute; inset:0; width:100%; height:100% }`.
   Inside the flex `.hero`, inset:0 (left+right+top+bottom) + width/height:100%
   over-constrains a REPLACED element in Blink and collapses it to 0 width, so the
   gold hero never paints. Pin top/left only. (webgl.js also sizes it explicitly.) */
#webglCanvas {
  right: auto !important;
  bottom: auto !important;
}

/* ── Performance: kill the fixed-header backdrop blur ─────────────
   `.site-header.scrolled` re-blurred the whole page on every scroll frame.
   The bg is already 96% opaque so it's visually near-identical. */
.site-header.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Custom cursor: GPU-driven (position via transform in main.js) ─
   Remove the transform transition so the JS lerp is the only smoothing
   (no double-lerp lag); keep size/opacity transitions for the hover states. */
.cursor {
  will-change: transform;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out) !important;
}
.cursor-follower {
  will-change: transform;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), opacity 0.3s !important;
}