/* The page theme. The toggle sets data-theme on <html>; everything else reads these.
   Registering them as colors lets the whole page fade between themes at once. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --text { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --card { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --line { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: transparent; }

:root {
  --bg: #f4f0ea;
  --text: #1d1b24;
  --muted: rgba(29, 27, 36, 0.58);
  --card: rgba(255, 255, 255, 0.82);
  --line: rgba(29, 27, 36, 0.1);
  --accent: #6d55f0;
  --glow: rgba(255, 214, 140, 0.55);
  --fade: 0.9s ease-in-out 0.25s;
  color-scheme: light;
  transition: --bg var(--fade), --text var(--fade), --muted var(--fade), --card var(--fade), --line var(--fade), --accent var(--fade), --glow var(--fade);
}
:root[data-theme="dark"] {
  --bg: #110e24;
  --text: #ece8fb;
  --muted: rgba(236, 232, 251, 0.6);
  --card: rgba(34, 28, 66, 0.72);
  --line: rgba(236, 232, 251, 0.1);
  --accent: #ffb557;
  --glow: rgba(124, 92, 255, 0.4);
  --fade: 1.1s ease-in-out 0.5s; /* the page darkens along with the toggle's sky */
  color-scheme: dark;
}

/* The toggle's own colors. Change any of them, per toggle or for all. */
.haunt {
  --day-top: #6fc0f4;
  --day-bottom: #d4f0ff;
  --dusk-top: #6a5fc9;
  --dusk-bottom: #ffa47c;
  --night-top: #0d0a2a;
  --night-bottom: #4a3283;
  --sun: #ffcf4a;
  --moon: #fff4d8;
  --hill-day: #a6dba0;
  --hill-night: #2a2357;
  --ground-day: #7cc56f;
  --ground-night: #1b163b;
  --wall-day: #fde6c6;
  --wall-night: #3a3168;
  --roof-day: #e0705a;
  --roof-night: #241c49;
  --trim-day: #fffaf1;
  --trim-night: #2a2250;
  --glass-day: #b2e0ff;
  --glass-night: #171236;
  --tree-day: #64b768;
  --bark-day: #93603f;
  --bark-night: #17122f;
  --lamp: #ffcf6e;
  --ghost: #fbf8ff;
  --ink: #2a2350;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 42% at 50% 42%, var(--glow), transparent 72%);
}

/* ---------- The toggle ---------- */

.haunt {
  --size: 64px;
  position: relative;
  flex: none;
  width: var(--size);
  aspect-ratio: 20 / 9;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--day-top);
  cursor: pointer;
  isolation: isolate;
  container: haunt / inline-size;
  -webkit-tap-highlight-color: transparent;
}
.haunt svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* A soft inner edge, so it reads as a switch set into the page. */
.haunt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(10, 8, 30, 0.28), inset 0 0 0 1px rgba(10, 8, 30, 0.12);
  pointer-events: none;
}
.haunt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.haunt-big {
  --size: min(480px, 86vw);
  box-shadow: 0 30px 70px -34px rgba(30, 20, 70, 0.55);
}
.haunt-big::after { box-shadow: inset 0 2px 6px rgba(10, 8, 30, 0.28), inset 0 0 0 1.5px rgba(10, 8, 30, 0.1); }
:root[data-theme="dark"] .haunt { box-shadow: 0 0 0 1px rgba(200, 185, 255, 0.16); }
:root[data-theme="dark"] .haunt-big { box-shadow: 0 0 0 1px rgba(200, 185, 255, 0.14), 0 30px 80px -30px rgba(124, 92, 255, 0.6); }

/* Colors that cross from day to night as script.js moves --n from 0 to 1. */
.haunt .hill { fill: color-mix(in oklab, var(--hill-day), var(--hill-night) calc(var(--n, 0) * 100%)); }
.haunt .ground { fill: color-mix(in oklab, var(--ground-day), var(--ground-night) calc(var(--n, 0) * 100%)); }
.haunt .path { fill: color-mix(in oklab, #ecd9b0, #2c2456 calc(var(--n, 0) * 100%)); }
.haunt .wall { fill: color-mix(in oklab, var(--wall-day), var(--wall-night) calc(var(--n, 0) * 100%)); }
.haunt .shade { fill: color-mix(in oklab, #f2cfa6, #2d2558 calc(var(--n, 0) * 100%)); }
.haunt .roof { fill: color-mix(in oklab, var(--roof-day), var(--roof-night) calc(var(--n, 0) * 100%)); }
.haunt .roof-edge { fill: color-mix(in oklab, #c25845, #1a1438 calc(var(--n, 0) * 100%)); }
.haunt .brick { fill: color-mix(in oklab, #b9604c, #2b2350 calc(var(--n, 0) * 100%)); }
.haunt .trim { fill: color-mix(in oklab, var(--trim-day), var(--trim-night) calc(var(--n, 0) * 100%)); }
.haunt .glass { fill: color-mix(in oklab, var(--glass-day), var(--glass-night) calc(var(--n, 0) * 100%)); }
.haunt .shine { fill: #fff; opacity: calc((1 - var(--n, 0)) * 0.5); }
.haunt .rim { fill: color-mix(in oklab, var(--moon), #a99cff 40%); opacity: calc(var(--n, 0) * 0.5); }
.haunt .cat { fill: #1b1433; }
.haunt .door { fill: color-mix(in oklab, #9d5a3e, #211941 calc(var(--n, 0) * 100%)); }
.haunt .stone { fill: color-mix(in oklab, #d9c3a3, #262050 calc(var(--n, 0) * 100%)); }
.haunt .bark { fill: color-mix(in oklab, var(--bark-day), var(--bark-night) calc(var(--n, 0) * 100%)); }
.haunt .twig { fill: none; stroke: var(--bark-night); stroke-linecap: round; }
.haunt .leaf { fill: var(--tree-day); }
.haunt .leaf-hi { fill: color-mix(in oklab, var(--tree-day), #fff 22%); }
.haunt .bush { fill: color-mix(in oklab, var(--tree-day), #2f8a45 25%); }
.haunt .grave { fill: color-mix(in oklab, #8f88bd, var(--hill-night) 30%); }
.haunt .lit { fill: var(--lamp); }
.haunt .pumpkin { fill: color-mix(in oklab, #f39233, #c4612a calc(var(--n, 0) * 60%)); }
.haunt .cloud { fill: #fff; }
.haunt .star { fill: #fff6d6; }
.haunt .sun { fill: var(--sun); }
.haunt .sun-hi { fill: color-mix(in oklab, var(--sun), #fff 45%); }
.haunt .moon { fill: var(--moon); }
.haunt .crater { fill: color-mix(in oklab, var(--moon), #b9a87a 30%); }
.haunt .ghost { fill: var(--ghost); }
.haunt .ink { fill: var(--ink); }
.haunt .blush { fill: #ff9fc0; }
.haunt .bat { fill: #0b0820; }
.haunt .s-day-top { stop-color: var(--day-top); }
.haunt .s-day-bottom { stop-color: var(--day-bottom); }
.haunt .s-dusk-top { stop-color: var(--dusk-top); }
.haunt .s-dusk-bottom { stop-color: var(--dusk-bottom); }
.haunt .s-night-top { stop-color: var(--night-top); }
.haunt .s-night-bottom { stop-color: var(--night-bottom); }
.haunt .s-lamp { stop-color: var(--lamp); }
.haunt .s-sun { stop-color: var(--sun); }
.haunt .s-moon { stop-color: var(--moon); }
.haunt .s-ghost { stop-color: var(--ghost); }

/* Navbar size: drop the details too small to see. */
@container haunt (max-width: 120px) {
  .haunt .detail { display: none; }
}

/* ---------- The demo page ---------- */

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.brand svg { width: 20px; height: 20px; fill: var(--accent); }
.brand rect { fill: var(--bg); }
.nav nav { display: flex; gap: 20px; margin-right: auto; }
.nav nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav nav a:hover { color: var(--text); }

.hero {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  min-height: calc(100dvh - 72px);
  padding: 28px 20px 40px;
}

.state { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 14px; }
.state label { color: var(--text); font-weight: 500; cursor: pointer; }
.state code {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}
.state b { color: var(--accent); font-weight: 500; }

.post {
  width: min(380px, 100%);
  margin-top: 10px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 24px 50px -34px rgba(30, 20, 70, 0.45);
}
.post .tag { margin: 0; color: var(--accent); font-size: 12px; font-weight: 500; }
.post h2 { margin: 2px 0 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.post p:not(.tag) { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.read { color: var(--text); font-size: 14px; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .nav { gap: 16px; padding: 14px 16px; }
  .nav nav { gap: 14px; }
  .nav nav a:nth-child(n + 2) { display: none; }
  .state { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}