/* Gemiste oproepen: koperen bel met een rode teller, gemiste-gesprekkaartjes en een oproep. */

.celebration[data-mode="missed"] { --c1: #4c0519; --c2: #f43f5e; --c3: #ffe4e6; --glow: rgb(251 113 133 / .85); }

.cel-mc-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 55% at 24% 48%, rgb(251 191 36 / .18), transparent 70%),
    radial-gradient(ellipse 55% 60% at 70% 50%, rgb(244 63 94 / .2), transparent 70%),
    rgb(20 2 8 / .7);
}

/* Bel */
.cel-mc-bellwrap { position: absolute; left: calc(25vw - 24vh); top: 21vh; width: 48vh; height: 56vh; }
.cel-mc-bell { position: absolute; left: 4vh; right: 4vh; top: 0; bottom: 0; transform-origin: 50% 3%; filter: drop-shadow(0 2vh 3vh rgb(0 0 0 / .55)) drop-shadow(0 0 4vh rgb(251 191 36 / .35)); }
.cel-mc-bell svg { width: 100%; height: 100%; overflow: visible; }
.cel-mc-clapper { transform-box: view-box; transform-origin: 100px 120px; }
.cel-mc-badge {
  position: absolute; right: 0; top: 4vh; width: 15vh; height: 15vh; border-radius: 50%; visibility: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fb7185, #e11d48 55%, #9f1239);
  box-shadow: 0 0 0 .8vh #fff, 0 1.4vh 3vh rgb(0 0 0 / .5), 0 0 6vh rgb(244 63 94 / .9);
}
.cel-mc-badge.is-on { visibility: visible; }
.cel-mc-badge span { font-size: 9vh; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 .4vh 0 rgb(136 19 55 / .7); }

.cel-mc-waves { position: absolute; top: 12vh; width: 10vh; height: 16vh; opacity: 0; }
.cel-mc-waves.is-left { left: -8vh; scale: -1 1; }
.cel-mc-waves.is-right { right: -8vh; }
.cel-mc-waves span {
  position: absolute; top: 50%; left: 0; border-radius: 50%; border: .9vh solid transparent; border-right-color: #fda4af;
  filter: drop-shadow(0 0 1vh #fb7185); translate: 0 -50%;
}
.cel-mc-waves span:nth-child(1) { width: 6vh; height: 6vh; }
.cel-mc-waves span:nth-child(2) { width: 11vh; height: 11vh; left: -2.5vh; }
.cel-mc-waves span:nth-child(3) { width: 16vh; height: 16vh; left: -5vh; }
.cel-mc-bellwrap.is-ringing .cel-mc-waves { opacity: 1; }
.cel-mc-bellwrap.is-ringing .cel-mc-waves span { animation: cel-mc-wave .36s steps(1) infinite; }
.cel-mc-bellwrap.is-ringing .cel-mc-waves span:nth-child(2) { animation-delay: .12s; }
.cel-mc-bellwrap.is-ringing .cel-mc-waves span:nth-child(3) { animation-delay: .24s; }
@keyframes cel-mc-wave { 50% { opacity: .15; } }

/* Tekst */
.cel-mc-text { position: absolute; left: 47vw; right: 3vw; top: 19vh; display: flex; flex-direction: column; align-items: flex-start; }
.cel-mc-kicker { font-size: 2.8vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #fda4af; opacity: 0; }
.cel-mc-title {
  margin-top: 1vh; font-family: var(--font-brand); font-size: 13vh; line-height: 1; color: #fff; opacity: 0; white-space: nowrap;
  text-shadow: 0 .6vh 0 #881337, 0 0 4vh rgb(244 63 94 / .8);
}
.cel-mc-sub { margin-top: 1vh; font-size: 4.2vh; font-weight: 500; color: #ffe4e6; opacity: 0; }
.cel-mc-row { display: flex; flex-wrap: nowrap; gap: 2vh; margin-top: 4vh; min-height: 12vh; }
.cel-mc-call {
  width: 12vh; height: 12vh; border-radius: 2.4vh; display: grid; place-items: center; opacity: 0;
  background: linear-gradient(180deg, #334155, #1e293b); box-shadow: 0 0 0 .4vh rgb(255 255 255 / .35), 0 1.2vh 2.4vh rgb(0 0 0 / .5);
  transition: background .25s, box-shadow .25s;
}
.cel-mc-call svg { width: 7.4vh; height: 7.4vh; fill: #e2e8f0; }
.cel-mc-call.is-missed { background: linear-gradient(180deg, #e11d48, #9f1239); box-shadow: 0 0 0 .4vh #fecdd3, 0 1.2vh 2.4vh rgb(0 0 0 / .5), 0 0 4vh rgb(244 63 94 / .7); }
.cel-mc-call.is-missed svg { fill: #fff; }
.cel-mc-call svg .is-arrow { fill: #fecdd3; }
.cel-mc-more { align-self: center; padding: 1.2vh 2.4vh; border-radius: 999px; font-size: 5.4vh; font-weight: 700; color: #881337; background: #ffe4e6; }
.cel-mc-dot {
  position: absolute; left: 0; top: 0; width: 3.4vh; height: 3.4vh; margin: -1.7vh 0 0 -1.7vh; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #fb7185 60%, #e11d48); box-shadow: 0 0 2.4vh #fb7185;
}

.cel-mc-cta {
  margin-top: 4.4vh; display: flex; align-items: center; gap: 2vh; padding: 1.6vh 4.4vh 1.6vh 1.8vh; border-radius: 999px; opacity: 0; white-space: nowrap;
  font-size: 5.6vh; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #fb7185, #e11d48 55%, #9f1239);
  box-shadow: 0 0 0 .5vh #ffe4e6, 0 2vh 4vh rgb(0 0 0 / .5), 0 0 6vh rgb(244 63 94 / .7);
  text-shadow: 0 .3vh 0 rgb(136 19 55 / .7);
}
.cel-mc-cta-icon { width: 8vh; height: 8vh; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.cel-mc-cta-icon svg { width: 5.4vh; height: 5.4vh; fill: #e11d48; }
.cel-mc-cta-icon svg .is-arrow { fill: #e11d48; }
.cel-mc-cta.is-live { animation: cel-mc-cta 1.2s ease-in-out infinite; }
@keyframes cel-mc-cta { 50% { scale: 1.04; box-shadow: 0 0 0 .9vh #fff, 0 2vh 4vh rgb(0 0 0 / .5), 0 0 10vh rgb(251 113 133 / 1); } }