/* Groene reeks: een groene vlam die met elke dag groeit, naast een kalender vol vinkjes. */

.celebration[data-mode="streak"] { --c1: #052e16; --c2: #22c55e; --c3: #bbf7d0; --glow: rgb(74 222 128 / .85); }

.cel-streak-scene { position: absolute; inset: 0; }
.cel-streak-kicker {
  position: absolute; left: 4vw; right: 4vw; top: 6vh; text-align: center; min-height: 6vh;
  font-family: var(--font-brand); font-size: 6vh; color: var(--c3); text-shadow: 0 0 3vh var(--glow);
}
.cel-streak-title {
  position: absolute; left: 4vw; right: 4vw; top: 3vh; text-align: center; visibility: hidden;
  font-family: var(--font-brand); font-size: 10vh; line-height: 1.05; color: #fff;
  text-shadow: 0 .6vh 0 #15803d, 0 1.1vh 0 var(--c1), 0 0 4vh var(--glow);
}
.cel-streak-sub {
  position: absolute; left: 4vw; right: 4vw; top: 15.5vh; text-align: center; opacity: 0;
  font-size: 3.6vh; font-weight: 700; color: var(--c3); text-shadow: 0 .3vh 1vh rgb(0 0 0 / .8);
}

.cel-streak-left { position: absolute; left: 3vw; width: 42vw; top: 22vh; bottom: 2vh; }
.cel-streak-flame {
  position: absolute; left: 50%; bottom: 9vh; width: 40vh; height: 62vh; margin-left: -20vh;
  transform-origin: 50% 100%; transform: scale(0);
}
.cel-streak-base { position: absolute; left: 50%; bottom: 6vh; width: 1px; height: 1px; }
.cel-streak-glow {
  position: absolute; left: 50%; bottom: -6vh; width: 52vh; height: 52vh; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle, rgb(74 222 128 / .5), rgb(34 197 94 / .18) 45%, transparent 70%);
  animation: cel-streak-glow 1.4s ease-in-out infinite alternate;
}
.cel-streak-scene.is-lit .cel-streak-glow { background: radial-gradient(circle, rgb(190 255 200 / .75), rgb(34 197 94 / .3) 45%, transparent 72%); }
@keyframes cel-streak-glow { to { scale: 1.15; opacity: .8; } }
/* Druppel (gedraaid vierkant) die verticaal wordt uitgerekt tot een vlammentong. */
.cel-streak-tongue { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%; animation: cel-streak-flicker .5s ease-in-out infinite alternate; }
.cel-streak-tongue::before { content: ""; position: absolute; inset: 0; border-radius: 0 50% 50% 50%; rotate: 45deg; background: var(--fill); }
.cel-streak-tongue.is-outer {
  width: 24vh; height: 24vh; margin-left: -12vh; bottom: 4vh;
  --fill: radial-gradient(circle at 72% 72%, #ecfccb 0%, #4ade80 28%, #16a34a 62%, #14532d 100%);
  filter: blur(.2vh) drop-shadow(0 0 4vh rgb(74 222 128 / .9));
}
.cel-streak-tongue.is-side { width: 12vh; height: 12vh; bottom: 4vh; --fill: radial-gradient(circle at 72% 72%, #d9f99d, #22c55e 50%, #14532d); filter: blur(.2vh); animation-duration: .38s; }
.cel-streak-tongue.is-side.is-l { margin-left: -13vh; animation-name: cel-streak-flicker-l; }
.cel-streak-tongue.is-side.is-r { margin-left: 1vh; animation-name: cel-streak-flicker-r; animation-delay: -.2s; }
.cel-streak-tongue.is-mid { width: 15vh; height: 15vh; margin-left: -7.5vh; bottom: 4.5vh; --fill: radial-gradient(circle at 72% 72%, #fefce8, #fde047 35%, #a3e635 78%); animation-duration: .36s; animation-delay: -.1s; }
.cel-streak-tongue.is-inner { width: 8vh; height: 8vh; margin-left: -4vh; bottom: 5vh; --fill: radial-gradient(circle at 72% 72%, #fff, #fefce8 60%, #fef08a); animation-duration: .27s; }
@keyframes cel-streak-flicker { 0% { scale: .84 1.45; } 50% { scale: .8 1.58; translate: -.4vh 0; } 100% { scale: .88 1.38; translate: .4vh 0; } }
@keyframes cel-streak-flicker-l { 0% { scale: .7 1.2; rotate: -14deg; } 100% { scale: .66 1.4; rotate: -20deg; } }
@keyframes cel-streak-flicker-r { 0% { scale: .7 1.25; rotate: 14deg; } 100% { scale: .66 1.45; rotate: 20deg; } }

.cel-streak-number {
  position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 17vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 .6vh 0 #14532d, 0 0 1vh #052e16, 0 0 3vh rgb(5 46 22 / .9);
}
.cel-streak-unit {
  position: absolute; left: 0; right: 0; bottom: 1vh; text-align: center;
  font-size: 5vh; font-weight: 700; color: var(--c3); text-shadow: 0 .3vh 1vh rgb(0 0 0 / .9);
}

.cel-streak-right {
  position: absolute; left: 47vw; right: 3vw; top: 24vh; bottom: 6vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh;
}
.cel-streak-head { font-size: 2.8vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--c3); }
.cel-streak-next { min-height: 3.6vh; font-size: 3.2vh; font-weight: 700; color: #facc15; opacity: 0; text-shadow: 0 0 2vh rgb(250 204 21 / .5); }
.cel-streak-calendar {
  --cell: 9.5vh;
  display: grid; grid-template-columns: repeat(7, var(--cell)); grid-auto-rows: var(--cell); gap: 1.2vh;
  justify-content: center; align-content: center;
}
.cel-streak-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;
  border-radius: 1.2vh; background: rgb(255 255 255 / .06); border: .3vh solid rgb(255 255 255 / .18);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.cel-streak-day { font-size: 2vh; font-weight: 700; color: rgb(255 255 255 / .7); text-transform: lowercase; line-height: 1; }
.cel-streak-date { font-size: calc(var(--cell) * .38); font-weight: 700; line-height: 1.05; }
.cel-streak-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cel-streak-check svg { width: 80%; height: 80%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; filter: drop-shadow(0 0 .6vh rgb(0 0 0 / .5)); }
.cel-streak-cell.is-green { background: linear-gradient(160deg, #4ade80, #16a34a); border-color: #bbf7d0; box-shadow: 0 0 2.5vh rgb(74 222 128 / .7); }
.cel-streak-cell.is-green .cel-streak-day, .cel-streak-cell.is-green .cel-streak-date { opacity: .35; }
.cel-streak-cell.is-green .cel-streak-check svg { stroke-dashoffset: 0; transition: stroke-dashoffset .25s ease-out; }