/* Welkomstscherm voor een klant op kantoor: blijft staan tot de klant weg is. */

.celebration.is-welcome .cel-queue, .celebration.is-welcome .cel-repo, .celebration.is-welcome .cel-sound, .celebration.is-welcome .cel-alert { display: none; }

.cel-welcome { position: absolute; inset: 0; z-index: 1; overflow: hidden; color: #fff; opacity: 0; }

.cel-wel-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgb(255 210 150 / .55), transparent 70%),
    radial-gradient(circle at 12% 88%, rgb(255 120 0 / .55), transparent 40%),
    radial-gradient(circle at 92% 12%, rgb(255 170 80 / .45), transparent 38%),
    linear-gradient(160deg, #3b1a06 0%, #a34300 45%, #ff7800 100%);
}
.cel-wel-bubbles i {
  position: absolute; bottom: -8vh; width: var(--size); height: var(--size); border-radius: 50%;
  border: .25vh solid rgb(255 255 255 / .45); background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .5), transparent 60%);
  animation: cel-wel-rise linear infinite;
}
@keyframes cel-wel-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(2vw, -55vh); }
  100% { transform: translate(-1vw, -115vh); opacity: 0; }
}

.cel-wel-content {
  position: absolute; left: 50%; top: 47%; translate: -50% -50%; width: min(54vw, 104vh);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cel-wel-kicker { font-size: 2.6vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #ffe0b0; }
.cel-wel-word { display: flex; justify-content: center; font-family: var(--font-brand); font-size: 20vh; line-height: 1; margin-top: 1vh; }
.cel-wel-letter {
  display: inline-block; opacity: 0;
  background: linear-gradient(180deg, #fff 30%, #ffe0b0); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .8vh 0 rgb(122 31 0 / .7)) drop-shadow(0 0 3vh rgb(255 200 120 / .8));
  animation: cel-wel-shimmer 8s ease-in-out infinite;
}
.cel-wel-letter:nth-child(2) { animation-delay: .15s; }
.cel-wel-letter:nth-child(3) { animation-delay: .3s; }
.cel-wel-letter:nth-child(4) { animation-delay: .45s; }
.cel-wel-letter:nth-child(5) { animation-delay: .6s; }
.cel-wel-letter:nth-child(6) { animation-delay: .75s; }
@keyframes cel-wel-shimmer { 0%, 88%, 100% { translate: 0 0; } 93% { translate: 0 -1.6vh; } }

.cel-wel-card {
  margin-top: 2.4vh; display: flex; align-items: center; gap: 2.6vh; padding: 2vh 4vh 2vh 2vh; opacity: 0;
  border-radius: 2.4vh; background: rgb(255 255 255 / .96); color: #3b1a06;
  box-shadow: 0 2vh 5vh rgb(0 0 0 / .3), 0 0 6vh rgb(255 200 120 / .55);
}
.cel-wel-card.is-shining { animation: cel-wel-glow 3.5s ease-in-out infinite; }
@keyframes cel-wel-glow { 50% { box-shadow: 0 2vh 5vh rgb(0 0 0 / .3), 0 0 10vh rgb(255 220 150 / .9); } }
.cel-wel-logo { width: 12vh; height: 12vh; border-radius: 1.6vh; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cel-wel-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cel-wel-logo.is-monogram { background: linear-gradient(135deg, #ff9a3c, #ff7800 50%, #c23200); color: #fff; font-size: 5vh; font-weight: 700; }
.cel-wel-company { font-size: 6vh; font-weight: 700; line-height: 1.1; text-align: left; }

.cel-wel-visitors { margin-top: 3vh; font-family: var(--font-brand); font-size: 5vh; line-height: 1.15; opacity: 0; text-shadow: 0 .4vh 0 rgb(122 31 0 / .5); }
.cel-wel-message { margin-top: 1.4vh; font-size: 3vh; line-height: 1.3; color: #ffe0b0; opacity: 0; }
.cel-wel-message:empty { display: none; }
.cel-wel-hosts { margin-top: 3.4vh; opacity: 0; }
.cel-wel-hosts:empty { display: none; }
.cel-wel-hosts-label { font-size: 2.2vh; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: #ffe0b0; }
.cel-wel-hosts-row { margin-top: 1.4vh; display: flex; justify-content: center; gap: 3vh; }
.cel-wel-host { display: flex; align-items: center; gap: 1.2vh; padding: .8vh 2vh .8vh .8vh; border-radius: 999px; background: rgb(0 0 0 / .22); }
.cel-wel-host-face { width: 6vh; height: 6vh; font-size: 2.2vh; box-shadow: 0 0 0 .35vh #fff; }
.cel-wel-host-name { font-size: 2.6vh; font-weight: 700; }

.cel-wel-footer {
  position: absolute; left: 0; right: 0; bottom: 3.5vh; display: flex; justify-content: center; gap: 4vh; opacity: 0;
  font-size: 2.2vh; font-weight: 500; color: #ffe0b0;
}
.cel-wel-clock { font-weight: 700; color: #fff; }
/* Zonder intro (na herladen of een andere animatie) staat alles er meteen. */
.cel-welcome.is-settled :is(.cel-wel-letter, .cel-wel-card, .cel-wel-visitors, .cel-wel-message, .cel-wel-hosts, .cel-wel-footer) { opacity: 1; }

.cel-wel-info::before { content: "·"; margin-right: 4vh; color: rgb(255 255 255 / .5); }