/* Review-file: toeterende auto's voor een rood stoplicht, en de file die oplost. */

.celebration[data-mode="traffic-jam"] { --c1: #451a03; --c2: #f59e0b; --c3: #fde68a; --glow: rgb(251 146 60 / .85); }
.celebration[data-mode="traffic-clear"] { --c1: #052e16; --c2: #22c55e; --c3: #bbf7d0; --glow: rgb(74 222 128 / .85); }

.cel-traffic-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-traffic-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in oklab, var(--c2) 30%, transparent), transparent 70%),
    radial-gradient(circle at 12% 40%, rgb(255 210 120 / .12), transparent 18%),
    radial-gradient(circle at 60% 44%, rgb(255 210 120 / .1), transparent 16%);
}

/* Matrixbord boven de weg */
.cel-traffic-gantry { position: absolute; left: 0; right: 0; top: 2vh; height: 20vh; display: flex; justify-content: center; }
.cel-traffic-beam {
  position: absolute; left: -2vw; right: -2vw; top: 3vh; height: 2.2vh;
  background: repeating-linear-gradient(90deg, #9ca3af 0 .4vh, #4b5563 .4vh 2.2vh);
  box-shadow: 0 1vh 2vh rgb(0 0 0 / .5);
}
.cel-traffic-sign {
  position: relative; display: flex; align-items: center; gap: 2.4vh; height: 17vh; padding: 0 3vh;
  border-radius: 1vh; background: #0b0f14; border: .7vh solid #374151;
  box-shadow: inset 0 0 3vh rgb(0 0 0 / .8), 0 2vh 4vh rgb(0 0 0 / .6);
}
.cel-traffic-sign-text { min-width: 52vh; text-align: center; font-family: ui-monospace, Menlo, monospace; font-weight: 800; color: #3a2a00; }
.cel-traffic-sign-top { font-size: 7vh; line-height: 1.05; letter-spacing: .25em; padding-left: .25em; }
.cel-traffic-sign-bottom { font-size: 3.6vh; letter-spacing: .35em; padding-left: .35em; }
.cel-traffic-gantry.is-on .cel-traffic-sign-text { color: #ffb020; text-shadow: 0 0 1vh rgb(255 176 32 / .9), 0 0 3vh rgb(255 140 0 / .6); }
.cel-traffic-gantry.is-on.is-green .cel-traffic-sign-text { color: #4ade80; text-shadow: 0 0 1vh rgb(74 222 128 / .9), 0 0 3vh rgb(34 197 94 / .6); }
.cel-traffic-gantry.is-on .cel-traffic-sign-top { animation: cel-traffic-led 1s steps(1) infinite; }
.cel-traffic-gantry.is-green .cel-traffic-sign-top { animation: none; }
/* LED-raster over de tekst */
.cel-traffic-sign-text { -webkit-mask: radial-gradient(circle, #000 55%, rgb(0 0 0 / .55) 60%) 0 0 / .55vh .55vh; mask: radial-gradient(circle, #000 55%, rgb(0 0 0 / .55) 60%) 0 0 / .55vh .55vh; }
@keyframes cel-traffic-led { 70% { opacity: .35; } }

.cel-traffic-blink { width: 4.5vh; height: 4.5vh; border-radius: 50%; background: #3a2a00; box-shadow: inset 0 0 1vh #000; }
.cel-traffic-gantry.is-on .cel-traffic-blink { animation: cel-traffic-blink .7s steps(1) infinite; }
.cel-traffic-gantry.is-on .cel-traffic-blink.is-right { animation-delay: .35s; }
.cel-traffic-gantry.is-green .cel-traffic-blink { animation: none; }
@keyframes cel-traffic-blink {
  0% { background: radial-gradient(circle at 45% 40%, #fff, #ffb020 45%, #c26a00); box-shadow: 0 0 4vh #ffb020, 0 0 9vh rgb(255 160 0 / .6); }
  50% { background: #3a2a00; box-shadow: inset 0 0 1vh #000; }
}

/* Titel */
.cel-traffic-title {
  position: absolute; left: 4vw; right: 4vw; top: 24.5vh; display: flex; justify-content: center; align-items: baseline; gap: 2.2vh;
  font-family: var(--font-brand); color: #fff; text-align: center; line-height: 1;
  text-shadow: 0 .6vh 0 var(--c1), 0 0 3vh var(--glow);
}
.cel-traffic-count { font-size: 15vh; color: var(--c3); font-variant-numeric: tabular-nums; display: inline-block; }
.cel-traffic-word { font-size: 7.5vh; }
.cel-traffic-title.is-plain .cel-traffic-count { display: none; }
.cel-traffic-scene.is-clear .cel-traffic-word { font-size: 10vh; }
.cel-traffic-sub {
  position: absolute; left: 4vw; right: 4vw; top: 43vh; text-align: center; min-height: 4vh;
  font-size: 3.6vh; font-weight: 700; color: var(--c3); text-shadow: 0 .3vh 1vh rgb(0 0 0 / .8);
}

/* Weg */
.cel-traffic-road {
  position: absolute; left: 0; right: 0; top: 54vh; height: 40vh;
  background:
    linear-gradient(180deg, #e5e7eb 0 .6vh, transparent .6vh calc(100% - .6vh), #e5e7eb calc(100% - .6vh)),
    linear-gradient(180deg, #2b2f36, #1d2026);
  box-shadow: 0 -1vh 3vh rgb(0 0 0 / .6);
}
.cel-traffic-lane-line {
  position: absolute; left: 0; right: 0; top: 50%; height: .8vh; translate: 0 -50%;
  background: repeating-linear-gradient(90deg, #f3f4f6 0 6vh, transparent 6vh 11vh);
}
.cel-traffic-scene.is-flowing .cel-traffic-lane-line { animation: cel-traffic-lanes .25s linear infinite; }
@keyframes cel-traffic-lanes { to { background-position: -11vh 0; } }
.cel-traffic-stop { position: absolute; left: 85vw; top: .6vh; bottom: .6vh; width: 1.4vh; background: #f3f4f6; opacity: .85; }

/* Stoplicht */
.cel-traffic-light {
  position: absolute; left: calc(85vw + 4vh); top: 27vh; width: 8vh; height: 22vh; padding: 1vh 1.2vh;
  display: flex; flex-direction: column; justify-content: space-between; border-radius: 1.4vh;
  background: linear-gradient(90deg, #1f2937, #111827); border: .4vh solid #4b5563; z-index: 3;
  box-shadow: 0 1.5vh 3vh rgb(0 0 0 / .6);
}
.cel-traffic-light::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.4vh; height: 50vh; translate: -50% 0; background: linear-gradient(90deg, #6b7280, #374151); z-index: -1; }
.cel-traffic-light i { width: 5.6vh; height: 5.6vh; border-radius: 50%; background: #1a1a1a; box-shadow: inset 0 0 1vh #000; transition: background .15s, box-shadow .15s; }
.cel-traffic-light.is-red i:nth-child(1) { background: radial-gradient(circle at 45% 40%, #fff, #ef4444 45%, #991b1b); box-shadow: 0 0 4vh #ef4444, 0 0 10vh rgb(239 68 68 / .6); animation: cel-traffic-pulse 1.2s ease-in-out infinite; }
.cel-traffic-light.is-amber i:nth-child(2) { background: radial-gradient(circle at 45% 40%, #fff, #f59e0b 45%, #92400e); box-shadow: 0 0 4vh #f59e0b, 0 0 10vh rgb(245 158 11 / .6); }
.cel-traffic-light.is-green i:nth-child(3) { background: radial-gradient(circle at 45% 40%, #fff, #22c55e 45%, #166534); box-shadow: 0 0 5vh #22c55e, 0 0 12vh rgb(34 197 94 / .7); }
@keyframes cel-traffic-pulse { 50% { box-shadow: 0 0 2vh #ef4444, 0 0 5vh rgb(239 68 68 / .4); } }

/* Auto's */
.cel-traffic-cars { position: absolute; inset: 0; }
.cel-traffic-car { position: absolute; width: 17vh; height: 11vh; filter: drop-shadow(0 1.2vh 1vh rgb(0 0 0 / .55)); }
.cel-traffic-chassis { position: absolute; inset: 0; transform-origin: 50% 90%; }
.cel-traffic-body {
  position: absolute; left: 0; right: 0; bottom: 1.8vh; height: 4.6vh; border-radius: 1.4vh 2.4vh 1vh 1vh;
  background: linear-gradient(180deg, color-mix(in oklab, var(--car) 60%, #fff), var(--car) 35%, color-mix(in oklab, var(--car) 60%, #000));
  box-shadow: inset 0 -.6vh 0 rgb(0 0 0 / .25);
}
.cel-traffic-cabin {
  position: absolute; left: 3vh; width: 9.5vh; bottom: 6.2vh; height: 3.6vh; padding: .6vh .7vh 0;
  display: flex; gap: .6vh; border-radius: 2.4vh 3vh 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--car) 70%, #fff), var(--car));
}
.cel-traffic-cabin i { flex: 1; border-radius: 1.6vh 1.6vh 0 0; background: linear-gradient(160deg, #e0f2fe, #7dd3fc 40%, #1e3a5f); }
.cel-traffic-cabin i:last-child { border-top-right-radius: 2.4vh; }
.cel-traffic-car.is-van .cel-traffic-cabin { left: 1.2vh; width: 12.5vh; height: 4.6vh; border-radius: 1.4vh 3vh 0 0; }
.cel-traffic-car.is-van .cel-traffic-roof { bottom: 10.8vh; }
.cel-traffic-roof {
  position: absolute; left: 5.5vh; bottom: 9.7vh; padding: .1vh .7vh; border-radius: .5vh;
  background: #fff7d6; color: #92400e; font-size: 1.5vh; font-weight: 800; letter-spacing: .1em;
  box-shadow: 0 0 1vh rgb(255 220 120 / .7);
}
.cel-traffic-head { position: absolute; right: -.2vh; bottom: 4.2vh; width: 1.6vh; height: 1.2vh; border-radius: .4vh 1vh 1vh .4vh; background: #fef9c3; box-shadow: 0 0 2vh 1vh rgb(254 240 138 / .6); }
.cel-traffic-tail { position: absolute; left: -.2vh; bottom: 4.2vh; width: 1.2vh; height: 1.4vh; border-radius: .8vh .3vh .3vh .8vh; background: #7f1d1d; transition: background .1s, box-shadow .1s; }
.cel-traffic-car.is-braking .cel-traffic-tail { background: #ff2a2a; box-shadow: 0 0 2vh 1vh rgb(255 30 30 / .75), -3vh 0 5vh rgb(255 30 30 / .35); }
.cel-traffic-wheel {
  position: absolute; bottom: 0; width: 4vh; height: 4vh; border-radius: 50%;
  background: radial-gradient(circle, #d1d5db 0 22%, #4b5563 24% 34%, #111 36%);
}
.cel-traffic-wheel::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: conic-gradient(#9ca3af 0 25%, #374151 0 50%, #9ca3af 0 75%, #374151 0); }
.cel-traffic-wheel.is-back { left: 2vh; }
.cel-traffic-wheel.is-front { right: 2vh; }
.cel-traffic-car.is-driving .cel-traffic-wheel { animation: cel-spin .25s linear infinite; }

.cel-traffic-bubbles { position: absolute; inset: 0; z-index: 4; }
.cel-traffic-bubble {
  position: absolute; translate: 0 -100%; padding: .6vh 1.4vh; border-radius: 1.4vh; white-space: nowrap; z-index: 5;
  font-family: var(--font-brand); font-size: 3.4vh; line-height: 1; color: #1f1300; background: #fde047;
  border: .35vh solid #1f1300; box-shadow: .4vh .4vh 0 #1f1300;
}
.cel-traffic-bubble::after {
  content: ""; position: absolute; left: 40%; top: 100%; border: 1vh solid transparent; border-top-color: #1f1300; border-bottom: 0;
}
.cel-traffic-bubble.is-cheer { background: #86efac; color: #052e16; border-color: #052e16; box-shadow: .4vh .4vh 0 #052e16; }