/* Foutenbrigade: een foutenpiek wordt geblust. */

.celebration[data-mode="fire"] { --c1: #431407; --c2: #ea580c; --c3: #fed7aa; --glow: rgb(249 115 22 / .9); }
.celebration[data-mode="fire-out"] { --c1: #082f49; --c2: #0ea5e9; --c3: #e0f2fe; --glow: rgb(56 189 248 / .8); }

.cel-fire-scene { position: absolute; inset: 0; }
.cel-fire-sky {
  position: absolute; inset: -4vh; transition: opacity 1.2s;
  background: linear-gradient(180deg, #0c0a09, #431407 55%, #7c2d12 85%);
}
.cel-fire-scene.is-out .cel-fire-sky { background: linear-gradient(180deg, #082f49, #0c4a6e 55%, #0e7490 90%); }
.cel-fire-glow {
  position: absolute; left: 68vw; top: 50vh; width: 130vh; height: 130vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(251 146 60 / .55), rgb(239 68 68 / .2) 40%, transparent 68%);
  animation: cel-fire-pulse .7s ease-in-out infinite alternate;
  transition: opacity .8s;
}
.cel-fire-scene.is-out .cel-fire-glow { opacity: 0; }
@keyframes cel-fire-pulse { to { scale: 1.08; opacity: .8; } }
.cel-fire-road {
  position: absolute; left: -4vh; right: -4vh; bottom: -4vh; height: 14vh;
  background:
    linear-gradient(90deg, #facc15 0 6vh, transparent 6vh 12vh) 0 7.5vh / 12vh .8vh repeat-x,
    linear-gradient(180deg, #44403c, #1c1917);
  box-shadow: 0 -.6vh 0 #78716c;
}

.cel-fire-rack {
  position: absolute; left: 68vw; bottom: 10vh; width: 36vh; height: 50vh; translate: -50% 0; padding: 1.8vh;
  display: flex; flex-direction: column; gap: 1.2vh; border-radius: 1.2vh;
  background: linear-gradient(90deg, #1f2937, #4b5563 50%, #1f2937); box-shadow: inset 0 0 0 .5vh #111827, 0 2vh 4vh rgb(0 0 0 / .6);
}
.cel-fire-rack-name {
  font-size: 3.4vh; font-weight: 700; text-align: center; color: #fff; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cel-fire-display {
  display: flex; flex-direction: column; align-items: center; padding: 1vh 0 .8vh; border-radius: .8vh;
  background: #0a0a0a; box-shadow: inset 0 0 0 .3vh #000, inset 0 0 2vh rgb(239 68 68 / .25);
}
.cel-fire-number {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 9vh; font-weight: 700; line-height: 1;
  color: #f87171; text-shadow: 0 0 2vh #ef4444; font-variant-numeric: tabular-nums;
}
.cel-fire-unit { font-size: 2vh; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fca5a5; }
.cel-fire-scene.is-out .cel-fire-number { color: #86efac; text-shadow: 0 0 2vh #22c55e; }
.cel-fire-scene.is-out .cel-fire-unit { color: #bbf7d0; }
.cel-fire-units { flex: 1; display: flex; flex-direction: column; gap: .8vh; }
.cel-fire-unit-row {
  flex: 1; display: flex; align-items: center; gap: 1vh; padding: 0 1.2vh; border-radius: .5vh;
  background: linear-gradient(180deg, #374151, #1f2937); box-shadow: inset 0 0 0 .2vh #111827;
}
.cel-fire-unit-row i { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: #ef4444; box-shadow: 0 0 1vh #ef4444; animation: cel-fire-led .3s steps(2) infinite; }
.cel-fire-unit-row:nth-child(2n) i { animation-delay: .15s; }
.cel-fire-unit-row b { flex: 1; height: 1.4vh; margin-left: 1vh; background: repeating-linear-gradient(90deg, #111827 0 .4vh, transparent .4vh 1vh); }
.cel-fire-scene.is-out .cel-fire-unit-row i { background: #4ade80; box-shadow: 0 0 1vh #4ade80; animation-duration: 1.2s; }
@keyframes cel-fire-led { 50% { opacity: .25; } }

.cel-fire-flames { position: absolute; inset: 0; pointer-events: none; }
.cel-fire-flame { position: absolute; width: calc(var(--h) * .6); height: var(--h); translate: -50% -100%; transform-origin: 50% 100%; transition: scale .12s linear; }
.cel-fire-lick { position: absolute; inset: 0; transform-origin: 50% 100%; animation: cel-fire-lick .35s ease-in-out infinite alternate; }
@keyframes cel-fire-lick { from { transform: scale(1, 1) skewX(-4deg); } to { transform: scale(.9, 1.12) skewX(4deg); } }
.cel-fire-lick i {
  position: absolute; left: 50%; aspect-ratio: 1; border-radius: 0 50% 50% 50%;
  transform: translateX(-50%) scaleY(1.55) rotate(45deg);
}
.cel-fire-lick .is-outer { bottom: 8%; width: 72%; background: radial-gradient(circle at 70% 70%, #fb923c, #dc2626 75%); opacity: .92; filter: blur(.35vh); box-shadow: 0 0 3vh rgb(239 68 68 / .7); }
.cel-fire-lick .is-mid { bottom: 9%; width: 50%; background: radial-gradient(circle at 70% 70%, #fde047, #f97316 80%); }
.cel-fire-lick .is-core { bottom: 10%; width: 28%; background: radial-gradient(circle at 70% 70%, #fffbe6, #fde047 80%); }

.cel-fire-water { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden; }
.cel-fire-water path { fill: none; stroke-linecap: round; }
.cel-fire-jet { stroke: #38bdf8; stroke-width: 2.4vh; opacity: .85; filter: drop-shadow(0 0 1.5vh rgb(56 189 248 / .8)); }
.cel-fire-jet-core { stroke: #f0f9ff; stroke-width: .9vh; }
.cel-fire-water.is-flowing .cel-fire-jet-core { stroke-dasharray: 3vh 2vh; animation: cel-fire-flow .25s linear infinite; }
.cel-fire-water.is-flowing .cel-fire-jet { animation: cel-fire-wobble .18s ease-in-out infinite alternate; }
@keyframes cel-fire-flow { to { stroke-dashoffset: -5vh; } }
@keyframes cel-fire-wobble { to { stroke-width: 2.9vh; } }

.cel-fire-truck { position: absolute; left: 2vw; bottom: 5vh; width: 76vh; height: 34vh; visibility: hidden; transform-origin: 30% 100%; }
.cel-fire-body {
  position: absolute; left: 0; width: 70%; top: 28%; bottom: 20%; border-radius: 1vh;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, transparent 58%, #f8fafc 58% 66%, transparent 66%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 .3vh, transparent .3vh 8vh),
    linear-gradient(180deg, #ef4444, #b91c1c 70%, #7f1d1d);
  box-shadow: inset 0 .5vh 0 rgb(255 255 255 / .3), 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-fire-brand { margin-top: -5vh; font-size: 3.6vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 .3vh 0 #7f1d1d; }
.cel-fire-ladder {
  position: absolute; left: 3%; width: 50%; top: 16%; height: 9%;
  background: repeating-linear-gradient(90deg, #e5e7eb 0 .6vh, transparent .6vh 3vh);
  border-block: .6vh solid #d1d5db;
}
.cel-fire-cannon { position: absolute; left: 60%; top: 17%; width: 5.6vh; height: 5.6vh; border-radius: 50% 50% .6vh .6vh; background: radial-gradient(circle at 40% 35%, #f1f5f9, #64748b); }
.cel-fire-barrel {
  position: absolute; left: 50%; top: 30%; width: 14vh; height: 2.8vh; margin-top: -1.4vh; transform-origin: 0 50%; border-radius: 0 1.1vh 1.1vh 0;
  background: linear-gradient(180deg, #f1f5f9, #94a3b8 60%, #475569);
}
.cel-fire-tip { position: absolute; right: 0; top: 50%; width: 1px; height: 1px; }
.cel-fire-cab {
  position: absolute; right: 0; width: 31%; top: 10%; bottom: 20%; border-radius: 1vh 5vh 1vh 1vh;
  background: linear-gradient(180deg, #ef4444, #b91c1c 70%, #7f1d1d); box-shadow: inset 0 .5vh 0 rgb(255 255 255 / .3), 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-fire-window { position: absolute; right: 9%; top: 14%; width: 62%; height: 38%; border-radius: .6vh 3.4vh .6vh .6vh; background: linear-gradient(160deg, #e0f2fe, #7dd3fc 50%, #0369a1); }
.cel-fire-bar { position: absolute; left: 12%; top: -3vh; width: 60%; height: 3vh; display: flex; border-radius: 1vh 1vh 0 0; overflow: hidden; }
.cel-fire-bar i { flex: 1; background: #1d4ed8; animation: cel-fire-beacon .4s steps(2) infinite; }
.cel-fire-bar i + i { background: #dc2626; animation-delay: .2s; }
@keyframes cel-fire-beacon { 50% { filter: brightness(2.4); box-shadow: 0 0 4vh 1vh currentColor; } }
.cel-fire-bumper { position: absolute; right: -1%; width: 33%; bottom: 15%; height: 8%; border-radius: .6vh; background: linear-gradient(180deg, #f1f5f9, #94a3b8); }
.cel-fire-wheel {
  position: absolute; bottom: 0; width: 12.5vh; height: 12.5vh; border-radius: 50%;
  background:
    radial-gradient(circle, #e2e8f0 0 18%, transparent 19%),
    repeating-conic-gradient(#475569 0 20deg, #94a3b8 20deg 40deg) center / 52% 52% no-repeat,
    radial-gradient(circle, #1f2937 0 26%, #111827 27% 60%, #0a0a0a 61%);
  box-shadow: 0 .6vh 1vh rgb(0 0 0 / .6);
}
.cel-fire-wheel.is-back { left: 10%; }
.cel-fire-wheel.is-front { right: 10%; }
.cel-fire-truck.is-driving .cel-fire-wheel { animation: cel-spin .3s linear infinite; }

.cel-fire-head { position: absolute; left: 3vw; right: 3vw; top: 3vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel-fire-alarm {
  position: absolute; left: 50%; top: 1vh; translate: -50% 0; white-space: nowrap; padding: 1vh 3.4vh; border-radius: 1.2vh;
  background: #b91c1c; border: .4vh solid #fecaca; color: #fff; font-size: 4vh; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 4vh rgb(239 68 68 / .8); animation: cel-fire-alarm .5s steps(2) infinite;
}
@keyframes cel-fire-alarm { 50% { background: #7f1d1d; } }
.cel-fire-title {
  font-family: var(--font-brand); font-size: 12vh; line-height: 1; opacity: 0; color: #f0f9ff;
  text-shadow: 0 .7vh 0 #0369a1, 0 0 4vh rgb(56 189 248 / .9);
}
.cel-fire-sub { margin-top: 1.2vh; font-size: 4.4vh; font-weight: 700; color: #fff; opacity: 0; text-shadow: 0 .4vh 0 rgb(0 0 0 / .5); }