/* Gesprekken-mijlpaal: rode draaischijftelefoon, kilometerteller en een badge. */

.celebration[data-mode="calls"] { --c1: #06303a; --c2: #14b8a6; --c3: #ccfbf1; --glow: rgb(45 212 191 / .8); }

.cel-calls-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 45% at 30% 45%, rgb(239 68 68 / .18), transparent 70%),
    radial-gradient(ellipse 50% 45% at 68% 42%, rgb(45 212 191 / .22), transparent 70%),
    rgb(2 12 16 / .55);
}

.cel-calls-head { position: absolute; z-index: 2; left: 0; right: 0; top: 4vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel-calls-kicker { font-size: 2.6vh; font-weight: 700; letter-spacing: .45em; text-transform: uppercase; color: #5eead4; }
.cel-calls-title { font-family: var(--font-brand); font-size: 7vh; line-height: 1.05; color: #fff; text-shadow: 0 .5vh 0 #0f3d3a, 0 0 3vh rgb(45 212 191 / .7); }

/* Telefoon */
.cel-calls-phone { position: absolute; left: calc(29vw - 22vh); top: 31vh; width: 44vh; height: 34vh; }
.cel-calls-body {
  position: absolute; left: 2vh; right: 2vh; bottom: 0; height: 24vh;
  clip-path: polygon(16% 0, 84% 0, 92% 8%, 100% 100%, 0 100%, 8% 8%);
  background:
    radial-gradient(ellipse at 35% 15%, rgb(255 255 255 / .35), transparent 45%),
    linear-gradient(180deg, #ef4444, #b91c1c 60%, #7f1d1d);
}
.cel-calls-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4vh; background: rgb(0 0 0 / .35); }
.cel-calls-cradle {
  position: absolute; left: 22%; right: 22%; top: 0; height: 2.2vh;
  background: linear-gradient(90deg, #450a0a 0 12%, transparent 12% 88%, #450a0a 88%);
}
.cel-calls-dial {
  position: absolute; left: 50%; top: 4vh; width: 16vh; height: 16vh; margin-left: -8vh; border-radius: 50%;
  background: radial-gradient(circle, #fff7ed 0 28%, #d6d3d1 30%, #f5f5f4 34%, #e7e5e4 70%, #a8a29e 100%);
  box-shadow: 0 .6vh 1.4vh rgb(0 0 0 / .45), inset 0 0 0 .5vh #7f1d1d;
}
.cel-calls-phone.is-ringing .cel-calls-dial { animation: cel-calls-dial .4s ease-in-out infinite alternate; }
@keyframes cel-calls-dial { to { rotate: 25deg; } }
.cel-calls-dial-center { position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #fca5a5); box-shadow: inset 0 0 .6vh rgb(0 0 0 / .3); }
.cel-calls-hole {
  position: absolute; left: 50%; top: 50%; width: 3.2vh; height: 3.2vh; margin: -1.6vh 0 0 -1.6vh; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #1c1917, #44403c); box-shadow: inset 0 .2vh .4vh #000;
  transform: translateY(-5.6vh);
}
.cel-calls-handset {
  position: absolute; left: 0; right: 0; top: 4.5vh; height: 6vh; border-radius: 3vh 3vh 1.4vh 1.4vh;
  background: radial-gradient(ellipse at 40% 20%, rgb(255 255 255 / .35), transparent 50%), linear-gradient(180deg, #f87171, #b91c1c 70%, #7f1d1d);
  box-shadow: 0 1vh 1.6vh rgb(0 0 0 / .45);
}
.cel-calls-handset span {
  position: absolute; top: 3vh; width: 11vh; height: 7vh; border-radius: 1.6vh 1.6vh 3.4vh 3.4vh;
  background: linear-gradient(180deg, #dc2626, #7f1d1d); box-shadow: 0 .8vh 1.2vh rgb(0 0 0 / .4);
}
.cel-calls-handset .is-ear { left: -1vh; }
.cel-calls-handset .is-mouth { right: -1vh; }
.cel-calls-handset.is-up { animation: cel-calls-hover 1.4s ease-in-out infinite; }
@keyframes cel-calls-hover { 50% { translate: 0 -1.4vh; } }

.cel-calls-waves { position: absolute; top: 4vh; width: 10vh; height: 14vh; opacity: 0; }
.cel-calls-waves.is-left { left: -11vh; scale: -1 1; }
.cel-calls-waves.is-right { right: -11vh; }
.cel-calls-waves span {
  position: absolute; top: 50%; left: 0; border-radius: 50%; border: .9vh solid transparent; border-right-color: #fde047;
  filter: drop-shadow(0 0 1vh #fde047); translate: 0 -50%;
}
.cel-calls-waves span:nth-child(1) { width: 6vh; height: 6vh; }
.cel-calls-waves span:nth-child(2) { width: 10vh; height: 10vh; left: -2vh; }
.cel-calls-waves span:nth-child(3) { width: 14vh; height: 14vh; left: -4vh; }
.cel-calls-phone.is-ringing .cel-calls-waves { opacity: 1; }
.cel-calls-phone.is-ringing .cel-calls-waves span { animation: cel-calls-wave .3s steps(1) infinite; }
.cel-calls-phone.is-ringing .cel-calls-waves span:nth-child(2) { animation-delay: .1s; }
.cel-calls-phone.is-ringing .cel-calls-waves span:nth-child(3) { animation-delay: .2s; }
@keyframes cel-calls-wave { 50% { opacity: .15; } }

/* Teller */
.cel-calls-meter { position: absolute; left: calc(67vw - 30vh); top: 27vh; width: 60vh; display: flex; flex-direction: column; align-items: center; }
.cel-calls-odo {
  display: flex; gap: 1vh; padding: 1.6vh; border-radius: 2vh;
  background: linear-gradient(180deg, #e7e5e4, #78716c 50%, #d6d3d1);
  box-shadow: 0 2vh 4vh rgb(0 0 0 / .6), inset 0 .3vh 0 #fff, 0 0 5vh rgb(45 212 191 / .35);
}
.cel-calls-meter.is-rolling .cel-calls-odo { box-shadow: 0 2vh 4vh rgb(0 0 0 / .6), inset 0 .3vh 0 #fff, 0 0 8vh rgb(45 212 191 / .8); }
.cel-calls-digit {
  position: relative; width: 14vh; height: 22vh; overflow: hidden; border-radius: 1vh;
  background: #0c0a09; box-shadow: inset 0 0 0 .3vh #000;
}
.cel-calls-digit:last-child { background: #7f1d1d; }
.cel-calls-digit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .75), transparent 28%, rgb(255 255 255 / .06) 50%, transparent 72%, rgb(0 0 0 / .75));
}
.cel-calls-strip { display: flex; flex-direction: column; }
.cel-calls-strip span {
  height: 22vh; display: flex; align-items: center; justify-content: center;
  font-size: 16.5vh; font-weight: 700; line-height: 1; color: #fafaf9; font-variant-numeric: tabular-nums;
}
.cel-calls-meter-label { margin-top: 1.6vh; font-size: 3.2vh; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: #99f6e4; }

.cel-calls-badge {
  position: absolute; right: -9vh; top: -11vh; width: 24vh; height: 24vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg);
}
.cel-calls-badge-star {
  position: absolute; inset: 0;
  clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%);
  background: radial-gradient(circle at 40% 35%, #fff7c2, #facc15 45%, #ea580c);
}
.cel-calls-badge.is-live .cel-calls-badge-star { animation: cel-calls-spin 8s linear infinite; }
.cel-calls-badge.is-live { filter: drop-shadow(0 0 3vh rgb(250 204 21 / .9)); }
@keyframes cel-calls-spin { to { rotate: 360deg; } }
.cel-calls-badge-num { position: relative; font-family: var(--font-brand); font-size: 9vh; line-height: .9; color: #7c2d12; text-shadow: 0 .3vh 0 rgb(255 255 255 / .6); }
.cel-calls-badge-sub { position: relative; font-size: 2.2vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7c2d12; }

/* Wie nam op: op naam, allemaal gelijk */
.cel-calls-people { position: absolute; left: 3vw; right: 3vw; bottom: 5vh; visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.6vh; }
.cel-calls-people-label { font-size: 2.8vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #5eead4; opacity: 0; }
.cel-calls-people-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4vh; }
.cel-calls-person {
  display: flex; align-items: center; gap: 1.6vh; padding: 1.2vh 3vh 1.2vh 1.2vh; border-radius: 999px; opacity: 0;
  background: rgb(6 48 58 / .85); border: .3vh solid rgb(94 234 212 / .6); box-shadow: 0 1vh 3vh rgb(0 0 0 / .5);
}
.cel-calls-person.is-thanked { animation: cel-calls-hover 1.6s ease-in-out infinite; }
.cel-calls-person.is-more { padding: 1.2vh 3vh; min-height: 9vh; font-size: 3vh; font-weight: 700; color: #99f6e4; }
.cel-calls-person-face { width: 9vh; height: 9vh; font-size: 3.4vh; box-shadow: 0 0 0 .4vh #5eead4; }
.cel-calls-person-name { font-size: 3vh; font-weight: 700; line-height: 1.1; }