/* Visual polish for Free Kick Masters and Penalty Shootout (see pitch-fx.js). */

/* Crowd: gentle bobbing all the time, a big wave when a goal goes in. */
svg .wv{animation:fxBob var(--bob,2.6s) ease-in-out infinite;}
@keyframes fxBob{0%,100%{transform:translateY(0);}50%{transform:translateY(calc(var(--amp,1.1px) * -1));}}
svg.fx-cheer .wv{--amp:5px;--bob:.5s;}
svg.fx-groan .wv{--amp:.3px;--bob:3.2s;}
svg.fx-groan .fx-crowd{filter:brightness(.8);}
svg .fx-crowd{transition:filter .4s ease;}

/* Overhead pitch (Matchday): units are metres, so the bob is much smaller. */
svg.fx-td .wv{--amp:.3px;}
svg.fx-td.fx-cheer .wv{--amp:1px;}
.fx-flood{animation:fxBeam 6s ease-in-out infinite;}
.fx-flood:nth-of-type(2n){animation-delay:-3s;}

/* Camera flashes in the stands. */
.fx-cam{fill:#fff;transform-box:fill-box;transform-origin:center;animation:fxFlash .5s ease-out forwards;}
@keyframes fxFlash{0%{opacity:1;transform:scale(.3);}35%{opacity:1;transform:scale(2.4);}100%{opacity:0;transform:scale(1);}}

/* Floodlight beams, light pool and twinkling lamps. */
.fx-beam{animation:fxBeam 5.5s ease-in-out infinite;}
.fx-beam.b{animation-delay:-2.7s;}
@keyframes fxBeam{0%,100%{opacity:.75;}50%{opacity:1;}}
.fx-pool{animation:fxBeam 7s ease-in-out infinite;}
.fx-twinkle{transform-box:fill-box;transform-origin:center;animation:fxTwinkle 2.8s ease-in-out infinite;}
@keyframes fxTwinkle{0%,100%{opacity:.25;transform:scale(.5) rotate(0);}50%{opacity:1;transform:scale(1.15) rotate(45deg);}}

/* Players keep moving while you line up the kick. */
.fx-idle{transform-box:fill-box;transform-origin:50% 100%;}
.fx-breathe{animation:fxBreathe 2.6s ease-in-out infinite;}
@keyframes fxBreathe{0%,100%{transform:scale(1,1);}50%{transform:scale(1.012,1.022);}}
.fx-pace{animation:fxPace 3.4s ease-in-out infinite;}
@keyframes fxPace{0%,100%{transform:translateX(-7px);}50%{transform:translateX(7px);}}
.fx-bounce{animation:fxBounce .9s ease-in-out infinite;}
@keyframes fxBounce{0%,100%{transform:translateY(0) scale(1,1);}50%{transform:translateY(-3px) scale(.99,1.03);}}
.fx-shuffle{animation:fxShuffle 1.9s ease-in-out infinite;}
@keyframes fxShuffle{0%,100%{transform:translateX(-1.6px) rotate(-.6deg);}50%{transform:translateX(1.6px) rotate(.6deg);}}
.fx-shot .fx-idle{animation:none;}

/* Aim marker and bonus target feel alive. */
#aim > circle:first-child{stroke-dasharray:6 4;transform-box:fill-box;transform-origin:center;animation:fxSpin 5s linear infinite;}
@keyframes fxSpin{to{transform:rotate(360deg);}}
#target-ring circle:nth-child(2){transform-box:fill-box;transform-origin:center;animation:fxPulse 1.1s ease-in-out infinite;}
@keyframes fxPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.45;}}

/* Ring under the ball before the kick. */
.fx-spot{fill:rgba(245,185,66,.12);stroke:#f5b942;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:fxSpot 1.4s ease-out infinite;}
@keyframes fxSpot{0%{transform:scale(.55);stroke-opacity:.9;}100%{transform:scale(1.7);stroke-opacity:0;}}

/* Stage overlays. */
.fx-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(7,5,10,.5) 100%);}
.fx-flash{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.85),rgba(255,236,170,.35) 45%,transparent 75%);}
.fx-flash.on{animation:fxGoalFlash .7s ease-out forwards;}
@keyframes fxGoalFlash{0%{opacity:0;}12%{opacity:1;}100%{opacity:0;}}
.fx-rays{position:absolute;left:50%;top:34%;width:150%;aspect-ratio:1;margin:0;transform:translate(-50%,-50%);pointer-events:none;z-index:2;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,90,110,.35) 0 8deg,transparent 8deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 62%);mask-image:radial-gradient(circle,#000 0,transparent 62%);}
.fx-rays.gold{background:repeating-conic-gradient(from 0deg,rgba(245,185,66,.45) 0 8deg,transparent 8deg 22deg);}
.fx-rays.on{animation:fxRays 1.8s ease-out forwards;}
@keyframes fxRays{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4);}20%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) rotate(40deg) scale(1.1);}}

/* Bigger, bouncier score words. */
.ps-pop{letter-spacing:.06em;}
.ps-pop.show{animation:popIn 1.5s cubic-bezier(.2,1.4,.4,1) forwards;}

@media (prefers-reduced-motion: reduce){
  svg .wv,.fx-beam,.fx-pool,.fx-twinkle,.fx-idle,#aim > circle:first-child,#target-ring circle:nth-child(2),.fx-spot,.fx-flash,.fx-rays{animation:none !important;}
}

/* Matchday close-up sits inside the main stage. */
.sp .fx-flash,.sp .fx-rays{z-index:3;}

/* Overhead pitch: keep the rays softer so the players stay easy to read. */
.md-stage .fx-rays.on{animation-name:fxRaysSoft;}
@keyframes fxRaysSoft{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4);}20%{opacity:.5;}100%{opacity:0;transform:translate(-50%,-50%) rotate(40deg) scale(1.1);}}

/* ================= More movement: menus, HUD, keeper, nets, Matchday ================= */

/* Screens slide in; lists and buttons rise one after another. */
.ps-card:not([hidden]){animation:psIn .42s cubic-bezier(.2,.8,.3,1) backwards;}
@keyframes psIn{from{opacity:0;transform:translateY(14px);}}
.fk-menu-btns .fk-mode,.md-modes .md-mode,.ps-how li,.md-teams .md-team{animation:psRise .5s cubic-bezier(.2,.9,.3,1) backwards;}
.fk-menu-btns .fk-mode:nth-child(1),.md-modes .md-mode:nth-child(1),.ps-how li:nth-child(1){animation-delay:.08s;}
.fk-menu-btns .fk-mode:nth-child(2),.md-modes .md-mode:nth-child(2),.ps-how li:nth-child(2){animation-delay:.16s;}
.fk-menu-btns .fk-mode:nth-child(3),.md-modes .md-mode:nth-child(3),.ps-how li:nth-child(3){animation-delay:.24s;}
.fk-menu-btns .fk-mode:nth-child(4),.md-modes .md-mode:nth-child(4),.ps-how li:nth-child(4){animation-delay:.32s;}
.md-teams .md-team:nth-child(2){animation-delay:.04s;}.md-teams .md-team:nth-child(3){animation-delay:.08s;}
.md-teams .md-team:nth-child(4){animation-delay:.12s;}.md-teams .md-team:nth-child(5){animation-delay:.16s;}
.md-teams .md-team:nth-child(6){animation-delay:.2s;}.md-teams .md-team:nth-child(n+7){animation-delay:.24s;}
.fk-season li:nth-child(-n+8),.md-fx:nth-child(-n+8){animation:psRise .45s cubic-bezier(.2,.9,.3,1) backwards;}
.fk-season li:nth-child(2),.md-fx:nth-child(2){animation-delay:.05s;}.fk-season li:nth-child(3),.md-fx:nth-child(3){animation-delay:.1s;}
.fk-season li:nth-child(4),.md-fx:nth-child(4){animation-delay:.15s;}.fk-season li:nth-child(n+5),.md-fx:nth-child(n+5){animation-delay:.2s;}
@keyframes psRise{from{opacity:0;transform:translateY(16px) scale(.97);}}

/* George on the start screens floats gently; the live chip pulses. */
.ps-avatar svg,.md-avatar svg{animation:psFloat 4.2s ease-in-out infinite;}
@keyframes psFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.ps-chip.now{animation:chipPulse 1.8s ease-in-out infinite;}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(202,14,40,.55);}50%{box-shadow:0 0 0 7px rgba(202,14,40,0);}}
.fk-xp-track span{background-size:200% 100%;animation:xpShine 3s linear infinite;}
@keyframes xpShine{to{background-position:-200% 0;}}

/* Scores pop, new dots bounce in, commentary slides in. */
.ps-bump{animation:psBump .55s cubic-bezier(.2,1.8,.4,1);display:inline-block;}
@keyframes psBump{0%{transform:scale(1);}35%{transform:scale(1.35);color:#f5b942;}100%{transform:scale(1);}}
.ps-dot.new{animation:dotPop .6s cubic-bezier(.2,1.9,.4,1);}
@keyframes dotPop{0%{transform:scale(0);}100%{transform:scale(1);}}
.ps-slide{animation:psSlide .4s ease-out;}
@keyframes psSlide{from{opacity:0;transform:translateX(-10px);}}
.ps-lock{animation:psLock .5s ease-out;}
@keyframes psLock{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9);}100%{box-shadow:0 0 0 14px rgba(255,255,255,0);}}

/* Keeper: arms pump while you line up the kick. The wall braces when you shoot. */
.k-arm{transform-box:fill-box;}
.k-arm.l{transform-origin:100% 100%;animation:armL 1.1s ease-in-out infinite;}
.k-arm.r{transform-origin:0% 100%;animation:armR 1.1s ease-in-out infinite;animation-delay:-.55s;}
@keyframes armL{0%,100%{transform:rotate(0);}50%{transform:rotate(-16deg);}}
@keyframes armR{0%,100%{transform:rotate(0);}50%{transform:rotate(16deg);}}
.fx-shot .k-arm{animation:none;}
.fx-shot .fx-shuffle{animation:fxBrace .45s ease-out forwards;}
@keyframes fxBrace{to{transform:scale(1.03,.93);}}

/* Nets sway in the breeze. */
#net > path,#goal-g path[fill="url(#p-net)"],.sp-goal path[fill="url(#sp-net)"]{transform-box:fill-box;transform-origin:50% 0;animation:netSway 5s ease-in-out infinite;}
@keyframes netSway{0%,100%{transform:skewX(0);}50%{transform:skewX(1.2deg);}}
.fx-shot #net > path,.fx-shot #goal-g path[fill="url(#p-net)"]{animation:none;}

/* Matchday: ring under the ball carrier, waving corner flags, players pop onto the pitch. */
.halo-ring{transform-box:fill-box;transform-origin:center;animation:haloPulse 1.3s ease-in-out infinite;}
@keyframes haloPulse{0%,100%{transform:scale(.88);opacity:.95;}50%{transform:scale(1.08);opacity:.45;}}
.md-flag{transform-box:fill-box;transform-origin:0 100%;animation:flagWave 1.5s ease-in-out infinite;}
@keyframes flagWave{0%,100%{transform:skewY(0) scaleX(1);}50%{transform:skewY(8deg) scaleX(.85);}}
.md-tok > circle:not(.g-ring),.md-tok > text{transform-box:fill-box;transform-origin:center;animation:tokIn .55s calc(var(--i,0) * 35ms) cubic-bezier(.2,1.6,.4,1) backwards;}
@keyframes tokIn{from{transform:scale(0);opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .ps-card,.fk-mode,.md-mode,.ps-how li,.md-team,.fk-season li,.md-fx,.ps-avatar svg,.md-avatar svg,.ps-chip.now,.fk-xp-track span,
  .ps-bump,.ps-dot.new,.ps-slide,.ps-lock,.k-arm,.fx-shuffle,#net > path,#goal-g path,.sp-goal path,.halo-ring,.md-flag,.md-tok > circle,.md-tok > text{animation:none !important;}
}

/* ================= Even more movement ================= */

/* Score words pop in letter by letter. */
.ps-pop .ch{display:inline-block;}
.ps-pop.show .ch{animation:chIn .55s cubic-bezier(.2,1.7,.4,1) backwards;animation-delay:calc(var(--i, 0) * 55ms);}
@keyframes chIn{from{opacity:0;transform:translateY(26px) scale(.3) rotate(-14deg);}}

/* After a goal the wall hangs its head. */
.fx-goalmoment .fx-shuffle{animation:fxSlump .7s ease-out forwards;}
@keyframes fxSlump{to{transform:translateY(3px) scale(1.02,.91);}}

@media (prefers-reduced-motion: reduce){ .ps-pop .ch,.fx-goalmoment .fx-shuffle{animation:none !important;} }

/* Matchday: VAR banner has a scan line, cards flip in. */
.md-banner.var{overflow:hidden;}
.md-banner.var::after{content:"";position:absolute;left:0;right:0;top:-4px;height:3px;background:linear-gradient(90deg,transparent,#4db8ff,transparent);animation:varScan 1.4s linear infinite;}
@keyframes varScan{to{top:100%;}}
.md-card-pop.yellow .cardshape,.md-card-pop.red .cardshape{animation:cardFlip3d .8s cubic-bezier(.2,1.2,.4,1);}
@keyframes cardFlip3d{
  0%{transform:perspective(500px) translateY(-60px) rotateY(-100deg) scale(.5);opacity:0;}
  55%{transform:perspective(500px) translateY(0) rotateY(14deg) scale(1.12);opacity:1;}
  80%{transform:perspective(500px) rotateY(-6deg) scale(1);}
  100%{transform:perspective(500px) rotateY(0) scale(1);}
}
.md-card-pop b,.md-card-pop span{animation:psSlide .45s .25s ease-out backwards;}
@media (prefers-reduced-motion: reduce){ .md-banner.var::after,.md-card-pop .cardshape,.md-card-pop b,.md-card-pop span{animation:none !important;} }