/* page-to-page transition (home <-> order): a burgundy sheet with a flat top rises from the bottom, holds with the gold
   emblem in the middle while the new page swaps in underneath, then leaves off the top showing its curved bottom edge.
   Cross-document view transitions where supported; a short fade (transition.js) elsewhere. */
@view-transition{navigation:auto}
/* z-index: view-transition groups paint in their elements' paint order, so the sheet must sit above the sticky header and bottom bar */
html::after{content:"";position:fixed;inset:0;z-index:2147483647;pointer-events:none;view-transition-name:wipe}
/* the sheet: wider than the screen so the ends of the curve stay off-screen, taller so the curve hangs below it while it covers */
::view-transition-group(wipe){width:124vw;height:125vh;background:#7A1F2B;border-radius:0 0 50% 50%/0 0 20% 20%;animation:vt-wipe 1.5s both}
::view-transition-old(wipe),::view-transition-new(wipe){display:none}
/* the emblem rides in the sheet, centred on the screen while it holds (40% of 125vh = the middle of the screen);
   the file is gold, so it is used as a mask over white */
::view-transition-image-pair(wipe){background:#fff;-webkit-mask:url(/img/brand/emblem.svg) no-repeat 50% 40%/clamp(64px,22vw,96px);mask:url(/img/brand/emblem.svg) no-repeat 50% 40%/clamp(64px,22vw,96px);animation:vt-logo 1.5s both}
::view-transition-old(root){animation:vt-old .01s linear .75s both reverse}
::view-transition-new(root){animation:vt-new .01s linear .75s both}
/* 1.5s = 0.7s up, a short hold with the screen covered (the page swaps underneath at 0.75s), 0.7s off the top */
@keyframes vt-wipe{
  0%{transform:translate(-12vw,100vh);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  46.67%{transform:translate(-12vw,0)}
  53.33%{transform:translate(-12vw,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  100%{transform:translate(-12vw,-125vh)}
}
/* glows in as the sheet arrives, brightest while it holds, fades as it rides off */
@keyframes vt-logo{
  0%,26%{opacity:0;transform:scale(.8) rotate(-8deg)}
  59%{opacity:1;transform:none}
  92%,100%{opacity:0;transform:scale(1.06) rotate(4deg)}
}
@keyframes vt-old{from{opacity:0}to{opacity:1}}
@keyframes vt-new{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  ::view-transition-group(wipe){display:none}
}
/* fallback (no view transitions): fade the page out on leave, in on arrival */
html.pg-leaving body{opacity:0;transition:opacity .28s ease}
@supports not selector(::view-transition){
  body{animation:pg-in .5s ease both}
  @keyframes pg-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){html.pg-leaving body{transition:none}body{animation:none!important}}