/* Rustige wachtrij: koivijver van bovenaf, rustig en ademend. */

.celebration[data-mode="zen"] { --c1: #0b2b2b; --c2: #2dd4bf; --c3: #e6fffa; --glow: rgb(153 246 228 / .6); }

.cel-zen-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-zen-water {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, #145a5a 0%, #0b3b3f 45%, #05222a 80%, #021318 100%);
}
.cel-zen-caustics {
  position: absolute; inset: -20%; opacity: .16; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 8vh 3vh at 20% 30%, #a7f3d0, transparent 70%),
    radial-gradient(ellipse 12vh 4vh at 70% 20%, #99f6e4, transparent 70%),
    radial-gradient(ellipse 10vh 3vh at 40% 70%, #ccfbf1, transparent 70%),
    radial-gradient(ellipse 14vh 5vh at 85% 65%, #a7f3d0, transparent 70%),
    repeating-radial-gradient(circle at 30% 40%, transparent 0 4vh, rgb(204 251 241 / .35) 4.3vh, transparent 4.8vh 9vh);
  animation: cel-zen-drift 14s ease-in-out infinite alternate;
}
@keyframes cel-zen-drift { to { translate: 6vh -4vh; rotate: 4deg; } }

/* Koi: hoofd naar boven in het eigen assenstelsel; een baan draait ze rond. */
.cel-zen-orbit { position: absolute; width: 0; height: 0; animation: cel-zen-orbit 24s linear infinite; }
@keyframes cel-zen-orbit { to { rotate: 360deg; } }
.cel-zen-koi { position: absolute; left: -2.4vh; top: -8vh; width: 4.8vh; height: 16vh; filter: drop-shadow(1.5vh 2vh 1vh rgb(0 0 0 / .45)); }
.cel-zen-koi.is-back { rotate: 180deg; }
.cel-zen-koi-body {
  position: absolute; left: 0; top: 0; width: 4.8vh; height: 12vh;
  border-radius: 50% 50% 45% 45% / 32% 32% 68% 68%;
  background:
    radial-gradient(ellipse 1.6vh 2.4vh at 40% 30%, #f97316 60%, transparent 62%),
    radial-gradient(ellipse 2vh 3vh at 62% 62%, #ef4444 60%, transparent 62%),
    linear-gradient(180deg, #fff7ed, #fde2c8);
  animation: cel-zen-wiggle 1.1s ease-in-out infinite;
  transform-origin: 50% 30%;
}
.cel-zen-koi.is-red .cel-zen-koi-body {
  background:
    radial-gradient(ellipse 1.8vh 2.6vh at 50% 18%, #fff7ed 60%, transparent 62%),
    linear-gradient(180deg, #ef4444, #f97316 60%, #dc2626);
}
.cel-zen-koi.is-gold .cel-zen-koi-body {
  background:
    radial-gradient(ellipse 1.4vh 2vh at 35% 55%, #1f2937 55%, transparent 60%),
    linear-gradient(180deg, #fde68a, #f59e0b 60%, #d97706);
}
.cel-zen-koi-tail {
  position: absolute; left: .4vh; top: 10vh; width: 4vh; height: 6vh;
  background: linear-gradient(180deg, rgb(255 170 120 / .9), rgb(255 255 255 / .25));
  clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
  transform-origin: 50% 0; animation: cel-zen-tail .55s ease-in-out infinite alternate;
}
.cel-zen-koi-fin {
  position: absolute; top: 3vh; width: 2.4vh; height: 3.2vh; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: rgb(255 220 190 / .7); animation: cel-zen-fin .8s ease-in-out infinite alternate;
}
.cel-zen-koi-fin.is-left { left: -1.6vh; rotate: 35deg; transform-origin: 100% 0; }
.cel-zen-koi-fin.is-right { right: -1.6vh; rotate: -35deg; transform-origin: 0 0; }
@keyframes cel-zen-wiggle { 50% { rotate: 4deg; } 0%, 100% { rotate: -4deg; } }
@keyframes cel-zen-tail { from { rotate: -22deg; } to { rotate: 22deg; } }
@keyframes cel-zen-fin { to { scale: .7 1; } }

.cel-zen-pads span {
  position: absolute; width: 16vh; height: 16vh; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgb(255 255 255 / .07) 0deg 1.5deg, transparent 1.5deg 30deg),
    radial-gradient(circle at 45% 40%, #3fbf73, #15803d 55%, #0f3d24);
  mask: conic-gradient(from 20deg, #000 0deg 344deg, transparent 344deg);
  box-shadow: inset 0 0 2vh rgb(0 0 0 / .4);
  filter: drop-shadow(1vh 1.6vh 1vh rgb(0 0 0 / .4));
  animation: cel-zen-bob 6s ease-in-out infinite alternate;
}
.cel-zen-pads span:nth-child(1) { left: 4vw; top: 6vh; rotate: 40deg; }
.cel-zen-pads span:nth-child(2) { left: 12vw; top: 18vh; scale: .6; rotate: 160deg; animation-delay: -2s; }
.cel-zen-pads span:nth-child(3) { right: 6vw; top: 10vh; scale: .85; rotate: 250deg; animation-delay: -1s; }
.cel-zen-pads span:nth-child(4) { right: 3vw; bottom: 8vh; scale: 1.1; rotate: 300deg; animation-delay: -3s; }
.cel-zen-pads span:nth-child(5) { left: 6vw; bottom: 6vh; scale: .75; rotate: 90deg; animation-delay: -4s; }
@keyframes cel-zen-bob { to { translate: 1vh 1.4vh; } }

.cel-zen-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: .35vh solid rgb(220 255 250 / .8); box-shadow: 0 0 1.4vh rgb(153 246 228 / .5), inset 0 0 1.4vh rgb(153 246 228 / .4);
}

.cel-zen-glow {
  position: absolute; left: 50%; top: 40vh; width: 110vh; height: 70vh; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(153 246 228 / .26), rgb(45 212 191 / .08) 60%, transparent);
  opacity: 0; transition: opacity 2s;
}
.cel-zen-glow.is-on { opacity: 1; animation: cel-zen-breathe 4.5s ease-in-out infinite; }
@keyframes cel-zen-breathe { 50% { scale: 1.14; opacity: .65; } }

/* Lotus */
.cel-zen-lotus { position: absolute; left: 50%; top: 31vh; width: 0; height: 0; }
.cel-zen-pad {
  position: absolute; left: -15vh; top: -3vh; width: 30vh; height: 8vh; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #4ade80, #15803d 60%, #14532d);
  mask: conic-gradient(from 160deg at 50% 50%, #000 0deg 340deg, transparent 340deg);
  filter: drop-shadow(0 1.4vh 1vh rgb(0 0 0 / .45));
}
.cel-zen-petals { position: absolute; left: 0; top: 0; }
.cel-zen-petal {
  position: absolute; left: -3vh; bottom: 0; width: 6vh; height: 13vh; transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  background: linear-gradient(180deg, #fff1f7, #f9a8d4 55%, #db2777);
  box-shadow: inset 0 -1vh 2vh rgb(190 24 93 / .35);
}
.cel-zen-petal.is-inner { left: -2.7vh; width: 5.4vh; height: 12vh; background: linear-gradient(180deg, #ffffff, #fbcfe8 50%, #ec4899); }
.cel-zen-petal.is-core { left: -2.4vh; width: 4.8vh; height: 11vh; background: linear-gradient(180deg, #ffffff, #fce7f3 60%, #f472b6); }
.cel-zen-heart {
  position: absolute; left: -2.4vh; top: -4vh; width: 4.8vh; height: 3vh; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff7c2, #facc15 60%, transparent 70%); transition: opacity 1s;
}
.cel-zen-lotus.is-open .cel-zen-heart { opacity: 1; }
.cel-zen-lotus.is-open .cel-zen-petals { filter: drop-shadow(0 0 3vh rgb(249 168 212 / .75)); transition: filter 1.2s; }

.cel-zen-drop {
  position: absolute; top: 0; width: 1.6vh; height: 2.4vh; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(circle at 40% 60%, #fff, #99f6e4); box-shadow: 0 0 1.4vh rgb(204 251 241 / .9);
}

.cel-zen-text { position: absolute; left: 4vw; right: 4vw; top: 38vh; visibility: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel-zen-kicker { font-size: 2.6vh; font-weight: 500; letter-spacing: .45em; text-transform: uppercase; color: #99f6e4; opacity: 0; }
.cel-zen-title {
  margin-top: 1.2vh; font-size: 8vh; font-weight: 500; line-height: 1.1; letter-spacing: .02em; opacity: 0;
  color: #f0fdfa; text-shadow: 0 0 3vh rgb(153 246 228 / .55), 0 .4vh 1.4vh rgb(0 0 0 / .5);
}

.cel-zen-stones { position: absolute; left: 0; right: 0; top: 60vh; display: flex; justify-content: center; align-items: flex-start; gap: 5vh; }
.cel-zen-stone {
  width: 33vh; padding: 2.8vh 2vh 2.6vh; border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%; text-align: center; opacity: 0;
  background: radial-gradient(ellipse at 40% 30%, rgb(226 232 240 / .32), rgb(100 116 139 / .22) 60%, rgb(15 23 42 / .3));
  border: .2vh solid rgb(204 251 241 / .25);
  box-shadow: 0 1.6vh 3vh rgb(0 0 0 / .4), inset 0 .4vh 1vh rgb(255 255 255 / .12);
  backdrop-filter: blur(4px);
}
.cel-zen-stone:nth-child(2) { margin-top: 3vh; }
.cel-zen-stone-num { font-size: 8vh; font-weight: 700; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 2.4vh rgb(153 246 228 / .7); }
.cel-zen-stone-label { margin-top: .4vh; font-size: 2.4vh; font-weight: 500; letter-spacing: .06em; color: #ccfbf1; }