/* ============================================================================
   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; color:inherit; text-decoration:none; 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 [data-page]{ display:inline-block; appearance:none; -webkit-appearance:none; font-family:inherit; font-weight:600; font-size:12px; line-height:normal; text-decoration:none; 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 [data-page]:hover, nav [data-page].active{ box-shadow:0 0 13px #b2b2b2 inset; }

.hint{ position:fixed; right:16px; bottom:14px; z-index:60; font-size:10px; letter-spacing:.08em; opacity:.6; text-transform:uppercase; pointer-events:none; transition:opacity .6s ease; }
.hint.dismissed{ opacity:0; }
/* 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; }
}

/* ---- ring nav arrows (click-to-rotate; discoverability for non-drag users) ---- */
.ring-nav{ position:fixed; z-index:120; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  border:0; appearance:none; -webkit-appearance:none;
  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), opacity .3s cubic-bezier(.25,.46,.45,.94); }
.ring-nav:hover{ box-shadow:0 0 13px #b2b2b2 inset; }
.ring-nav svg{ display:block; pointer-events:none; }
.ring-nav-prev{ left:20px; top:50%; transform:translateY(-50%); }
.ring-nav-next{ right:20px; top:50%; transform:translateY(-50%); }
.ring-nav-next svg{ transform:rotate(180deg); }
/* tall screens: stack the pair on the right edge; chevrons point up/down to
   match the vertical column's scroll axis */
@media (orientation: portrait){
  .ring-nav-prev{ left:auto; right:16px; transform:translateY(calc(-50% - 26px)); }
  .ring-nav-next{ right:16px; transform:translateY(calc(-50% + 26px)); }
  .ring-nav-prev svg{ transform:rotate(90deg); }
  .ring-nav-next svg{ transform:rotate(-90deg); }
}
/* hide the arrows while a full-screen overlay is up */
body.about-open .ring-nav, body.contact-open .ring-nav, body.detail-open .ring-nav{
  opacity:0; pointer-events:none; }

/* ---- focus states (keyboard a11y) ---- */
.tile:focus{ outline:none; }
.tile:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
nav [data-page]:focus-visible, .burger:focus-visible, .ring-nav: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 [data-page]{ padding:8px 12px; font-size:11px; }
  .hint{ 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 [data-page]{ transition:none; }
  body.about-open .viewport, body.contact-open .viewport{ transition:none; }
}

/* ---- crawlable footer links (SEO: static internal links to subpages) ---- */
.site-footer{ position:fixed; left:16px; right:300px; bottom:14px; z-index:60; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:10px; letter-spacing:.08em; text-transform:uppercase; transition:opacity .3s cubic-bezier(.25,.46,.45,.94); }
.site-footer a{ color:#fff; opacity:.55; text-decoration:none; transition:opacity .3s cubic-bezier(.25,.46,.45,.94); }
.site-footer a:hover, .site-footer a:focus-visible{ opacity:1; text-decoration:underline; text-underline-offset:.25em; }
.site-footer span{ opacity:.3; }
body.about-open .site-footer, body.contact-open .site-footer, body.detail-open .site-footer{ opacity:0; pointer-events:none; }
@media (max-width:640px){ .site-footer{ left:12px; right:64px; bottom:10px; font-size:9px; gap:6px; } }