/* ═══ Motion ═════════════════════════════════════════════════════════════
   One authored moment, native to the world: a notice being set, then
   stamped. The section rule draws, the type settles behind it, the
   availability stamp lands once.

   Everything here is gated twice. Without JavaScript the `js` class is never
   set and no element is ever hidden. With `prefers-reduced-motion: reduce`
   the hidden states are never declared, so content renders at rest.        */

@media (prefers-reduced-motion: no-preference) {

  /* ── The rule draws ──────────────────────────────────────────────────
     Length-weighted: a full-width section rule takes longer than the short
     rule over a masthead register.                                        */

  .js .sec__head,
  .js .foot__head {
    position: relative;
    border-top-color: transparent;
  }

  .js .sec__head::before,
  .js .foot__head::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: var(--rule-strong);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .js .foot__head::before { background: var(--paper); }

  .js .sec__head.is-in::before,
  .js .foot__head.is-in::before {
    transform: scaleX(1);
    transition: transform var(--dur-rule) var(--ease-rule);
  }

  /* ── Type settles ────────────────────────────────────────────────────
     Distance and duration are set by visual weight, not applied uniformly.
     Heavy elements travel a short way over a longer period, the way a large
     object settles; small metadata is quick and covers more ground.       */

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
  }

  .js [data-reveal='heavy']  { transform: translateY(7px); }
  .js [data-reveal='light']  { transform: translateY(15px); }
  .js [data-reveal='rail']   { transform: translateX(-10px); }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-enter) var(--ease-out),
      transform var(--dur-enter) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
  }

  .js [data-reveal='heavy'].is-in {
    transition-duration: 760ms;
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js [data-reveal='light'].is-in {
    transition-duration: 480ms;
    transition-delay: calc(var(--i, 0) * 38ms);
  }

  /* ── The stamp lands ─────────────────────────────────────────────────
     The one scale move on the page. From 0.97, never from zero: nothing in
     the physical world appears out of nothing.                            */

  .js .stamp {
    opacity: 0;
    transform: scale(0.97);
    transform-origin: left center;
  }

  .js .stamp.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 320ms var(--ease-out) 380ms,
      transform 320ms var(--ease-out) 380ms;
  }

  /* ── The time axis draws down ────────────────────────────────────── */

  .js .time__body {
    border-left-color: transparent;
    background-image: linear-gradient(var(--rule), var(--rule));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1px 0%;
  }

  .js .time__entry--now .time__body {
    background-image: linear-gradient(var(--stamp), var(--stamp));
  }

  .js .time__body.is-in {
    background-size: 1px 100%;
    transition: background-size 700ms var(--ease-rule) 120ms;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────
   Not zero motion: colour and opacity feedback survives, movement does
   not. Nothing here ever hides content.                                  */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Touch ─────────────────────────────────────────────────────────────
   Hover styles live behind (hover: hover) in the other sheets so a tap
   never leaves an element stuck in its hover state.                      */