/* ============================================================
   base.css — reset, typography, global atmosphere
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* Lenis owns smooth scroll when active; disable native to avoid double-easing */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Prevent horizontal scroll without making body a scroll container
   (overflow on body breaks Lenis window-scroll sync). */
html { overflow-x: clip; }
/* Cinematic atmosphere as a fixed layer (avoids background-attachment:fixed
   jank on mobile and full-page render artifacts). A faint blueprint grid
   fills the full viewport so wide-screen margins read as engineered, not blank. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px),
    radial-gradient(1200px 700px at 50% -8%, rgba(255,184,28,0.10), transparent 60%),
    radial-gradient(900px 620px at 100% 2%, rgba(200,112,42,0.07), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%);
  background-size: 56px 56px, 56px 56px, auto, auto, auto;
  background-position: center top;
  -webkit-mask-image: radial-gradient(140% 110% at 50% 0%, #000 62%, rgba(0,0,0,0.6) 100%);
  mask-image: radial-gradient(140% 110% at 50% 0%, #000 62%, rgba(0,0,0,0.6) 100%);
}

/* Blueprint frame: faint vertical guide-lines at the content boundary so the
   side gutters feel framed/intentional on wide screens. */
@media (min-width: 1080px) {
  body::after {
    content: ''; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(100% - var(--gutter) * 2, var(--maxw));
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
    pointer-events: none; z-index: 0;
  }
}

::selection { background: var(--gold); color: var(--ink-on-gold); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── Typographic primitives ── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: var(--tracking-tight); color: var(--ink); }

/* ── Film grain overlay (very subtle, fixed) ── */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* Edge vignette for cinematic framing */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 90% at 50% 40%, transparent 55%, var(--vignette) 100%);
}

/* ── Pointer-tracking gold light (driven by motion.js --mx/--my) ── */
.pointer-glow {
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  border-radius: 50%;
  transform: translate3d(calc(var(--mx, 50vw) - 310px), calc(var(--my, 30vh) - 310px), 0);
  background: radial-gradient(circle, rgba(255,184,28,0.10), rgba(255,184,28,0.04) 40%, transparent 68%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: transform;
}
.pointer-glow.is-on { opacity: 1; }

/* ── Custom magnetic cursor ── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 7px; height: 7px; background: #fff;
  transform: translate3d(calc(var(--cx,-50px) - 3.5px), calc(var(--cy,-50px) - 3.5px), 0);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,0.6);
  transform: translate3d(calc(var(--rx,-50px) - 19px), calc(var(--ry,-50px) - 19px), 0) scale(var(--ring-scale,1));
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s;
}
.cursor-ring.is-hot {
  width: 58px; height: 58px;
  border-color: var(--gold);
  background: rgba(255,184,28,0.10);
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ── Scroll progress bar (top) ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: var(--z-nav);
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  box-shadow: 0 0 14px var(--glow-gold);
  pointer-events: none;
}

/* ── Layout helpers ── */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }

/* ── Reveal system (IntersectionObserver toggles .visible) ──
   Hidden state is gated behind html.js so content NEVER stays
   invisible if JS fails or is disabled (progressive enhancement). */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
/* .visible rules must be gated too, so they out-specify html.js .reveal */
html.js .reveal.visible { opacity: 1; transform: translateY(0); }
html.js .reveal[data-reveal="fade"] { transform: none; }
html.js .reveal[data-reveal="scale"] { transform: translateY(20px) scale(0.97); }
html.js .reveal[data-reveal="scale"].visible { transform: translateY(0) scale(1); }

/* Stagger children */
html.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .stagger.visible > * { opacity: 1; transform: none; }
html.js .stagger.visible > *:nth-child(1){ transition-delay:.02s } html.js .stagger.visible > *:nth-child(2){ transition-delay:.08s }
html.js .stagger.visible > *:nth-child(3){ transition-delay:.14s } html.js .stagger.visible > *:nth-child(4){ transition-delay:.20s }
html.js .stagger.visible > *:nth-child(5){ transition-delay:.26s } html.js .stagger.visible > *:nth-child(6){ transition-delay:.32s }

/* ── Reduced motion: calm everything ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .pointer-glow, .cursor-dot, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto !important; }
}

/* Focus visibility (a11y) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }