/* ── Self-hosted fonts ───────────────────────────────────────────────────── */
@font-face { font-family:'Anton'; src:url('../fonts/Anton-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--void-black);
  color: var(--nova-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1,h2,.display { font-family:var(--font-display); font-weight:400; line-height:0.86; text-transform:uppercase; letter-spacing:0.5px; margin:0; }
.display { font-size:var(--text-display); }
h1 { font-size:var(--text-h1); }
h2 { font-size:var(--text-h2); }
p { max-width:var(--maxw-prose); }
a { color:var(--supernova); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Button ──────────────────────────────────────────────────────────────── */
.btn {
  display:inline-block; font-family:var(--font-body); font-weight:600; font-size:16px;
  color:var(--void-black); background:var(--nova-white);
  padding:18px 48px; border-radius:var(--radius-pill); border:0;
  box-shadow:var(--shadow-hard); cursor:pointer;
  transition:transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.btn:hover { text-decoration:none; }
/* Lift only where a real cursor can hover — on touch, :hover sticks after a tap. */
@media (hover:hover) and (pointer:fine) {
  .btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-hard-lift); }
}
/* Press feedback works on every device; declared last so it wins over :hover. */
.btn:active { transform:translateY(2px); box-shadow:var(--shadow-hard-press); }
.btn--ghost { background:transparent; color:var(--nova-white); box-shadow:none; border:1px solid var(--nova-white); }
.btn--ghost:active { box-shadow:none; }

/* Keyboard focus: a visible Supernova ring on every interactive element. */
.btn:focus-visible, a:focus-visible { outline:2px solid var(--supernova); outline-offset:3px; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  border:1px solid rgba(242,236,227,.18); border-radius:var(--radius-card);
  padding:var(--space-4); background:rgba(242,236,227,.02);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
#cosmos { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.nav, .scene, .footer { position:relative; z-index:1; }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:var(--space-3) var(--space-4); }
.nav__logo { display:flex; align-items:center; gap:11px; }
.nav__wordmark { font-family:var(--font-display); font-size:19px; letter-spacing:1px; color:var(--nova-white); white-space:nowrap; }
.nav__links a { color:var(--nova-white); margin-left:var(--space-3); font-size:15px; transition:color .18s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .nav__links a:hover { color:var(--supernova); text-decoration:none; }
}

/* Scenes */
.scene { min-height:100vh; display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); padding:var(--space-6) var(--space-4); max-width:1100px; margin:0 auto; }
.scene--center { align-items:center; text-align:center; }
/* Hero: the animated asterisk owns the centre (drawn on the canvas); section is empty. */
.scene--hero { align-items:center; text-align:center; }
/* Content sections are tighter than the full-screen cinematic scenes — less dead space. */
#scene-disciplines, #scene-work, #scene-studio { min-height:66vh; }

/* Scene-specific type */
.lede { font-size:var(--text-h3); max-width:var(--maxw-prose); }
.intro { font-size:clamp(17px,1.6vw,20px); line-height:1.7; color:var(--nova-white); opacity:.82; max-width:var(--maxw-prose); margin-top:var(--space-4); }

/* Disciplines */
.disciplines { list-style:none; padding:0; display:grid; gap:var(--space-4); grid-template-columns:repeat(3,1fr); }
.glyph { display:block; width:22px; height:22px; background:var(--supernova); margin-bottom:var(--space-2); }

/* Work */
.work { max-width:var(--maxw-prose); transition:border-color .2s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .work:hover { border-color:rgba(242,236,227,.4); }
}
.muted { color:var(--ash-grey); }

/* Footer = the rising sun (fixed; lifted from below as the contact section scrolls in).
   The copyright rides with it, sitting just above the limb. */
.sun { position:fixed; left:0; bottom:0; width:100%; height:52vh; z-index:0; transform:translateY(100%); pointer-events:none; }
.sun__flare { display:block; width:100%; height:100%; }
.sun__credit { position:absolute; left:0; right:0; bottom:22%; margin:0; max-width:none; text-align:center; color:var(--nova-white); font-size:14px; }

/* Responsive */
@media (max-width:720px) { .disciplines { grid-template-columns:1fr; } }

/* Phone adaptation. The fluid clamp() type scale already resizes headings/body well; what
   needs fixing is the fixed-padding components (nav, buttons, card) that kept desktop
   proportions on a 360-390px screen. Single 600px breakpoint. */
@media (max-width:600px) {
  /* Header: lighter ~62px bar (was heavier than desktop). The wordmark reserves layout
     even while animating in, shoving the links off the right edge — drop it; the asterisk
     mark brands the nav on its own. */
  .nav { padding:var(--space-2) var(--space-4); }
  .nav__wordmark { display:none; }
  .nav__links a { display:inline-block; margin-left:var(--space-3); padding:8px 2px; font-size:16px; }
  /* Hero: 200px desktop → fits the viewport with comfortable side margins. */
  .display { font-size:clamp(40px,12.5vw,62px); }
  /* Sections: trim the 80px cinematic vertical padding; a touch more content width. */
  .scene { padding:var(--space-5) var(--space-3); }
  /* CTAs: desktop's 48px side padding wrapped the long work label onto 3 lines. Size the
     pill to fit one line while keeping the hard-shadow brand look. */
  .btn { padding:15px 26px; font-size:15px; }
  /* Card: tighter padding gives the CTA the room it needs. */
  .card { padding:var(--space-3); }
}

/* ── JS-gated animated initial states ───────────────────────────────────────
   Applied only when JS runs and adds .js to <html>.
   Without JS (or under reduced-motion, where .js is NOT added), all content
   remains fully visible — preserving no-JS and reduced-motion baselines.
*/
.js #scene-bang .display,
.js #scene-expansion .lede,
.js #scene-expansion .intro,
.js #scene-disciplines li,
.js #scene-work .work,
.js #scene-studio p,
.js #scene-contact .btn { opacity:0; transform:translateY(64px); }
/* Nav wordmark assembles in only after the detonation (see main.js) */
.js .nav__wordmark { opacity:0; transform:translateX(-8px); }