/* ============================================================
   Still — image card
   Standalone stylesheet. No framework, no build step.
   Every visual value lives in the tokens at :root, so the card
   can be re-themed by editing this block alone.
   ============================================================ */

:root {
  /* Entrance motion — the upward fade-in */
  --rise: 60px;          /* how far the card travels upward */
  --duration: 1200ms;     /* how long the reveal takes */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Demo page chrome (delete freely; the card needs none of it) ---- */

/* ---- Upward entrance (reusable on any element) ----
   Add class="motion-upward" to cards, headings, paragraphs, images…
   script.js adds .appear each time the element scrolls into view.
   Optional per-element delay: data-motion-delay="150" (ms). */

.motion-upward {
  width: 100%;
  opacity: 0;
  transform: translateY(var(--rise));
}

.motion-upward.appear {
  animation: reveal var(--duration) var(--easing) both;
  animation-delay: var(--motion-delay, 0ms);
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- The demo image card (visual styling only) ---- */

/* ---- Replay control (optional) ---- */

/* ---- Responsive ---- */

/* ---- Accessibility: no motion for people who opt out ---- */