/* Motion shared by every page: M10 turn-and-take-apart and M11 blocks arriving (DESIGN.md §6, motion.js).
   Durations come only from the tokens. Without motion.js nothing here applies: [data-r] and .is-turning are set
   by the script. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-ui: 180ms;
  --dur-rise: 600ms;    /* M11 text rise */
  --dur-partial: 880ms; /* one partial refresh, measured at 20 MHz SPI; M11 art bands */
}

/* M10. The canvas covers the still render exactly; it shows only once the frame has moved off frame 0. */
[data-turn] picture { position: relative; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
[data-turn] picture img { -webkit-user-drag: none; }
[data-turn].is-dragging picture { cursor: grabbing; }
.turn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
[data-turn].is-turning .turn-canvas { visibility: visible; }
[data-turn].is-turning picture img { visibility: hidden; } /* the frames are transparent: the still must not show through */
[data-loop] picture { position: relative; display: block; }
[data-loop].is-turning .turn-canvas { visibility: visible; }
[data-loop].is-turning picture img { visibility: hidden; }
.turn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 92px; align-content: flex-start; } /* room for the hint and range motion.js adds, so nothing below shifts */
@media (min-width: 760px) { .turn-controls { min-height: 48px; } }
.turn-controls label { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.turn-controls input[type=range] { width: 180px; height: 44px; margin: 0; accent-color: var(--ink); }
.turn-range:has(input:disabled) { display: none; }
.turn-hint[hidden] { display: none; }
.inside-figure { margin: 0; }
.inside-figure picture { display: block; }
.inside-figure img { display: block; width: 100%; height: auto; }
.inside-figure figcaption { padding: 0 16px 8px; }

/* M11. Text rises 12 px and fades in; art is drawn top to bottom in 8 bands and never fades. */
[data-r="wait"] { opacity: 0; transform: translateY(12px); }
[data-r="wait"].paper { opacity: 0; transform: none; } /* pictures fade in; no top-to-bottom wipe (2026-11-05) */
[data-r="in"] {
  transition: opacity var(--dur-rise) var(--ease-out) var(--r-delay, 0ms), transform var(--dur-rise) var(--ease-out) var(--r-delay, 0ms);
}
[data-r="in"].paper {
  transition: opacity var(--dur-rise) var(--ease-out) var(--r-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}