/* Page-to-page transitions, shared by every page.
   Cross-document View Transitions (Chrome, Edge, Safari 18.2+); other browsers just navigate normally.
   The header (logo, descriptor, nav, button) never moves or scales: it sits in the same spot on every page, so it simply swaps in place.
   Only the page content fades and lifts. (2026-10-16: the logo used to morph between pages, which read as a zoom / jump.) */
@view-transition{navigation:auto}
html{background:#050505}
header.top{view-transition-name:site-header}

/* 2026-10-17 (Nik: nothing should jump, everything fixed and smooth): the page no longer lifts out and rises in; it is a plain soft
   cross-fade, so the background, the header and anything pinned to the window stay exactly where they are */
::view-transition-old(root){animation:vt-fade .35s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-show .5s cubic-bezier(.4,0,.2,1) .08s both}
/* the page-index rail (Sponsorship, Hospitality, About) is its own layer: between two pages that have it, it stays put and only its labels cross-fade */
.pix{view-transition-name:page-index}
::view-transition-group(page-index){animation-duration:.45s}
::view-transition-group(site-header){animation:none}
::view-transition-old(site-header){animation:none;opacity:0}
::view-transition-new(site-header){animation:none}
/* coming from the home page: its logo leaves in place */
::view-transition-group(site-logo),::view-transition-group(site-desc),::view-transition-group(site-cta){animation:none}
/* 2026-10-17: the home logo and descriptor sit exactly where the new header draws them, so they stay fully on top until the new page
   is in place and then drop out in one frame: no dimming cross-fade, no gap while the header logo loads */
/* 2026-10-20: the home logo and descriptor are now the very same file, text and spot as the inner header, and the logo image is already
   loaded, so the old snapshot is dropped at once: holding it showed Safari's snapshot text (a touch bolder) before the live header */
::view-transition-old(site-logo),::view-transition-old(site-desc){animation:none;opacity:0}
::view-transition-old(site-cta){animation:vt-fade .25s ease both}
@media (min-width:1181px){::view-transition-old(site-cta){animation:vt-hold .55s linear both}}
@keyframes vt-hold{0%,99%{opacity:1}100%{opacity:0}}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}
@keyframes vt-fade{to{opacity:0}}

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

/* in-page links (What we arrange ↓, Sports we cover ↓, menu anchors) glide instead of jumping, and stop below the sticky header */
html{scroll-behavior:smooth;scroll-padding-top:112px}
@media (max-width:767px){html{scroll-padding-top:84px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* phones: a quicker, lighter page change (fade only, no lift): smoother on mobile Safari and Chrome */
@media (max-width:767px){
  ::view-transition-old(root){animation:vt-fade .2s ease both}
  ::view-transition-new(root){animation:vt-show .28s ease both}
}
@keyframes vt-show{from{opacity:0}}

/* 2026-10-20: after a page change the pointer is often resting where the old page's link was. Hover effects wait until the mouse
   actually moves (nav.js clears html.still), so the cards under it do not flash their sheen and zoom the moment the page appears. */
@media (hover:hover){html.still body :not(header.top):not(header.top *){pointer-events:none}}