/* ============================================================
   SlateWorks — homepage
   Two themes via [data-theme]: "night" (Blueprint, default) · "day" (Daylight)
   ============================================================ */

/* ---------- THEME: NIGHT (Blueprint — ink navy + amber) ---------- */
[data-theme="night"] {
  --bg:      oklch(0.205 0.028 256);
  --bg-1:    oklch(0.235 0.030 256);
  --panel:   oklch(0.252 0.030 256);
  --card:    oklch(0.298 0.032 256);
  --card-2:  oklch(0.335 0.033 256);
  --fg:      oklch(0.962 0.010 256);
  --fg-1:    oklch(0.80 0.020 256);
  --fg-2:    oklch(0.68 0.022 256);
  --fg-3:    oklch(0.57 0.025 256);
  --line:    oklch(0.62 0.05 250 / 0.26);
  --line-2:  oklch(0.62 0.05 250 / 0.48);
  --accent:    oklch(0.82 0.13 75);
  --accent-2:  oklch(0.74 0.10 222);
  --accent-ink: oklch(0.22 0.03 60);
  --accent-dim: oklch(0.82 0.13 75 / 0.13);
  --accent-line: oklch(0.82 0.13 75 / 0.40);
  --accent-glow: oklch(0.82 0.13 75 / 0.42);
  --bar-mut: oklch(0.40 0.04 250);
  --shadow:  0 30px 70px -32px rgba(0,0,0,0.6);
  --shadow-lg: 0 50px 110px -45px rgba(0,0,0,0.7);
  --grid-op: 0.55;
  --glow-op: 0.18;
  --disp: "Space Grotesk", system-ui, sans-serif;
  --disp-w: 700;
  --disp-ls: -0.03em;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --em-style: normal;
  color-scheme: dark;
}

/* ---------- THEME: DAY (Daylight — cool white + electric indigo) ---------- */
[data-theme="day"] {
  --bg:      oklch(0.977 0.004 250);
  --bg-1:    oklch(0.958 0.007 258);
  --panel:   oklch(0.997 0.002 250);
  --card:    oklch(0.955 0.008 258);
  --card-2:  oklch(0.935 0.010 258);
  --fg:      oklch(0.205 0.026 268);
  --fg-1:    oklch(0.38 0.024 268);
  --fg-2:    oklch(0.47 0.022 268);
  --fg-3:    oklch(0.58 0.020 268);
  --line:    oklch(0.55 0.03 265 / 0.16);
  --line-2:  oklch(0.50 0.03 265 / 0.30);
  --accent:    oklch(0.52 0.215 270);
  --accent-2:  oklch(0.64 0.14 250);
  --accent-ink: oklch(0.99 0.005 270);
  --accent-dim: oklch(0.52 0.215 270 / 0.08);
  --accent-line: oklch(0.52 0.215 270 / 0.26);
  --accent-glow: oklch(0.52 0.215 270 / 0.28);
  --bar-mut: oklch(0.90 0.02 265);
  --shadow:  0 30px 65px -34px rgba(40,30,120,0.22);
  --shadow-lg: 0 50px 100px -45px rgba(40,30,120,0.26);
  --grid-op: 0.5;
  --glow-op: 0.10;
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --disp-w: 800;
  --disp-ls: -0.03em;
  --body: "Manrope", system-ui, sans-serif;
  --em-style: normal;
  color-scheme: light;
}

:root {
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* NOTE: no color/background transition on theme-swap surfaces — transitions can
   freeze in some embedded render contexts and trap the old theme's colors. */

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

h1,h2,h3,h4 {
  font-family: var(--disp);
  font-weight: var(--disp-w);
  letter-spacing: var(--disp-ls);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 28px; }
.container-wide { max-width: 1320px; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.eyebrow::before { content:""; width: 22px; height: 1px; background: var(--accent); opacity: 0.8; }
.eyebrow.center { justify-content: center; }
.mono { font-family: var(--mono); }
.muted { color: var(--fg-2); }
.accent { color: var(--accent); }

.h-hero { font-size: clamp(2.7rem, 7vw, 5.6rem); letter-spacing: -0.035em; line-height: 1.02; }
.h-sec  { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h-3    { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.lead   { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--fg-1); line-height: 1.5; }
em.hl   { font-style: var(--em-style); color: var(--accent); }

/* ---------- section rhythm ---------- */
.sec { padding-block: clamp(80px, 11vw, 148px); position: relative; }
.sec-alt { background: var(--bg-1); }
.sec-head { max-width: 780px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head .lead { margin-top: 4px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--body); font-weight: 600; font-size: 16px;
  border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s, border-color 0.3s, color 0.3s;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0 var(--accent-glow); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 16px 42px -12px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--fg-1); background: var(--card); transform: translateY(-2px); }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-sm { padding: 11px 18px; font-size: 14.5px; }

/* ---------- surfaces ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }

.pill {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--fg-1);
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 6px 13px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.sample-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.sample-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow);} 50%{box-shadow:0 0 0 6px transparent;} }
@media (prefers-reduced-motion: reduce){ .sample-tag .dot{ animation: none; } }

/* ---------- scroll reveal ---------- */
/* opacity stays 1 so content is NEVER hidden if transitions don't advance;
   the entrance is a transform-only slide (degrades to final position safely). */
.reveal { transform: translateY(22px); transition: transform 0.85s var(--ease); will-change: transform; }
.reveal.in { transform: none; }
.reveal[data-delay="1"]{ transition-delay: 0.06s; }
.reveal[data-delay="2"]{ transition-delay: 0.12s; }
.reveal[data-delay="3"]{ transition-delay: 0.18s; }
.reveal[data-delay="4"]{ transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce){ .reveal{ transform:none !important; transition:none; } }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- decorative ---------- */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 18%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 90% 80% at 60% 18%, #000, transparent 76%);
  opacity: var(--grid-op);
}
.glow {
  position: absolute; z-index: 0; border-radius: 50%; filter: blur(110px); pointer-events: none;
  background: var(--accent); opacity: var(--glow-op);
}
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }