/* ==========================================================================
   CricScoring - broadcast/animations/animations.css
   SHARED EVENT ANIMATION SYSTEM
   Moved from legacy overlay.html  lines 473-1368 (minus the
   per-event rules that now live in animations/<event>/)
   ==========================================================================
   The splash shell (batsman / bowler beds), the FX layers
   (sheen, rays, rings, streaks, debris, flash, glare), the text
   entrance + shine keyframes and the no-ball / free-hit alert glow.
   Per-event accents and entrances live in the sibling folders:
   wicket/ four/ six/ no-ball/ free-hit/.
   ========================================================================== */

/* =====================================================================
   🎯 THE FIX — splash now follows the skewed bar instead of being a
   rectangle, so no teal wedges are left in the corners any more.
   ===================================================================== */
.batsman-sec, .bowler-sec{ overflow: visible; }
.bat-name{ min-width: 0; }          /* keeps ellipsis working without overflow:hidden */

.splash-batsman, .splash-bowler{
    top: 0; bottom: 0; height: auto;
    left: -30px; right: -30px; width: auto;      /* overshoot tucks under the neighbouring panels */
    transform: skewX(var(--skew));               /* match the bar's slant */
    overflow: hidden;                            /* clip the fx to the parallelogram */
    transition: opacity .18s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}
/* content rides upright inside the slanted panel */
.splash-inner{
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    transform: skewX(var(--counter-skew));
    pointer-events: none;
}

.splash-batsman{
    background:
        radial-gradient(120% 160% at 50% 45%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(135deg, #ff1f45 0%, #e00f30 42%, #8f0016 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 18px rgba(0,0,0,.45);
}
.splash-bowler{
    background:
        radial-gradient(120% 170% at 50% 45%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%),
        radial-gradient(circle at center, #1c1c44 0%, #0a0a20 72%, #000000 100%);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.16), inset 0 -6px 18px rgba(0,0,0,.6);
}

/* accent colour per event (mirrored from #bs-text by a tiny observer) */

/* ---------- text ---------- */
.wkt-text, .shining-text{
    font-size: 60px; font-weight: 900; letter-spacing: 5px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.75));
}
.wkt-text{
    color:#fff;
    text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.7), 0 0 26px rgba(255,90,120,.65);
}
.shining-text{
    text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.8), 0 0 28px var(--fx-soft);
}
/* ---------- FX LAYERS ---------- */
.fx-sheen, .fx-rays, .fx-rings, .fx-streaks, .fx-debris, .fx-flash{
    position:absolute; inset:0; pointer-events:none; z-index:5;
}
.fx-flash{
    z-index: 30; background:#fff; opacity:0; mix-blend-mode: screen;
}
.splash-batsman.active .fx-flash{ animation: fxFlash .5s ease-out both; }
.splash-bowler.active  .fx-flash{ animation: fxFlash .5s ease-out both; }
@keyframes fxFlash{ 0%{opacity:.85} 22%{opacity:.18} 45%{opacity:.42} 100%{opacity:0} }

/* diagonal sheen wash */
.fx-sheen{
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.22) 47%, rgba(255,255,255,.42) 51%, rgba(255,255,255,.22) 55%, transparent 68%);
    transform: translateX(-120%);
}
.splash-batsman.active .fx-sheen, .splash-bowler.active .fx-sheen{
    animation: fxSheen 1.5s cubic-bezier(.3,0,.2,1) .18s both;
}
@keyframes fxSheen{ 0%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

/* expanding shockwave rings */
.fx-rings i{
    position:absolute; left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px;
    border-radius:50%; border:3px solid var(--fx); opacity:0;
    transform: scale(.2);
}
.splash-batsman.active .fx-rings i, .splash-bowler.active .fx-rings i{
    animation: fxRing 1.25s cubic-bezier(.16,.8,.3,1) both;
}
.fx-rings i:nth-child(2){ animation-delay:.14s !important; border-width:2px; }
.fx-rings i:nth-child(3){ animation-delay:.28s !important; border-width:1.5px; }
@keyframes fxRing{
    0%  { transform: scale(.15) ; opacity:.95 }
    70% { opacity:.22 }
    100%{ transform: scale(9)  ; opacity:0 }
}

/* radial speed rays (bowler splash) */
.fx-rays{
    background: repeating-conic-gradient(from 0deg at 50% 50%,
                var(--fx-soft) 0deg 1.6deg, transparent 1.6deg 9deg);
    opacity:0; transform: scale(.5) rotate(0deg);
    mask-image: radial-gradient(circle at 50% 50%, transparent 18%, #000 42%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 18%, #000 42%, transparent 78%);
}
.splash-bowler.active .fx-rays{ animation: fxRays 1.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fxRays{
    0%  { opacity:0;   transform: scale(.35) rotate(-22deg) }
    18% { opacity:.75; }
    100%{ opacity:0;   transform: scale(2.2) rotate(26deg) }
}

/* horizontal speed streaks */
.fx-streaks i{
    position:absolute; left:-40%; height:2px; width:45%;
    background: linear-gradient(90deg, transparent, var(--fx), transparent);
    opacity:0; border-radius:2px;
}
.fx-streaks i:nth-child(1){ top:16%; animation-delay:.05s !important; }
.fx-streaks i:nth-child(2){ top:30%; animation-delay:.13s !important; height:3px; }
.fx-streaks i:nth-child(3){ top:47%; animation-delay:.02s !important; height:4px; }
.fx-streaks i:nth-child(4){ top:63%; animation-delay:.18s !important; }
.fx-streaks i:nth-child(5){ top:78%; animation-delay:.09s !important; height:3px; }
.fx-streaks i:nth-child(6){ top:90%; animation-delay:.22s !important; }
.splash-batsman.active .fx-streaks i, .splash-bowler.active .fx-streaks i{
    animation: fxStreak .85s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fxStreak{
    0%  { transform: translateX(0);    opacity:0 }
    15% { opacity:.9 }
    100%{ transform: translateX(360%); opacity:0 }
}

/* confetti / debris burst */
.fx-debris i{
    position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:1.5px;
    background: var(--fx); opacity:0;
    box-shadow: 0 0 8px var(--fx-soft);
}
.splash-batsman.active .fx-debris i, .splash-bowler.active .fx-debris i{
    animation: fxDebris 1.15s cubic-bezier(.15,.75,.3,1) both;
}
.fx-debris i:nth-child(1) { --dx:-260px; --dy:-42px; --rot:220deg; animation-delay:.04s !important; }
.fx-debris i:nth-child(2) { --dx: 250px; --dy:-50px; --rot:-190deg; animation-delay:.02s !important; }
.fx-debris i:nth-child(3) { --dx:-200px; --dy: 44px; --rot:150deg; animation-delay:.09s !important; }
.fx-debris i:nth-child(4) { --dx: 215px; --dy: 40px; --rot:-260deg; animation-delay:.06s !important; }
.fx-debris i:nth-child(5) { --dx:-320px; --dy:  6px; --rot:300deg; animation-delay:.12s !important; }
.fx-debris i:nth-child(6) { --dx: 330px; --dy: -8px; --rot:-140deg; animation-delay:.10s !important; }
.fx-debris i:nth-child(7) { --dx:-140px; --dy:-58px; --rot:120deg; animation-delay:.15s !important; }
.fx-debris i:nth-child(8) { --dx: 150px; --dy: 56px; --rot:-210deg; animation-delay:.13s !important; }
.fx-debris i:nth-child(9) { --dx:-380px; --dy: 26px; --rot:250deg; animation-delay:.07s !important; }
.fx-debris i:nth-child(10){ --dx: 395px; --dy: 22px; --rot:-320deg; animation-delay:.05s !important; }
.fx-debris i:nth-child(11){ --dx:-90px;  --dy: 52px; --rot:180deg; animation-delay:.18s !important; }
.fx-debris i:nth-child(12){ --dx: 95px;  --dy:-54px; --rot:-160deg; animation-delay:.16s !important; }
@keyframes fxDebris{
    0%  { transform: translate(-50%,-50%) scale(.3) rotate(0deg); opacity:0 }
    12% { opacity:1 }
    100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35) rotate(var(--rot)); opacity:0 }
}

/* upgraded glare sweep */
.glare{
    width: 26%; z-index: 16;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    animation: glareSweep 2.4s cubic-bezier(.45,0,.35,1) infinite;
}

/* text entrance: slam in, settle, glow out */
                @keyframes textSlam{
    0%   { transform: scale3d(2.4,2.4,1); opacity:0; letter-spacing: 34px; filter: blur(9px) drop-shadow(0 4px 12px rgba(0,0,0,.75)); }
    14%  { transform: scale3d(1,1,1);     opacity:1; letter-spacing: 5px;  filter: blur(0)   drop-shadow(0 4px 12px rgba(0,0,0,.75)); }
    20%  { transform: scale3d(1.06,.94,1); }
    26%  { transform: scale3d(.98,1.03,1); }
    32%  { transform: scale3d(1,1,1); }
    82%  { transform: scale3d(1,1,1);     opacity:1; letter-spacing: 5px; }
    100% { transform: scale3d(1.16,1.16,1); opacity:0; letter-spacing: 13px; }
}

/* whole-panel impact shake on a wicket */
.splash-batsman.active{ animation: panelShake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes panelShake{
    0%,100%{ transform: skewX(var(--skew)) translate3d(0,0,0) }
    12%    { transform: skewX(var(--skew)) translate3d(-7px,2px,0) }
    26%    { transform: skewX(var(--skew)) translate3d(6px,-2px,0) }
    42%    { transform: skewX(var(--skew)) translate3d(-4px,1px,0) }
    58%    { transform: skewX(var(--skew)) translate3d(3px,-1px,0) }
    76%    { transform: skewX(var(--skew)) translate3d(-2px,0,0) }
}
/* a six gets a lift instead of a shake */
.splash-bowler.active[data-fx="six"]{ animation: panelLift .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes panelLift{
    0%  { transform: skewX(var(--skew)) translate3d(0,14px,0) }
    100%{ transform: skewX(var(--skew)) translate3d(0,0,0) }
}
/* no-ball / free-hit alert pulse */
.splash-bowler.active[data-fx="nb"], .splash-bowler.active[data-fx="fh"]{
    animation: alertPulse 1.1s ease-in-out 2;
}
@keyframes alertPulse{
    0%,100%{ box-shadow: inset 0 3px 0 rgba(255,255,255,.16), inset 0 -6px 18px rgba(0,0,0,.6), inset 0 0 0 0 var(--fx-soft) }
    50%    { box-shadow: inset 0 3px 0 rgba(255,255,255,.16), inset 0 -6px 18px rgba(0,0,0,.6), inset 0 0 46px 4px var(--fx-soft) }
}

/* =====================================================================
   Popups / full-screen graphic — same design, sharper finish
   ===================================================================== */
.alert-popup{
    padding: 17px 34px; border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%),
        linear-gradient(135deg, #0b1128, #141e45);
    box-shadow: -6px 18px 40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
    border-right-width: 7px;
}
.alert-popup.active{ animation: popIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes popIn{
    0%  { opacity:0; transform: translateX(70px) scale(.94) }
    60% { opacity:1; transform: translateX(-6px) scale(1.01) }
    100%{ opacity:1; transform: translateX(0) scale(1) }
}
.alert-title{ letter-spacing: 2.6px; text-shadow: 0 0 14px currentColor; }
.alert-desc{ font-size: 34px; text-shadow: 0 3px 10px rgba(0,0,0,.85); }

.fs-panel{
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(16,219,216,.25);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(16,219,216,.12), transparent 55%),
        linear-gradient(135deg, #0a0f24, #121b3d);
}
.fs-header{
    background: linear-gradient(100deg, var(--bc-cyan-hi, #16e7e4), var(--bc-cyan-2, #05c2c2) 55%, var(--bc-cyan-hi, #16e7e4));
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.fs-team-score{ text-shadow: 0 4px 16px rgba(0,0,0,.8), 0 0 26px rgba(250,204,21,.3); }
.fs-table-wrap{ box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4); }
.fs-panel.active{ animation: fsIn .7s cubic-bezier(.16,1,.3,1); }
@keyframes fsIn{
    0%  { transform: translateY(70px) scale(.96); opacity:0; filter: blur(6px) }
    100%{ transform: translateY(0)    scale(1);   opacity:1; filter: blur(0) }
}

/* bar entrance */
#overlay-container{ transition: .7s cubic-bezier(.16,1,.3,1); }
.so-badge{
    background: linear-gradient(180deg, #ff3355, var(--bc-danger-dark, #b01024));
    box-shadow: 0 -4px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
    text-shadow: 0 2px 4px rgba(0,0,0,.55);
}
.so-badge.active{ animation: soPulse 2.2s ease-in-out infinite; }
@keyframes soPulse{ 0%,100%{ filter: brightness(1) } 50%{ filter: brightness(1.22) } }

.summary-bg{
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(16,219,216,.18), transparent 60%),
        linear-gradient(135deg, #0f172a, #1e3a8a);
    box-shadow: 0 -6px 26px rgba(0,0,0,.6), inset 0 3px 0 rgba(255,255,255,.12);
}
.sum-details{ text-shadow: 0 3px 10px rgba(0,0,0,.8); }
.sum-title{ text-shadow: 0 0 18px rgba(16,219,216,.6); }

@media (prefers-reduced-motion: reduce){
    .fx-sheen, .fx-rays, .fx-rings i, .fx-streaks i, .fx-debris i, .glare, .cyan-bg-bar::after{
        animation: none !important; opacity: 0 !important;
    }
}

/* =====================================================================
   ⚡ SHARPER + SHINIER SPLASH ANIMATIONS
   ===================================================================== */

/* metallic specular sweep — painted straight onto the glyphs via
   background-clip:text, so it can never drift out of alignment. */
.wkt-text, .shining-text{ position: relative; }
.splash-batsman.active .wkt-text,
.splash-bowler.active  #bs-text{
    background-image: linear-gradient(100deg,
        currentColor 0%, currentColor 36%,
        rgba(255,255,255,.85) 45%, #ffffff 50%, rgba(255,255,255,.85) 55%,
        currentColor 64%, currentColor 100%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: textSlam  2s   cubic-bezier(.16,1,.3,1) forwards,
               textShine 1.5s cubic-bezier(.32,0,.24,1) .26s both !important;
}
@keyframes textShine{
    0%   { background-position: 205% 0 }
    100% { background-position: -105% 0 }
}

/* brighter, tighter shockwaves */
.fx-rings i{
    border-width: 4px;
    box-shadow: 0 0 22px var(--fx-soft), inset 0 0 14px var(--fx-soft);
}
@keyframes fxRing{
    0%  { transform: scale(.12); opacity:1 }
    55% { opacity:.4 }
    100%{ transform: scale(10);  opacity:0 }
}
.splash-batsman.active .fx-rings i, .splash-bowler.active .fx-rings i{
    animation: fxRing 1.05s cubic-bezier(.12,.85,.25,1) both;
}

/* harder, faster sheen with a bright core */
.fx-sheen{
    background: linear-gradient(112deg,
        transparent 36%,
        rgba(255,255,255,.30) 45%,
        rgba(255,255,255,.92) 50%,
        rgba(255,255,255,.30) 55%,
        transparent 64%);
    filter: blur(.4px);
}
.splash-batsman.active .fx-sheen, .splash-bowler.active .fx-sheen{
    animation: fxSheen 1.15s cubic-bezier(.35,0,.15,1) .12s both;
}

/* crisper flash */
@keyframes fxFlash{ 0%{opacity:1} 14%{opacity:.12} 34%{opacity:.55} 100%{opacity:0} }

/* thinner, faster, brighter streaks */
.fx-streaks i{
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff 45%, var(--fx) 55%, transparent);
    filter: drop-shadow(0 0 6px var(--fx));
}
.splash-batsman.active .fx-streaks i, .splash-bowler.active .fx-streaks i{
    animation: fxStreak .62s cubic-bezier(.25,.8,.2,1) both;
}

/* sharper rays */
.fx-rays{
    background: repeating-conic-gradient(from 0deg at 50% 50%,
                var(--fx) 0deg 1.1deg, transparent 1.1deg 8deg);
    filter: drop-shadow(0 0 8px var(--fx-soft));
}
@keyframes fxRays{
    0%  { opacity:0;   transform: scale(.3)  rotate(-26deg) }
    14% { opacity:.95 }
    100%{ opacity:0;   transform: scale(2.4) rotate(30deg) }
}

/* debris: smaller, glintier */
.fx-debris i{
    width: 6px; height: 6px; border-radius: 1px;
    box-shadow: 0 0 10px var(--fx), 0 0 3px #fff;
}

/* punchier text entry */
@keyframes textSlam{
    0%   { transform: scale3d(2.7,2.7,1); opacity:0; letter-spacing: 40px; filter: blur(11px) drop-shadow(0 4px 12px rgba(0,0,0,.8)); }
    11%  { transform: scale3d(1,1,1);     opacity:1; letter-spacing: 5px;  filter: blur(0)    drop-shadow(0 4px 14px rgba(0,0,0,.8)); }
    17%  { transform: scale3d(1.08,.92,1); }
    23%  { transform: scale3d(.97,1.04,1); }
    29%  { transform: scale3d(1.01,.99,1); }
    35%  { transform: scale3d(1,1,1); }
    84%  { transform: scale3d(1,1,1);      opacity:1; letter-spacing: 5px; }
    100% { transform: scale3d(1.2,1.2,1);  opacity:0; letter-spacing: 15px; }
}

/* brighter splash beds */
.splash-batsman{
    background:
        radial-gradient(120% 165% at 50% 42%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%),
        linear-gradient(135deg, #ff2a4e 0%, #e8102f 40%, #7d0014 100%);
}
.splash-bowler{
    background:
        radial-gradient(120% 175% at 50% 42%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 50%),
        radial-gradient(circle at center, #23234f 0%, #0b0b22 70%, #000000 100%);
}

/* text: harder edge so it stays razor sharp on stream */
.wkt-text, .shining-text{
    font-size: 62px; letter-spacing: 5px;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.8)) drop-shadow(0 0 22px var(--fx-soft));
}

/* ---------------- overall crispness ---------------- */
.bat-name, .bowl-name{
    text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,60,70,.22);
}
.bat-runs, .bowl-fig{
    text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 3px 6px rgba(0,60,70,.25);
}
.c-score{
    text-shadow: 0 4px 16px rgba(0,0,0,.9), 0 0 30px rgba(31,243,239,.3), 0 1px 0 rgba(255,255,255,.35);
}
.team-name-text{ text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,1); }
.c-status{ text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.glare{ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%); }