/* ---------- sky ---------- */
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.cloud { animation: drift 14s ease-in-out infinite alternate; }
.c2 { animation-duration: 19s; animation-direction: alternate-reverse; }
.c3 { animation-duration: 24s; }
.cloudbank { animation: drift 11s ease-in-out infinite alternate; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
.zeus-svg { animation: float 4.5s ease-in-out infinite; }

/* ---------- Zeus states: idle → charge → strike ---------- */
.zeus[data-mode="charge"] { transform: translate(-50%, 0) scale(1.06); opacity: 1; }
.zeus[data-mode="charge"] .zeus-aura { opacity: .75; animation: aura .28s linear infinite alternate; }
.zeus[data-mode="charge"] .z-arm { transform: rotate(-8deg); }
.zeus[data-mode="charge"] .z-bolt { opacity: 1; animation: flicker .09s steps(2) infinite; }
.zeus[data-mode="charge"] .z-eyes { fill: #fff; }

.zeus[data-mode="strike"] { transform: translate(-50%, 4%) scale(1.1); opacity: 1; filter: brightness(1.7); }
.zeus[data-mode="strike"] .zeus-aura { opacity: 1; transform: scale(1.3); }
.zeus[data-mode="strike"] .z-arm { transform: rotate(84deg); transition-duration: .09s; }
.zeus[data-mode="strike"] .z-eyes { fill: #fff; }

@keyframes aura { from { transform: scale(.92); } to { transform: scale(1.14); } }
@keyframes flicker { 50% { opacity: .55; } }

/* ---------- strike zones: warn (yellow) → danger (red) → boom ---------- */
.zone {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(255,210,63,.1) 35%, rgba(255,210,63,.3));
  border-inline: 2px solid rgba(255,210,63,.55);
  animation: zone-in .16s ease-out;
}
.zone .reticle {
  position: absolute; left: 6%; right: 6%; bottom: 8.5%;
  height: calc(var(--W) * .36);
  border-radius: 50%;
  border: 3px solid var(--warn);
  background: radial-gradient(closest-side, rgba(255,210,63,.5), rgba(255,210,63,.06));
  box-shadow: 0 0 26px rgba(255,210,63,.8);
  animation: pulse .22s ease-in-out infinite alternate;
}
.zone .reticle::after {
  content: "⚡"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--W) * .11); filter: saturate(0) brightness(3);
}
.zone.danger {
  background: linear-gradient(transparent, rgba(255,71,51,.16) 30%, rgba(255,71,51,.5));
  border-color: rgba(255,71,51,.95);
}
.zone.danger .reticle {
  border-color: var(--danger);
  background: radial-gradient(closest-side, rgba(255,71,51,.75), rgba(255,71,51,.12));
  box-shadow: 0 0 34px rgba(255,71,51,1);
  animation-duration: .07s;
}
.zone.boom {
  background: linear-gradient(rgba(255,255,255,.2), rgba(190,240,255,.85));
  border-color: #fff;
  animation: zone-out .4s ease-out forwards;
}
.zone.boom .reticle { background: #fff; border-color: #fff; box-shadow: 0 0 60px 20px #bff0ff; animation: none; }

@keyframes zone-in { from { opacity: 0; transform: scaleX(.4); } }
@keyframes zone-out { to { opacity: 0; } }
@keyframes pulse { from { transform: scale(.9); } to { transform: scale(1.05); } }

/* ---------- lightning bolt (SVG polylines) ---------- */
.bolt polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bolt .glow { stroke: #7fd6ff; stroke-width: 14; opacity: .55; filter: blur(5px); }
.bolt .core { stroke: #ffffff; stroke-width: 4; }
.bolt .branch { stroke: #d6f6ff; stroke-width: 2; opacity: .9; }
.bolt { animation: bolt .34s steps(5) forwards; }
@keyframes bolt { 0% { opacity: 1; } 40% { opacity: .5; } 55% { opacity: 1; } 100% { opacity: 0; } }

.flash.on { animation: flash .32s ease-out; }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }

/* ---------- car ---------- */
.car.shock .car-shock { animation: shock .12s steps(2) infinite; }
.car.shock img { animation: car-hit .12s steps(2) infinite; }
@keyframes shock { 0% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: .3; transform: scale(1.12) rotate(4deg); } }
@keyframes car-hit { 50% { filter: brightness(3) saturate(0); } }

.stage.overdrive .car-trail { opacity: 1; animation: trail .08s steps(2) infinite; }
@keyframes trail { 50% { transform: scaleX(.8); } }
.stage.overdrive .world { animation: shake .09s linear infinite; }
@keyframes shake {
  0% { transform: translate(0, 0); } 25% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1px, 1.5px); } 75% { transform: translate(1px, 1px); }
}
.stage.overdrive .speed b { color: var(--bolt); text-shadow: 0 0 18px var(--bolt); }
.stage.overdrive .hud-state { color: var(--bolt); }
.stage.jolt .world { animation: jolt .35s ease-out; }
@keyframes jolt {
  0% { transform: translate(0, 0); } 20% { transform: translate(-9px, 4px); }
  40% { transform: translate(8px, -4px); } 60% { transform: translate(-5px, 2px); } 100% { transform: translate(0, 0); }
}

/* ---------- toast ---------- */
.toast.show { animation: toast 1.1s ease-out forwards; }
.toast.count.show { animation-duration: .55s; }
@keyframes toast {
  0% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1) translateY(-18px); }
}

/* ---------- rain (storm tracks) ---------- */
.stage[data-theme="storm"] .rain, .stage[data-theme="wrath"] .rain {
  display: block; inset: -60px 0 0 0;
  background-image: repeating-linear-gradient(102deg, transparent 0 22px, rgba(190,220,255,.2) 22px 23px);
  background-size: 100% 60px;
  animation: rain .22s linear infinite;
  opacity: .7;
}
@keyframes rain { to { transform: translate3d(-12px, 60px, 0); } }

/* ---------- screens ---------- */
.screen { animation: screen-in .35s ease-out; }
@keyframes screen-in { from { opacity: 0; } }
.zeus-big { animation: loom 1s cubic-bezier(.2,.8,.2,1); }
@keyframes loom { from { transform: scale(.4) translateY(-30%); opacity: 0; } }
.big-quote { animation: quote 1.2s ease-out; }
@keyframes quote { 0%, 45% { opacity: 0; letter-spacing: .4em; } 100% { opacity: 1; } }
.badge { animation: pulse .5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .stage.overdrive .world, .stage.jolt .world, .rain, .cloud, .cloudbank, .zeus-svg { animation: none !important; }
  .flash.on { animation-duration: .01s; }
}