/* ============================================================================
   hero.css — base layout, 3D stage, and chrome UI.
   OWNED by the integrator. Geometry-critical: the ring engine depends on
   .tile size/position and the perspective chain here. Do not restyle .tile-inner
   or its children in this file — that belongs to tiles.css.
   ========================================================================== */
@font-face{ font-family:"Neue Haas Grotesk"; src:url(../fonts/neue-haas-grot-disp-medium.woff2) format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Neue Haas Grotesk"; src:url(../fonts/neue-haas-grot-text-regular.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#000; color:#fff;
  font-family:"Neue Haas Grotesk", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* viewport — captures gestures; background gradient (matches original) */
.viewport{ position:fixed; inset:0; overflow:hidden; touch-action:none; cursor:grab;
  background:linear-gradient(#000 25%, #1b1b1b); }
.viewport.grabbing{ cursor:grabbing; }

/* section — perspective that projects the SCENE push (intro fly-in) */
.section{ position:fixed; inset:0; width:100%; height:100%; opacity:0; perspective:720px; }
/* world — pans/tilts/dollies the scene (flat, projected by .section) */
.world{ position:absolute; inset:0; width:100%; height:100%; }
/* ring — its own perspective + preserve-3d projects each tile's depth; rolled -25deg */
.ring{ position:absolute; left:50%; top:50%; width:0; height:0;
  perspective:720px; transform-style:preserve-3d; transform-origin:0 0; }

/* tile — GEOMETRY BOX. transform is written every frame by ring.js. Keep layout only. */
.tile{ position:absolute; left:50%; top:50%; width:23.5vw; aspect-ratio:300/215;
  border:0; padding:0; background:transparent; cursor:pointer;
  will-change:transform,opacity; backface-visibility:hidden;
  transition:filter .3s cubic-bezier(.25,.46,.45,.94); }
/* depth fog — opacity written every frame by ring.js (far tiles darken). Sits on top. */
.tile .fog{ position:absolute; inset:0; z-index:9; background:#000; opacity:0; pointer-events:none; }

/* ---- hover spotlight (matches original) --------------------------------
   Hovering a work dims every other tile (ring.js reads the hover state and
   drops their fog ceiling to 0.2) and blurs them; the page gradient behind
   the scene darkens too. Blur is skipped on Safari (ring.js gates it with
   .blur-ok) — filters on 3D-transformed layers glitch there, as in the
   original's `is-not-safari` branch. */
.viewport::before{ content:""; position:absolute; inset:0; background:#000; opacity:0;
  pointer-events:none; transition:opacity .3s cubic-bezier(.25,.46,.45,.94); }
@media (hover: hover){
  .viewport:has(.tile:hover)::before{ opacity:.45; }
  .ring.blur-ok:has(.tile:hover) .tile:not(:hover){ filter:blur(.5rem); }
}
/* keyboard parity: a focused tile spotlights the same way */
.viewport:has(.tile:focus-visible)::before{ opacity:.45; }
.ring.blur-ok:has(.tile:focus-visible) .tile:not(:focus-visible){ filter:blur(.5rem); }
/* no text/image selection or native image-drag on the draggable 3D surface */
.viewport, .tile, .tile *{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }

/* ---- chrome UI (glass tokens measured from original) ---- */
/* scoped to the top-level chrome header only — NOT nested <header> (e.g. .about-header) */
body > header{ position:fixed; left:32px; right:32px; top:20px; z-index:130;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.brand{ position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:baseline; gap:9px; white-space:nowrap; }
.brand b{ font-weight:600; font-size:13px; letter-spacing:.06em; }
.brand .tagline{ font-weight:500; font-size:12px; opacity:.5; transition:opacity .3s cubic-bezier(.25,.46,.45,.94); }
.burger{ position:absolute; right:0; width:34px; height:30px; border-radius:6px;
  background:#000000bf; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px #ffffff33 inset; border:0; appearance:none; -webkit-appearance:none; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; pointer-events:auto; }
.burger i{ display:block; width:15px; height:1px; background:#fff; }

nav{ position:fixed; left:50%; top:44px; transform:translateX(-50%); z-index:130; display:flex; gap:6px; }
nav button{ font-family:inherit; font-weight:600; font-size:12px; color:#fff; padding:8.8px 18px; border-radius:6px; border:0; cursor:pointer;
  background:#000000bf; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 0 0 1px #ffffff33 inset;
  transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94), color .3s cubic-bezier(.25,.46,.45,.94); }
nav button:hover, nav button.active{ box-shadow:0 0 13px #b2b2b2 inset; }

.corner{ position:fixed; left:16px; bottom:14px; z-index:60; display:flex; gap:10px; opacity:.5; }
.corner i{ width:12px; height:12px; border:1px solid #fff; border-radius:2px; display:block; }
.hint{ position:fixed; right:16px; bottom:14px; z-index:60; font-size:10px; letter-spacing:.08em; opacity:.35; text-transform:uppercase; }
/* show the pointer-appropriate wording: mouse copy on fine pointers, touch copy
   on coarse (phones/tablets) so we never tell a touch user to "move mouse". */
.hint-coarse{ display:none; }
@media (hover: none), (pointer: coarse){
  .hint-fine{ display:none; }
  .hint-coarse{ display:inline; }
}

/* ---- focus states (keyboard a11y) ---- */
.tile:focus{ outline:none; }
.tile:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
nav button:focus-visible, .burger:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- responsive chrome (small screens) ---- */
@media (max-width: 640px){
  body > header{ left:16px; right:16px; }
  .brand{ gap:8px; }
  .brand .tagline{ display:none; }
  nav{ top:44px; }
  nav button{ padding:8px 12px; font-size:11px; }
  .hint, .corner{ display:none; }
}

/* ---- dim the ring behind full-screen page overlays (About/Contact) ---- */
body.about-open .viewport, body.contact-open .viewport{
  filter:brightness(.42) blur(3px); transition:filter .5s cubic-bezier(.25,.46,.45,.94); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .section{ opacity:1 !important; }
  .brand .tagline, nav button{ transition:none; }
  body.about-open .viewport, body.contact-open .viewport{ transition:none; }
}