/* Dagstand-show: de week als glazen buizen die vollopen, met weektotaal, beste dag en (dev) de sprint ernaast. */

.celebration[data-mode="show-week"] { --c1: #1a1205; --c2: #facc15; --c3: #fde68a; --glow: rgb(250 204 21 / .5); }

.cel-show-week-scene {
  --accent: #ffb000; --accent-glow: rgb(255 176 0 / .7); --accent-soft: rgb(255 176 0 / .12);
  --liquid: linear-gradient(180deg, #ffd84d, #ffb000 30%, #ff7800);
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 35% 70%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, #060a14, #0b1222 60%, #04060c);
}
.cel-show-week-scene.is-support {
  --accent: #4ade80; --accent-glow: rgb(74 222 128 / .7); --accent-soft: rgb(74 222 128 / .1);
  --liquid: linear-gradient(180deg, #86efac, #22c55e 35%, #15803d);
}

.cel-show-week-head { position: absolute; left: 5vw; top: 3vh; opacity: 0; }
.cel-show-week-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 2vh var(--accent-glow); }
.cel-show-week-title { font-family: var(--font-brand); font-size: 8.5vh; line-height: 1.05; color: #fff; white-space: nowrap; text-shadow: 0 .5vh 0 rgb(0 0 0 / .6), 0 0 4vh var(--accent-glow); }

.cel-show-week-focus {
  position: absolute; right: 4vw; top: 6vh; max-width: 50vw; opacity: 0;
  padding: 1.2vh 3vh; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 3.2vh; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgb(15 23 42 / .9); border: .3vh solid var(--accent); box-shadow: 0 0 3vh var(--accent-glow);
}
.cel-show-week-focus.is-on { opacity: 1; }

/* De buizen */
.cel-show-week-chart {
  position: absolute; left: 4vw; right: 36vw; top: 24vh; bottom: 4vh;
  display: grid; grid-template-rows: auto 1fr auto auto; column-gap: 2.6vh; row-gap: 1.2vh; justify-items: center;
}
.cel-show-week-value {
  position: relative; opacity: 0; font-size: 6.4vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 .4vh 1.2vh rgb(0 0 0 / .7);
}
.cel-show-week-value.is-today { color: #fff7d6; text-shadow: 0 0 2.4vh var(--accent-glow); }
.cel-show-week-value.is-future { color: #475569; }
.cel-show-week-mark { position: absolute; left: 50%; bottom: 100%; margin-left: -3.6vh; width: 7.2vh; text-align: center; font-size: 7vh; line-height: 1; filter: drop-shadow(0 0 2vh rgb(250 204 21 / .9)); }
.cel-show-week-mark.is-star { font-size: 5vh; margin-left: -2.5vh; width: 5vh; }

.cel-show-week-tube {
  position: relative; width: 15vh; height: 100%; opacity: 0; overflow: hidden;
  border-radius: 3vh 3vh 1.6vh 1.6vh; border: .4vh solid rgb(255 255 255 / .28);
  background: linear-gradient(90deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02) 40%, rgb(255 255 255 / .07));
  box-shadow: inset 0 0 2vh rgb(0 0 0 / .5), 0 1vh 3vh rgb(0 0 0 / .4);
  transition: translate .35s, filter .35s, box-shadow .35s;
}
.cel-show-week-tube::after {
  content: ""; position: absolute; left: 14%; top: 4%; bottom: 4%; width: 10%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / .05));
}
.cel-show-week-tube.is-future { border-style: dashed; border-color: rgb(255 255 255 / .28); background: repeating-linear-gradient(135deg, rgb(255 255 255 / .04) 0 1vh, transparent 1vh 2.2vh); box-shadow: none; }
.cel-show-week-tube.is-today { border-color: var(--accent); }
.cel-show-week-tube.is-glowing { animation: cel-show-week-glow 1.6s ease-in-out infinite; }
@keyframes cel-show-week-glow { 50% { box-shadow: inset 0 0 2vh rgb(0 0 0 / .4), 0 0 5vh var(--accent-glow); } }
.cel-show-week-tube.is-focus { translate: 0 -1.5vh; filter: brightness(1.2); box-shadow: inset 0 0 2vh rgb(0 0 0 / .4), 0 0 4vh rgb(255 255 255 / .35); }

.cel-show-week-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: hidden;
  background: var(--liquid); box-shadow: inset 0 .6vh 0 rgb(255 255 255 / .45);
}
.cel-show-week-liquid::before {
  content: ""; position: absolute; left: -50%; top: -1.2vh; width: 200%; height: 2.4vh;
  background: radial-gradient(ellipse 1.6vh 1.2vh at 50% 100%, transparent 98%, rgb(255 255 255 / .3)) 0 0 / 4vh 2.4vh repeat-x;
  animation: cel-show-week-wave 2.2s linear infinite;
}
@keyframes cel-show-week-wave { to { translate: 4vh 0; } }
.cel-show-week-bubble {
  position: absolute; bottom: -2vh; width: 1.4vh; height: 1.4vh; border-radius: 50%;
  border: .25vh solid rgb(255 255 255 / .55); background: rgb(255 255 255 / .15);
  animation: cel-show-week-bubble 3s linear infinite;
}
@keyframes cel-show-week-bubble { from { translate: 0 0; opacity: 0; } 15% { opacity: 1; } to { translate: .8vh -50vh; opacity: 0; } }
.cel-show-week-later {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -90deg; white-space: nowrap;
  font-size: 2.6vh; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #64748b;
}

.cel-show-week-label { opacity: 0; display: flex; flex-direction: column; align-items: center; transition: color .3s; }
.cel-show-week-day { font-size: 4.2vh; font-weight: 700; line-height: 1; text-transform: lowercase; }
.cel-show-week-date { min-height: 2.6vh; font-size: 2.4vh; font-weight: 600; color: #94a3b8; }
.cel-show-week-label.is-future .cel-show-week-day { color: #64748b; }
.cel-show-week-label.is-focus .cel-show-week-day { color: var(--accent); }
.cel-show-week-today { margin-top: .6vh; padding: .2vh 1.4vh; border-radius: 999px; font-size: 2.2vh; font-weight: 700; color: #0b1222; background: var(--accent); }

.cel-show-week-extra { opacity: 0; display: flex; align-items: center; gap: 1vh; min-height: 4vh; }
.cel-show-week-ring {
  --p: 0; --ring: #4ade80;
  width: 3.8vh; height: 3.8vh; border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgb(255 255 255 / .14) 0);
  mask: radial-gradient(circle, transparent 0 48%, #000 50%);
}
.cel-show-week-ring.is-amber { --ring: #fbbf24; }
.cel-show-week-ring.is-red { --ring: #f87171; }
.cel-show-week-rate { font-size: 2.8vh; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Gemiddelde als stippellijn over alle buizen */
.cel-show-week-avg { --level: 0%; grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cel-show-week-avg::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--level); border-top: .45vh dashed rgb(255 255 255 / .8); filter: drop-shadow(0 0 .6vh rgb(255 255 255 / .6)); }
.cel-show-week-avg-label {
  position: absolute; right: 0; bottom: var(--level); translate: 0 -.8vh;
  padding: .3vh 1.2vh; border-radius: .8vh; font-size: 2.4vh; font-weight: 700; white-space: nowrap; color: #0b1222; background: #e2e8f0;
}

/* Rechts: weektotaal, beste dag, sprint */
.cel-show-week-side { position: absolute; right: 4vw; top: 23vh; bottom: 4vh; width: 28vw; display: flex; flex-direction: column; gap: 2vh; }
.cel-show-week-card {
  opacity: 0; padding: 1.6vh 3vh 1.8vh; border-radius: 2vh;
  background: linear-gradient(180deg, rgb(20 28 48 / .92), rgb(10 16 30 / .92)); border: .3vh solid rgb(148 163 184 / .35);
  box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .5);
}
.cel-show-week-card-kicker { font-size: 2.6vh; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #cbd5e1; }
.cel-show-week-card.is-total { border-color: var(--accent); box-shadow: 0 1.4vh 4vh rgb(0 0 0 / .5), 0 0 4vh var(--accent-soft); }
.cel-show-week-card.is-total .cel-show-week-card-kicker { color: var(--accent); }
.cel-show-week-total { display: flex; align-items: baseline; gap: 0 1.4vh; flex-wrap: wrap; }
.cel-show-week-total-num { display: inline-block; font-size: 11vh; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 3vh var(--accent-glow); }
.cel-show-week-total-unit { font-size: 3.2vh; font-weight: 700; color: #e2e8f0; }
.cel-show-week-total-sub { min-height: 3vh; font-size: 3vh; font-weight: 700; color: var(--accent); }

.cel-show-week-best-day { font-family: var(--font-brand); font-size: 6.4vh; line-height: 1.1; }
.cel-show-week-best-sub { font-size: 3vh; font-weight: 700; color: #fde68a; font-variant-numeric: tabular-nums; }
.cel-show-week-card.is-best.is-today { border-color: #facc15; background: linear-gradient(135deg, rgb(120 80 0 / .9), rgb(20 28 48 / .92) 70%); box-shadow: 0 0 5vh rgb(250 204 21 / .5); animation: cel-show-week-float 1.8s ease-in-out infinite; }
.cel-show-week-card.is-best.is-today .cel-show-week-card-kicker { color: #fde047; }
@keyframes cel-show-week-float { 50% { translate: 0 -1vh; } }

.cel-show-week-sprint-text { font-size: 4.6vh; font-weight: 700; line-height: 1.15; }
.cel-show-week-sprint-track { display: flex; gap: .6vh; margin: 1vh 0; }
.cel-show-week-sprint-block { flex: 1 1 0; height: 3.6vh; border-radius: .7vh; background: rgb(255 255 255 / .1); transition: background .2s, box-shadow .2s; }
.cel-show-week-sprint-block.is-on { background: linear-gradient(180deg, #ffd84d, #ff7800); box-shadow: 0 0 1.4vh rgb(255 160 0 / .6); }
.cel-show-week-sprint-block.is-now { animation: cel-show-week-now 1s ease-in-out infinite; }
@keyframes cel-show-week-now { 50% { box-shadow: 0 0 3vh #ffd84d, 0 0 0 .3vh #fff; } }
.cel-show-week-sprint-sub { font-size: 2.6vh; font-weight: 600; color: #cbd5e1; }

.cel-show-week-vs { display: flex; align-items: center; flex-wrap: wrap; gap: 1vh 2vh; margin-top: .6vh; }
.cel-show-week-vs-num { font-size: 4.2vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.cel-show-week-vs-delta { opacity: 0; padding: .4vh 1.6vh; border-radius: 1vh; font-size: 2.6vh; font-weight: 700; white-space: nowrap; }
.cel-show-week-vs-delta.is-up { color: #052e16; background: #4ade80; box-shadow: 0 0 2.4vh rgb(74 222 128 / .6); }
.cel-show-week-vs-delta.is-down { color: #fff; background: #0369a1; }
.cel-show-week-vs-delta.is-even { color: #0b1222; background: #cbd5e1; }