/* BETEB POLISH (2026-10-26, Callum: "the website has to feel sick so every action button visual has to match ... each page
   super clean in terms of load speed showing its loading not lag or breaks"). One file, every page, loaded last.
   1 page transitions  2 press feedback on every control  3 focus rings  4 tab content fades in  5 skeleton loaders
   6 the top progress bar (polish.js drives it). Everything respects prefers-reduced-motion. */

/* 1. cross-document view transitions: pages crossfade; the nav bar is its own layer so it holds still */
@view-transition { navigation: auto; }
nav[data-astro-cid-m7axtq72] { view-transition-name: beteb-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
::view-transition-new(root) { animation-name: bpIn; }
::view-transition-old(root) { animation-name: bpOut; }
@keyframes bpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bpOut { to { opacity: 0; } }

/* 2. every control answers a press */
:where(button, [role="button"], [role="tab"], select, summary, .i4-tab, .sport-tab-btn, .view-btn, .ph-tile, .ph-hit, .ph-lead, .pv-cta a,
  .ih-tile, .ih-hit, .ih-sports a, .ih-tabs button, .ih-back, .claim-btn, .ocb-cta, .nav-drawer-cta, [class*="-btn"], [class*="btn-"], .chip, .pill) {
  transition: transform .12s cubic-bezier(.2,.7,.2,1), background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
:where(button, [role="button"], [role="tab"], .i4-tab, .sport-tab-btn, .view-btn, .ih-tabs button, .claim-btn, .ocb-cta, .nav-drawer-cta,
  [class*="-btn"], [class*="btn-"], .chip, .pill, .pv-cta a, .ph-go):not(:disabled):active { transform: translateY(1px) scale(.97); }
:where(.ph-tile, .ih-tile, .ph-lead):active { transform: translateY(0) scale(.99); }
:where(.ph-hit, .ih-hit, .ih-sports a):active { transform: scale(.99); }
a { -webkit-tap-highlight-color: transparent; }

/* 3. one focus ring, keyboard only */
:where(a, button, [role="button"], [role="tab"], select, input, textarea, summary):focus-visible {
  outline: 2px solid #E7B937; outline-offset: 3px; border-radius: 6px;
}

/* 4. a tab's content fades up when it is shown (display none -> shown restarts the animation) */
#page-main .i4-view, .f1dd-panel { animation: bpView .24s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bpView { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 5. skeleton loaders: shaped like the content that is coming, with a moving sheen */
.bp-sk { position: relative; overflow: hidden; background: #2B2A27; border-radius: 12px; }
.bp-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 45%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.06) 55%, transparent);
  animation: bpSheen 1.25s ease-in-out infinite; }
@keyframes bpSheen { to { transform: translateX(100%); } }
.bp-skwrap { display: grid; gap: 12px; padding: 4px 0 8px; width: 100%; }
.bp-skwrap .bp-sk.h { height: 22px; width: 38%; border-radius: 8px; }
.bp-skwrap .bp-sk.c { height: 132px; }
.bp-skwrap .bp-sk.r { height: 54px; }
.bp-skrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bp-skrow .bp-sk { height: 92px; }
.bp-sklabel { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 0;
  font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: rgba(231,185,55,.85); }
.bp-sklabel i { width: 7px; height: 7px; border-radius: 50%; background: #E7B937; animation: bpPulse 1s ease-in-out infinite; }
@keyframes bpPulse { 50% { opacity: .25; transform: scale(.7); } }
/* light Intel cards get a light skeleton */
#page-main .i4-ph .bp-sk, #page-main .bz-card .bp-sk { background: rgba(28,27,25,.07); }
#page-main .i4-ph .bp-sk::after, #page-main .bz-card .bp-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent); }
.i4-ph.bp-skel { display: block !important; min-height: 0 !important; padding: 18px !important; text-align: left !important; }
.i4-ph.bp-skel .i4sp { display: none !important; }
.bp-skel .i4tx, .bp-skel .i4sub { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#bb-loading.bp-skel { padding: 8px 0 0; }
#bb-loading.bp-skel .bbl-spin, #bb-loading.bp-skel .bbl-t { display: none !important; }

/* 5b. an Intel tab that is still loading holds a screen of height, so the offers belt and ticker under it start below the
   fold instead of being shoved off it when the content lands (tennis measured CLS 0.345 from exactly that) */
/* 2026-10-26 fix (Callum: racing Profiles, "the bar with the tips scrolling is midway"): only a placeholder in the
   tab being VIEWED holds the frame open; an unopened tab (Tracker keeps "Opening track record...") held every tab
   at 105vh and left the picks ticker floating mid-box */
#page-main .i4-frame:has(.i4-loading:not(.i4-view:not(.on) *)), #page-main .i4-frame:has(.i4-ph:not(.i4-view:not(.on) *)) { min-height: 105vh; }

/* 6. the top progress bar */
#bp-bar { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 2147483000; pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, #C9A84C, #E7B937, #FFE08A); box-shadow: 0 0 10px rgba(231,185,55,.6); opacity: 0;
  view-transition-name: bp-bar; }
#bp-bar.go { opacity: 1; transform: scaleX(.85); transition: transform 2.2s cubic-bezier(.1,.6,.2,1), opacity .15s ease; }
#bp-bar.done { opacity: 0; transform: scaleX(1); transition: transform .2s ease, opacity .3s ease .15s; }

@media (max-width: 640px) { .bp-skrow { grid-template-columns: 1fr 1fr; } .bp-skrow .bp-sk:nth-child(3) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  #page-main .i4-view, .f1dd-panel { animation: none; }
  .bp-sk::after, .bp-sklabel i { animation: none; }
  :where(button, [role="button"], [role="tab"], .i4-tab):active { transform: none; }
}