/* ---------- the start page: an evening in chapters ----------
 * Only index.html loads this file, after site.css and its look layer, so it wins by order where it has to.
 * The page reads like one evening: behind the sections the sky turns from dusk to night to dawn as you read,
 * each chapter is numbered and its rule drawn as it arrives, every heading gets the pencil line the hero and
 * the subpages already carry, the hub's wires are drawn in before their lights run, and a rail keeps your
 * place through the moments. New motion runs at 10 frames a second like the rest of the look; it only waits
 * for its moment under .home-motion (home.mjs), so without the script everything simply stands, and
 * "reduce motion" keeps all of it still (end of file).
 */

/* ---------- the sky behind the page ---------- */
:root {
  --home-dusk:
    radial-gradient(110% 58% at 50% 114%, rgb(255 138 92 / 0.15), rgb(196 92 220 / 0.08) 44%, transparent 72%),
    radial-gradient(62% 46% at 94% -10%, rgb(139 92 246 / 0.12), transparent 70%);
  --home-evening:
    radial-gradient(92% 62% at 4% 108%, rgb(139 92 246 / 0.15), transparent 70%),
    radial-gradient(70% 50% at 100% -4%, rgb(240 166 232 / 0.07), transparent 70%);
  --home-night:
    radial-gradient(84% 58% at 14% -8%, rgb(86 98 214 / 0.14), transparent 70%),
    radial-gradient(70% 52% at 96% 104%, rgb(139 92 246 / 0.1), transparent 70%);
  --home-dawn:
    radial-gradient(120% 62% at 50% 116%, rgb(255 138 92 / 0.2), rgb(240 166 232 / 0.09) 46%, transparent 76%),
    radial-gradient(60% 40% at 0% 0%, rgb(139 92 246 / 0.08), transparent 70%);
  --home-star: rgb(243 238 230 / 0.75);
  --home-stars: block;
  --home-halo: rgb(18 16 22 / 0.9);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --home-dusk:
      radial-gradient(110% 58% at 50% 114%, rgb(255 178 138 / 0.3), rgb(167 139 250 / 0.12) 44%, transparent 72%),
      radial-gradient(62% 46% at 94% -10%, rgb(167 139 250 / 0.16), transparent 70%);
    --home-evening:
      radial-gradient(92% 62% at 4% 108%, rgb(167 139 250 / 0.2), transparent 70%),
      radial-gradient(70% 50% at 100% -4%, rgb(240 166 232 / 0.14), transparent 70%);
    --home-night:
      radial-gradient(84% 58% at 14% -8%, rgb(140 152 226 / 0.2), transparent 70%),
      radial-gradient(70% 52% at 96% 104%, rgb(167 139 250 / 0.14), transparent 70%);
    --home-dawn:
      radial-gradient(120% 62% at 50% 116%, rgb(255 170 128 / 0.34), rgb(240 166 232 / 0.14) 46%, transparent 76%),
      radial-gradient(60% 40% at 0% 0%, rgb(167 139 250 / 0.12), transparent 70%);
    --home-stars: none;
    --home-halo: rgb(246 242 234 / 0.92);
  }
}
:root[data-theme="light"] {
  --home-dusk:
    radial-gradient(110% 58% at 50% 114%, rgb(255 178 138 / 0.3), rgb(167 139 250 / 0.12) 44%, transparent 72%),
    radial-gradient(62% 46% at 94% -10%, rgb(167 139 250 / 0.16), transparent 70%);
  --home-evening:
    radial-gradient(92% 62% at 4% 108%, rgb(167 139 250 / 0.2), transparent 70%),
    radial-gradient(70% 50% at 100% -4%, rgb(240 166 232 / 0.14), transparent 70%);
  --home-night:
    radial-gradient(84% 58% at 14% -8%, rgb(140 152 226 / 0.2), transparent 70%),
    radial-gradient(70% 52% at 96% 104%, rgb(167 139 250 / 0.14), transparent 70%);
  --home-dawn:
    radial-gradient(120% 62% at 50% 116%, rgb(255 170 128 / 0.34), rgb(240 166 232 / 0.14) 46%, transparent 76%),
    radial-gradient(60% 40% at 0% 0%, rgb(167 139 250 / 0.12), transparent 70%);
  --home-stars: none;
  --home-halo: rgb(246 242 234 / 0.92);
}

/* One fixed layer per hour, under every section; only the hour you are in is shown, so at most two are ever
 * painted (during a change). The hero keeps its own sky, so the layers rest until it has scrolled away. */
.home-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.home-sky__layer {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1.4s steps(14), visibility 0s linear 1.4s;
}
.home-sky__layer--dusk { background: var(--home-dusk); }
.home-sky__layer--evening { background: var(--home-evening); }
.home-sky__layer--night { background: var(--home-night); }
.home-sky__layer--dawn { background: var(--home-dawn); }
.home-sky[data-mood="dusk"] .home-sky__layer--dusk,
.home-sky[data-mood="evening"] .home-sky__layer--evening,
.home-sky[data-mood="night"] .home-sky__layer--night,
.home-sky[data-mood="dawn"] .home-sky__layer--dawn { opacity: 1; visibility: visible; transition: opacity 1.4s steps(14), visibility 0s; }

/* the night has stars: two sparse tiles of single pixels, the far one breathing at 10 fps (dark theme only) */
.home-sky__stars {
  position: absolute; inset: 0; display: var(--home-stars);
  background-image:
    radial-gradient(1px 1px at 8% 14%, var(--home-star), transparent),
    radial-gradient(1px 1px at 27% 61%, var(--home-star), transparent),
    radial-gradient(1.5px 1.5px at 46% 23%, var(--home-star), transparent),
    radial-gradient(1px 1px at 63% 78%, var(--home-star), transparent),
    radial-gradient(1px 1px at 81% 37%, var(--home-star), transparent),
    radial-gradient(1px 1px at 92% 88%, var(--home-star), transparent);
  background-size: 540px 430px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / 0.35) 80%); mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / 0.35) 80%);
}
.home-sky__stars--far {
  background-image:
    radial-gradient(1px 1px at 17% 33%, var(--home-star), transparent),
    radial-gradient(1px 1px at 38% 86%, var(--home-star), transparent),
    radial-gradient(1px 1px at 55% 47%, var(--home-star), transparent),
    radial-gradient(1.5px 1.5px at 74% 9%, var(--home-star), transparent),
    radial-gradient(1px 1px at 88% 66%, var(--home-star), transparent);
  background-size: 780px 610px; background-position: 210px 130px;
  opacity: 0.35;
  animation: home-twinkle 5s steps(50) infinite alternate;
}
@keyframes home-twinkle { from { opacity: 0.12; } to { opacity: 0.5; } }

/* ---------- chapters: a number and a short rule before every section's label ---------- */
main { counter-reset: home-chapter; }
main section:not(.download) .eyebrow { counter-increment: home-chapter; display: flex; align-items: center; gap: 0.9em; }
main section:not(.download) .eyebrow::before { content: counter(home-chapter, decimal-leading-zero); order: -2; color: var(--faint); letter-spacing: 0.06em; }
main section:not(.download) .eyebrow::after { content: ""; order: -1; flex: none; width: 2.6em; height: 1px; background: currentColor; opacity: 0.55; transform-origin: 0 50%; }
/* the rule is drawn in six frames once its chapter is on screen */
.home-motion main section:not(.download) .eyebrow::after { transform: scaleX(0); }
.home-motion main section:not(.download) .eyebrow.is-seen::after { transform: none; transition: transform 0.6s steps(6); }

/* ---------- the pencil line under every heading's serif accent (build.mjs puts it in, like the subpages) ---------- */
.h2 .w__ink, .end__title .w__ink { bottom: -0.02em; stroke-width: 0.045em; opacity: 0.92; }
.home-motion :is(.h2, .end__title) .w__ink path { animation: none; stroke-dashoffset: 1; }
.home-motion :is(.h2, .end__title).is-inked .w__ink path { animation: home-ink 1s steps(10) 0.45s forwards; }
@keyframes home-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- the headings GSAP takes apart (main.js) stand as they will once it has ----------
 * SplitText puts every letter in a box of its own, and letters in their own boxes lose their kerning and ligatures.
 * Set with them, a heading near the end of its line got a line more the moment its letters came apart, and everything
 * under it moved down by that line, past a visitor at /#download. */
.split { font-kerning: none; font-variant-ligatures: none; }

/* ---------- the hero: the small print stays readable where the ribbon of light runs behind it ---------- */
.hero__note { color: var(--muted); text-shadow: 0 0 6px var(--home-halo), 0 0 18px var(--home-halo); }
.hero__kicker { text-shadow: 0 0 10px var(--home-halo); }

/* ---------- the film: what in it is made with AI and where “stable” has limits, in small print ---------- */
/* balanced lines, so a phone never leaves “generated” alone on the last one */
.tour__note { margin-top: 14px; color: var(--muted); font-size: var(--step--1); line-height: 1.5; text-wrap: balance; text-shadow: 0 0 6px var(--home-halo), 0 0 18px var(--home-halo); }
.tour__note + .tour__note { margin-top: 4px; }
.film--portrait ~ .tour__note { text-align: center; }

/* ---------- the hub: every wire is drawn in pencil before its light runs; a label lights its wire ---------- */
.home-motion .hub__wire { stroke-dasharray: 1; stroke-dashoffset: 1; }
.home-motion .hub__layer.is-drawn .hub__wire { animation: home-ink 0.8s steps(8) forwards; }
/* in first (one after the other, as the labels arrive), out once the core has landed (main.js times those) */
.hub__layer.is-drawn .hub__wire:nth-of-type(1) { animation-delay: 0.05s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(2) { animation-delay: 0.12s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(3) { animation-delay: 0.19s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(4) { animation-delay: 0.26s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(5) { animation-delay: 0.33s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(6) { animation-delay: 0.4s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(7) { animation-delay: 0.95s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(8) { animation-delay: 1.04s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(9) { animation-delay: 1.13s; }
.hub__layer.is-drawn .hub__wire:nth-of-type(10) { animation-delay: 1.22s; }
.hub__wire { transition: stroke 0.2s steps(2); }
.hub__wire.is-lit { stroke: var(--accent-bar); }
.hub__node { transition: border-color 0.2s steps(2), box-shadow 0.2s steps(2); }
.hub__node.is-lit { border-color: var(--accent-bar); box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 26px -16px rgb(0 0 0 / 0.55); }
.hub__core { cursor: default; }

/* ---------- moments: a rail beside the steps fills as you read, the step you are on lights its dot ---------- */
.scenes__steps { position: relative; padding-left: 32px; }
.scenes__steps::before, .scenes__steps::after { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; pointer-events: none; }
.scenes__steps::before { background: var(--line-2); }
.scenes__steps::after { background: linear-gradient(180deg, var(--accent), var(--accent-bar) 60%, var(--look-ember, var(--accent-bar))); transform-origin: 50% 0; transform: scaleY(var(--home-rail, 0)); }
.scene-step__num { position: relative; }
.scene-step__num::before {
  content: ""; position: absolute; left: -32px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  border: 1.5px solid var(--line-2); background: var(--bg);
  transition: transform 0.3s steps(3), background-color 0.3s steps(3), border-color 0.3s steps(3);
}
.scene-step.is-active .scene-step__num::before { border-color: var(--accent-bar); background: var(--accent-bar); transform: scale(1.18); box-shadow: 0 0 14px var(--accent-glow); }

/* ---------- the crew: an Ayling you point at hops on its card ---------- */
.ring__card:hover .ring__face .ayling { animation: home-hop 0.7s steps(7); }
@keyframes home-hop {
  0%, 100% { transform: none; }
  20% { transform: translateY(2px) scale(1.06, 0.92); }
  45% { transform: translateY(-18px) rotate(-5deg); }
  70% { transform: translateY(0) scale(1.05, 0.94); }
  85% { transform: translateY(-3px); }
}

/* ---------- the crew at dawn: the paper theme gets the same flock in the morning light ---------- */
/* look.css shows the night flock in the dark theme only; this one takes the light theme, with the birds where
 * they fly at night. Multiplied into the paper, its pale sky leaves a tint and the birds. */
.home-flock-dawn { display: var(--look-light); opacity: 0.55; mix-blend-mode: multiply; }
/* on a phone the birds fly behind the words, so they keep further back */
@media (max-width: 760px) { .home-flock-dawn { opacity: 0.3; } }

/* ---------- AyCode Radar on the start page: the three newest as cards with their pictures ---------- */
.radar-home { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
.radar-home__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); align-items: end; }
.radar-home__head .eyebrow { grid-column: 1; }
.radar-home__head .h2 { grid-column: 1; }
.radar-home__lead { grid-column: 2; grid-row: 2; max-width: 46ch; margin-top: 0; }
.radar-home__all { grid-column: 1; margin-top: 0; }
.radar-home .radar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); border-top: 0; }
.radar-home .radar-row { display: block; grid-column: auto; border-bottom: 0; }
.radar-home .radar-row a {
  container-type: inline-size;
  display: grid; grid-column: auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-content: start; align-items: center; gap: 14px 12px;
  height: 100%; padding: 10px 10px 20px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent);
  transition: transform 0.4s steps(4), background-color 0.3s steps(3), border-color 0.3s steps(3);
}
.radar-home .radar-row a:hover { background: color-mix(in srgb, var(--panel) 88%, transparent); border-color: var(--line-2); transform: translateY(-4px); }
.radar-home .radar-row__shot { grid-column: 1 / -1; grid-row: auto; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 13px; }
.radar-home .radar-row time { padding-left: 6px; }
.radar-home .radar-row .radar-kind { grid-column: 2; justify-self: start; }
.radar-home .radar-row__text { grid-column: 1 / -1; align-self: start; padding-inline: 6px; }
.radar-home .radar-row__text h3 { font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.2rem); }
.radar-home .radar-row__text span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 0.92rem; }
.radar-home .radar-row a:hover .radar-row__text { transform: none; }
.radar-home .radar-row__go { display: none; }
/* a narrow card gives the pill its own line under the date, so a German rumor with its flag stays inside the card */
@container (max-width: 300px) {
  .radar-home .radar-row .radar-kind { grid-column: 1 / -1; margin: -6px 0 0 4px; }
}

/* ---------- ideas: without the list (before it loads, or with none yet) the heading reads as one band ---------- */
.ideas:not(.has-ideas) .ideas__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); align-items: end; }
.ideas:not(.has-ideas) .ideas__head > .eyebrow, .ideas:not(.has-ideas) .ideas__head > .h2 { grid-column: 1; }
.ideas:not(.has-ideas) .ideas__head > .lead { grid-column: 2; grid-row: 2; margin-top: 0; }
.ideas:not(.has-ideas) .ideas__head > .ideas__actions { grid-column: 2; margin-top: 18px; }

@media (max-width: 860px) {
  .radar-home__head, .ideas:not(.has-ideas) .ideas__head { grid-template-columns: minmax(0, 1fr); }
  .radar-home__lead, .ideas:not(.has-ideas) .ideas__head > .lead { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .ideas:not(.has-ideas) .ideas__head > .ideas__actions { grid-column: 1; }
}
@media (max-width: 760px) {
  /* a row to swipe through on a phone, like the plates; it scrolls inside itself, never the page */
  .radar-home .radar-list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .radar-home .radar-list::-webkit-scrollbar { display: none; }
  .radar-home .radar-row { scroll-snap-align: start; }
  .scenes__steps { padding-left: 26px; }
  .scene-step__num::before { left: -26px; }
}
@media (max-width: 640px) {
  /* a phone keeps its stars still, as it keeps the grain still: a full-screen layer in motion costs battery */
  .home-sky__stars--far { animation: none; }
}

/* ---------- calm settings: everything stands where it ends ---------- */
@media (prefers-reduced-motion: reduce) {
  /* as specific as the shown hour's rule, so its fade goes too */
  .home-sky__layer, .home-sky[data-mood] .home-sky__layer { transition: none; }
  .home-sky__stars--far { animation: none; }
  .radar-home .radar-row a { transition: none; }
  .radar-home .radar-row a:hover { transform: none; }
  .ring__card:hover .ring__face .ayling { animation: none; }
  .hub__wire, .hub__node, .scene-step__num::before { transition: none; }
  .scenes__steps::after { display: none; }
}