/*
 * theme.css — Which Graveyard? design tokens.
 * Opens in DARK (a twilight graveyard at midnight); a "dawn" light mode sits
 * under html[data-theme="light"]. Palette per the approved brief:
 *   canvas #140a22 · surface #2c2338 · accent #e8934b · accent-text #cf6aca
 *   ink #ede4f9 · accent-strong #e8934b · muted #968da3
 */

:root {
  color-scheme: dark;

  --canvas: #140a22;
  --surface: #2c2338;
  --surface-2: #382b47;
  --border: color-mix(in srgb, var(--ink) 14%, var(--surface));
  --border-strong: color-mix(in srgb, var(--ink) 26%, var(--surface));
  --ink: #ede4f9;
  --muted: #968da3;

  --accent: #e8934b;
  --accent-hover: #f0a866;
  --accent-ink: #1c1024;
  --accent-text: #cf6aca;
  --accent-strong: #f4b47a;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 45%, var(--border));

  --success: #4caf7d;
  --success-ink: #06170e;
  --success-soft: color-mix(in srgb, var(--success) 18%, var(--surface));
  --success-strong: #7fdcae;

  --warning: #d9a441;
  --warning-ink: #1c1406;
  --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--surface));
  --warning-strong: #f0c274;

  --danger: #c1445e;
  --danger-ink: #1c0810;
  --danger-soft: color-mix(in srgb, var(--danger) 20%, var(--surface));
  --danger-strong: #ea7b93;

  --chart-1: #e8934b;
  --chart-2: #cf6aca;
  --chart-3: #4fa88f;
  --chart-4: #a78bda;
  --chart-5: #6b8fd6;
  --chart-6: #e0b23e;

  --font-display: "Eagle Lake", "Iowan Old Style", Georgia, serif;
  --font-body: "Quicksand", ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: "Special Elite", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  --display-tracking: 0em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --btn-weight: 700;
  --caps: none;
  --caps-tracking: 0;
  --measure: 62ch;

  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.75), 0 2px 0 0 color-mix(in srgb, var(--accent) 10%, transparent);
  --shadow-raised: 0 32px 80px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-btn: 0 10px 30px -12px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow-glow: 0 0 90px 10px color-mix(in srgb, var(--accent) 22%, transparent);

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 45%, transparent);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f6ecdd;
  --surface: #fdf7ec;
  --surface-2: #f0e3cd;
  --border: color-mix(in srgb, #5b4a3a 18%, var(--surface));
  --border-strong: color-mix(in srgb, #5b4a3a 34%, var(--surface));
  --ink: #2b1f3d;
  --muted: #6e6178;

  --accent: #9c5220;
  --accent-hover: #874511;
  --accent-ink: #fff8ef;
  --accent-text: #9a3f92;
  --accent-strong: #8a4b1c;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 40%, var(--border));

  --success: #2f8f5f;
  --success-ink: #ffffff;
  --success-soft: color-mix(in srgb, var(--success) 16%, var(--surface));
  --success-strong: #1f6c46;

  --warning: #a86a1a;
  --warning-ink: #ffffff;
  --warning-soft: color-mix(in srgb, var(--warning) 16%, var(--surface));
  --warning-strong: #85520f;

  --danger: #a53752;
  --danger-ink: #ffffff;
  --danger-soft: color-mix(in srgb, var(--danger) 16%, var(--surface));
  --danger-strong: #832740;

  --chart-1: #b8662a;
  --chart-2: #9a3f92;
  --chart-3: #2f8f6f;
  --chart-4: #6a53a8;
  --chart-5: #3f5fa8;
  --chart-6: #a8811f;

  --shadow-card: 0 20px 45px -24px rgba(43, 31, 61, 0.28), 0 1px 0 0 rgba(43, 31, 61, 0.04);
  --shadow-raised: 0 28px 60px -20px rgba(43, 31, 61, 0.32);
  --shadow-btn: 0 8px 20px -10px color-mix(in srgb, var(--accent) 50%, transparent);
  --shadow-glow: 0 0 60px 8px color-mix(in srgb, var(--accent) 14%, transparent);
}

/*
 * app.css — Which Graveyard? — the graveyard-town atmosphere no primitive
 * covers: the drifting fog, the hero's low-poly silhouette skyline, the
 * hand-doodled notebook, the moon-clock face and the graveyard grid.
 * Colour: tokens only — var(--canvas/--surface/--ink/--muted/--accent…),
 * currentColor, transparent, or color-mix() over those.
 *
 * MOTION: the graveyard grid is the one thing that stagger-animates in (per
 * the brief). Every tile RESTS VISIBLE in plain CSS — the rule below only
 * arms the offset-in entrance once html carries .js-ready, which app.js adds
 * itself the instant it runs; a visitor whose script fails only ever sees
 * the .wg-tile base rule, fully visible. Each tile carries data-inview, the
 * platform fires app:inview on it the first time it crosses into view, and
 * app.js (listening for that event) adds .is-in with a small stagger based
 * on the tile's position; html.reduced-motion cancels the offset outright.
 */

/* ---------- ground & grain ------------------------------------------- */
body {
  background: var(--canvas);
  font-family: var(--font-body);
}
body.wg-body {
  background:
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--canvas);
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ---------- nav: hero-overlay -> solid on scroll ---------------------- */
.wg-nav {
  background: linear-gradient(180deg, color-mix(in srgb, var(--canvas) 55%, transparent), transparent);
  border-bottom: 1px solid transparent;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.wg-nav.is-scrolled {
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--canvas) 70%, transparent);
}

/* ---------- hero: low-poly twilight vista ------------------------------ */
.wg-hero { position: relative; overflow: hidden; background: var(--canvas); }
.wg-hero .media, .wg-hero-photo { position: absolute; inset: 0; }
.wg-hero-photo img {
  filter: saturate(1.15) contrast(1.05) brightness(0.62) hue-rotate(-6deg);
}
.wg-hero::after {
  /* violet twilight wash over the photograph (an ::after paints above the
     preceding photo element; a ::before would paint underneath it) */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 34% at 78% 22%, color-mix(in srgb, var(--warning) 55%, var(--ink)), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-text) 40%, var(--canvas)) 0%, color-mix(in srgb, var(--canvas) 60%, transparent) 55%, var(--canvas) 100%),
    color-mix(in srgb, var(--accent-text) 25%, transparent);
  mix-blend-mode: multiply;
  opacity: 0.9;
}
.wg-hero .wg-moon {
  position: absolute; top: 16%; right: 16%;
  width: clamp(90px, 12vw, 170px); height: clamp(90px, 12vw, 170px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--ink), color-mix(in srgb, var(--warning) 45%, var(--ink)) 42%, color-mix(in srgb, var(--warning) 65%, var(--ink)) 70%, transparent 78%);
  box-shadow: 0 0 90px 30px color-mix(in srgb, var(--warning) 35%, transparent), 0 0 180px 70px color-mix(in srgb, var(--warning) 15%, transparent);
  z-index: 1;
}
/* low-poly silhouette skyline: layered triangular hills + gable/cross shapes */
.wg-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 2;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--canvas) 40%, transparent) 40%, var(--canvas) 100%);
}
.wg-skyline::before, .wg-skyline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background-repeat: repeat-x; background-position: bottom;
}
.wg-skyline::before {
  clip-path: polygon(0% 100%, 0% 65%, 6% 55%, 14% 70%, 22% 50%, 30% 68%, 40% 45%, 50% 66%, 58% 52%, 68% 72%, 76% 48%, 86% 66%, 94% 54%, 100% 68%, 100% 100%);
  background-color: color-mix(in srgb, var(--canvas) 65%, var(--surface));
  bottom: -2%;
}
.wg-skyline::after {
  clip-path: polygon(0% 100%, 0% 78%, 8% 88%, 16% 74%, 26% 90%, 36% 78%, 46% 92%, 56% 76%, 66% 90%, 76% 80%, 86% 92%, 96% 78%, 100% 88%, 100% 100%);
  background-color: var(--canvas);
  bottom: -2%;
}
.wg-headstones {
  position: absolute; bottom: 6%; left: 0; right: 0; height: 20%; z-index: 3;
  display: flex; align-items: flex-end; gap: 3.5vw; padding-inline: 6vw;
  opacity: 0.9;
}
.wg-headstones span {
  display: block; width: clamp(14px, 2.4vw, 26px); height: clamp(20px, 4vw, 46px);
  background: var(--canvas); border-radius: 999px 999px 3px 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
.wg-headstones span:nth-child(3n) { height: clamp(26px, 5vw, 58px); }
.wg-headstones span:nth-child(5n) { height: clamp(16px, 3vw, 34px); }

.wg-hero-title {
  text-shadow: 0 2px 0 color-mix(in srgb, var(--canvas) 50%, transparent), 0 20px 60px color-mix(in srgb, var(--canvas) 65%, transparent);
}

/* drifting fog band, shared by hero + section dividers */
.wg-fog { position: absolute; left: -10%; right: -10%; pointer-events: none; z-index: 4; opacity: 0.55; }
.wg-fog-1 { top: 58%; height: 18%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent), transparent); animation: wg-drift 26s linear infinite; }
.wg-fog-2 { top: 72%; height: 14%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent), transparent); animation: wg-drift 40s linear infinite reverse; }
@keyframes wg-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
html.reduced-motion .wg-fog { animation: none !important; }

/* ---------- premise band: moon-clock ---------------------------------- */
.wg-clock {
  width: 88px; height: 88px; border-radius: 50%; position: relative; flex-shrink: 0;
  background: radial-gradient(circle at 35% 32%, var(--ink), color-mix(in srgb, var(--accent-text) 40%, var(--ink)) 45%, var(--surface) 78%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-glow);
}
.wg-clock::before, .wg-clock::after {
  content: ""; position: absolute; left: 50%; bottom: 50%; transform-origin: bottom center;
  background: var(--canvas); border-radius: 2px;
}
.wg-clock::before { width: 3px; height: 26px; transform: translateX(-50%) rotate(0deg); }
.wg-clock::after { width: 3px; height: 18px; transform: translateX(-50%) rotate(90deg); }
.wg-clock-dot { position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--canvas); }

/* ---------- graveyard grid: five distinct tiles, stagger-in ------------ */
.wg-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .wg-grid { grid-template-columns: repeat(6, 1fr); } }
.wg-tile {
  position: relative; overflow: hidden; min-height: 15rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem; border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  opacity: 1; transform: none;
  transition: transform 520ms var(--ease-out), box-shadow 220ms var(--ease);
}
/* Offset-in entrance is armed ONLY once app.js confirms it is running. The
   tile is ALWAYS fully opaque — opacity never rests below 1 — only its
   position animates in, so a capture taken before app:inview fires (or a
   visitor whose script never runs) still sees the card, just not yet
   settled into place. */
html.js-ready .wg-tile[data-inview] { transform: translateY(22px) scale(0.98); }
html.js-ready .wg-tile[data-inview].is-in { transform: none; }
html.reduced-motion .wg-tile { transform: none !important; }
.wg-tile:hover { box-shadow: var(--shadow-raised), var(--shadow-glow); transform: translateY(-4px); }
.wg-tile::before { content: ""; position: absolute; inset: 0; opacity: 0.9; z-index: 0; }
.wg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--canvas) 82%, transparent) 100%); z-index: 1; }
.wg-tile > * { position: relative; z-index: 2; }
@media (min-width: 768px) {
  .wg-tile:nth-child(1) { grid-column: span 3; }
  .wg-tile:nth-child(2) { grid-column: span 3; }
  .wg-tile:nth-child(3) { grid-column: span 2; }
  .wg-tile:nth-child(4) { grid-column: span 2; }
  .wg-tile:nth-child(5) { grid-column: span 2; }
}
.wg-tile-1::before { background: radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--chart-4) 55%, var(--surface)), transparent 60%), linear-gradient(160deg, var(--surface), var(--canvas)); }
.wg-tile-2::before { background: radial-gradient(90% 90% at 80% 10%, color-mix(in srgb, var(--chart-6) 55%, var(--surface)), transparent 55%), linear-gradient(160deg, var(--surface), var(--canvas)); }
.wg-tile-3::before { background: radial-gradient(100% 100% at 30% 100%, color-mix(in srgb, var(--chart-3) 55%, var(--surface)), transparent 60%), linear-gradient(160deg, var(--surface), var(--canvas)); }
.wg-tile-4::before { background: radial-gradient(100% 90% at 70% 100%, color-mix(in srgb, var(--chart-5) 55%, var(--surface)), transparent 60%), linear-gradient(160deg, var(--surface), var(--canvas)); }
.wg-tile-5::before { background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--warning) 55%, var(--surface)), transparent 55%), linear-gradient(160deg, var(--surface), var(--canvas)); }

/* ---------- clue notebook: hand-doodled panel -------------------------- */
.wg-notebook {
  position: relative;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 2.05rem, color-mix(in srgb, var(--ink) 8%, transparent) 2.05rem, color-mix(in srgb, var(--ink) 8%, transparent) calc(2.05rem + 1px));
  background-color: var(--surface);
  border: 1.5px dashed var(--accent-border);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  box-shadow: var(--shadow-card);
  transform: rotate(-0.6deg);
}
.wg-notebook-clip {
  position: absolute; top: -18px; left: 2rem; width: 34px; height: 56px;
  border: 5px solid color-mix(in srgb, var(--muted) 70%, var(--ink));
  border-radius: 16px; transform: rotate(-8deg);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--canvas) 45%, transparent);
}
.wg-clue {
  border-bottom: 1px dashed var(--border-strong);
  padding-block: 0.9rem;
}
.wg-clue:last-child { border-bottom: 0; }
.wg-clue-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.5px solid var(--accent-border); color: var(--accent-strong);
  flex-shrink: 0; transform: rotate(-4deg);
}

/* ---------- how a search plays out: doodled sequence ------------------- */
.wg-steps { position: relative; }
.wg-step-num {
  font-family: var(--font-display);
  font-size: 2.75rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-border);
}
.wg-step-arrow { color: var(--accent-border); }
.wg-step-arrow svg { stroke-dasharray: 4 6; }
.wg-pulse-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--danger) 60%, transparent);
  animation: wg-pulse 2.2s var(--ease) infinite;
}
@keyframes wg-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
html.reduced-motion .wg-pulse-ring { animation: none; opacity: 0; }

/* ---------- the cat: caption-framed portrait ---------------------------- */
.wg-cat-frame { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-raised); }
.wg-cat-caption { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ---------- closing: dark statement with moon glow ---------------------- */
.wg-closing {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%), var(--canvas);
}
.wg-closing::before {
  content: ""; position: absolute; top: -20%; left: 50%; translate: -50% 0;
  width: 60vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--ink) 50%, transparent), color-mix(in srgb, var(--warning) 30%, transparent) 55%, transparent 70%);
  filter: blur(2px);
}

/* ---------- footer ------------------------------------------------------ */
.wg-footer { border-top: 1px solid var(--border); }

@media (width < 30rem) {
  .wg-hero { min-height: 88vh; }
}