/* Dagstand-segment "Projecten vandaag": een baan per project (op naam), daarna de weg naar de finishvlag. */

.celebration[data-mode="show-projects"] { --c1: #111827; --c2: #ff7800; --c3: #ffe0b0; --glow: rgb(255 120 0 / .7); }

.cel-show-projects-scene { position: absolute; inset: 0; overflow: hidden; background: #07090d; }
.cel-show-projects-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 20% 0%, rgb(255 255 255 / .12), transparent 70%),
    radial-gradient(ellipse 60% 30% at 80% 0%, rgb(255 255 255 / .12), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgb(255 120 0 / .14), transparent 70%),
    linear-gradient(180deg, #0d1220, #07090d 40%);
}

.cel-show-projects-head {
  position: absolute; left: 6vh; right: 6vh; top: 4vh; height: 13vh;
  display: flex; align-items: center; justify-content: space-between; gap: 4vh;
}
.cel-show-projects-titles { min-width: 0; }
.cel-show-projects-title {
  font-family: var(--font-brand); font-size: 9.5vh; line-height: 1; color: #fff; white-space: nowrap; opacity: 0;
  text-shadow: 0 .7vh 0 #6e1a00, 0 0 4vh rgb(255 120 0 / .7);
}
.cel-show-projects-sub {
  margin-top: .6vh; min-height: 4vh; opacity: 0;
  font-size: 3.4vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffd84d;
}

.cel-show-projects-lights {
  display: flex; gap: 1.4vh; padding: 1.4vh 1.8vh; border-radius: 2vh;
  background: linear-gradient(180deg, #1f2937, #0b0f19); border: .3vh solid #374151; box-shadow: 0 1.5vh 3vh rgb(0 0 0 / .6);
}
.cel-show-projects-lights i {
  width: 6.5vh; height: 6.5vh; border-radius: 50%; background: #1a1d24;
  box-shadow: inset 0 .6vh 1vh rgb(0 0 0 / .8); transition: background .12s, box-shadow .12s;
}
.cel-show-projects-lights i.is-red { background: radial-gradient(circle at 40% 35%, #fecaca, #ef4444 45%, #7f1d1d); box-shadow: 0 0 3vh #ef4444, inset 0 0 1vh rgb(255 255 255 / .3); }
.cel-show-projects-lights i.is-green { background: radial-gradient(circle at 40% 35%, #dcfce7, #22c55e 45%, #14532d); box-shadow: 0 0 3vh #22c55e, inset 0 0 1vh rgb(255 255 255 / .3); }

.cel-show-projects-lanes {
  position: absolute; left: 4vh; right: 4vh; top: 19.5vh; bottom: 3vh;
  display: flex; flex-direction: column; justify-content: center; gap: 1.6vh;
}
.cel-show-projects-lane {
  --lane: #ff7800;
  position: relative; flex: 0 1 12vh; min-height: 0; opacity: 0;
  display: grid; grid-template-columns: 40vh 1fr; align-items: center; gap: 2vh;
  padding: 0 1.4vh 0 2.4vh; border-radius: 1.6vh; background: rgb(255 255 255 / .03);
  box-shadow: inset .8vh 0 0 var(--lane);
  transition: background .3s, box-shadow .3s;
}
.cel-show-projects-lane.is-spot { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 .35vh var(--lane), 0 0 4vh color-mix(in oklab, var(--lane) 40%, transparent); }

.cel-show-projects-label { min-width: 0; }
.cel-show-projects-name {
  font-size: 3.5vh; font-weight: 700; line-height: 1.12; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cel-show-projects-track {
  position: relative; height: 82%; border-radius: 1.2vh; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 3vh, transparent 3vh 6vh) 0 50% / 100% .35vh no-repeat,
    linear-gradient(180deg, #2a2e36, #1b1e24);
  box-shadow: inset 0 .4vh 1vh rgb(0 0 0 / .6), inset .8vh 0 0 #f8fafc;
}
.cel-show-projects-lane.is-racing .cel-show-projects-track { animation: cel-show-projects-road .35s linear infinite; }
@keyframes cel-show-projects-road { from { background-position: 0 50%, 0 0; } to { background-position: -6vh 50%, 0 0; } }

.cel-show-projects-run { position: absolute; left: .8vh; right: 32vh; top: 0; bottom: 0; }
.cel-show-projects-lane.is-progress .cel-show-projects-run { right: 25vh; }
.cel-show-projects-lane.is-revving .cel-show-projects-pill { animation: cel-show-projects-rev .09s linear infinite alternate; }
@keyframes cel-show-projects-rev { from { transform: translate(-.15vh, .1vh); } to { transform: translate(.15vh, -.1vh); } }
.cel-show-projects-bar {
  position: absolute; left: 0; top: 22%; bottom: 22%; width: 0; border-radius: 0 1vh 1vh 0;
  background: linear-gradient(90deg, color-mix(in oklab, var(--lane) 35%, transparent), var(--lane));
  box-shadow: 0 0 2.4vh color-mix(in oklab, var(--lane) 70%, transparent);
}
.cel-show-projects-lane.is-racing .cel-show-projects-bar::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 2vh, rgb(255 255 255 / .25) 2vh 2.6vh);
  animation: cel-show-projects-streak .25s linear infinite;
}
@keyframes cel-show-projects-streak { to { background-position: 2.6vh 0; } }

.cel-show-projects-pill {
  position: absolute; left: 0; top: 50%; translate: 1.2vh -50%;
  display: flex; align-items: baseline; gap: .6vh; padding: .5vh 1.6vh; border-radius: 1.2vh; white-space: nowrap;
  background: #0b0f19; border: .35vh solid var(--lane); box-shadow: 0 .6vh 1.6vh rgb(0 0 0 / .6);
}
.cel-show-projects-value { font-size: 4.4vh; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cel-show-projects-unit { font-size: 2.4vh; font-weight: 700; color: var(--lane); }
.cel-show-projects-tickets { margin-left: .8vh; font-size: 2.2vh; font-weight: 700; color: #cbd5e1; }

.cel-show-projects-finish {
  position: absolute; right: 0; top: 0; bottom: 0; width: 7vh; transform: scaleY(0); transform-origin: 50% 50%;
  background: repeating-conic-gradient(#f8fafc 0 25%, #0b0f19 0 50%) 0 0 / 2.4vh 2.4vh;
  box-shadow: -.4vh 0 1.4vh rgb(0 0 0 / .6);
  display: flex; align-items: center; justify-content: center;
}
.cel-show-projects-flag {
  width: 5.8vh; height: 5.8vh; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 4vh; line-height: 1; background: #0b0f19; box-shadow: 0 0 0 .35vh #ffd84d, 0 0 2.4vh rgb(255 216 77 / .8);
  opacity: 0; transition: opacity .3s;
}
.cel-show-projects-lane.is-finished .cel-show-projects-flag { opacity: 1; animation: cel-show-projects-wave .6s ease-in-out infinite alternate; }
@keyframes cel-show-projects-wave { from { rotate: -14deg; } to { rotate: 14deg; } }

.cel-show-projects-lane.is-progress .cel-show-projects-track {
  background:
    linear-gradient(90deg, transparent calc(25% - .15vh), rgb(255 255 255 / .18) 0 calc(25% + .15vh), transparent 0 calc(50% - .15vh), rgb(255 255 255 / .18) 0 calc(50% + .15vh), transparent 0 calc(75% - .15vh), rgb(255 255 255 / .18) 0 calc(75% + .15vh), transparent 0) .8vh 0 / calc(100% - 25.8vh) 100% no-repeat,
    linear-gradient(180deg, #2a2e36, #1b1e24);
}
.cel-show-projects-lane.is-finished { background: rgb(34 197 94 / .12); }
.cel-show-projects-lane.is-finished .cel-show-projects-bar {
  background: repeating-linear-gradient(90deg, var(--lane) 0 3vh, color-mix(in oklab, var(--lane) 70%, #fff) 3vh 6vh);
  animation: cel-show-projects-march 1s linear infinite;
}
@keyframes cel-show-projects-march { to { background-position: 6vh 0; } }
.cel-show-projects-lane.is-unknown .cel-show-projects-pill { border-color: #475569; }
.cel-show-projects-lane.is-unknown .cel-show-projects-value { font-size: 2.8vh; color: #94a3b8; }
.cel-show-projects-lane.is-unknown .cel-show-projects-name { color: #cbd5e1; }