/* Page transition: Osmo's "page name wipe" (Barba.js boilerplate, pasted 2026-09-24) with the UGC wordmark on
   white in place of the page name, at the hero wordmark's size and colour. Done with the browser's own
   cross-document view transitions instead of Barba, because every page on this site carries its own CSS and JS
   and Barba only swaps the page body. Same timeline and the same "osmo" ease (0.625, 0.05, 0, 1):
     0 to 0.8s      the white panel slides up from below and covers the screen, the old page drifts up 15vh,
                    and the wordmark fades in from 0.2s
     1.25 to 2.25s  the panel carries on up and off, the new page rises from 15vh into place underneath,
                    and the wordmark fades out from 1.35s
   The panel is an element page-transition.js adds to the incoming page only while a transition runs; it gets
   its own view-transition layer above both pages. Linked from every page; both pages must opt in. Browsers
   without cross-document view transitions (Firefox today) simply navigate, and so does reduced motion, as in
   Osmo's boilerplate. (Osmo's parallax and stacked-cards transitions were tried on 2026-09-24 and taken out.) */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto }
}

::view-transition{ background:#fff }

::view-transition-old(root),
::view-transition-new(root){ mix-blend-mode:normal }

/* the page you leave drifts up under the panel */
::view-transition-old(root){ animation:pt-drift .8s cubic-bezier(0.625, 0.05, 0, 1) both }

/* the page you open stays hidden while the panel covers the screen, then rises from 15vh as the panel lifts */
::view-transition-new(root){
  animation:
    pt-wait 1.25s linear,
    pt-rise 1s cubic-bezier(0.625, 0.05, 0, 1) 1.25s both;
}

/* the panel: up from below to cover the screen, a hold, then up and off the top */
::view-transition-group(pt-panel){
  z-index:10;
  animation:
    pt-cover .8s cubic-bezier(0.625, 0.05, 0, 1) both,
    pt-lift 1s cubic-bezier(0.625, 0.05, 0, 1) 1.25s forwards;
}
::view-transition-new(pt-panel){ animation:none; mix-blend-mode:normal }

@keyframes pt-drift{ from{ transform:translateY(0) } to{ transform:translateY(-15vh) } }
@keyframes pt-wait{ from, to{ opacity:0 } }
@keyframes pt-rise{ from{ transform:translateY(15vh) } to{ transform:translateY(0) } }
@keyframes pt-cover{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@keyframes pt-lift{ from{ transform:translateY(0) } to{ transform:translateY(-100%) } }

/* The panel element itself. The view transition draws it live, so the wordmark's fades below run on the element.
   It hides itself at 2.2s, when the panel is already off the top, so the real element never shows for a frame
   between the end of the transition and page-transition.js removing it. */
.pt-panel{
  position:fixed; inset:0; z-index:2147483647; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#24363f;   /* the hero wordmark's ink (--ink on the homepage) */
  view-transition-name:pt-panel;
  animation:pt-gone 0s linear 2.2s forwards;
}
.pt-logo{
  /* the hero wordmark's size: the homepage sets it in Playball at --fs-brand, min(clamp(80px, 16.667vw, 240px), 26svh),
     and this SVG of the same letters draws the same ink width at 2.35 times that (measured at 390, 1280 and 1440) */
  display:block; width:calc(2.35 * min(clamp(80px, 16.667vw, 240px), 26svh)); opacity:0;
  animation:
    pt-logo-in .6s cubic-bezier(0.625, 0.05, 0, 1) .2s forwards,
    pt-logo-out .4s cubic-bezier(0.625, 0.05, 0, 1) 1.35s forwards;
}
.pt-logo svg{ display:block; width:100%; height:auto }

@keyframes pt-gone{ to{ visibility:hidden } }
@keyframes pt-logo-in{ to{ opacity:1 } }
@keyframes pt-logo-out{ from{ opacity:1 } to{ opacity:0 } }