/* Backlog-limbo: de stok zakt per mijlpaal en het backlog-ticket danst eronderdoor. */

.celebration[data-mode="limbo"] { --c1: #4a0d3a; --c2: #f97316; --c3: #fde68a; --glow: rgb(251 146 60 / .9); }

.cel-limbo-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-limbo-sun {
  position: absolute; left: 50%; top: 82vh; width: 90vh; height: 90vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0%, #fb923c 35%, #db2777 62%, transparent 72%);
  opacity: .45; filter: blur(.5vh);
}
.cel-limbo-kicker {
  position: absolute; left: 4vw; right: 4vw; top: 8vh; text-align: center; min-height: 5vh;
  font-family: var(--font-brand); font-size: 5.5vh; color: var(--c3); text-shadow: 0 .4vh 0 var(--c1), 0 0 3vh var(--glow);
}
.cel-limbo-title {
  position: absolute; left: 4vw; right: 4vw; top: 4vh; text-align: center; visibility: hidden;
  font-family: var(--font-brand); font-size: 11vh; line-height: 1; color: #fff;
  text-shadow: 0 .7vh 0 #be185d, 0 1.2vh 0 #4a0d3a, 0 0 4vh var(--glow);
}
.cel-limbo-sub {
  position: absolute; left: 4vw; right: 4vw; top: 17.5vh; text-align: center; opacity: 0;
  font-size: 4.2vh; font-weight: 700; color: var(--c3); text-shadow: 0 .3vh 1vh rgb(0 0 0 / .8);
}

.cel-limbo-set { position: absolute; inset: 0; }
.cel-limbo-floor {
  position: absolute; left: 0; right: 0; top: 82vh; bottom: 0;
  background: linear-gradient(180deg, #f5c77e, #c98a3c 40%, #6b3d12);
  box-shadow: 0 -.4vh 0 #fde68a, 0 -2vh 4vh rgb(0 0 0 / .4);
}
.cel-limbo-pole {
  position: absolute; top: 27vh; height: 55vh; width: 2.6vh; translate: -50% 0; transform-origin: 50% 100%; border-radius: 1.3vh 1.3vh 0 0;
  transform: scaleY(0);
  background: repeating-linear-gradient(180deg, #fde047 0 3vh, #db2777 3vh 6vh, #22d3ee 6vh 9vh);
  box-shadow: inset -.5vh 0 0 rgb(0 0 0 / .25), 0 0 2vh rgb(0 0 0 / .5);
}
.cel-limbo-pole.is-left { left: 30vw; }
.cel-limbo-pole.is-right { left: 70vw; }
.cel-limbo-marks { position: absolute; inset: 0; }
.cel-limbo-mark {
  position: absolute; right: calc(70vw + 2.8vh); translate: 0 -50%; padding: .3vh 1.2vh; border-radius: 1vh;
  font-family: var(--font-brand); font-size: 3.6vh; color: rgb(255 255 255 / .5); transition: color .2s, scale .2s, background .2s;
}
.cel-limbo-mark.is-active { color: #1f0a16; background: #fde047; scale: 1.25; box-shadow: 0 0 3vh rgb(253 224 71 / .8); }

.cel-limbo-bar {
  position: absolute; left: 30vw; width: 40vw; top: 33vh; height: 2.4vh; margin-top: -1.2vh; opacity: 0; border-radius: 1.2vh; z-index: 2;
  background: linear-gradient(180deg, #fef3c7, #d97706 60%, #78350f);
  box-shadow: 0 .6vh 1.2vh rgb(0 0 0 / .5);
}
.cel-limbo-fire {
  position: absolute; left: 1vh; right: 1vh; bottom: 70%; height: 5vh; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(ellipse 2.2vh 4.5vh at 50% 100%, #fff7cc, #fde047 30%, #f97316 60%, transparent 72%) 0 100% / 4.4vh 5vh repeat-x;
  filter: blur(.25vh) drop-shadow(0 0 1.5vh #f97316);
  -webkit-mask: linear-gradient(0deg, #000 30%, transparent); mask: linear-gradient(0deg, #000 30%, transparent);
  animation: cel-limbo-fire .35s ease-in-out infinite alternate;
}
.cel-limbo-bar.is-lit .cel-limbo-fire { opacity: 1; }
@keyframes cel-limbo-fire { from { transform: scaleY(.8); background-position: 0 100%; } to { transform: scaleY(1.15); background-position: 2.2vh 100%; } }

.cel-limbo-torch { position: absolute; top: 52vh; height: 30vh; width: 1.8vh; translate: -50% 0; background: linear-gradient(90deg, #a16207, #713f12); border-radius: .4vh; }
.cel-limbo-torch.is-left { left: 10vw; }
.cel-limbo-torch.is-right { left: 90vw; }
.cel-limbo-torch::before { content: ""; position: absolute; left: -1.2vh; right: -1.2vh; top: 0; height: 4vh; border-radius: .6vh .6vh 1.4vh 1.4vh; background: repeating-linear-gradient(90deg, #a16207 0 .6vh, #ca8a04 .6vh 1.2vh); }
.cel-limbo-torch i {
  position: absolute; left: 50%; bottom: 100%; width: 6vh; height: 6vh; margin-left: -3vh; border-radius: 50% 0 50% 50%; rotate: -45deg;
  background: radial-gradient(circle at 60% 40%, #fff7cc, #fde047 30%, #f97316 65%, #dc2626);
  box-shadow: 0 0 4vh #f97316, 0 0 10vh rgb(249 115 22 / .5);
  animation: cel-limbo-torch .2s ease-in-out infinite alternate;
}
@keyframes cel-limbo-torch { to { scale: 1.12 .92; } }

.cel-limbo-dancer { position: absolute; left: 50vw; top: 82vh; width: 0; height: 0; visibility: hidden; z-index: 1; }
.cel-limbo-legs { position: absolute; left: -3.5vh; width: 7vh; bottom: 0; height: 7vh; display: flex; justify-content: space-between; }
.cel-limbo-legs i { width: 1.3vh; height: 100%; border-radius: .6vh; background: #1f0a16; }
.cel-limbo-legs i::after { content: ""; position: absolute; bottom: 0; width: 2.6vh; height: 1.2vh; margin-left: -.2vh; border-radius: 1vh 1vh .3vh .3vh; background: #1f0a16; }
.cel-limbo-dancer.is-dancing .cel-limbo-legs i { animation: cel-limbo-step .24s ease-in-out infinite alternate; }
.cel-limbo-dancer.is-dancing .cel-limbo-legs i + i { animation-direction: alternate-reverse; }
@keyframes cel-limbo-step { to { translate: 0 -1.2vh; } }
.cel-limbo-body {
  position: absolute; left: -6.5vh; width: 13vh; bottom: 6.5vh; height: 19vh; transform-origin: 50% 100%;
  display: flex; flex-direction: column; align-items: center; padding-top: 1.6vh; border-radius: 1.6vh;
  background: linear-gradient(160deg, #fff7d6, #fde047 55%, #f59e0b);
  box-shadow: inset 0 0 0 .5vh #fff, 0 0 0 .4vh #1f0a16, 0 0 4vh var(--glow);
  color: #1f0a16;
}
.cel-limbo-body::before, .cel-limbo-body::after {
  content: ""; position: absolute; top: 55%; width: 2.2vh; height: 2.2vh; border-radius: 50%; background: #0b0108;
}
.cel-limbo-body::before { left: -1.1vh; }
.cel-limbo-body::after { right: -1.1vh; }
.cel-limbo-dancer.is-dancing .cel-limbo-body { animation: cel-limbo-bop .48s ease-in-out infinite; }
@keyframes cel-limbo-bop { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -1.2vh; scale: 1.05 .95; } }
.cel-limbo-eyes { display: flex; gap: 2vh; }
.cel-limbo-eyes i { width: 2.6vh; height: 2.6vh; border-radius: 50%; background: radial-gradient(circle at 60% 55%, #1f0a16 0 38%, #fff 42%); box-shadow: 0 0 0 .3vh #1f0a16; }
.cel-limbo-label { margin-top: 1.2vh; font-size: 2.4vh; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cel-limbo-number { font-family: var(--font-brand); font-size: 6.6vh; line-height: 1; }