/* =========================================================
   SPORTIVA - Broadcast Video Transitions v2
   20 efek transisi premium untuk player index.php dan watch.php
   - Nama efek tidak tampil di overlay player
   - Background transisi full gelap/solid menutup media player
   ========================================================= */
.featured-player,
.watch-player-container {
  position: relative;
  overflow: hidden;
}

.sportiva-video-transition-layer {
  --svt-duration: 2000ms;
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 10080;
  pointer-events: none;
  background: #000;
  color: #fff;
  isolation: isolate;
}

.sportiva-video-transition-layer.is-active {
  display: flex;
  background: #000;
  animation: svtLayerLife var(--svt-duration) linear both;
}

.svt-controls-muted {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.svt-base-bg,
.svt-grid,
.svt-flash,
.svt-rings,
.svt-energy,
.svt-shutter,
.svt-spotlights,
.svt-curtain,
.svt-scanlines,
.svt-wipe,
.svt-tunnel,
.svt-shards,
.svt-waves,
.svt-bars,
.svt-slashes,
.svt-orbit,
.svt-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.svt-base-bg {
  background:
    radial-gradient(circle at center, rgba(187,245,23,.34), rgba(0,0,0,1) 42%, rgba(0,0,0,1) 100%),
    linear-gradient(135deg, #000, #071106 50%, #000);
  opacity: 1;
}

.svt-grid {
  background-image:
    linear-gradient(rgba(187,245,23,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187,245,23,.14) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(62deg) scale(2.1) translateY(18%);
  transform-origin: center bottom;
  opacity: 0;
}

.svt-logo-wrap {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.72);
  opacity: 0;
  animation: svtLogoPop var(--svt-duration) cubic-bezier(.19,1,.22,1) both;
}

.svt-logo-glow {
  position: absolute;
  width: clamp(190px, 38vw, 500px);
  height: clamp(88px, 17vw, 190px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(187,245,23,.52), rgba(255,106,0,.20) 34%, transparent 70%);
  filter: blur(24px);
  transform: translateY(-2px);
  z-index: -1;
}

.svt-logo {
  width: clamp(165px, 27vw, 360px);
  max-height: clamp(54px, 11vw, 124px);
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(187,245,23,.62)) drop-shadow(0 16px 30px rgba(0,0,0,.9));
}

/* Pastikan nama efek tidak muncul di tengah player */
.svt-transition-title { display: none !important; }

/* 1. Sports Replay Zoom */
.svt-effect-sports_replay_zoom .svt-base-bg { animation: svtZoomBg var(--svt-duration) ease both; }
.svt-effect-sports_replay_zoom .svt-grid { opacity: .55; animation: svtGridRush var(--svt-duration) ease both; }
.svt-effect-sports_replay_zoom .svt-rings span {
  position: absolute; left: 50%; top: 50%; width: 22vmin; height: 22vmin;
  border: clamp(4px, .9vw, 12px) solid rgba(255,180,0,.9); border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2); opacity: 0;
  filter: drop-shadow(0 0 18px rgba(255,178,0,.9));
  animation: svtRingZoom var(--svt-duration) cubic-bezier(.19,1,.22,1) both;
}
.svt-effect-sports_replay_zoom .svt-rings span:nth-child(2) { animation-delay: calc(var(--svt-duration) * .08); }
.svt-effect-sports_replay_zoom .svt-rings span:nth-child(3) { animation-delay: calc(var(--svt-duration) * .16); }

/* 2. Goal Celebration Flash */
.svt-effect-goal_celebration_flash .svt-base-bg { background: radial-gradient(circle, rgba(255,255,255,.78), rgba(187,245,23,.40) 22%, #000 68%); animation: svtFlashBg var(--svt-duration) ease both; }
.svt-effect-goal_celebration_flash .svt-flash { background: rgba(255,255,255,.96); animation: svtGoalFlash var(--svt-duration) ease both; }
.svt-effect-goal_celebration_flash .svt-energy span {
  position: absolute; left: 50%; top: 50%; width: 190vmax; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(187,245,23,.95), #fff, rgba(255,106,0,.95), transparent);
  transform-origin: center; opacity: 0; animation: svtSparkLine var(--svt-duration) ease both;
}
.svt-effect-goal_celebration_flash .svt-energy span:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg); }
.svt-effect-goal_celebration_flash .svt-energy span:nth-child(2) { transform: translate(-50%,-50%) rotate(45deg); }
.svt-effect-goal_celebration_flash .svt-energy span:nth-child(3) { transform: translate(-50%,-50%) rotate(90deg); }
.svt-effect-goal_celebration_flash .svt-energy span:nth-child(4) { transform: translate(-50%,-50%) rotate(135deg); }

/* 3. Energy Burst */
.svt-effect-energy_burst .svt-base-bg { background: radial-gradient(circle, rgba(187,245,23,.48), rgba(3,14,2,1) 38%, #000 76%); }
.svt-effect-energy_burst .svt-energy span {
  position: absolute; left: 50%; top: 50%; width: 12vmin; height: 12vmin;
  border-radius: 38% 62% 54% 46%; border: 2px solid rgba(187,245,23,.78);
  background: radial-gradient(circle, rgba(187,245,23,.22), transparent 65%);
  transform: translate(-50%,-50%) scale(.25) rotate(0deg); opacity: 0;
  filter: blur(.2px) drop-shadow(0 0 18px rgba(187,245,23,.65));
  animation: svtEnergyBurst var(--svt-duration) cubic-bezier(.18,.92,.2,1) both;
}
.svt-effect-energy_burst .svt-energy span:nth-child(2) { animation-delay: calc(var(--svt-duration) * .06); rotate: 30deg; }
.svt-effect-energy_burst .svt-energy span:nth-child(3) { animation-delay: calc(var(--svt-duration) * .12); rotate: 65deg; }
.svt-effect-energy_burst .svt-energy span:nth-child(4) { animation-delay: calc(var(--svt-duration) * .18); rotate: 110deg; }

/* 4. Camera Shutter */
.svt-effect-camera_shutter .svt-base-bg { background: #000; }
.svt-effect-camera_shutter .svt-shutter span {
  position: absolute; left: 50%; top: 50%; width: 52vmax; height: 52vmax;
  background: linear-gradient(135deg, #000, #151812 60%, rgba(187,245,23,.18));
  clip-path: polygon(50% 50%, 100% 0, 100% 100%); transform-origin: 0 0; opacity: 1;
  animation: svtShutter var(--svt-duration) ease-in-out both;
}
.svt-effect-camera_shutter .svt-shutter span:nth-child(1) { transform: rotate(0deg); }
.svt-effect-camera_shutter .svt-shutter span:nth-child(2) { transform: rotate(60deg); }
.svt-effect-camera_shutter .svt-shutter span:nth-child(3) { transform: rotate(120deg); }
.svt-effect-camera_shutter .svt-shutter span:nth-child(4) { transform: rotate(180deg); }
.svt-effect-camera_shutter .svt-shutter span:nth-child(5) { transform: rotate(240deg); }
.svt-effect-camera_shutter .svt-shutter span:nth-child(6) { transform: rotate(300deg); }
.svt-effect-camera_shutter .svt-flash { background: rgba(255,255,255,.92); animation: svtCameraFlash var(--svt-duration) ease both; }

/* 5. Stadium Spotlight */
.svt-effect-stadium_spotlight .svt-base-bg { background: linear-gradient(180deg, #000, #04140a 54%, #000); }
.svt-effect-stadium_spotlight .svt-grid { opacity: .35; animation: svtGridRush var(--svt-duration) ease both; }
.svt-effect-stadium_spotlight .svt-spotlights span {
  position: absolute; top: -20%; width: 32%; height: 150%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(187,245,23,.17) 42%, transparent 76%);
  filter: blur(13px); mix-blend-mode: screen; opacity: 0; transform-origin: top center;
  animation: svtSpotlight var(--svt-duration) ease-in-out both;
}
.svt-effect-stadium_spotlight .svt-spotlights span:nth-child(1) { left: 6%; transform: rotate(24deg); }
.svt-effect-stadium_spotlight .svt-spotlights span:nth-child(2) { left: 34%; transform: rotate(0deg); animation-delay: calc(var(--svt-duration) * .08); }
.svt-effect-stadium_spotlight .svt-spotlights span:nth-child(3) { right: 6%; transform: rotate(-24deg); animation-delay: calc(var(--svt-duration) * .16); }

/* 6. Theater Curtain */
.svt-effect-theater_curtain .svt-base-bg { background: radial-gradient(circle, rgba(187,245,23,.14), #000 70%); }
.svt-effect-theater_curtain .svt-curtain span {
  position: absolute; top: 0; bottom: 0; width: 56%;
  background: repeating-linear-gradient(90deg, rgba(10,10,10,1) 0 28px, rgba(25,30,18,1) 28px 56px);
  box-shadow: inset 0 0 90px rgba(0,0,0,.95); animation: svtCurtain var(--svt-duration) cubic-bezier(.76,0,.24,1) both;
}
.svt-effect-theater_curtain .svt-curtain span:first-child { left: 0; border-right: 1px solid rgba(187,245,23,.36); }
.svt-effect-theater_curtain .svt-curtain span:last-child { right: 0; border-left: 1px solid rgba(187,245,23,.36); --dir: 1; }

/* 7. VAR Goal Scan */
.svt-effect-var_goal_scan .svt-base-bg { background: #000; }
.svt-effect-var_goal_scan .svt-grid { opacity: .6; transform: scale(1); background-size: 30px 30px; animation: svtHudGrid var(--svt-duration) linear both; }
.svt-effect-var_goal_scan .svt-scanlines {
  opacity: .75;
  background: repeating-linear-gradient(0deg, rgba(187,245,23,.22) 0 1px, transparent 1px 6px), linear-gradient(180deg, transparent, rgba(187,245,23,.45), transparent);
  background-size: 100% 100%, 100% 32%; background-position: 0 0, 0 -40%; animation: svtScan var(--svt-duration) ease both;
}
.svt-effect-var_goal_scan .svt-wipe { border: 2px solid rgba(187,245,23,.75); inset: 12%; border-radius: 20px; box-shadow: 0 0 32px rgba(187,245,23,.32), inset 0 0 32px rgba(187,245,23,.18); animation: svtVarBox var(--svt-duration) ease both; }

/* 8. Tactical Grid Sweep */
.svt-effect-tactical_grid_sweep .svt-base-bg { background: #000; }
.svt-effect-tactical_grid_sweep .svt-grid { opacity: .72; transform: scale(1.1); background-size: 58px 58px; animation: svtTacticalGrid var(--svt-duration) ease both; }
.svt-effect-tactical_grid_sweep .svt-wipe { background: linear-gradient(90deg, transparent, rgba(187,245,23,.34), rgba(255,255,255,.55), rgba(187,245,23,.34), transparent); width: 38%; transform: skewX(-18deg) translateX(-140%); animation: svtSweep var(--svt-duration) cubic-bezier(.19,1,.22,1) both; }

/* 9. Neon Score Wipe */
.svt-effect-neon_score_wipe .svt-base-bg { background: #000; }
.svt-effect-neon_score_wipe .svt-wipe { background: linear-gradient(90deg, transparent, rgba(255,106,0,.9), #fff, rgba(187,245,23,.95), transparent); height: 100%; width: 44%; transform: skewX(-15deg) translateX(-150%); filter: blur(.5px) drop-shadow(0 0 24px rgba(187,245,23,.8)); animation: svtNeonWipe var(--svt-duration) ease both; }
.svt-effect-neon_score_wipe .svt-scanlines { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(187,245,23,.18) 18px 20px); opacity: .55; animation: svtScoreLines var(--svt-duration) linear both; }

/* 10. Champions Tunnel */
.svt-effect-champions_tunnel .svt-base-bg { background: radial-gradient(circle, rgba(187,245,23,.28), #000 58%); }
.svt-effect-champions_tunnel .svt-tunnel span {
  position: absolute; left: 50%; top: 50%; width: 22vw; height: 13vw; border: 2px solid rgba(187,245,23,.55); border-radius: 18px;
  transform: translate(-50%,-50%) scale(.2); opacity: 0; box-shadow: 0 0 20px rgba(187,245,23,.34), inset 0 0 20px rgba(187,245,23,.14);
  animation: svtTunnel var(--svt-duration) cubic-bezier(.19,1,.22,1) both;
}
.svt-effect-champions_tunnel .svt-tunnel span:nth-child(2) { animation-delay: calc(var(--svt-duration) * .07); }
.svt-effect-champions_tunnel .svt-tunnel span:nth-child(3) { animation-delay: calc(var(--svt-duration) * .14); }
.svt-effect-champions_tunnel .svt-tunnel span:nth-child(4) { animation-delay: calc(var(--svt-duration) * .21); }

/* 11. Glass Break Reveal */
.svt-effect-glass_break_reveal .svt-base-bg { background: #000; }
.svt-effect-glass_break_reveal .svt-shards span {
  position: absolute; background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(187,245,23,.14)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); opacity: 0; animation: svtShard var(--svt-duration) ease both;
}
.svt-effect-glass_break_reveal .svt-shards span:nth-child(1) { inset: 0 64% 58% 0; clip-path: polygon(0 0, 100% 0, 67% 100%, 0 70%); --x:-18%; --y:-22%; }
.svt-effect-glass_break_reveal .svt-shards span:nth-child(2) { inset: 0 22% 62% 28%; clip-path: polygon(0 0, 100% 0, 88% 88%, 22% 100%); --x:0; --y:-26%; }
.svt-effect-glass_break_reveal .svt-shards span:nth-child(3) { inset: 0 0 56% 70%; clip-path: polygon(0 0, 100% 0, 100% 75%, 18% 100%); --x:18%; --y:-22%; }
.svt-effect-glass_break_reveal .svt-shards span:nth-child(4) { inset: 42% 64% 0 0; clip-path: polygon(0 0, 70% 0, 100% 100%, 0 100%); --x:-18%; --y:22%; }
.svt-effect-glass_break_reveal .svt-shards span:nth-child(5) { inset: 48% 0 0 38%; clip-path: polygon(16% 0, 100% 24%, 100% 100%, 0 100%); --x:14%; --y:24%; }

/* 12. Hype Wave */
.svt-effect-hype_wave .svt-base-bg { background: radial-gradient(circle, rgba(255,106,0,.18), #000 70%); }
.svt-effect-hype_wave .svt-waves span {
  position: absolute; top: -18%; bottom: -18%; width: 18%;
  background: linear-gradient(180deg, transparent, rgba(187,245,23,.42), rgba(255,106,0,.38), transparent);
  filter: blur(8px); opacity: 0; transform: skewX(-12deg) translateX(-160%); animation: svtHypeWave var(--svt-duration) ease both;
}
.svt-effect-hype_wave .svt-waves span:nth-child(1) { left: 0; animation-delay: 0ms; }
.svt-effect-hype_wave .svt-waves span:nth-child(2) { left: 22%; animation-delay: calc(var(--svt-duration) * .06); }
.svt-effect-hype_wave .svt-waves span:nth-child(3) { left: 45%; animation-delay: calc(var(--svt-duration) * .12); }
.svt-effect-hype_wave .svt-waves span:nth-child(4) { left: 68%; animation-delay: calc(var(--svt-duration) * .18); }

/* 13. FIFA Trophy Flash */
.svt-effect-fifa_trophy_flash .svt-base-bg { background: radial-gradient(circle, rgba(255,205,62,.44), rgba(187,245,23,.14) 32%, #000 70%); }
.svt-effect-fifa_trophy_flash .svt-flash { background: radial-gradient(circle, rgba(255,255,255,.88), transparent 46%); animation: svtTrophyFlash var(--svt-duration) ease both; }
.svt-effect-fifa_trophy_flash .svt-rings span { position:absolute; left:50%; top:50%; width:18vmin; height:18vmin; border:3px solid rgba(255,205,62,.7); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.35); animation:svtRingZoom var(--svt-duration) ease both; }
.svt-effect-fifa_trophy_flash .svt-rings span:nth-child(2){animation-delay:calc(var(--svt-duration)*.12)}
.svt-effect-fifa_trophy_flash .svt-wipe { left:50%; width:18%; background:linear-gradient(180deg, transparent, rgba(255,205,62,.92), transparent); transform:translateX(-50%) scaleY(0); filter:blur(2px); animation:svtVerticalBeam var(--svt-duration) ease both; }

/* 14. Stadium Laser Grid */
.svt-effect-stadium_laser_grid .svt-base-bg { background:#000; }
.svt-effect-stadium_laser_grid .svt-grid { opacity:.65; transform:scale(1); background-size:34px 34px; animation:svtLaserGrid var(--svt-duration) linear both; }
.svt-effect-stadium_laser_grid .svt-energy span { position:absolute; left:50%; top:50%; width:160vmax; height:2px; background:linear-gradient(90deg, transparent, rgba(187,245,23,.95), #fff, transparent); opacity:0; transform-origin:center; animation:svtLaserSpin var(--svt-duration) ease both; }
.svt-effect-stadium_laser_grid .svt-energy span:nth-child(1){transform:translate(-50%,-50%) rotate(12deg)}
.svt-effect-stadium_laser_grid .svt-energy span:nth-child(2){transform:translate(-50%,-50%) rotate(54deg);animation-delay:calc(var(--svt-duration)*.07)}
.svt-effect-stadium_laser_grid .svt-energy span:nth-child(3){transform:translate(-50%,-50%) rotate(96deg);animation-delay:calc(var(--svt-duration)*.14)}
.svt-effect-stadium_laser_grid .svt-energy span:nth-child(4){transform:translate(-50%,-50%) rotate(138deg);animation-delay:calc(var(--svt-duration)*.21)}

/* 15. Slow Motion Blur */
.svt-effect-slow_motion_blur .svt-base-bg { background:linear-gradient(90deg, #000, #061105, #000); }
.svt-effect-slow_motion_blur .svt-wipe { width:140%; left:-20%; background:linear-gradient(90deg, transparent, rgba(187,245,23,.16), rgba(255,255,255,.22), rgba(187,245,23,.16), transparent); filter:blur(18px); transform:skewX(-18deg) translateX(-120%); animation:svtSlowBlur var(--svt-duration) cubic-bezier(.22,1,.36,1) both; }
.svt-effect-slow_motion_blur .svt-logo-wrap { animation:svtLogoSlowMo var(--svt-duration) ease both; }

/* 16. Scoreboard Flip */
.svt-effect-scoreboard_flip .svt-base-bg { background:#000; }
.svt-effect-scoreboard_flip .svt-bars span { position:absolute; left:0; right:0; height:10%; background:linear-gradient(90deg, #020302, #14200b 48%, #020302); border-top:1px solid rgba(187,245,23,.15); transform:rotateX(90deg); transform-origin:center; opacity:0; animation:svtBoardFlip var(--svt-duration) ease both; }
.svt-effect-scoreboard_flip .svt-bars span:nth-child(1){top:0;animation-delay:0ms}.svt-effect-scoreboard_flip .svt-bars span:nth-child(2){top:10%;animation-delay:.03s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(3){top:20%;animation-delay:.06s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(4){top:30%;animation-delay:.09s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(5){top:40%;animation-delay:.12s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(6){top:50%;animation-delay:.15s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(7){top:60%;animation-delay:.18s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(8){top:70%;animation-delay:.21s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(9){top:80%;animation-delay:.24s}.svt-effect-scoreboard_flip .svt-bars span:nth-child(10){top:90%;animation-delay:.27s}

/* 17. Whistle Cut */
.svt-effect-whistle_cut .svt-base-bg { background:#000; }
.svt-effect-whistle_cut .svt-slashes span { position:absolute; top:-20%; width:9%; height:140%; background:linear-gradient(180deg, transparent, rgba(255,255,255,.82), rgba(187,245,23,.78), transparent); filter:blur(1px) drop-shadow(0 0 16px rgba(187,245,23,.75)); opacity:0; transform:skewX(-22deg) translateX(-160%); animation:svtWhistleCut var(--svt-duration) cubic-bezier(.19,1,.22,1) both; }
.svt-effect-whistle_cut .svt-slashes span:nth-child(1){left:6%;animation-delay:0ms}.svt-effect-whistle_cut .svt-slashes span:nth-child(2){left:18%;animation-delay:calc(var(--svt-duration)*.04)}.svt-effect-whistle_cut .svt-slashes span:nth-child(3){left:31%;animation-delay:calc(var(--svt-duration)*.08)}.svt-effect-whistle_cut .svt-slashes span:nth-child(4){left:45%;animation-delay:calc(var(--svt-duration)*.12)}.svt-effect-whistle_cut .svt-slashes span:nth-child(5){left:60%;animation-delay:calc(var(--svt-duration)*.16)}.svt-effect-whistle_cut .svt-slashes span:nth-child(6){left:74%;animation-delay:calc(var(--svt-duration)*.20)}

/* 18. Halftime Pulse */
.svt-effect-halftime_pulse .svt-base-bg { background:radial-gradient(circle, rgba(187,245,23,.28), #000 62%); }
.svt-effect-halftime_pulse .svt-rings span { position:absolute; left:50%; top:50%; width:20vmin; height:20vmin; border:2px solid rgba(187,245,23,.62); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.5); animation:svtHalfPulse var(--svt-duration) ease-in-out both; }
.svt-effect-halftime_pulse .svt-rings span:nth-child(2){animation-delay:calc(var(--svt-duration)*.10)}.svt-effect-halftime_pulse .svt-rings span:nth-child(3){animation-delay:calc(var(--svt-duration)*.20)}.svt-effect-halftime_pulse .svt-rings span:nth-child(4){animation-delay:calc(var(--svt-duration)*.30)}
.svt-effect-halftime_pulse .svt-scanlines { background:repeating-linear-gradient(0deg, rgba(187,245,23,.15) 0 2px, transparent 2px 12px); animation:svtScoreLines var(--svt-duration) linear both; }

/* 19. Crowd Wave Zoom */
.svt-effect-crowd_wave_zoom .svt-base-bg { background:linear-gradient(180deg, #000 0%, #071106 50%, #000 100%); }
.svt-effect-crowd_wave_zoom .svt-waves span { position:absolute; left:-10%; right:-10%; height:18%; background:radial-gradient(ellipse, rgba(187,245,23,.35), transparent 64%); filter:blur(5px); opacity:0; transform:translateY(120%) scaleX(.8); animation:svtCrowdWave var(--svt-duration) ease both; }
.svt-effect-crowd_wave_zoom .svt-waves span:nth-child(1){bottom:0}.svt-effect-crowd_wave_zoom .svt-waves span:nth-child(2){bottom:14%;animation-delay:calc(var(--svt-duration)*.06)}.svt-effect-crowd_wave_zoom .svt-waves span:nth-child(3){bottom:28%;animation-delay:calc(var(--svt-duration)*.12)}.svt-effect-crowd_wave_zoom .svt-waves span:nth-child(4){bottom:42%;animation-delay:calc(var(--svt-duration)*.18)}
.svt-effect-crowd_wave_zoom .svt-logo-wrap { animation:svtLogoCrowd var(--svt-duration) cubic-bezier(.19,1,.22,1) both; }

/* 20. Firework Pop */
.svt-effect-firework_pop .svt-base-bg { background:radial-gradient(circle, rgba(255,106,0,.18), #000 68%); }
.svt-effect-firework_pop .svt-particles span { position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:#bbf517; box-shadow:0 0 18px rgba(187,245,23,.9); opacity:0; transform:translate(-50%,-50%); animation:svtFirework var(--svt-duration) ease-out both; }
.svt-effect-firework_pop .svt-particles span:nth-child(1){--x:0;--y:-34vmin}.svt-effect-firework_pop .svt-particles span:nth-child(2){--x:18vmin;--y:-29vmin}.svt-effect-firework_pop .svt-particles span:nth-child(3){--x:32vmin;--y:-13vmin}.svt-effect-firework_pop .svt-particles span:nth-child(4){--x:34vmin;--y:4vmin}.svt-effect-firework_pop .svt-particles span:nth-child(5){--x:25vmin;--y:22vmin}.svt-effect-firework_pop .svt-particles span:nth-child(6){--x:6vmin;--y:32vmin}.svt-effect-firework_pop .svt-particles span:nth-child(7){--x:-13vmin;--y:30vmin}.svt-effect-firework_pop .svt-particles span:nth-child(8){--x:-30vmin;--y:16vmin}.svt-effect-firework_pop .svt-particles span:nth-child(9){--x:-34vmin;--y:-5vmin}.svt-effect-firework_pop .svt-particles span:nth-child(10){--x:-23vmin;--y:-24vmin}.svt-effect-firework_pop .svt-particles span:nth-child(11){--x:-5vmin;--y:-34vmin}.svt-effect-firework_pop .svt-particles span:nth-child(12){--x:12vmin;--y:-32vmin}

@keyframes svtLayerLife { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes svtLogoPop { 0% { opacity: 0; transform: scale(.55) translateY(18px); filter: blur(8px); } 18%, 74% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } 100% { opacity: 0; transform: scale(1.12) translateY(-8px); filter: blur(3px); } }
@keyframes svtZoomBg { 0% { transform: scale(1.25); filter: blur(10px); } 35%, 72% { transform: scale(1); filter: blur(0); } 100% { transform: scale(1.08); filter: blur(8px); } }
@keyframes svtGridRush { 0% { opacity: 0; background-position: 0 160px, 160px 0; } 20%, 75% { opacity: .55; } 100% { opacity: 0; background-position: 0 -160px, -160px 0; } }
@keyframes svtRingZoom { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); } 12% { opacity: 1; } 70% { opacity: .76; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(7.5); } }
@keyframes svtFlashBg { 0% { filter: brightness(2.5); } 40%, 70% { filter: brightness(1); } 100% { filter: brightness(.8); } }
@keyframes svtGoalFlash { 0%, 13% { opacity: 1; } 22%, 78% { opacity: 0; } 84% { opacity: .45; } 100% { opacity: 0; } }
@keyframes svtSparkLine { 0% { opacity: 0; scale: .15 1; } 16%, 54% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.3 1; } }
@keyframes svtEnergyBurst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(0deg); } 18%, 68% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(8) rotate(240deg); } }
@keyframes svtShutter { 0% { scale: 2.2; opacity: 1; } 28%, 55% { scale: .06; opacity: 1; } 100% { scale: 2.4; opacity: 0; } }
@keyframes svtCameraFlash { 0%, 34% { opacity: 0; } 40% { opacity: .95; } 52%, 100% { opacity: 0; } }
@keyframes svtSpotlight { 0% { opacity: 0; translate: 0 -12%; } 18%, 70% { opacity: .72; translate: 0 0; } 100% { opacity: 0; translate: 0 12%; } }
@keyframes svtCurtain { 0% { transform: translateX(0); } 18%, 55% { transform: translateX(calc((var(--dir, -1)) * 44%)); } 100% { transform: translateX(calc((var(--dir, -1)) * 105%)); } }
@keyframes svtHudGrid { 0% { opacity: 0; background-position: 0 0, 0 0; } 20%, 80% { opacity: .65; } 100% { opacity: 0; background-position: 90px 60px, 60px 90px; } }
@keyframes svtScan { 0% { opacity: 0; background-position: 0 0, 0 -60%; } 20%, 75% { opacity: .78; } 100% { opacity: 0; background-position: 0 0, 0 140%; } }
@keyframes svtVarBox { 0% { opacity: 0; transform: scale(.8); } 20%, 74% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes svtTacticalGrid { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 20%, 70% { opacity: .78; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } }
@keyframes svtSweep { 0% { opacity: 0; transform: skewX(-18deg) translateX(-140%); } 22%, 72% { opacity: .95; } 100% { opacity: 0; transform: skewX(-18deg) translateX(320%); } }
@keyframes svtNeonWipe { 0% { opacity: 0; transform: skewX(-15deg) translateX(-150%); } 16%, 64% { opacity: .95; } 100% { opacity: 0; transform: skewX(-15deg) translateX(320%); } }
@keyframes svtScoreLines { 0% { opacity: 0; transform: translateX(-40px); } 20%, 70% { opacity: .55; } 100% { opacity: 0; transform: translateX(40px); } }
@keyframes svtTunnel { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 18%, 70% { opacity: .84; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(5.8); } }
@keyframes svtShard { 0% { opacity: 0; transform: translate(0,0) scale(.95); } 18%, 56% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.08) rotate(5deg); } }
@keyframes svtHypeWave { 0% { opacity: 0; transform: skewX(-12deg) translateX(-180%); } 22%, 72% { opacity: .78; } 100% { opacity: 0; transform: skewX(-12deg) translateX(540%); } }
@keyframes svtTrophyFlash { 0% { opacity: .92; transform:scale(.6); } 25%, 60% { opacity:.38; transform:scale(1.1); } 100% { opacity:0; transform:scale(1.5); } }
@keyframes svtVerticalBeam { 0%{opacity:0;transform:translateX(-50%) scaleY(0)} 20%,65%{opacity:.9;transform:translateX(-50%) scaleY(1)} 100%{opacity:0;transform:translateX(-50%) scaleY(1.25)} }
@keyframes svtLaserGrid { 0%{opacity:0;background-position:0 0,0 0} 20%,78%{opacity:.65} 100%{opacity:0;background-position:160px 80px,80px 160px} }
@keyframes svtLaserSpin { 0%{opacity:0;scale:.12 1} 18%,70%{opacity:.92;scale:1 1} 100%{opacity:0;scale:1.35 1} }
@keyframes svtSlowBlur { 0%{opacity:0;transform:skewX(-18deg) translateX(-120%)} 18%,74%{opacity:.95} 100%{opacity:0;transform:skewX(-18deg) translateX(60%)} }
@keyframes svtLogoSlowMo { 0%{opacity:0;transform:scale(.75) translateX(-22px);filter:blur(10px)} 22%,78%{opacity:1;transform:scale(1) translateX(0);filter:blur(0)} 100%{opacity:0;transform:scale(1.08) translateX(22px);filter:blur(8px)} }
@keyframes svtBoardFlip { 0%{opacity:0;transform:perspective(600px) rotateX(90deg)} 25%,70%{opacity:.96;transform:perspective(600px) rotateX(0deg)} 100%{opacity:0;transform:perspective(600px) rotateX(-90deg)} }
@keyframes svtWhistleCut { 0%{opacity:0;transform:skewX(-22deg) translateX(-180%)} 20%,64%{opacity:.85} 100%{opacity:0;transform:skewX(-22deg) translateX(420%)} }
@keyframes svtHalfPulse { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 20%,65%{opacity:.75} 100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)} }
@keyframes svtCrowdWave { 0%{opacity:0;transform:translateY(120%) scaleX(.8)} 26%,76%{opacity:.72;transform:translateY(0) scaleX(1.08)} 100%{opacity:0;transform:translateY(-180%) scaleX(1.25)} }
@keyframes svtLogoCrowd { 0%{opacity:0;transform:scale(.6)} 18%,72%{opacity:1;transform:scale(1.08)} 100%{opacity:0;transform:scale(1.22)} }
@keyframes svtFirework { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1)} 68%{opacity:.95} 100%{opacity:0;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.2)} }

@media (max-width: 768px) {
  .svt-logo { width: clamp(130px, 38vw, 245px); }
  .svt-logo-glow { width: clamp(160px, 48vw, 270px); }
}

/* Rapihkan jumlah span agar efek tetap bersih setelah v2 memakai container bersama */
.svt-effect-goal_celebration_flash .svt-energy span:nth-child(n+5),
.svt-effect-energy_burst .svt-energy span:nth-child(n+5),
.svt-effect-stadium_laser_grid .svt-energy span:nth-child(n+5),
.svt-effect-camera_shutter .svt-shutter span:nth-child(n+7),
.svt-effect-stadium_spotlight .svt-spotlights span:nth-child(n+4),
.svt-effect-hype_wave .svt-waves span:nth-child(n+5),
.svt-effect-crowd_wave_zoom .svt-waves span:nth-child(n+5) {
  display: none;
}