/* transitions (loaded last)
   1. (what makes this different moved to band.css)
   2. transition stages: short starfield bands between the big parts
   3. the Magic Move layer: real elements lifted out of one part and set down in the next
   4. tone: the replay joins the starfield so paper and dark bands alternate */

/* =========================================================
   1. what makes this different: now in band.css (the three-beat explainer)
   ========================================================= */

/* =========================================================
   2. transition stages
   ========================================================= */
/* a short starfield band between two paper parts: the moving element crosses it */
.tr-stage { position: relative; height: clamp(120px, 16vh, 168px); background: var(--dark); }
@media (max-width: 620px) { .tr-stage { height: 112px; } }
@media (prefers-reduced-motion: reduce) { .tr-stage { display: none; } }
/* the parts on either side of a stage keep only a short approach to it (together about one section
   gap), so the band reads as one crossing, not as a screen of empty space. #one-tip's own bottom
   padding lives in tip.css. */
main > section:has(+ .tr-stage) { padding-bottom: clamp(40px, 4vw, 56px); }
main > .tr-stage + section { padding-top: clamp(48px, 5vw, 72px); }

/* =========================================================
   3. the Magic Move layer
   ========================================================= */
.tr-layer { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; contain: strict; }
.tr-g { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; visibility: hidden; }
.tr-g.is-on { visibility: visible; }
.tr-g > i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; overflow: hidden; font-style: normal; }
.tr-g img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-g.is-frame { border-radius: 4px; box-shadow: 0 16px 34px -18px oklch(0 0 0 / .55), 0 0 0 1px oklch(1 0 0 / .08); }
.tr-g.is-screen { border-radius: var(--r-s); box-shadow: 0 24px 48px -26px oklch(0 0 0 / .6); }
.tr-g.is-chip { box-shadow: 0 12px 24px -14px oklch(0 0 0 / .55); }
.tr-g.is-chip > i { overflow: visible; }
.tr-g .ic { width: 45%; height: 45%; }
.tr-g em { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-dark); font: 500 var(--t-label)/22px var(--mono); text-align: center; font-style: normal; box-shadow: 0 0 0 2px var(--paper); }
.tr-g.is-loop em { background: var(--card); color: var(--signal-ink); box-shadow: 0 0 0 1px oklch(0.52 0.105 80 / .25); }
/* the real element waits (or has left) while its double is in flight */
.tr-off { opacity: 0 !important; transition: none !important; }

/* =========================================================
   4. tone: the replay on the starfield
   ========================================================= */
.replay[data-dark] { background: var(--dark); color: var(--on-dark-2); }
.replay[data-dark] .rp-title h2 { color: var(--on-dark); }
.replay[data-dark] .rp-title > p:last-child { color: var(--on-dark-2); }
.replay[data-dark] .rp-stats li { border-color: var(--dark-line); box-shadow: none; }
.replay[data-dark] .rp-stats b { color: var(--on-dark); }
.replay[data-dark] .rp-stats span { color: var(--on-dark-soft); }
.replay[data-dark] .rp-deck { box-shadow: 0 0 0 1px oklch(1 0 0 / .06), 0 40px 80px -48px oklch(0 0 0 / .8); }