/*
  styles/motion.css
  ─────────────────
  The reveal — the soft rise-and-fade that content does as it comes into frame.

  ONE DEFINITION, LOADED BY BOTH THE SPINE AND THE TWELVE BRANCH PAGES.

  Why this file exists rather than a copy in each stylesheet: it started as a copy
  in styles/branch.css only, which is why Matt saw the movement on Equelle and
  Queen V and not on the main spine — the spine had NO reveal mechanism at all.
  Zero references to fade-up or fadeInUp in index.html or styles/spine.css.

  V1 had it. Its bundle defined `@keyframes fadeInUp` (24px rise) and `@keyframes
  fadeIn`, and neither survived the port. So the spine losing its entrance motion
  was a regression, not a decision — and it is the same root cause as two of the
  four perspective teasers appearing dead, because those two never had bespoke
  animation and the general reveal was the only motion they ever had.

  Duplicating this in two stylesheets is precisely the trap this project keeps
  falling into — a shared rule declared twice, drifting, with the later copy
  quietly winning. So there is one copy, here, and both consumers link it.

  Values are the branch pages' existing ones, kept deliberately: 32px of travel
  over 0.8s. They are what Matt already likes on Equelle and Queen V, so the
  spine is being brought TO them rather than everything being renegotiated.

  Driven by lib/reveal.js, which adds .visible. CSS alone cannot do this — the
  trigger is "has this scrolled into frame", which needs an observer.
*/

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Someone who has asked for less motion gets the content, not the movement.
   Note it must still be VISIBLE — an un-revealed .fade-up is opacity:0, so
   simply disabling the transition would leave the page blank for them. */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-up.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}