/* =================================================================
   SAKUYA MIZUNO — design system
   Dark · monochrome · monospace · cinematic
   ================================================================= */

:root {
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --pad: clamp(20px, 4.5vw, 64px);

  /* overlay knobs — re-themed below */
  --vig: rgba(0,0,0,0.55);
  --scan-c: rgba(255,255,255,0.012);
  --scan-blend: overlay;
  --grain-op: 0.045;
  --sb-thumb: #26262a;
  --sb-thumb-h: #34343a;
}

/* ---- DARK (default) ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0a0a0b;
  --bg-2:      #0f0f11;
  --bg-3:      #16161a;
  --fg:        #f3f2ee;          /* faintly warm white */
  --muted:     #8d8d88;
  --faint:     #56565a;
  --line:      rgba(243, 242, 238, 0.11);
  --line-soft: rgba(243, 242, 238, 0.055);
  --accent:    #f3f2ee;          /* monochrome by default = fg */
  --accent-dim: rgba(243, 242, 238, 0.5);
  --nav-bg:    rgba(10, 10, 11, 0.72);
}

/* ---- LIGHT (warm paper / ink) ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #e8e5dc;
  --bg-2:      #e0ddd2;
  --bg-3:      #d4d0c3;
  --fg:        #16150f;
  --muted:     #6a685e;
  --faint:     #a09d90;
  --line:      rgba(22, 21, 15, 0.16);
  --line-soft: rgba(22, 21, 15, 0.07);
  --accent:    #16150f;
  --accent-dim: rgba(22, 21, 15, 0.5);
  --nav-bg:    rgba(232, 229, 220, 0.80);

  --vig: rgba(70, 62, 44, 0.16);
  --scan-c: rgba(20, 18, 10, 0.020);
  --scan-blend: multiply;
  --grain-op: 0.030;
  --sb-thumb: #c4bfb0;
  --sb-thumb-h: #b0ab9a;
}

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

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .55s var(--ease), color .55s var(--ease);
}

body { overflow-x: hidden; }

::selection { background: var(--fg); color: var(--bg); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-h); }

/* ================= cinematic overlays ================= */
/* film grain */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 9000;
  opacity: var(--grain-op);
  mix-blend-mode: var(--scan-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -4%); }
  75%  { transform: translate(-2%, 3%); }
  100% { transform: translate(3%, -2%); }
}
/* vignette */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 8999;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vig) 100%);
  transition: background .55s var(--ease);
}
/* subtle scanline sheen */
.scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 8998; opacity: 0.5;
  background: repeating-linear-gradient(to bottom, var(--scan-c) 0 1px, transparent 1px 3px);
  mix-blend-mode: var(--scan-blend);
}

/* ================= custom cursor ================= */
@media (hover: hover) and (pointer: fine) {
  /* hide the system cursor everywhere while the custom cursor is active */
  body.cur-custom, body.cur-custom * { cursor: none !important; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); will-change: transform; }
  .cursor-dot { width: 5px; height: 5px; background: var(--fg); border-radius: 50%; }
  .cursor-ring { width: 30px; height: 30px; border: 1px solid var(--line);
    border-radius: 50%; transition: width .25s var(--ease), height .25s var(--ease),
    border-color .25s var(--ease), background .25s var(--ease); }
  body.cur-hot .cursor-ring { width: 56px; height: 56px; border-color: var(--accent); }
  body.cur-hot .cursor-dot { opacity: 0; }
}

/* ================= shared type ================= */
.mono-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.tnum { font-variant-numeric: tabular-nums; }

/* ================= reveal helpers ================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.clip-up { display: inline-block; overflow: hidden; vertical-align: top; }
.clip-up > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.clip-up.in > span { transform: none; }

/* line wipe */
.line-wipe { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.line-wipe.in { transform: scaleX(1); }

/* ================= typing language-swap ================= */
/* ghost holds the box; the live span types over it so layout never jumps */
.tsw { position: relative; display: inline-block; }
.tsw[data-block] { display: block; width: 100%; }
.tsw-ghost { visibility: hidden; }
.tsw-live { position: absolute; inset: 0; }
.tsw-caret {
  display: none; width: 0.46em; height: 1.02em; margin-left: 1px;
  background: currentColor; vertical-align: -0.14em;
  opacity: 0.85;
}
.tsw.typing .tsw-caret { display: inline-block; animation: tswblink 0.5s steps(1) infinite; }
@keyframes tswblink { 50% { opacity: 0; } }

/* ================= theme toggle (sun / moon morph) ================= */
.theme-toggle {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color .4s var(--ease), transform .5s var(--ease), background .4s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); transform: rotate(28deg); }
.tt-orb {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; color: var(--fg);
  transition: width .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease);
}
/* moon: crescent carved by an offset bg-colored disc (dark theme) */
.tt-orb::before {
  content: ''; position: absolute; top: -3.5px; right: -3.5px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg);
  transform: scale(1); transition: transform .5s var(--ease), background .5s var(--ease);
}
/* sun rays (light theme) */
.tt-orb::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 60%, transparent 60%);
  box-shadow:
    0 -7px 0 -4.5px var(--fg), 0 7px 0 -4.5px var(--fg),
    -7px 0 0 -4.5px var(--fg), 7px 0 0 -4.5px var(--fg),
    5px 5px 0 -4.5px var(--fg), -5px -5px 0 -4.5px var(--fg),
    5px -5px 0 -4.5px var(--fg), -5px 5px 0 -4.5px var(--fg);
  opacity: 0; transform: scale(0.5) rotate(-30deg);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
:root[data-theme="light"] .tt-orb { width: 11px; height: 11px; }
:root[data-theme="light"] .tt-orb::before { transform: scale(0); }
:root[data-theme="light"] .tt-orb::after { opacity: 0.9; transform: scale(1) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .reveal, .clip-up > span, .line-wipe { transition: none !important; opacity: 1 !important; transform: none !important; }
  .tsw.typing .tsw-caret { animation: none; }
}