/* transitions.css — v3 page transitions (spec §4.2 #4), progressive enhancement only.
   Cross-document View Transitions: browsers without support simply load the next page (no JS involved).
   Default: a 700 ms ink wipe. The old page lifts away over the ink ground with the slate mark at the centre,
   the new page wipes up from the bottom. The header keeps its own name (dn-hd) so it stays put while the page changes.
   Shared element: a work tile and its case hero carry the same name, style="view-transition-name:film-<slug>",
   and the tile grows into the hero. Names must be unique on a page. Reduced motion: no transition at all. */
@view-transition{navigation:auto}

::view-transition{background:#0A0A0A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -96 1272 702'%3E%3Cg fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M0,132H600V340A260,260 0 0 1 340,600H0Z M130,262H470V340A130,130 0 0 1 340,470H130Z'/%3E%3Crect width='600' height='120'/%3E%3C/g%3E%3Cg fill='%230A0A0A'%3E%3Cpolygon points='142.4,144 200.4,144 138,240 80,240'/%3E%3Cpolygon points='262.4,144 320.4,144 258,240 200,240'/%3E%3Cpolygon points='382.4,144 440.4,144 378,240 320,240'/%3E%3Cpolygon points='502.4,144 560.4,144 498,240 440,240'/%3E%3Cpolygon points='80,12 138,12 200.4,108 142.4,108'/%3E%3Cpolygon points='200,12 258,12 320.4,108 262.4,108'/%3E%3Cpolygon points='320,12 378,12 440.4,108 382.4,108'/%3E%3Cpolygon points='440,12 498,12 560.4,108 502.4,108'/%3E%3C/g%3E%3Cpath fill='%23E1251B' d='M640,600V0H770L1030,400V0H1122V38H1160V600H1030L770,200V600Z'/%3E%3C/svg%3E") center/88px auto no-repeat}

::view-transition-old(root){animation:dn-vt-out 380ms cubic-bezier(.83,0,.17,1) both}
::view-transition-new(root){animation:dn-vt-in 380ms cubic-bezier(.83,0,.17,1) 320ms both}
@keyframes dn-vt-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes dn-vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* the header persists (cross-fades only if its state differs) */
::view-transition-group(dn-hd){animation-duration:380ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}

/* shared film element: tile → case hero */
::view-transition-group(*.dn-film){animation-duration:700ms;animation-timing-function:cubic-bezier(.83,0,.17,1)}
::view-transition-old(*.dn-film),::view-transition-new(*.dn-film){height:100%;object-fit:cover}

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