/**
 * Splash Website Pack — Phase 3 animation system
 * Usage: wrap the inline SVG in <div class="splash splash--wave">…</div>
 */

.splash {
  --splash-idle-duration: 3.6s;
  --splash-wave-cycle: 7.2s;
  --splash-emotion-duration: 2.8s;
  /* Jump/lean motion length; stage cycle adds --splash-stage-pause after each loop */
  --splash-jump-duration: 1.15s;
  --splash-stage-pause: 3s;
  --splash-stage-cycle: calc(var(--splash-jump-duration) + var(--splash-stage-pause));
  --splash-band-beginner: #2EC4D6;
  --splash-band-improver: #3DAB6E;
  --splash-band-intermediate: #F0C419;
  --splash-band-advanced: #F18A1F;
  --splash-band-preclub: #8314EA;
  --splash-band: var(--splash-band-beginner);
  width: min(420px, 100%);
  margin-inline: auto;
  isolation: isolate;
  line-height: 0;
}

.splash svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- Shared idle underlays ---------- */

.splash--idle #splash-character,
.splash--wave #splash-character,
.splash--thumbs-up #splash-character,
.splash--celebrate #splash-character,
.splash--happy #splash-character,
.splash--excited #splash-character,
.splash--thinking #splash-character,
.splash--confused #splash-character,
.splash--proud #splash-character,
.splash--nervous #splash-character,
.splash--surprised #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-bob var(--splash-idle-duration) cubic-bezier(.45, .05, .55, .95) infinite;
}

.splash--idle #splash-body,
.splash--wave #splash-body,
.splash--thumbs-up #splash-body,
.splash--celebrate #splash-body,
.splash--happy #splash-body,
.splash--excited #splash-body,
.splash--thinking #splash-body,
.splash--confused #splash-body,
.splash--proud #splash-body,
.splash--nervous #splash-body,
.splash--surprised #splash-body {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: splash-breathe var(--splash-idle-duration) cubic-bezier(.45, .05, .55, .95) infinite;
}

.splash--idle #splash-left-eye,
.splash--idle #splash-right-eye,
.splash--wave #splash-left-eye,
.splash--wave #splash-right-eye,
.splash--thumbs-up #splash-left-eye,
.splash--thumbs-up #splash-right-eye,
.splash--celebrate #splash-left-eye,
.splash--celebrate #splash-right-eye,
.splash--happy #splash-left-eye,
.splash--happy #splash-right-eye,
.splash--excited #splash-left-eye,
.splash--excited #splash-right-eye,
.splash--thinking #splash-left-eye,
.splash--thinking #splash-right-eye,
.splash--confused #splash-left-eye,
.splash--confused #splash-right-eye,
.splash--proud #splash-left-eye,
.splash--proud #splash-right-eye,
.splash--nervous #splash-left-eye,
.splash--nervous #splash-right-eye,
.splash--surprised #splash-left-eye,
.splash--surprised #splash-right-eye,
.splash--hold-1 #splash-left-eye,
.splash--hold-1 #splash-right-eye,
.splash--hold-2 #splash-left-eye,
.splash--hold-2 #splash-right-eye,
.splash--hold-3 #splash-left-eye,
.splash--hold-3 #splash-right-eye,
.splash--hold-4 #splash-left-eye,
.splash--hold-4 #splash-right-eye,
.splash--hold-5 #splash-left-eye,
.splash--hold-5 #splash-right-eye,
.splash--hold-6 #splash-left-eye,
.splash--hold-6 #splash-right-eye,
.splash--hold-7 #splash-left-eye,
.splash--hold-7 #splash-right-eye,
.splash--hold-8 #splash-left-eye,
.splash--hold-8 #splash-right-eye,
.splash--hold-9 #splash-left-eye,
.splash--hold-9 #splash-right-eye,
.splash--hold-10 #splash-left-eye,
.splash--hold-10 #splash-right-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-eye-blink 5.8s ease-in-out infinite;
}

.splash--idle #splash-eyelids,
.splash--wave #splash-eyelids,
.splash--thumbs-up #splash-eyelids,
.splash--celebrate #splash-eyelids,
.splash--happy #splash-eyelids,
.splash--excited #splash-eyelids,
.splash--thinking #splash-eyelids,
.splash--confused #splash-eyelids,
.splash--proud #splash-eyelids,
.splash--nervous #splash-eyelids,
.splash--surprised #splash-eyelids,
.splash--hold-1 #splash-eyelids,
.splash--hold-2 #splash-eyelids,
.splash--hold-3 #splash-eyelids,
.splash--hold-4 #splash-eyelids,
.splash--hold-5 #splash-eyelids,
.splash--hold-6 #splash-eyelids,
.splash--hold-7 #splash-eyelids,
.splash--hold-8 #splash-eyelids,
.splash--hold-9 #splash-eyelids,
.splash--hold-10 #splash-eyelids {
  animation: splash-closed-eyes 5.8s ease-in-out infinite;
}

.splash--idle #splash-eyebrows,
.splash--wave #splash-eyebrows,
.splash--thumbs-up #splash-eyebrows,
.splash--celebrate #splash-eyebrows,
.splash--hold-1 #splash-eyebrows,
.splash--hold-2 #splash-eyebrows,
.splash--hold-3 #splash-eyebrows,
.splash--hold-4 #splash-eyebrows,
.splash--hold-5 #splash-eyebrows,
.splash--hold-6 #splash-eyebrows,
.splash--hold-7 #splash-eyebrows,
.splash--hold-8 #splash-eyebrows,
.splash--hold-9 #splash-eyebrows,
.splash--hold-10 #splash-eyebrows {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-brow-blink 5.8s ease-in-out infinite;
}

.splash--idle #splash-shadow,
.splash--wave #splash-shadow,
.splash--thumbs-up #splash-shadow,
.splash--celebrate #splash-shadow,
.splash--happy #splash-shadow,
.splash--excited #splash-shadow,
.splash--thinking #splash-shadow,
.splash--confused #splash-shadow,
.splash--proud #splash-shadow,
.splash--nervous #splash-shadow,
.splash--surprised #splash-shadow,
.splash--hold-1 #splash-shadow,
.splash--hold-2 #splash-shadow,
.splash--hold-3 #splash-shadow,
.splash--hold-4 #splash-shadow,
.splash--hold-5 #splash-shadow,
.splash--hold-6 #splash-shadow,
.splash--hold-7 #splash-shadow,
.splash--hold-8 #splash-shadow,
.splash--hold-9 #splash-shadow,
.splash--hold-10 #splash-shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-shadow-pulse var(--splash-idle-duration) ease-in-out infinite;
}

.splash--idle #splash-bubbles,
.splash--wave #splash-bubbles,
.splash--celebrate #splash-bubbles,
.splash--excited #splash-bubbles {
  animation: splash-bubbles 4.4s ease-in-out infinite;
}

.splash--idle #splash-water-drops,
.splash--wave #splash-water-drops,
.splash--celebrate #splash-water-drops {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-drops 4s ease-in-out infinite;
}

/* ---------- Wave ---------- */

.splash--wave #splash-left-arm {
  transform-box: fill-box;
  transform-origin: 80% 86%;
  animation: splash-wave var(--splash-wave-cycle) cubic-bezier(.4, 0, .2, 1) infinite;
}

.splash--wave #splash-left-hand {
  transform-box: fill-box;
  transform-origin: 45% 70%;
  animation: splash-hand-follow var(--splash-wave-cycle) cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ---------- Thumbs up ---------- */

.splash--thumbs-up #splash-left-arm,
.splash--thumbs-up #splash-right-arm {
  opacity: 0;
}

.splash--thumbs-up #splash-pose-thumbs-up {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 30% 80%;
  animation: splash-thumbs-bounce 2.4s ease-in-out infinite;
}

/* ---------- Celebrate ---------- */

.splash--celebrate #splash-left-arm,
.splash--celebrate #splash-right-arm {
  opacity: 0;
}

.splash--celebrate #splash-pose-celebrate {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: splash-celebrate 1.6s ease-in-out infinite;
}

.splash--celebrate #splash-character {
  animation: splash-celebrate-bob 1.6s ease-in-out infinite;
}

/* ---------- Emotions ---------- */

.splash--happy #splash-mouth,
.splash--happy #splash-eyebrows,
.splash--excited #splash-mouth,
.splash--excited #splash-eyebrows,
.splash--thinking #splash-mouth,
.splash--thinking #splash-eyebrows,
.splash--confused #splash-mouth,
.splash--confused #splash-eyebrows,
.splash--proud #splash-mouth,
.splash--proud #splash-eyebrows,
.splash--nervous #splash-mouth,
.splash--nervous #splash-eyebrows,
.splash--surprised #splash-mouth,
.splash--surprised #splash-eyebrows {
  opacity: 0;
}

.splash--happy #splash-expr-happy,
.splash--excited #splash-expr-excited,
.splash--thinking #splash-expr-thinking,
.splash--confused #splash-expr-confused,
.splash--proud #splash-expr-proud,
.splash--nervous #splash-expr-nervous,
.splash--surprised #splash-expr-surprised {
  opacity: 1;
}

.splash--happy #splash-character {
  animation: splash-happy-bob var(--splash-emotion-duration) ease-in-out infinite;
}

.splash--excited #splash-character {
  animation: splash-excited-bounce 1.2s ease-in-out infinite;
}

.splash--thinking #splash-character {
  animation: splash-think-tilt 3.2s ease-in-out infinite;
}

.splash--confused #splash-character {
  animation: splash-confused-wobble 2.4s ease-in-out infinite;
}

.splash--proud #splash-body {
  animation: splash-proud-puff 3s ease-in-out infinite;
}

.splash--nervous #splash-character {
  animation: splash-nervous-shake 0.55s ease-in-out infinite;
}

.splash--surprised #splash-left-eye,
.splash--surprised #splash-right-eye {
  animation: splash-surprised-eyes 2.8s ease-in-out infinite;
}

.splash--surprised #splash-eyelids {
  animation: none;
  opacity: 0;
}

/* ---------- FAQ variants: purple ? holds (side / overhead / right) ---------- */
/* Use [id$="…"] so data-splash-unique prefixed IDs still match (multi-Splash pages). */

.splash--faq,
.splash--hold-question,
.splash--faq-overhead,
.splash--faq-right {
  --splash-band: var(--splash-band-preclub);
}

.splash--faq [id$="splash-left-arm"],
.splash--hold-question [id$="splash-left-arm"],
.splash--faq-overhead [id$="splash-left-arm"],
.splash--faq-right [id$="splash-left-arm"],
.splash--faq [id$="splash-right-arm"],
.splash--hold-question [id$="splash-right-arm"],
.splash--faq-overhead [id$="splash-right-arm"],
.splash--faq-right [id$="splash-right-arm"] {
  opacity: 0;
}

.splash--faq [id$="splash-pose-hold-question"],
.splash--hold-question [id$="splash-pose-hold-question"] {
  opacity: 1;
}

.splash--faq-overhead [id$="splash-pose-hold-question-overhead"] {
  opacity: 1;
}

.splash--faq-right [id$="splash-pose-hold-question-right"] {
  opacity: 1;
}

.splash--faq [id$="splash-prop-question"],
.splash--hold-question [id$="splash-prop-question"],
.splash--faq-overhead [id$="splash-prop-question-overhead"],
.splash--faq-right [id$="splash-prop-question-right"] {
  opacity: 1;
  fill: var(--splash-band);
  color: var(--splash-band);
  animation: splash-digit-bob 2.4s ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-prop-question-overhead"],
.splash--faq-right [id$="splash-prop-question-right"] {
  animation: splash-digit-bob var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq [id$="splash-cap"] > path:first-of-type,
.splash--hold-question [id$="splash-cap"] > path:first-of-type,
.splash--faq-overhead [id$="splash-cap"] > path:first-of-type,
.splash--faq-right [id$="splash-cap"] > path:first-of-type,
.splash--faq [id$="splash-left-flipper"] > path:first-of-type,
.splash--hold-question [id$="splash-left-flipper"] > path:first-of-type,
.splash--faq-overhead [id$="splash-left-flipper"] > path:first-of-type,
.splash--faq-right [id$="splash-left-flipper"] > path:first-of-type,
.splash--faq [id$="splash-right-flipper"] > path:first-of-type,
.splash--hold-question [id$="splash-right-flipper"] > path:first-of-type,
.splash--faq-overhead [id$="splash-right-flipper"] > path:first-of-type,
.splash--faq-right [id$="splash-right-flipper"] > path:first-of-type {
  fill: var(--splash-band);
}

.splash--faq [id$="splash-left-flipper"] > path:nth-of-type(2),
.splash--hold-question [id$="splash-left-flipper"] > path:nth-of-type(2),
.splash--faq-overhead [id$="splash-left-flipper"] > path:nth-of-type(2),
.splash--faq-right [id$="splash-left-flipper"] > path:nth-of-type(2),
.splash--faq [id$="splash-right-flipper"] > path:nth-of-type(2),
.splash--hold-question [id$="splash-right-flipper"] > path:nth-of-type(2),
.splash--faq-overhead [id$="splash-right-flipper"] > path:nth-of-type(2),
.splash--faq-right [id$="splash-right-flipper"] > path:nth-of-type(2) {
  fill: color-mix(in srgb, var(--splash-band) 72%, white 28%);
}

.splash--faq [id$="splash-mouth"],
.splash--hold-question [id$="splash-mouth"],
.splash--faq-overhead [id$="splash-mouth"],
.splash--faq-right [id$="splash-mouth"],
.splash--faq [id$="splash-eyebrows"],
.splash--hold-question [id$="splash-eyebrows"],
.splash--faq-overhead [id$="splash-eyebrows"],
.splash--faq-right [id$="splash-eyebrows"] {
  opacity: 0;
}

/* Side: confused wobble */
.splash--faq [id$="splash-expr-confused"],
.splash--hold-question [id$="splash-expr-confused"] {
  opacity: 1;
}

.splash--faq [id$="splash-character"],
.splash--hold-question [id$="splash-character"] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-confused-wobble 2.4s ease-in-out infinite;
}

.splash--faq [id$="splash-body"],
.splash--hold-question [id$="splash-body"] {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: splash-breathe var(--splash-idle-duration) cubic-bezier(.45, .05, .55, .95) infinite;
}

/* Overhead: stage-8 style pop + surprised */
.splash--faq-overhead {
  --splash-jump-duration: 1.15s;
  --splash-stage-pause: 2s;
}

.splash--faq-overhead [id$="splash-expr-surprised"] {
  opacity: 1;
}

.splash--faq-overhead [id$="splash-character"] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-pop var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-left-eye"],
.splash--faq-overhead [id$="splash-right-eye"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-stage-surprised-eyes var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-eyelids"] {
  animation: none;
  opacity: 0;
}

.splash--faq-overhead [id$="splash-body"] {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: splash-jump-squash var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-shadow"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-jump-shadow var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-left-leg"],
.splash--faq-overhead [id$="splash-left-flipper"] {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-L var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-overhead [id$="splash-right-leg"],
.splash--faq-overhead [id$="splash-right-flipper"] {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-R var(--splash-stage-cycle) ease-in-out infinite;
}

/* Right: stage-9 style compete bounce + proud */
.splash--faq-right {
  --splash-jump-duration: 1.2s;
  --splash-stage-pause: 2s;
}

.splash--faq-right [id$="splash-expr-proud"] {
  opacity: 1;
}

.splash--faq-right [id$="splash-character"] {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-compete var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-right [id$="splash-body"] {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: splash-jump-squash var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-right [id$="splash-shadow"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-jump-shadow var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-right [id$="splash-left-leg"],
.splash--faq-right [id$="splash-left-flipper"] {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-L var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--faq-right [id$="splash-right-leg"],
.splash--faq-right [id$="splash-right-flipper"] {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-R var(--splash-stage-cycle) ease-in-out infinite;
}

/* Shared blink underlay for side FAQ */
.splash--faq [id$="splash-left-eye"],
.splash--faq [id$="splash-right-eye"],
.splash--hold-question [id$="splash-left-eye"],
.splash--hold-question [id$="splash-right-eye"],
.splash--faq-right [id$="splash-left-eye"],
.splash--faq-right [id$="splash-right-eye"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-eye-blink 5.8s ease-in-out infinite;
}

.splash--faq [id$="splash-eyelids"],
.splash--hold-question [id$="splash-eyelids"],
.splash--faq-right [id$="splash-eyelids"] {
  animation: splash-closed-eyes 5.8s ease-in-out infinite;
}

.splash--faq [id$="splash-shadow"],
.splash--hold-question [id$="splash-shadow"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-shadow-pulse var(--splash-idle-duration) ease-in-out infinite;
}

/* ---------- Programme stages: unique hold poses + band colours ---------- */

.splash--hold-1, .splash--hold-2 { --splash-band: var(--splash-band-beginner); }
.splash--hold-3, .splash--hold-4 { --splash-band: var(--splash-band-improver); }
.splash--hold-5, .splash--hold-6 { --splash-band: var(--splash-band-intermediate); }
.splash--hold-7 { --splash-band: var(--splash-band-advanced); }
.splash--hold-8, .splash--hold-9, .splash--hold-10 { --splash-band: var(--splash-band-preclub); }

/* Hide default arms for all stage holds */
.splash--hold-1 #splash-left-arm,
.splash--hold-2 #splash-left-arm,
.splash--hold-3 #splash-left-arm,
.splash--hold-4 #splash-left-arm,
.splash--hold-5 #splash-left-arm,
.splash--hold-6 #splash-left-arm,
.splash--hold-7 #splash-left-arm,
.splash--hold-8 #splash-left-arm,
.splash--hold-9 #splash-left-arm,
.splash--hold-10 #splash-left-arm,
.splash--hold-1 #splash-right-arm,
.splash--hold-2 #splash-right-arm,
.splash--hold-3 #splash-right-arm,
.splash--hold-4 #splash-right-arm,
.splash--hold-5 #splash-right-arm,
.splash--hold-6 #splash-right-arm,
.splash--hold-7 #splash-right-arm,
.splash--hold-8 #splash-right-arm,
.splash--hold-9 #splash-right-arm,
.splash--hold-10 #splash-right-arm {
  opacity: 0;
}

/* Show matching per-stage pose */
.splash--hold-1 #splash-pose-hold-1,
.splash--hold-2 #splash-pose-hold-2,
.splash--hold-3 #splash-pose-hold-3,
.splash--hold-4 #splash-pose-hold-4,
.splash--hold-5 #splash-pose-hold-5,
.splash--hold-6 #splash-pose-hold-6,
.splash--hold-7 #splash-pose-hold-7,
.splash--hold-8 #splash-pose-hold-8,
.splash--hold-9 #splash-pose-hold-9,
.splash--hold-10 #splash-pose-hold-10 {
  opacity: 1;
}

.splash--hold-1 #splash-number-1,
.splash--hold-2 #splash-number-2,
.splash--hold-3 #splash-number-3,
.splash--hold-4 #splash-number-4,
.splash--hold-5 #splash-number-5,
.splash--hold-6 #splash-number-6,
.splash--hold-7 #splash-number-7,
.splash--hold-8 #splash-number-8,
.splash--hold-9 #splash-number-9,
.splash--hold-10 #splash-number-10 {
  opacity: 1;
  fill: var(--splash-band);
  color: var(--splash-band);
}

/* Band tint: swim cap + flippers (main fill paths) */
.splash--hold-1 #splash-cap > path:first-of-type,
.splash--hold-2 #splash-cap > path:first-of-type,
.splash--hold-3 #splash-cap > path:first-of-type,
.splash--hold-4 #splash-cap > path:first-of-type,
.splash--hold-5 #splash-cap > path:first-of-type,
.splash--hold-6 #splash-cap > path:first-of-type,
.splash--hold-7 #splash-cap > path:first-of-type,
.splash--hold-8 #splash-cap > path:first-of-type,
.splash--hold-9 #splash-cap > path:first-of-type,
.splash--hold-10 #splash-cap > path:first-of-type,
.splash--hold-1 #splash-left-flipper > path:first-of-type,
.splash--hold-2 #splash-left-flipper > path:first-of-type,
.splash--hold-3 #splash-left-flipper > path:first-of-type,
.splash--hold-4 #splash-left-flipper > path:first-of-type,
.splash--hold-5 #splash-left-flipper > path:first-of-type,
.splash--hold-6 #splash-left-flipper > path:first-of-type,
.splash--hold-7 #splash-left-flipper > path:first-of-type,
.splash--hold-8 #splash-left-flipper > path:first-of-type,
.splash--hold-9 #splash-left-flipper > path:first-of-type,
.splash--hold-10 #splash-left-flipper > path:first-of-type,
.splash--hold-1 #splash-right-flipper > path:first-of-type,
.splash--hold-2 #splash-right-flipper > path:first-of-type,
.splash--hold-3 #splash-right-flipper > path:first-of-type,
.splash--hold-4 #splash-right-flipper > path:first-of-type,
.splash--hold-5 #splash-right-flipper > path:first-of-type,
.splash--hold-6 #splash-right-flipper > path:first-of-type,
.splash--hold-7 #splash-right-flipper > path:first-of-type,
.splash--hold-8 #splash-right-flipper > path:first-of-type,
.splash--hold-9 #splash-right-flipper > path:first-of-type,
.splash--hold-10 #splash-right-flipper > path:first-of-type {
  fill: var(--splash-band);
  stroke: color-mix(in srgb, var(--splash-band) 70%, #000 30%);
}

/* Flipper cuff accents follow band */
.splash--hold-1 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-2 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-3 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-4 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-5 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-6 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-7 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-8 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-9 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-10 #splash-left-flipper > path:nth-of-type(2),
.splash--hold-1 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-2 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-3 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-4 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-5 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-6 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-7 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-8 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-9 #splash-right-flipper > path:nth-of-type(2),
.splash--hold-10 #splash-right-flipper > path:nth-of-type(2) {
  fill: color-mix(in srgb, var(--splash-band) 75%, #fff 25%);
  stroke: color-mix(in srgb, var(--splash-band) 70%, #000 30%);
}

/* Hide default face when a stage emotion is active */
.splash--hold-1 #splash-mouth,
.splash--hold-1 #splash-eyebrows,
.splash--hold-2 #splash-mouth,
.splash--hold-2 #splash-eyebrows,
.splash--hold-3 #splash-mouth,
.splash--hold-3 #splash-eyebrows,
.splash--hold-4 #splash-mouth,
.splash--hold-4 #splash-eyebrows,
.splash--hold-5 #splash-mouth,
.splash--hold-5 #splash-eyebrows,
.splash--hold-6 #splash-mouth,
.splash--hold-6 #splash-eyebrows,
.splash--hold-7 #splash-mouth,
.splash--hold-7 #splash-eyebrows,
.splash--hold-8 #splash-mouth,
.splash--hold-8 #splash-eyebrows,
.splash--hold-9 #splash-mouth,
.splash--hold-9 #splash-eyebrows,
.splash--hold-10 #splash-mouth,
.splash--hold-10 #splash-eyebrows {
  opacity: 0;
}

.splash--hold-1 #splash-expr-nervous { opacity: 1; }
.splash--hold-2 #splash-expr-thinking { opacity: 1; }
.splash--hold-3 #splash-expr-happy { opacity: 1; }
.splash--hold-4 #splash-expr-proud { opacity: 1; }
.splash--hold-5 #splash-expr-excited { opacity: 1; }
.splash--hold-6 #splash-expr-happy { opacity: 1; }
.splash--hold-7 #splash-expr-excited { opacity: 1; }
.splash--hold-8 #splash-expr-surprised { opacity: 1; }
.splash--hold-9 #splash-expr-proud { opacity: 1; }
.splash--hold-10 #splash-expr-excited { opacity: 1; }

/* Per-stage motion lengths (pause after each cycle via --splash-stage-pause) */
.splash--hold-1 { --splash-jump-duration: 1.4s; }
.splash--hold-2 { --splash-jump-duration: 2.4s; }
.splash--hold-3 { --splash-jump-duration: 1.2s; }
.splash--hold-4 { --splash-jump-duration: 1.15s; }
.splash--hold-5 { --splash-jump-duration: 1.05s; }
.splash--hold-6 { --splash-jump-duration: 1.15s; }
.splash--hold-7 { --splash-jump-duration: 0.95s; }
.splash--hold-8 { --splash-jump-duration: 0.85s; }
.splash--hold-9 { --splash-jump-duration: 1.1s; }
.splash--hold-10 { --splash-jump-duration: 1.2s; }

/* Digit subtle bob — animate text only so SVG hand translate is preserved */
.splash--hold-1 #splash-number-1,
.splash--hold-2 #splash-number-2,
.splash--hold-3 #splash-number-3,
.splash--hold-4 #splash-number-4,
.splash--hold-5 #splash-number-5,
.splash--hold-6 #splash-number-6,
.splash--hold-7 #splash-number-7,
.splash--hold-8 #splash-number-8,
.splash--hold-9 #splash-number-9,
.splash--hold-10 #splash-number-10 {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-digit-bob var(--splash-stage-cycle) ease-in-out infinite;
}

/* Legs + flippers kick during stage jumps */
.splash--hold-1 #splash-left-leg,
.splash--hold-2 #splash-left-leg,
.splash--hold-3 #splash-left-leg,
.splash--hold-4 #splash-left-leg,
.splash--hold-5 #splash-left-leg,
.splash--hold-6 #splash-left-leg,
.splash--hold-7 #splash-left-leg,
.splash--hold-8 #splash-left-leg,
.splash--hold-9 #splash-left-leg,
.splash--hold-10 #splash-left-leg,
.splash--hold-1 #splash-left-flipper,
.splash--hold-2 #splash-left-flipper,
.splash--hold-3 #splash-left-flipper,
.splash--hold-4 #splash-left-flipper,
.splash--hold-5 #splash-left-flipper,
.splash--hold-6 #splash-left-flipper,
.splash--hold-7 #splash-left-flipper,
.splash--hold-8 #splash-left-flipper,
.splash--hold-9 #splash-left-flipper,
.splash--hold-10 #splash-left-flipper {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-L var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--hold-1 #splash-right-leg,
.splash--hold-2 #splash-right-leg,
.splash--hold-3 #splash-right-leg,
.splash--hold-4 #splash-right-leg,
.splash--hold-5 #splash-right-leg,
.splash--hold-6 #splash-right-leg,
.splash--hold-7 #splash-right-leg,
.splash--hold-8 #splash-right-leg,
.splash--hold-9 #splash-right-leg,
.splash--hold-10 #splash-right-leg,
.splash--hold-1 #splash-right-flipper,
.splash--hold-2 #splash-right-flipper,
.splash--hold-3 #splash-right-flipper,
.splash--hold-4 #splash-right-flipper,
.splash--hold-5 #splash-right-flipper,
.splash--hold-6 #splash-right-flipper,
.splash--hold-7 #splash-right-flipper,
.splash--hold-8 #splash-right-flipper,
.splash--hold-9 #splash-right-flipper,
.splash--hold-10 #splash-right-flipper {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: splash-leg-kick-R var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--hold-1 #splash-body,
.splash--hold-2 #splash-body,
.splash--hold-3 #splash-body,
.splash--hold-4 #splash-body,
.splash--hold-5 #splash-body,
.splash--hold-6 #splash-body,
.splash--hold-7 #splash-body,
.splash--hold-8 #splash-body,
.splash--hold-9 #splash-body,
.splash--hold-10 #splash-body {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: splash-jump-squash var(--splash-stage-cycle) ease-in-out infinite;
}

.splash--hold-1 #splash-shadow,
.splash--hold-2 #splash-shadow,
.splash--hold-3 #splash-shadow,
.splash--hold-4 #splash-shadow,
.splash--hold-5 #splash-shadow,
.splash--hold-6 #splash-shadow,
.splash--hold-7 #splash-shadow,
.splash--hold-8 #splash-shadow,
.splash--hold-9 #splash-shadow,
.splash--hold-10 #splash-shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-jump-shadow var(--splash-stage-cycle) ease-in-out infinite;
}

/* Per-stage character jump personalities */
.splash--hold-1 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-hop-timid var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-2 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-think-lean var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-3 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-forward var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-4 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-left var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-5 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-up var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-6 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-right var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-7 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-up-big var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-8 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-pop var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-8 #splash-left-eye,
.splash--hold-8 #splash-right-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-stage-surprised-eyes var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-8 #splash-eyelids { animation: none; opacity: 0; }
.splash--hold-9 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-compete var(--splash-stage-cycle) ease-in-out infinite;
}
.splash--hold-10 #splash-character {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: splash-jump-champion var(--splash-stage-cycle) ease-in-out infinite;
}
/* ---------- Keyframes ---------- */

@keyframes splash-bob {
  0%, 100% { transform: translateY(0) rotate(-0.35deg); }
  50% { transform: translateY(-11px) rotate(0.45deg); }
}

@keyframes splash-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012, 1.018); }
}

@keyframes splash-wave {
  0%, 61%, 89%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(-9deg); }
  70% { transform: rotate(12deg); }
  75% { transform: rotate(-8deg); }
  80% { transform: rotate(10deg); }
  85% { transform: rotate(-3deg); }
}

@keyframes splash-hand-follow {
  0%, 61%, 89%, 100% { transform: rotate(0deg); }
  65% { transform: rotate(-5deg); }
  70% { transform: rotate(8deg); }
  75% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
  85% { transform: rotate(0deg); }
}

@keyframes splash-eye-blink {
  0%, 40%, 43.4%, 76%, 79.4%, 100% { transform: scaleY(1); opacity: 1; }
  41.2%, 42.2%, 77.2%, 78.2% { transform: scaleY(0.05); opacity: 0; }
}

@keyframes splash-closed-eyes {
  0%, 40%, 43.4%, 76%, 79.4%, 100% { opacity: 0; }
  41.2%, 42.2%, 77.2%, 78.2% { opacity: 1; }
}

@keyframes splash-brow-blink {
  0%, 40%, 43.4%, 76%, 79.4%, 100% { transform: translateY(0); }
  41.2%, 42.2%, 77.2%, 78.2% { transform: translateY(5px); }
}

@keyframes splash-bubbles {
  0%, 100% { transform: translateY(9px); opacity: 0.52; }
  50% { transform: translateY(-21px); opacity: 0.95; }
}

@keyframes splash-drops {
  0%, 100% { transform: scale(0.96) translateY(2px); opacity: 0.72; }
  50% { transform: scale(1.035) translateY(-3px); opacity: 1; }
}

@keyframes splash-shadow-pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.22; }
  50% { transform: scaleX(0.92); opacity: 0.17; }
}

@keyframes splash-thumbs-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

@keyframes splash-celebrate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes splash-celebrate-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.02); }
}

@keyframes splash-happy-bob {
  0%, 100% { transform: translateY(0) rotate(-0.3deg); }
  50% { transform: translateY(-10px) rotate(0.6deg); }
}

@keyframes splash-excited-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-16px) scale(1.03); }
  60% { transform: translateY(-4px) scale(1.01); }
}

@keyframes splash-think-tilt {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-4px); }
}

@keyframes splash-confused-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

@keyframes splash-proud-puff {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03, 1.04); }
}

@keyframes splash-nervous-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes splash-surprised-eyes {
  0%, 100% { transform: scale(1.08); }
  50% { transform: scale(1.14); }
}


@keyframes splash-hop-timid {
  /* Motion ~32% of cycle (1.4s / 4.4s at default pause) */
  0%, 32%, 100% { transform: translate(0, 0) rotate(0deg); }
  13% { transform: translate(0, -8px) rotate(-1deg); }
  18% { transform: translate(0, -4px) rotate(0.5deg); }
}

@keyframes splash-think-lean {
  /* Motion ~44% of cycle (2.4s / 5.4s at default pause) */
  0%, 44%, 100% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(4px, -6px) rotate(-5deg); }
}

@keyframes splash-jump-forward {
  0%, 29%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(0, 4px) scale(1.02, 0.96); }
  16% { transform: translate(0, -22px) rotate(2deg); }
  22% { transform: translate(0, -8px); }
}

@keyframes splash-jump-left {
  0%, 28%, 100% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(0, 5px) scale(1.03, 0.94); }
  15% { transform: translate(-28px, -26px) rotate(-8deg); }
  22% { transform: translate(-10px, -6px) rotate(-2deg); }
}

@keyframes splash-jump-up {
  0%, 26%, 100% { transform: translate(0, 0); }
  7% { transform: translate(0, 6px) scale(1.04, 0.92); }
  14% { transform: translate(0, -34px) scale(0.98, 1.04); }
  20% { transform: translate(0, -10px); }
}

@keyframes splash-jump-right {
  0%, 28%, 100% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(0, 5px) scale(1.03, 0.94); }
  15% { transform: translate(28px, -26px) rotate(8deg); }
  22% { transform: translate(10px, -6px) rotate(2deg); }
}

@keyframes splash-jump-up-big {
  0%, 24%, 100% { transform: translate(0, 0); }
  6% { transform: translate(0, 8px) scale(1.05, 0.9); }
  13% { transform: translate(0, -48px) scale(0.96, 1.06); }
  19% { transform: translate(0, -12px); }
}

@keyframes splash-jump-pop {
  0%, 22%, 100% { transform: translate(0, 0) rotate(0deg); }
  4% { transform: translate(0, 7px) scale(1.06, 0.88); }
  10% { transform: translate(6px, -30px) rotate(6deg) scale(0.97, 1.05); }
  15% { transform: translate(-4px, -12px) rotate(-3deg); }
}

@keyframes splash-jump-compete {
  0%, 27%, 100% { transform: translate(0, 0) rotate(0deg); }
  7% { transform: translate(-6px, -18px) rotate(-4deg); }
  14% { transform: translate(0, 3px) scale(1.02, 0.96); }
  20% { transform: translate(6px, -18px) rotate(4deg); }
}

@keyframes splash-jump-champion {
  0%, 29%, 100% { transform: translate(0, 0) scale(1); }
  9% { transform: translate(0, 6px) scale(1.04, 0.92); }
  16% { transform: translate(0, -40px) scale(1.05) rotate(-2deg); }
  20% { transform: translate(0, -36px) scale(1.05) rotate(2deg); }
  25% { transform: translate(0, -8px); }
}

@keyframes splash-jump-squash {
  0%, 28%, 100% { transform: scale(1, 1); }
  8% { transform: scale(1.05, 0.92); }
  15% { transform: scale(0.97, 1.05); }
}

@keyframes splash-jump-shadow {
  0%, 28%, 100% { transform: scaleX(1); opacity: 0.22; }
  15% { transform: scaleX(0.72); opacity: 0.12; }
}

@keyframes splash-leg-kick-L {
  0%, 28%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(12deg); }
  15% { transform: rotate(-18deg); }
  21% { transform: rotate(6deg); }
}

@keyframes splash-leg-kick-R {
  0%, 28%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(-12deg); }
  15% { transform: rotate(18deg); }
  21% { transform: rotate(-6deg); }
}

@keyframes splash-digit-bob {
  0%, 28%, 100% { transform: translateY(0) rotate(-3deg); }
  14% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes splash-stage-surprised-eyes {
  0%, 22%, 100% { transform: scale(1.08); }
  11% { transform: scale(1.14); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .splash * {
    animation: none !important;
  }
}