/* ============================================================
   Web Portfolio — Game Designer
   Aesthetic: bold / creative, dark, cool-neutral
   Fonts: Syne (display) · Space Grotesk (body) · Space Mono (labels)
   ============================================================ */

:root {
  /* surfaces — cool near-black */
  --bg:    oklch(0.155 0.012 264);
  --bg-1:  oklch(0.185 0.014 264);
  --bg-2:  oklch(0.215 0.015 264);
  --bg-3:  oklch(0.255 0.016 264);
  --line:  oklch(0.32 0.015 264);
  --line-soft: oklch(0.26 0.014 264);

  /* ink */
  --text:  oklch(0.965 0.004 250);
  --muted: oklch(0.70 0.012 258);
  --faint: oklch(0.52 0.012 260);

  /* accent — overridable by Tweaks */
  --accent:      oklch(0.87 0.185 128);   /* electric lime */
  --accent-2:    oklch(0.80 0.16 128);
  --accent-ink:  oklch(0.22 0.04 130);    /* text on accent */
  --accent-glow: oklch(0.87 0.185 128 / 0.22);
  --accent-text: var(--accent);           /* accent used as TEXT (themed for contrast) */

  /* atmospheric layers — themed by time of day */
  --grid-line: oklch(0.5 0.02 264 / 0.05);
  --dot:       oklch(0.6 0.02 264 / 0.06);
  --veil:      oklch(0 0 0 / 0.22);
  --vignette:  oklch(0.08 0.01 264 / 0.6);
  --nav-bg:    oklch(0.155 0.012 264 / 0.78);
  --glow-1:    oklch(0.45 0.07 264 / 0.28);
  --glow-2:    oklch(0.4 0.05 264 / 0.3);

  --radius: 18px;
  --radius-sm: 11px;
  --maxw: 1240px;

  --ff-display: 'Saira', system-ui, sans-serif;
  --ff-body: 'Space Grotesk', system-ui, sans-serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.08vw, 20px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: color .6s ease;
}

/* paint the themed background on the app root too, so it survives any host
   harness that forces html/body transparent (and works offline either way) */
#root {
  background: var(--bg);
  min-height: 100vh;
}

/* layered atmospheric background — grid + dots + glow + scanlines (game-screen depth) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1000px 680px at 82% -10%, var(--accent-glow), transparent 58%),
    radial-gradient(760px 560px at -8% 8%, var(--glow-1), transparent 60%),
    radial-gradient(620px 620px at 50% 116%, var(--glow-2), transparent 62%),
    /* fine grid */
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 64px),
    /* dot matrix */
    radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px, 16px 16px;
}

/* moving scanline veil + vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, var(--veil) 0 1px, transparent 1px 3px),
    radial-gradient(130% 120% at 50% 50%, transparent 58%, var(--vignette));
  opacity: 0.5;
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---------- time-of-day wash (applies the Auto day/night mood to every
   genre theme, driven by html[data-phase]). Uses blend modes so it
   recolors the background atmosphere without lowering text contrast
   (page content sits in a layer above this). ---------- */
.timewash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
  transition: background 1s ease, opacity 1s ease;
}
html[data-theme="pixel"] .timewash,
html[data-theme="card"] .timewash,
html[data-theme="strategy"] .timewash,
html[data-theme="survival"] .timewash,
html[data-theme="rpg"] .timewash { display: block; }

html[data-phase="dawn"] .timewash {
  background: linear-gradient(180deg, rgba(255,176,168,0.18) 0%, rgba(150,162,255,0.13) 100%);
  mix-blend-mode: soft-light;
}
html[data-phase="day"] .timewash {
  background: radial-gradient(130% 95% at 50% -5%, rgba(255,250,232,0.12), transparent 70%);
  mix-blend-mode: soft-light;
}
html[data-phase="dusk"] .timewash {
  background: linear-gradient(180deg, rgba(255,148,54,0.18) 0%, rgba(116,38,82,0.16) 100%);
  mix-blend-mode: soft-light;
}
html[data-phase="night"] .timewash {
  background: linear-gradient(180deg, rgba(10,16,48,0.44) 0%, rgba(4,8,28,0.52) 100%);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .timewash { transition: none; } }

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

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.section { padding: clamp(60px, 9vw, 130px) 0; position: relative; z-index: 1; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--accent);
  display: inline-block;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
}

.lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-mono);
  font-size: 13px; letter-spacing: 0.04em;
  padding: 13px 20px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-text); }
.btn-solid {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 700;
}
.btn-solid:hover { color: var(--accent-ink); background: var(--accent-2); transform: translateY(-2px); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 20px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   TIME-OF-DAY THEMES  (html[data-theme] set automatically from the
   viewer's local clock; accent + accent-text are set inline by JS)
   Default :root above = NIGHT. Genre themes live in themes.css.
   ============================================================ */

/* DAWN — soft, cool, bright (≈ 5:00–8:00 local) */
html[data-theme="dawn"] {
  --bg:    oklch(0.935 0.012 275);
  --bg-1:  oklch(0.975 0.008 285);
  --bg-2:  oklch(0.905 0.013 275);
  --bg-3:  oklch(0.865 0.015 275);
  --line:  oklch(0.82 0.018 278);
  --line-soft: oklch(0.885 0.012 278);
  --text:  oklch(0.27 0.03 282);
  --muted: oklch(0.47 0.026 278);
  --faint: oklch(0.59 0.022 278);
  --grid-line: oklch(0.45 0.04 282 / 0.06);
  --dot:       oklch(0.45 0.04 282 / 0.05);
  --veil:      oklch(1 0 0 / 0);
  --vignette:  oklch(0.6 0.06 305 / 0.16);
  --nav-bg:    oklch(0.935 0.012 275 / 0.82);
  --glow-1:    oklch(0.82 0.10 25 / 0.34);
  --glow-2:    oklch(0.82 0.09 285 / 0.30);
}

/* DAY — bright, clear, like noon (≈ 8:00–17:00 local) */
html[data-theme="day"] {
  --bg:    oklch(0.968 0.008 235);
  --bg-1:  oklch(0.998 0.004 235);
  --bg-2:  oklch(0.935 0.009 235);
  --bg-3:  oklch(0.90 0.011 235);
  --line:  oklch(0.84 0.015 240);
  --line-soft: oklch(0.915 0.01 240);
  --text:  oklch(0.24 0.022 262);
  --muted: oklch(0.45 0.02 256);
  --faint: oklch(0.58 0.018 256);
  --grid-line: oklch(0.45 0.03 250 / 0.07);
  --dot:       oklch(0.45 0.03 250 / 0.06);
  --veil:      oklch(1 0 0 / 0);
  --vignette:  oklch(0.6 0.04 250 / 0.12);
  --nav-bg:    oklch(0.968 0.008 235 / 0.82);
  --glow-1:    oklch(0.86 0.09 230 / 0.40);
  --glow-2:    oklch(0.90 0.09 95 / 0.30);
}

/* DUSK — warm, golden, dimming (≈ 17:00–20:00 local) */
html[data-theme="dusk"] {
  --bg:    oklch(0.19 0.022 42);
  --bg-1:  oklch(0.225 0.026 42);
  --bg-2:  oklch(0.26 0.03 44);
  --bg-3:  oklch(0.30 0.032 46);
  --line:  oklch(0.37 0.032 48);
  --line-soft: oklch(0.30 0.028 46);
  --text:  oklch(0.965 0.012 60);
  --muted: oklch(0.75 0.035 56);
  --faint: oklch(0.57 0.035 52);
  --grid-line: oklch(0.62 0.06 52 / 0.06);
  --dot:       oklch(0.66 0.06 52 / 0.06);
  --veil:      oklch(0 0 0 / 0.18);
  --vignette:  oklch(0.10 0.04 40 / 0.62);
  --nav-bg:    oklch(0.19 0.022 42 / 0.82);
  --glow-1:    oklch(0.62 0.14 42 / 0.42);
  --glow-2:    oklch(0.46 0.13 22 / 0.32);
}