/* Full-screen event animations. live.js adds `show ev-<name>` to #fx for 3s. */

.fx {
  --c1: #0f8a5f;
  --c2: #04301f;
  --accent: #ffd23f;
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 50%, var(--c1), var(--c2) 75%);
}
.fx.show { display: flex; animation: fx-life 3s ease both; }
@keyframes fx-life {
  0% { opacity: 0; transform: scale(1.08); }
  8% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}

/* Rotating light rays behind everything */
.fx-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3000px;
  height: 3000px;
  margin: -1500px 0 0 -1500px;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.10) 0 6deg, transparent 6deg 18deg);
  animation: fx-spin 12s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- umpire */
.umpire {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 820px;
  margin-left: 80px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45));
  animation: ump-in 0.45s ease-out both;
}
@keyframes ump-in {
  from { transform: translateX(-260px) rotate(-6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.umpire .arm, .umpire .leg { transform-box: view-box; }
.umpire .arm-l { transform-origin: 150px 232px; }
.umpire .arm-r { transform-origin: 250px 232px; }
.umpire .leg-r { transform-origin: 222px 390px; }
.umpire .finger { display: none; }

/* --------------------------------------------------------------- caption */
.fx-text { position: relative; z-index: 3; flex: 1; text-align: center; padding-right: 60px; }
.fx-title {
  font-size: 250px;
  font-weight: 700;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), 0 0 40px var(--accent);
  white-space: nowrap;
  animation: title-pop 0.6s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.fx-sub {
  margin-top: 24px;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: 6px;
  color: var(--accent);
  animation: sub-in 0.5s 0.55s ease-out both;
}
@keyframes title-pop {
  from { transform: scale(0.15) rotate(-10deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sub-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Decorations are hidden unless an event uses them */
.fx-ball, .fx-rope, .fx-burst, .fx-stumps, .fx-tv, .fx-bolt { position: absolute; display: none; }

.fx-ball {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  z-index: 4;
  background:
    linear-gradient(90deg, transparent 46%, #fff 46%, #fff 50%, transparent 50%),
    radial-gradient(circle at 35% 35%, #ff6b5b, #b3140c 70%);
  box-shadow: 0 0 30px rgba(255, 80, 60, 0.7);
}

/* ================================================================ FOUR */
.ev-four { --c1: #12a06e; --c2: #03311f; --accent: #b6ff6a; }
.ev-four .fx-rope {
  display: block;
  left: 0;
  right: 0;
  bottom: 70px;
  height: 18px;
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, #fff 0 40px, #ffd23f 40px 80px);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}
.ev-four .fx-ball {
  display: block;
  bottom: 100px;
  left: -120px;
  box-shadow: -60px 0 0 -20px rgba(255, 255, 255, 0.4), -120px 0 0 -30px rgba(255, 255, 255, 0.25);
  animation: ball-roll 1.4s 0.2s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes ball-roll {
  from { transform: translateX(0) rotate(0); }
  to { transform: translateX(2100px) rotate(1440deg); }
}
.ev-four .arm-l { animation: pose-l-low 0.3s 0.3s both; }
.ev-four .arm-r { animation: four-wave 0.5s 0.3s ease-in-out 5 alternate both; }
@keyframes pose-l-low { to { transform: rotate(20deg); } }
@keyframes four-wave {
  from { transform: rotate(-55deg); }
  to { transform: rotate(-125deg); }
}

/* ================================================================= SIX */
.ev-six { --c1: #8a2be2; --c2: #240a45; --accent: #ffd23f; }
.ev-six .fx-ball { display: block; left: 520px; bottom: -100px; animation: ball-six 1.3s 0.2s ease-out both; }
@keyframes ball-six {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(1500px, -1300px) scale(0.4) rotate(900deg); }
}
.ev-six .fx-burst {
  display: block;
  width: 420px;
  height: 420px;
  z-index: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--accent) 0 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, #000 62%, transparent 64%);
  mask: radial-gradient(circle, transparent 28%, #000 30%, #000 62%, transparent 64%);
  animation: burst 1.1s ease-out both;
}
.ev-six .b1 { left: 620px; top: 20px; animation-delay: 0.5s; }
.ev-six .b2 { left: 1500px; top: 30px; animation-delay: 0.8s; filter: hue-rotate(140deg); }
.ev-six .b3 { left: 1440px; top: 620px; animation-delay: 1.1s; filter: hue-rotate(260deg); }
@keyframes burst {
  0% { transform: scale(0.1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ev-six .arm-l { animation: six-l 0.4s 0.3s ease-out both; }
.ev-six .arm-r { animation: six-r 0.4s 0.3s ease-out both; }
@keyframes six-l { to { transform: rotate(168deg); } }
@keyframes six-r { to { transform: rotate(-168deg); } }

/* ================================================================= OUT */
.ev-out { --c1: #d32f2f; --c2: #3a0505; --accent: #ffe082; }
.ev-out .finger { display: inline; }
.ev-out .arm-r { animation: out-r 0.35s 0.35s ease-out both; }
@keyframes out-r { to { transform: rotate(-178deg); } }
.ev-out .fx-title { animation: title-pop 0.6s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both, shake 0.4s 0.8s 2; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-18px); }
  75% { transform: translateX(18px); }
}
.ev-out .fx-stumps {
  display: block;
  left: 1580px;
  bottom: 60px;
  width: 200px;
  height: 300px;
  z-index: 2;
}
.fx-stumps i {
  position: absolute;
  bottom: 0;
  width: 26px;
  height: 280px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8c48a, #b88a4a);
}
.fx-stumps i:nth-child(1) { left: 10px; animation: stump-l 0.4s 0.6s ease-out both; transform-origin: bottom; }
.fx-stumps i:nth-child(2) { left: 87px; }
.fx-stumps i:nth-child(3) { left: 164px; animation: stump-r 0.4s 0.6s ease-out both; transform-origin: bottom; }
@keyframes stump-l { to { transform: rotate(-18deg); } }
@keyframes stump-r { to { transform: rotate(14deg); } }
.fx-stumps .bail {
  position: absolute;
  top: 10px;
  width: 86px;
  height: 14px;
  border-radius: 7px;
  background: #f5d9a8;
}
.fx-stumps .bail.l { left: 14px; animation: bail-l 1s 0.6s ease-out both; }
.fx-stumps .bail.r { left: 96px; animation: bail-r 1s 0.6s ease-out both; }
@keyframes bail-l { to { transform: translate(-260px, -420px) rotate(-720deg); opacity: 0.2; } }
@keyframes bail-r { to { transform: translate(220px, -480px) rotate(820deg); opacity: 0.2; } }

/* ================================================================ WIDE */
.ev-wide { --c1: #f57c00; --c2: #3d1a00; --accent: #fff3c4; }
.ev-wide .arm-l { animation: wide-l 0.4s 0.3s ease-out both; }
.ev-wide .arm-r { animation: wide-r 0.4s 0.3s ease-out both; }
@keyframes wide-l { to { transform: rotate(90deg); } }
@keyframes wide-r { to { transform: rotate(-90deg); } }
.ev-wide .umpire { animation: ump-in 0.45s ease-out both, ump-stretch 0.6s 0.7s ease-in-out 2 alternate; }
@keyframes ump-stretch { to { transform: scaleX(1.06); } }
.ev-wide .fx-title { animation: title-pop 0.6s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both, wide-text 1.2s 0.6s ease-in-out both; }
@keyframes wide-text {
  from { letter-spacing: 0; }
  to { letter-spacing: 70px; }
}

/* ============================================================= NO BALL */
.ev-noball { --c1: #ef6c00; --c2: #3a0d00; --accent: #fff176; }
.ev-noball .arm-r { animation: wide-r 0.4s 0.3s ease-out both; }
.ev-noball .arm-l { animation: pose-l-low 0.3s 0.3s both; }
.ev-noball .fx-title { font-size: 210px; }

/* ================================================================= BYE */
.ev-bye { --c1: #00838f; --c2: #002a2e; --accent: #b2ebf2; }
.ev-bye .arm-r { animation: out-r 0.4s 0.3s ease-out both, bye-wave 0.3s 0.8s ease-in-out 6 alternate; }
@keyframes bye-wave {
  from { transform: rotate(-178deg); }
  to { transform: rotate(-165deg); }
}

/* ============================================================= LEG BYE */
.ev-legbye { --c1: #00897b; --c2: #002b26; --accent: #b2dfdb; }
.ev-legbye .leg-r { animation: knee-up 0.4s 0.3s ease-out both; }
.ev-legbye .arm-r { animation: knee-tap 0.35s 0.6s ease-in-out 6 alternate both; }
@keyframes knee-up { to { transform: rotate(-32deg); } }
@keyframes knee-tap {
  from { transform: rotate(-18deg); }
  to { transform: rotate(-32deg); }
}
.ev-legbye .fx-title { font-size: 220px; }

/* ================================================================= DRS */
.ev-drs { --c1: #1565c0; --c2: #020f2a; --accent: #80d8ff; }
.ev-drs .arm-l { animation: drs-l 0.8s 0.3s ease-in-out both; }
.ev-drs .arm-r { animation: drs-r 0.8s 0.3s ease-in-out both; }
@keyframes drs-l {
  0% { transform: rotate(0); }
  50% { transform: rotate(120deg); }
  100% { transform: rotate(70deg); }
}
@keyframes drs-r {
  0% { transform: rotate(0); }
  50% { transform: rotate(-120deg); }
  100% { transform: rotate(-70deg); }
}
.ev-drs .fx-tv {
  display: block;
  left: 700px;
  top: 250px;
  width: 1120px;
  height: 580px;
  z-index: 2;
  border: 14px solid #fff;
  border-radius: 30px;
  box-shadow: 0 0 40px var(--accent), inset 0 0 40px rgba(128, 216, 255, 0.4);
  overflow: hidden;
  animation: tv-draw 0.8s 0.2s ease-out both;
}
@keyframes tv-draw {
  from { clip-path: inset(0 100% 100% 0); }
  50% { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
.fx-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(128, 216, 255, 0.55), transparent);
  animation: scan 1s 0.8s linear infinite;
}
@keyframes scan {
  from { transform: translateY(-80px); }
  to { transform: translateY(600px); }
}
.ev-drs .fx-title { font-size: 190px; }
.ev-drs .fx-sub { animation: sub-in 0.5s 0.55s ease-out both, blink-soft 0.8s 1s infinite alternate; }

/* ============================================================ FREE HIT */
.ev-freehit { --c1: #e91e63; --c2: #3b0018; --accent: #fff59d; }
.ev-freehit .arm-r { animation: out-r 0.3s 0.3s ease-out both, circle-arm 0.5s 0.6s linear infinite; }
@keyframes circle-arm {
  0% { transform: rotate(-150deg); }
  50% { transform: rotate(-210deg); }
  100% { transform: rotate(-150deg); }
}
.ev-freehit .fx-title {
  font-size: 220px;
  animation: title-pop 0.6s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both, blink-soft 0.35s 0.8s infinite alternate;
}
@keyframes blink-soft { to { opacity: 0.55; } }

/* =========================================================== POWERPLAY */
.ev-powerplay { --c1: #6a1b9a; --c2: #12002a; --accent: #ffea00; justify-content: center; }
.ev-powerplay .umpire { display: none; }
.ev-powerplay .fx-text { padding: 0; }
.ev-powerplay .fx-title { font-size: 230px; }
.ev-powerplay .fx-bolt {
  display: block;
  top: 180px;
  width: 260px;
  height: 640px;
  z-index: 2;
  background: linear-gradient(180deg, #fff59d, var(--accent) 50%, #ff9100);
  clip-path: polygon(55% 0, 10% 55%, 45% 55%, 25% 100%, 90% 38%, 52% 38%, 80% 0);
  filter: drop-shadow(0 0 30px var(--accent));
  animation: bolt 0.45s 0.2s steps(2, start) 6 both;
}
.ev-powerplay .fx-bolt.l { left: 90px; }
.ev-powerplay .fx-bolt.r { right: 90px; transform: scaleX(-1); }
@keyframes bolt {
  from { opacity: 0.2; }
  to { opacity: 1; }
}