/* Wachtrij: rinkelende telefoon met sonarpulsen, wachtende bellers in de rij en een oproep. */

.celebration[data-mode="queue"] { --c1: #4a1600; --c2: #f97316; --c3: #fed7aa; --glow: rgb(251 146 60 / .85); }

.cel-wq-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 45% 55% at 18% 54%, rgb(249 115 22 / .28), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgb(220 38 38 / .25), transparent 70%),
    rgb(20 6 0 / .55);
}
.cel-wq-pulse {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 18vh rgb(249 115 22 / .55);
  animation: cel-wq-pulse 1.5s ease-in-out infinite;
}
@keyframes cel-wq-pulse { 50% { box-shadow: inset 0 0 8vh rgb(239 68 68 / .2); } }

.cel-wq-head { position: absolute; z-index: 3; left: 0; right: 0; top: 5vh; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; }
.cel-wq-kicker { font-size: 2.8vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #fdba74; }
.cel-wq-title { display: flex; align-items: baseline; justify-content: center; gap: 2.4vh; margin-top: 1vh; }
.cel-wq-num {
  font-family: var(--font-display); font-weight: 700; font-size: 18vh; line-height: .9; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .6vh 0 #9a3412, 0 0 5vh rgb(251 146 60 / .9);
}
.cel-wq-num:empty { display: none; }
.cel-wq-word {
  font-family: var(--font-brand); font-size: 10vh; line-height: 1; color: #ffedd5;
  text-shadow: 0 .5vh 0 #7c2d12, 0 0 3vh rgb(249 115 22 / .7);
}

/* Telefoon en rij */
.cel-wq-lane { position: absolute; left: 4vw; right: 4vw; top: 36vh; height: 34vh; display: flex; align-items: center; justify-content: center; gap: 7vh; }
.cel-wq-hub { position: relative; flex: none; width: 30vh; height: 30vh; }
.cel-wq-sonar { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.cel-wq-wave {
  position: absolute; left: 0; top: 0; width: 120vh; height: 120vh; border-radius: 50%;
  border: .7vh solid #fb923c;
  box-shadow: 0 0 4vh rgb(249 115 22 / .6), inset 0 0 4vh rgb(249 115 22 / .45);
}
.cel-wq-station {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fdba74, #f97316 45%, #c2410c 80%);
  box-shadow: 0 0 0 1.2vh rgb(255 237 213 / .9), 0 0 0 2.2vh rgb(249 115 22 / .45), 0 2vh 6vh rgb(0 0 0 / .55), 0 0 10vh rgb(249 115 22 / .8);
}
.cel-wq-phone { width: 16vh; height: 16vh; }
.cel-wq-phone svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 .5vh 0 rgb(124 45 18 / .6)); }
.cel-wq-station.is-ringing .cel-wq-phone { animation: cel-wq-ring .9s ease-in-out infinite; }
@keyframes cel-wq-ring {
  0%, 50%, 100% { rotate: 0deg; }
  5%, 15%, 25%, 35% { rotate: -16deg; }
  10%, 20%, 30%, 40% { rotate: 16deg; }
}

.cel-wq-line {
  --cw: 18vh;
  position: relative; z-index: 2; flex: none; display: flex; align-items: flex-end; gap: calc(var(--cw) * .18); padding-top: 3vh;
}
.cel-wq-caller { position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); opacity: 0; }
.cel-wq-caller > svg {
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 1vh 1.6vh rgb(0 0 0 / .5));
  animation: cel-wq-bob 1.1s ease-in-out infinite; animation-delay: inherit;
}
.cel-wq-caller .is-head { fill: #fed7aa; }
.cel-wq-caller .is-body { fill: #fb923c; }
.cel-wq-caller.is-first .is-body { fill: #f97316; }
.cel-wq-caller.is-first > svg { filter: drop-shadow(0 0 2.4vh rgb(253 186 116 / .9)) drop-shadow(0 1vh 1.6vh rgb(0 0 0 / .5)); }
@keyframes cel-wq-bob { 50% { translate: 0 -1.2vh; } }
.cel-wq-ring {
  position: absolute; right: calc(var(--cw) * -.1); top: calc(var(--cw) * -.08); width: calc(var(--cw) * .44); height: calc(var(--cw) * .44); border-radius: 50%;
  display: grid; place-items: center; background: #dc2626; box-shadow: 0 0 0 .5vh #fff, 0 0 2.4vh rgb(239 68 68 / .9);
  animation: cel-wq-ring 1.1s ease-in-out infinite; animation-delay: inherit;
}
.cel-wq-ring svg { width: 60%; height: 60%; fill: #fff; }
.cel-wq-more {
  visibility: hidden; align-self: center; flex: none; padding: 1.4vh 2.6vh; border-radius: 999px;
  font-size: 6vh; font-weight: 700; color: #7c2d12; background: #ffedd5;
  box-shadow: 0 0 4vh rgb(253 186 116 / .8);
}

/* Oproep */
.cel-wq-cta {
  position: absolute; z-index: 3; left: 50%; bottom: 7vh; translate: -50% 0; opacity: 0;
  display: flex; align-items: center; gap: 2.4vh; padding: 2vh 5vh 2vh 2.4vh; border-radius: 999px; white-space: nowrap;
  font-size: 6.4vh; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #fb923c, #ea580c 55%, #c2410c);
  box-shadow: 0 0 0 .5vh #ffedd5, 0 2vh 5vh rgb(0 0 0 / .55), 0 0 7vh rgb(249 115 22 / .8);
  text-shadow: 0 .4vh 0 rgb(124 45 18 / .7);
}
.cel-wq-cta-icon { width: 9vh; height: 9vh; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.cel-wq-cta-icon svg { width: 5.6vh; height: 5.6vh; fill: #ea580c; }
.cel-wq-cta.is-live { animation: cel-wq-cta 1.2s ease-in-out infinite; }
.cel-wq-cta.is-live .cel-wq-cta-icon svg { animation: cel-wq-ring .9s ease-in-out infinite; }
@keyframes cel-wq-cta {
  50% { box-shadow: 0 0 0 .9vh #fff, 0 2vh 5vh rgb(0 0 0 / .55), 0 0 12vh rgb(251 146 60 / 1); scale: 1.04; }
}