/* TV phase transitions (View Transitions API). display.js sets html[data-phase-transition]
   for one transition, then removes it. "old" is a still picture of the screen that is
   leaving; "new" is the live next phase, already running underneath. Phones don't load this. */
html[data-phase-transition]::view-transition-group(root) { animation:none; }
html[data-phase-transition]::view-transition-image-pair(root) { isolation:isolate; }
html[data-phase-transition]::view-transition-old(root),
html[data-phase-transition]::view-transition-new(root) { mix-blend-mode:normal; animation-fill-mode:both; }

/* Page turn (default): the sheet lifts, then is flicked off to the right like turning a
   right-to-left notebook page; the next page settles up from underneath. */
html[data-phase-transition="page-turn"]::view-transition-old(root) {
  z-index:2; transform-origin:0% 100%;
  filter:drop-shadow(-16px 12px 22px #6b573347);
  animation:phase-page-turn-old 720ms cubic-bezier(.55,0,.75,.45) both;
}
html[data-phase-transition="page-turn"]::view-transition-new(root) {
  z-index:1;
  animation:phase-page-turn-new 720ms cubic-bezier(.2,.7,.3,1) both;
}

/* Paper drop (scoreboard, final, back to lobby): a fresh sheet is slapped down on top. */
html[data-phase-transition="paper-drop"]::view-transition-old(root) {
  z-index:1;
  animation:phase-drop-old 680ms cubic-bezier(.3,.6,.4,1) both;
}
html[data-phase-transition="paper-drop"]::view-transition-new(root) {
  z-index:2; transform-origin:50% 0%;
  filter:drop-shadow(0 18px 26px #6b573347);
  animation:phase-drop-new 680ms cubic-bezier(.25,.8,.3,1) both;
}

/* Fly away (lobby → intro): the lobby sheet is tossed off the desk so the intro can start. */
html[data-phase-transition="fly-away"]::view-transition-old(root) {
  z-index:2; transform-origin:60% 40%;
  animation:phase-fly-away 560ms cubic-bezier(.5,0,.8,.35) both;
}
html[data-phase-transition="fly-away"]::view-transition-new(root) { z-index:1; animation:none; }

/* Fade: same layout on both sides (vote → reveal), after the intro's own exit, or a sub-step. */
html[data-phase-transition="fade"]::view-transition-old(root) { z-index:2; animation:phase-fade-out 280ms ease-out both; }
html[data-phase-transition="fade"]::view-transition-new(root) { z-index:1; animation:none; }

/* Only transform and opacity animate, so weak TV GPUs can keep these on the compositor. */
@keyframes phase-page-turn-old {
  0% { transform:none; }
  18% { transform:translate(-1.2%,-1%) rotate(-.8deg) scale(1.01); }
  100% { transform:translate(112%,6%) rotate(11deg) scale(1.02); }
}
@keyframes phase-page-turn-new {
  0%,15% { transform:scale(.955); opacity:.78; }
  100% { transform:none; opacity:1; }
}
@keyframes phase-drop-old {
  0%,40% { transform:none; opacity:1; }
  100% { transform:scale(.97); opacity:.72; }
}
@keyframes phase-drop-new {
  0% { transform:translateY(-104%) rotate(-3deg); }
  58% { transform:translateY(0) rotate(.6deg) scale(1.012,.985); }
  76% { transform:translateY(-1.4%) rotate(-.3deg) scale(.996,1.008); }
  90% { transform:translateY(0) scale(1.003,.998); }
  100% { transform:none; }
}
@keyframes phase-fly-away {
  0% { transform:none; opacity:1; }
  20% { transform:scale(.97) rotate(.8deg); opacity:1; }
  100% { transform:translate(-18%,-22%) scale(1.18) rotate(-9deg); opacity:0; }
}
@keyframes phase-fade-out { to { opacity:0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}