/*
 * Magic16 — page transitions. A quick cross-fade between pages via the View
 * Transitions API (with a class-driven fallback). Transform-only entrances so
 * nothing can ever get stuck invisible. Honors prefers-reduced-motion.
 */
.content { view-transition-name: page; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(page) { animation: m16-vt-out var(--page-dur) var(--ease) both; }
  ::view-transition-new(page) { animation: m16-vt-in var(--page-dur) var(--ease) both; }
  @keyframes m16-vt-out { to { opacity: 0; } }
  @keyframes m16-vt-in { from { opacity: 0; transform: translateY(6px); } }

  .content.is-leaving { animation: m16-fade-out var(--page-dur) var(--ease) both; }
  .content.is-entering { animation: m16-fade-in var(--page-dur) var(--ease) both; }
  @keyframes m16-fade-out { to { opacity: 0; } }
  @keyframes m16-fade-in { from { opacity: 0; } }

  /* Window opens with a tiny title-bar "unroll" on first paint */
  /* `backwards`, not `both`: a finished animation that kept filling left an identity transform on
     the window for the page's whole life — and any transform makes the window the containing
     block for `position: fixed` descendants (the Things I Love site takeover). */
  .window { animation: m16-open 220ms var(--ease) backwards; }
  @keyframes m16-open { from { opacity: 0; transform: scale(0.985); } }
}

/* ---- Named transitions (chosen per-page in the editor; data-vt on <html>) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* slide L→R */
  [data-vt="slide"] ::view-transition-old(page) { animation: m16-slide-out var(--page-dur) var(--ease) both; }
  [data-vt="slide"] ::view-transition-new(page) { animation: m16-slide-in var(--page-dur) var(--ease) both; }
  @keyframes m16-slide-out { to { opacity: 0; transform: translateX(-4%); } }
  @keyframes m16-slide-in { from { opacity: 0; transform: translateX(6%); } }

  /* zoom */
  [data-vt="zoom"] ::view-transition-old(page) { animation: m16-zoom-out var(--page-dur) var(--ease) both; }
  [data-vt="zoom"] ::view-transition-new(page) { animation: m16-zoom-in var(--page-dur) var(--ease) both; }
  @keyframes m16-zoom-out { to { opacity: 0; transform: scale(1.06); } }
  @keyframes m16-zoom-in { from { opacity: 0; transform: scale(0.92); } }

  /* flip */
  [data-vt="flip"] ::view-transition-old(page) { animation: m16-flip-out var(--page-dur) var(--ease) both; transform-origin: 50% 50%; }
  [data-vt="flip"] ::view-transition-new(page) { animation: m16-flip-in var(--page-dur) var(--ease) both; transform-origin: 50% 50%; }
  @keyframes m16-flip-out { to { opacity: 0; transform: perspective(900px) rotateY(-8deg); } }
  @keyframes m16-flip-in { from { opacity: 0; transform: perspective(900px) rotateY(10deg); } }

  /* pixel wipe (clip) */
  [data-vt="wipe"] ::view-transition-new(page) { animation: m16-wipe-in calc(var(--page-dur) + 120ms) steps(12, end) both; }
  @keyframes m16-wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page), ::view-transition-new(page) { animation: none; }
  .content.is-leaving, .content.is-entering, .window { animation: none; }
}