/* mononews — motion. Everything here is progressive: content is fully visible without it,
   and prefers-reduced-motion: reduce gets crossfades only. Expo-out easing, no bounce. */

/* Cross-document view transitions: story titles and meters morph from listing to story page. */
@view-transition { navigation: auto; }
.row-title, .lead-title, .top-title, .story-title { view-transition-class: vt-title; }
.meter { view-transition-class: vt-meter; }
::view-transition-group(*) { animation-duration: 0.5s; animation-timing-function: var(--ease-out); }
::view-transition-old(root) { animation: 0.18s ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 0.42s var(--ease-out) 0.06s both vt-fade-in; }
::view-transition-old(*.vt-title), ::view-transition-new(*.vt-title) { height: 100%; object-fit: cover; object-position: left top; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; translate: 0 10px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
  ::view-transition-new(root) { animation: 0.2s ease-out both vt-fade-in-flat; }
  @keyframes vt-fade-in-flat { from { opacity: 0; } }
  .toast { transition: opacity 0.2s; translate: -50% 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Live pulse */
  .live-dot::after { animation: pulse-ring 2.4s var(--ease-out) infinite; }
  @keyframes pulse-ring { 0% { opacity: 0.75; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.7); } }

  /* One orchestrated front-page load: dateline, nameplate, dek, then the lead story. */
  .masthead-top, .nameplate, .masthead-dek, .masthead-stats, .lead, .front-changes { animation: rise 0.9s var(--ease-out) both; }
  .nameplate { animation-delay: 0.06s; }
  .masthead-dek { animation-delay: 0.16s; }
  .masthead-stats { animation-delay: 0.24s; }
  .lead { animation-delay: 0.3s; }
  .front-changes { animation-delay: 0.42s; }
  .story-head > * { animation: rise 0.8s var(--ease-out) both; }
  .story-head > :nth-child(2) { animation-delay: 0.04s; }
  .story-head > :nth-child(3) { animation-delay: 0.1s; }
  .story-head > :nth-child(n + 4) { animation-delay: 0.16s; }
  @keyframes rise { from { opacity: 0; translate: 0 16px; } }

  /* Evidence meter: segments grow in, one after another */
  .meter .seg { animation: seg-in 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
  @keyframes seg-in { from { transform: scaleX(0); } }

  /* What changed: rows slide in, then the highlighter sweeps across the changed text */
  .chg { animation: chg-in 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .chg .hl { animation: hl-sweep 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms + 600ms); }
  .chg del { animation: strike 0.8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms + 600ms); }
  @keyframes chg-in { from { opacity: 0; translate: -10px 0; } }
  @keyframes hl-sweep { from { background-size: 0% 100%; } }
  @keyframes strike { from { text-decoration-color: transparent; } }
  .claim:target { animation: target-flash 1.6s var(--ease-out); }
  @keyframes target-flash { 0%, 30% { background-color: var(--brand-wash); } }

  /* Version timeline: dots pop in top to bottom; the current version rings once */
  .tl-dot { animation: dot-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 300ms); }
  .tl-item.is-current .tl-dot { animation: dot-in 0.5s var(--ease-out) 0.3s both, ring 1.8s var(--ease-out) 0.8s 2; }
  @keyframes dot-in { from { transform: scale(0); } }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

  /* District map: districts settle in from the centre outwards */
  .d { transform-box: fill-box; transform-origin: center; animation: d-in 0.8s var(--ease-out) both; }
  .d-mitte { animation-delay: 0.05s; }
  .d-friedrichshain-kreuzberg { animation-delay: 0.1s; }
  .d-tempelhof-schoeneberg, .d-pankow { animation-delay: 0.15s; }
  .d-charlottenburg-wilmersdorf, .d-neukoelln { animation-delay: 0.2s; }
  .d-lichtenberg, .d-reinickendorf { animation-delay: 0.25s; }
  .d-steglitz-zehlendorf, .d-treptow-koepenick { animation-delay: 0.3s; }
  .d-spandau, .d-marzahn-hellersdorf { animation-delay: 0.35s; }
  .d-labels { animation: fade 0.8s var(--ease-out) 0.5s both; }
  @keyframes d-in { from { opacity: 0; transform: scale(0.94); } }
  @keyframes fade { from { opacity: 0; } }

  /* About: a pulse travels the pipeline and each step lights up as it passes */
  .pipeline::after { animation: pipe-flow 7.2s linear infinite; }
  .step-node { animation: node-flash 7.2s linear infinite; animation-delay: calc(var(--i) * 0.76s); }
  @keyframes pipe-flow { 0% { top: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: calc(100% - 64px); opacity: 0; } }
  @keyframes node-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    3% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--brand) 28%, transparent); }
    12% { box-shadow: 0 0 0 0 transparent; }
  }

  .empty-meter span { animation: empty-breathe 2.4s ease-in-out infinite; }
  .empty-meter span:nth-child(2) { animation-delay: 0.3s; }
  .empty-meter span:nth-child(3) { animation-delay: 0.6s; }
  @keyframes empty-breathe { 50% { background: var(--field); } }
}

/* Scroll-driven: reading progress, ledger reveals, masthead drift. Only where supported. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { display: block; animation: progress linear both; animation-timeline: scroll(root block); }
    @keyframes progress { to { transform: scaleX(1); } }

    .claim, .src, .persp, .step, .corr, .row, .top, .plus-list li {
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    @keyframes reveal { from { opacity: 0.2; translate: 0 22px; } }

    .masthead-plate { animation: drift linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
    @keyframes drift { to { translate: 0 -48px; opacity: 0.3; } }
  }
}