/* Dagstart: zonsopgang en line-up. Links ~28vw vrij voor de octopus; inhoud gecentreerd op 64vw. */

.celebration[data-mode="daystart"] { --c1: #3b1d4a; --c2: #ff7800; --c3: #ffe0b0; --glow: rgb(255 150 60 / .85); }

.cel-daystart-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-daystart-sky, .cel-daystart-dawn { position: absolute; inset: 0; }
.cel-daystart-sky { background: linear-gradient(180deg, #050816 0%, #111a3d 55%, #2a1f4f 100%); }
.cel-daystart-dawn {
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 60% at 64% 62%, rgb(255 200 90 / .55), transparent 70%),
    linear-gradient(180deg, #1e1b4b 0%, #6d2a6b 32%, #e8577a 58%, #ff9a3c 78%, #ffd27a 100%);
}
.cel-daystart-dawn::after { content: ""; position: absolute; inset: 0; background: rgb(10 5 25 / .28); }

.cel-daystart-stars { position: absolute; inset: 0; }
.cel-daystart-stars span {
  position: absolute; width: .5vh; height: .5vh; border-radius: 50%; background: #fff;
  box-shadow: 0 0 1vh #fff; animation: cel-daystart-twinkle 2.4s ease-in-out infinite;
}
@keyframes cel-daystart-twinkle { 50% { opacity: .25; } }

.cel-daystart-sun { position: absolute; left: 64vw; top: 52vh; width: 0; height: 0; }
.cel-daystart-sundisc {
  position: absolute; left: -12vh; top: -12vh; width: 24vh; height: 24vh; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fffbe6, #ffe066 35%, #ffb02e 70%, #ff7800);
  box-shadow: 0 0 6vh 2vh rgb(255 200 80 / .8), 0 0 20vh 8vh rgb(255 140 40 / .55);
  animation: cel-daystart-glow 3s ease-in-out infinite;
}
@keyframes cel-daystart-glow { 50% { scale: 1.05; filter: brightness(1.1); } }
.cel-daystart-sunrays {
  position: absolute; left: -45vh; top: -45vh; width: 90vh; height: 90vh; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 230 140 / .38) 0deg 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle, #000 12%, rgb(0 0 0 / .4) 35%, transparent 68%);
  animation: cel-daystart-spin 30s linear infinite;
}
@keyframes cel-daystart-spin { to { rotate: 360deg; } }

.cel-daystart-hills { position: absolute; inset: auto 0 0 0; height: 30vh; }
.cel-daystart-hills span { position: absolute; left: -5vw; right: -5vw; bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.cel-daystart-hills .is-back { height: 22vh; left: 20vw; background: linear-gradient(180deg, #7a3b6e, #3b1d4a); }
.cel-daystart-hills .is-mid { height: 16vh; right: 35vw; background: linear-gradient(180deg, #5b2a5c, #2a1238); }
.cel-daystart-hills .is-front { height: 10vh; left: 40vw; right: -20vw; background: linear-gradient(180deg, #3b1a42, #150a1f); }

.cel-daystart-birds { position: absolute; inset: 0; }
.cel-daystart-birds span {
  position: absolute; left: -6vw; top: 22vh; width: 4vh; height: 1.6vh;
  border-top: .5vh solid #1a0f2a; border-radius: 50% 50% 0 0; opacity: .85;
  animation: cel-daystart-fly 11s linear infinite, cel-daystart-flap .45s ease-in-out infinite alternate;
}
.cel-daystart-birds span::after {
  content: ""; position: absolute; left: 100%; top: -.5vh; width: 4vh; height: 1.6vh;
  border-top: .5vh solid #1a0f2a; border-radius: 50% 50% 0 0;
}
.cel-daystart-birds span:nth-child(2) { top: 16vh; scale: .7; animation-delay: -2s, -.2s; animation-duration: 13s, .4s; }
.cel-daystart-birds span:nth-child(3) { top: 28vh; scale: .55; animation-delay: -6s, -.1s; animation-duration: 15s, .5s; }
@keyframes cel-daystart-fly { from { translate: 0 0; } 50% { translate: 55vw -5vh; } to { translate: 112vw 2vh; } }
@keyframes cel-daystart-flap { from { scale: 1 1; } to { scale: 1 .4; } }

.cel-daystart-head {
  position: absolute; left: 28vw; right: 2vw; top: 2.5vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cel-daystart-title {
  font-family: var(--font-brand); font-size: 10vh; line-height: 1; opacity: 0;
  background: linear-gradient(180deg, #fff 25%, #ffe0b0 60%, #ffb347);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .6vh 0 #6d2a6b) drop-shadow(0 0 3vh rgb(255 150 60 / .9));
}
.cel-daystart-date {
  min-height: 3.6vh; margin-top: .6vh; font-size: 3.2vh; font-weight: 700; letter-spacing: .12em;
  color: #fff; text-shadow: 0 .3vh 1vh rgb(60 20 70 / .9);
}

.cel-daystart-lineup {
  position: absolute; left: 28vw; right: 2vw; top: 21vh; bottom: 17vh;
  display: flex; justify-content: center; align-items: stretch; gap: 2vh; perspective: 120vh;
}
.cel-daystart-card {
  flex: 1 1 0; max-width: 36vh; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 2vh; opacity: 0;
  background: linear-gradient(170deg, rgb(40 20 60 / .88), rgb(15 8 30 / .92));
  border: .3vh solid rgb(255 200 140 / .55);
  box-shadow: 0 2vh 5vh rgb(0 0 0 / .5), 0 0 4vh rgb(255 140 60 / .35), inset 0 0 0 .2vh rgb(255 255 255 / .06);
}
.cel-daystart-card.is-set { animation: cel-daystart-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes cel-daystart-float { 50% { translate: 0 -1.2vh; } }
.cel-daystart-card-head {
  display: flex; align-items: center; gap: .8vh; padding: 1.4vh 1.4vh;
  background: linear-gradient(100deg, #ff7800, #ff4f7b);
  box-shadow: inset 0 -.3vh 0 rgb(0 0 0 / .2);
}
.cel-daystart-card.is-office .cel-daystart-card-head { background: linear-gradient(100deg, #f59e0b, #ff7800); }
.cel-daystart-card.is-sprint .cel-daystart-card-head { background: linear-gradient(100deg, #8b5cf6, #ec4899); }
.cel-daystart-card.is-review .cel-daystart-card-head { background: linear-gradient(100deg, #0ea5e9, #8b5cf6); }
.cel-daystart-card-icon { font-size: 3.2vh; line-height: 1; }
.cel-daystart-card-label { flex: 1; min-width: 0; font-size: 2.4vh; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-daystart-card-count {
  min-width: 4vh; padding: .2vh 1vh; border-radius: 999px; text-align: center;
  background: rgb(0 0 0 / .3); font-size: 2.4vh; font-weight: 700;
}
.cel-daystart-card-body { flex: 1; min-height: 0; padding: 2vh 1.6vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Supportdienst */
.cel-daystart-card-body.is-few { gap: 2.4vh; }
.cel-daystart-card-body.is-many { flex-flow: row wrap; gap: 1.6vh; align-content: center; }
.cel-daystart-duty { position: relative; display: flex; flex-direction: column; align-items: center; }
.cel-daystart-duty-face { width: 13vh; height: 13vh; font-size: 5vh; box-shadow: 0 0 0 .5vh #ffd84d, 0 0 3vh rgb(255 200 80 / .7); }
.is-many .cel-daystart-duty-face { width: 9vh; height: 9vh; font-size: 3.4vh; }
.cel-daystart-duty-name { margin-top: .8vh; font-size: 2.8vh; font-weight: 700; }
.cel-daystart-duty.is-out .cel-daystart-duty-face { filter: grayscale(1) brightness(.6); box-shadow: 0 0 0 .5vh #64748b; }
.cel-daystart-duty.is-out .cel-daystart-duty-name { color: #94a3b8; text-decoration: line-through; text-decoration-thickness: .3vh; }
.cel-daystart-duty-out {
  position: absolute; left: 50%; top: 4.5vh; translate: -50% 0; rotate: -12deg;
  padding: .3vh 1.2vh; border-radius: .6vh; background: #dc2626; border: .25vh solid #fff;
  font-size: 2vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

/* Op kantoor */
.cel-daystart-card-body.is-team, .cel-daystart-card-body.is-crowd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6vh 1vh; align-content: center; }
.cel-daystart-card-body.is-crowd { grid-template-columns: repeat(4, 1fr); gap: 1.2vh .6vh; }
.cel-daystart-mate { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cel-daystart-mate-face { width: 8vh; height: 8vh; font-size: 3vh; box-shadow: 0 0 0 .35vh #ffb347; }
.is-crowd .cel-daystart-mate-face { width: 6vh; height: 6vh; font-size: 2.3vh; }
.cel-daystart-mate-name { margin-top: .5vh; max-width: 100%; font-size: 2.1vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-daystart-more { font-size: 2.6vh; font-weight: 700; color: #ffe0b0; }

/* Sprint */
.cel-daystart-sprint-num { display: flex; align-items: baseline; line-height: 1; font-variant-numeric: tabular-nums; }
.cel-daystart-sprint-day { font-size: 13vh; font-weight: 700; color: #fff; text-shadow: 0 0 3vh rgb(236 72 153 / .8); }
.cel-daystart-sprint-of { font-size: 5vh; font-weight: 700; color: #f9a8d4; }
.cel-daystart-sprint-label { margin-top: .4vh; font-size: 2.8vh; font-weight: 700; letter-spacing: .06em; }
.cel-daystart-sprint-bar { position: relative; width: 100%; height: 2.6vh; margin-top: 2.2vh; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 .2vh rgb(255 255 255 / .15); }
.cel-daystart-sprint-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #ec4899, #ffb347); box-shadow: 0 0 2vh rgb(236 72 153 / .8); }
.cel-daystart-sprint-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .45vh; margin-top: 1.8vh; max-width: 100%; }
.cel-daystart-sprint-dots span { width: 1.15vh; height: 1.15vh; border-radius: 50%; background: rgb(255 255 255 / .15); transition: background .2s, box-shadow .2s; }
.cel-daystart-sprint-dots span.is-on { background: #f9a8d4; box-shadow: 0 0 1vh #ec4899; }
.cel-daystart-sprint-left { min-height: 2.6vh; margin-top: 1.6vh; font-size: 2.2vh; color: #fbcfe8; text-align: center; }

/* Review */
.cel-daystart-review-ring {
  width: 17vh; height: 17vh; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgb(14 165 233 / .25), transparent 70%);
  box-shadow: 0 0 0 .6vh #38bdf8, 0 0 4vh rgb(56 189 248 / .6);
  animation: cel-daystart-glow 2.4s ease-in-out infinite;
}
.cel-daystart-review-num { font-size: 10vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 3vh rgb(56 189 248 / .9); }
.cel-daystart-review-label { margin-top: 2vh; font-size: 2.6vh; font-weight: 700; text-align: center; line-height: 1.2; }
.cel-daystart-review-stack { position: relative; width: 12vh; height: 8vh; margin-top: 1vh; }
.cel-daystart-review-stack span {
  position: absolute; left: 50%; bottom: 0; width: 9vh; height: 3.6vh; margin-left: -4.5vh; border-radius: .5vh;
  background: linear-gradient(180deg, #fffaf0, #e7dcc5); box-shadow: 0 .3vh .8vh rgb(0 0 0 / .4), inset .8vh 0 0 #38bdf8;
}

.cel-daystart-banner {
  position: absolute; left: 64vw; bottom: 5vh; translate: -50% 0; visibility: hidden; white-space: nowrap;
  padding: 1vh 4vh; border-radius: 999px;
  font-family: var(--font-brand); font-size: 5vh; line-height: 1.1; color: #fff;
  background: linear-gradient(100deg, rgb(255 120 0 / .9), rgb(236 72 153 / .9));
  box-shadow: 0 0 4vh rgb(255 120 0 / .7), inset 0 .3vh 0 rgb(255 255 255 / .3);
}