/* ============================================================
   SHO SAITO — Motion Director // Portfolio
   Cinematic · HUD · WebGL
   ============================================================ */

:root {
  --bg:        #08080a;
  --bg-2:      #0c0c10;
  --surface:   #101015;
  --ink:       #ECEAE4;
  --ink-dim:   #8a8a90;
  --ink-faint: #4a4a50;
  --hair:      rgba(236,234,228,0.10);
  --hair-2:    rgba(236,234,228,0.05);

  /* accent */
  --accent:     #4FD2E0;          /* HUD cyan */
  --accent-ink: #08080a;
  --accent-glow: rgba(79,210,224,0.5);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-head:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --font-serif:   "Instrument Serif", Georgia, serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: clamp(20px, 4.5vw, 80px);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  overflow-x: hidden;
  /* height is set by smooth-scroll JS to the content height */
}

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

a { color: inherit; text-decoration: none; }

img, canvas, video { display: block; max-width: 100%; }

/* hide native cursor on devices that support the custom one */
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }

/* ---- film grain overlay (global) ---- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 9000;
  opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 0.5s steps(2) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,2%)}
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* vignette */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  background: radial-gradient(125% 95% at 50% 42%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================
   SMOOTH SCROLL WRAPPER
   ============================================================ */
#smooth {
  position: fixed; top: 0; left: 0; width: 100%;
  will-change: transform;
}

/* ============================================================
   CUSTOM CURSOR (HUD reticle)
   ============================================================ */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  pointer-events: none; mix-blend-mode: difference;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s;
}
#cursor .ring {
  position:absolute; inset:0; border:1px solid #fff; border-radius:50%;
  opacity:.45; transition: opacity .3s, border-radius .35s var(--ease), background .3s;
}
#cursor .dot {
  position:absolute; top:50%; left:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
  background:#fff; border-radius:50%;
}
/* crosshair ticks */
#cursor .tick { position:absolute; background:#fff; opacity:.55; }
#cursor .tick.t{ top:-6px;  left:50%; width:1px; height:5px; margin-left:-.5px; }
#cursor .tick.b{ bottom:-6px;left:50%; width:1px; height:5px; margin-left:-.5px; }
#cursor .tick.l{ left:-6px;  top:50%; height:1px; width:5px; margin-top:-.5px; }
#cursor .tick.r{ right:-6px; top:50%; height:1px; width:5px; margin-top:-.5px; }
#cursor .label {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:#fff;
  white-space:nowrap; opacity:0; transition:opacity .25s, transform .35s var(--ease);
}
/* states */
body.cur-hover #cursor { width:74px; height:74px; margin:-37px 0 0 -37px; }
body.cur-hover #cursor .ring { opacity:.9; }
body.cur-view #cursor { width:96px; height:96px; margin:-48px 0 0 -48px; }
body.cur-view #cursor .ring { background:#fff; opacity:1; }
body.cur-view #cursor .dot, body.cur-view #cursor .tick { opacity:0; }
body.cur-view #cursor .label { opacity:1; transform:translate(-50%,-50%) scale(1); color:#000; }
@media (hover: none){ #cursor{ display:none; } body.has-cursor{ cursor:auto; } }

/* ============================================================
   HUD OVERLAY (fixed frame)
   ============================================================ */
.hud {
  position: fixed; inset: 0; z-index: 7000; pointer-events: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  color: var(--ink-dim); text-transform: uppercase;
  transition: opacity .5s;
}
.hud.hidden { opacity: 0; }
.hud .corner {
  position: absolute; width: 26px; height: 26px;
  border-color: var(--accent); opacity:.7;
}
.hud .corner.tl{ top:18px; left:18px; border-top:1px solid; border-left:1px solid; }
.hud .corner.tr{ top:18px; right:18px; border-top:1px solid; border-right:1px solid; }
.hud .corner.bl{ bottom:18px; left:18px; border-bottom:1px solid; border-left:1px solid; }
.hud .corner.br{ bottom:18px; right:18px; border-bottom:1px solid; border-right:1px solid; }

.hud .readout { position:absolute; display:flex; gap:18px; align-items:center; }
.hud .rec { color: var(--accent); }
.hud .rec::before {
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--accent); margin-right:7px; vertical-align:middle;
  box-shadow:0 0 8px var(--accent-glow); animation: blink 1.6s steps(1) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }
.hud .r-top    { top: 34px; left: 50%; transform: translateX(-50%); }
.hud .r-tl     { top: 72px; left: 60px; }
.hud .r-bl     { bottom: 34px; left: 60px; }
.hud .r-br     { bottom: 34px; right: 60px; }

/* scroll progress bar (right edge) */
.hud .scroll-track {
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  width:1px; height:140px; background:var(--hair);
}
.hud .scroll-fill { position:absolute; top:0; left:0; width:100%; height:0; background:var(--accent); }
.hud .scroll-pct { position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-size:9px; color:var(--ink-dim); }

@media (max-width: 720px){
  .hud .r-tl, .hud .r-bl, .hud .r-br { display:none; }
  .hud .scroll-track{ display:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 7500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--gut); pointer-events: none;
  mix-blend-mode: difference;
}
.nav .brand { pointer-events:auto; font-weight:500; font-size:15px; letter-spacing:.02em; white-space:nowrap; }
.nav .brand b { font-weight:700; }
.nav .menu { pointer-events:auto; display:flex; gap:28px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.nav .menu a { position:relative; color:var(--ink); opacity:.7; transition:opacity .3s; }
.nav .menu a:hover{ opacity:1; }
.nav .menu a span{ color:var(--accent); margin-right:5px; }
@media (max-width:720px){ .nav .menu{ display:none; } }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section { position: relative; }
.eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-dim);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--accent); }

/* ---- reveal system ----
   Base state is VISIBLE. The slide-up reveal is layered on ONLY when JS
   arms it (html.reveal-armed) — which happens when the document is visible
   and motion is allowed. This keeps content visible for print/PDF, reduced
   motion, and any context where animations are frozen. */
.line { display:block; overflow:hidden; }
.line > span { display:block; }
.split .w { display:inline-block; overflow:hidden; vertical-align:top; margin-right:.26em; padding-bottom:.1em; margin-bottom:-.1em; }
.split .w > i { display:inline-block; font-style:inherit; }

@keyframes lineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

html.reveal-armed .line > span        { transform: translateY(110%); }
html.reveal-armed .reveal-in .line > span { animation: lineUp 1s var(--ease) var(--d,0s) both; }
html.reveal-armed .split .w > i        { transform: translateY(110%); }
html.reveal-armed .reveal-in.split .w > i { animation: lineUp .9s var(--ease) var(--d,0s) both; }
html.reveal-armed .fade                { opacity:0; transform:translateY(28px); }
html.reveal-armed .reveal-in.fade,
html.reveal-armed .reveal-in .fade     { animation: fadeUp 1s var(--ease) var(--d,0s) both; }

@media (prefers-reduced-motion: reduce){
  html.reveal-armed .line>span, html.reveal-armed .split .w>i{ transform:none!important; animation:none!important; }
  html.reveal-armed .fade{ opacity:1!important; transform:none!important; animation:none!important; }
}