/* =====================================================================
   GOOOlive — motion.css
   Light, purposeful motion. Everything is neutralised by the
   prefers-reduced-motion rule already present in main.css.
   ===================================================================== */

/* Smooth cross-page transitions (Chrome/Edge/Safari; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.28s; }

/* ---------- Scroll reveal ---------- */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--rv-d,0ms);}
.rv.in{opacity:1; transform:none;}

/* ---------- Rows entering (tab switch / re-render) ---------- */
@keyframes rowIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.row-in{animation:rowIn .42s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 38ms);}

/* ---------- Goal! ---------- */
@keyframes goalGlow{
  0%{background:transparent; box-shadow:inset 0 0 0 0 transparent;}
  12%{background:color-mix(in srgb,var(--gold) 24%,transparent); box-shadow:inset 4px 0 0 0 var(--gold);}
  100%{background:transparent; box-shadow:inset 0 0 0 0 transparent;}
}
@keyframes goalPop{
  0%{opacity:0; transform:translateY(-50%) scale(.4);}
  12%{opacity:1; transform:translateY(-50%) scale(1.12);}
  20%{transform:translateY(-50%) scale(1);}
  82%{opacity:1;}
  100%{opacity:0; transform:translateY(-50%) scale(.9);}
}
.gl-goal{position:relative; animation:goalGlow 3s ease both;}
.gl-goal::after{content:attr(data-goal); position:absolute; top:50%; inset-inline-end:12px; z-index:3; pointer-events:none;
  background:var(--gold); color:#101d31; font-weight:900; font-size:11px; padding:4px 10px; border-radius:999px;
  box-shadow:0 6px 18px rgba(255,176,32,.45); animation:goalPop 3s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes scorePop{ 0%{transform:scale(1);} 40%{transform:scale(1.45); color:var(--gold);} 100%{transform:scale(1);} }
.score-pop{display:inline-block; animation:scorePop .7s cubic-bezier(.2,1.6,.4,1);}

/* ---------- Sliding tab indicator ---------- */
.live-tabs{position:relative;}
.live-tabs .tab-ind{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--blue);
  box-shadow:0 6px 18px color-mix(in srgb,var(--blue) 32%,transparent); z-index:0; pointer-events:none;
  transform:translateX(var(--x,0)); transition:transform .4s cubic-bezier(.3,1.25,.5,1), width .4s cubic-bezier(.3,1.25,.5,1);}
.live-tabs.has-ind button{position:relative; z-index:1; background:transparent !important; box-shadow:none !important; transition:color .25s;}
.live-tabs.has-ind button.active{color:#fff;}

/* ---------- Skeletons ---------- */
@keyframes skShimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
.sk{display:block; border-radius:6px; background:linear-gradient(90deg,var(--bg-elev-2) 25%,var(--bg-hover) 37%,var(--bg-elev-2) 63%);
  background-size:400% 100%; animation:skShimmer 1.4s ease infinite;}
.sk-min{width:30px; height:18px; flex-shrink:0;}
.sk-line{height:10px; margin:5px 0; width:80%;}
.sk-line.short{width:45%;}
.sk-big{height:42px; width:60%; margin:12px auto;}
.sk-btn{height:32px; width:100%; border-radius:999px; margin-top:10px;}
.sk-card{align-items:center; gap:6px; min-height:190px;}
.sk-row .teams{flex:1;}

/* ---------- Header ---------- */
@media (min-width:761px){
  header .header-row{transition:height .25s ease;}
  body.scrolled header .header-row{height:62px;}
}

/* ---------- Featured news: crossfade + Ken Burns ---------- */
.news-feature .nf-bg{opacity:0; transition:opacity .9s ease;}
.news-feature .nf-bg.active{opacity:.55; animation:kenBurns 9s ease-out both;}
.news-feature:hover .nf-bg.active{opacity:.63;}
.news-feature:hover .nf-bg:not(.active){opacity:0;}
@keyframes kenBurns{ from{transform:scale(1.12);} to{transform:scale(1);} }
@keyframes nfIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.news-feature .nf-slide.active{animation:nfIn .6s cubic-bezier(.2,.8,.2,1) both;}

/* ---------- League cards: shine + logo bounce ---------- */
.band-lg{position:relative; overflow:hidden;}
.band-lg::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); transform:skewX(-18deg); transition:left .75s ease;}
.band-lg:hover::after{left:130%;}
.band-lg .league-logo, .lg-chips .league-logo{transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
.band-lg:hover .league-logo{transform:scale(1.14) rotate(-4deg);}

/* ---------- Match header ---------- */
@keyframes mhIn{ from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;} }
.mh-team.enter{animation:mhIn .6s cubic-bezier(.2,.8,.2,1) both;}
.mh-team.enter:last-child{animation-delay:.08s;}
.mh-center.enter{animation:mhIn .6s .04s cubic-bezier(.2,1.3,.4,1) both;}

/* ---------- Drawer items ---------- */
.drawer-nav > a, .drawer-nav > .nav-dd{opacity:0; transform:translateX(24px); transition:opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 35ms + 80ms);}
.drawer.open .drawer-nav > a, .drawer.open .drawer-nav > .nav-dd{opacity:1; transform:none;}

/* ---------- 404 ball ---------- */
@keyframes bounceBall{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);} }
.nf-code span{animation:bounceBall 1.6s cubic-bezier(.3,0,.3,1) infinite;}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important; transform:none !important;}
  .news-feature .nf-bg.active{animation:none;}
}