/* Momentia — personajes y fondos animados de las invitaciones infantiles */

/* ---------- Personaje ---------- */
.kc { display: block; width: 100%; height: auto; overflow: visible; }
.kc-body { transform-origin: 100px 205px; animation: kc-bounce 2.4s ease-in-out infinite; }
.kc-shadow { transform-origin: 100px 210px; animation: kc-shadow 2.4s ease-in-out infinite; }
.kc-wave { transform-box: fill-box; transform-origin: 10% 90%; animation: kc-wave 1.6s ease-in-out infinite; }
.kc-tail { transform-box: fill-box; transform-origin: 0% 50%; animation: kc-tail 1.8s ease-in-out infinite; }
.kc-balloon { transform-box: fill-box; transform-origin: 50% 100%; animation: kc-float 3s ease-in-out infinite; }
.kc-spout { transform-box: fill-box; transform-origin: 50% 100%; animation: kc-spout 1.4s ease-in-out infinite; }
.kc-antenna circle { animation: kc-blink 1.2s steps(2) infinite; }
.kc-eyes { transform-box: fill-box; transform-origin: center; animation: kc-eyes 4s infinite; }
.kc-horn { animation: kc-shine 2.6s ease-in-out infinite; }
.kc-mane { transform-box: fill-box; transform-origin: center; animation: kc-mane 3s ease-in-out infinite; }
@keyframes kc-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-9px) scale(.98, 1.02); } 55% { transform: translateY(-9px); } 90% { transform: translateY(0) scale(1.03, .97); } }
@keyframes kc-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .6; } }
@keyframes kc-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes kc-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(12deg); } }
@keyframes kc-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes kc-spout { 0%, 100% { transform: scaleY(.85); opacity: .7; } 50% { transform: scaleY(1.1); opacity: 1; } }
@keyframes kc-blink { 50% { fill: #ffd166; } }
@keyframes kc-eyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes kc-shine { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px #fff3b0); } }
@keyframes kc-mane { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }

/* Ubicación del personaje en la invitación */
.inv-kid { position: relative; z-index: 2; width: min(46vw, 210px); margin: -.5rem auto 1rem; }
.inv-kid--peek { width: min(30vw, 120px); margin: -1rem auto .4rem; }
@media (min-width: 900px) {
  .inv-kid--hero { position: absolute; right: max(4vw, calc(50% - 560px)); bottom: 3.5rem; width: 230px; margin: 0; }
}

/* ---------- Fondos animados (detrás de todo) ---------- */
.kbg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ev.inv:has(> .kbg) > :not(.kbg):not(dialog):not(.inv-intro):not(.inv-music):not(.inv-effects) { position: relative; z-index: 1; }
.kbg i { position: absolute; display: block; }

/* Nubes */
.kbg--nubes i { top: calc(var(--i) * 16% + 2%); left: -30vw; width: calc(90px + var(--i) * 14px); aspect-ratio: 2.4 / 1; border-radius: 999px; background: #fff; opacity: .85;
  box-shadow: calc(28px + var(--i) * 3px) -14px 0 6px #fff, -22px -6px 0 -4px #fff; animation: kbg-cloud calc(38s + var(--i) * 7s) linear infinite; animation-delay: calc(var(--i) * -9s); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .05)); }
@keyframes kbg-cloud { to { transform: translateX(150vw); } }

/* Globos */
.kbg--globos i { bottom: -120px; left: calc(var(--i) * 11% + 2%); width: 42px; height: 52px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .55) 0 12%, transparent 14%), hsl(calc(var(--i) * 47deg + 330deg) 85% 70%);
  animation: kbg-rise calc(16s + var(--i) * 2.3s) linear infinite; animation-delay: calc(var(--i) * -3.1s); opacity: .9; }
.kbg--globos i::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 60px; background: rgb(0 0 0 / .2); }
@keyframes kbg-rise { 0% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(18px, -60vh) rotate(5deg); } 100% { transform: translate(-10px, -125vh) rotate(-3deg); } }

/* Burbujas */
.kbg--burbujas i { bottom: -60px; left: calc(var(--i) * 7.1% + 1%); width: calc(14px + (var(--i) * 7px) % 34px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .85); background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .7) 0 10%, rgb(var(--accent-rgb) / .12) 60%);
  animation: kbg-bubble calc(11s + var(--i) * 1.3s) ease-in infinite; animation-delay: calc(var(--i) * -1.7s); }
@keyframes kbg-bubble { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translateY(-55vh) translateX(16px); } 100% { transform: translateY(-115vh) translateX(-10px); opacity: .3; } }

/* Estrellas */
.kbg--estrellas i { top: calc((var(--i) * 37%) % 100%); left: calc((var(--i) * 53%) % 100%); width: calc(8px + (var(--i) * 5px) % 14px); aspect-ratio: 1;
  background: #ffd166; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: kbg-twinkle calc(2s + (var(--i) * .37s) % 2s) ease-in-out infinite; animation-delay: calc(var(--i) * -.53s); }
@keyframes kbg-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* Confeti */
.kbg--confeti i { top: -20px; left: calc((var(--i) * 41%) % 100%); width: 8px; height: 14px; border-radius: 2px; background: hsl(calc(var(--i) * 53deg) 85% 65%);
  animation: kbg-fall calc(9s + (var(--i) * .9s) % 6s) linear infinite; animation-delay: calc(var(--i) * -.8s); opacity: .8; }
@keyframes kbg-fall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }

/* Lunares */
.kbg--lunares i { top: calc((var(--i) * 29%) % 100%); left: calc((var(--i) * 61%) % 100%); width: calc(18px + (var(--i) * 9px) % 40px); aspect-ratio: 1; border-radius: 50%;
  background: hsl(calc(var(--i) * 40deg + 300deg) 80% 78%); opacity: .55; animation: kbg-dot calc(6s + (var(--i) * .7s) % 4s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.6s); }
@keyframes kbg-dot { to { transform: translate(14px, -22px) scale(1.15); } }

/* Arcoíris */
.kbg--arcoiris i { left: 50%; bottom: -70vmax; width: 140vmax; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; opacity: .22;
  background: repeating-conic-gradient(from 0deg, #ff6b6b 0 15deg, #ffa94d 15deg 30deg, #ffd43b 30deg 45deg, #69db7c 45deg 60deg, #4dabf7 60deg 75deg, #9775fa 75deg 90deg);
  animation: kbg-spin 90s linear infinite; }
@keyframes kbg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .kbg i, .kc *, .kc-body, .kc-shadow { animation: none !important; } }

/* ---------- Editor ---------- */
.kid-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.kid-opt { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .5rem .3rem .4rem; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; font-size: .82rem; font-weight: 600; background: #fff; }
.kid-opt input { position: absolute; opacity: 0; }
.kid-opt:has(input:checked) { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgb(255 62 138 / .14); }
.kid-opt .kc { height: 70px; width: auto; }
.kid-opt .kc *, .kid-opt .kc-body, .kid-opt .kc-shadow { animation: none; }
.kid-opt--none { color: var(--ink-soft); }
.kid-opt--none span:first-child { height: 70px; display: grid; place-items: center; font-size: 1.6rem; }