/* Reto flash · las bolitas de Tidú: dos lilas arriba y una verde abajo, como en el logo. Entran saltando en la
   bienvenida, saltan en la carga, bailan en la celebración y estallan en chispas alrededor. */
.escena{position:relative;height:300px;flex:none}
/* el bigotudo de la bienvenida entra saltando y se levanta el sombrero */
.bigotudo{position:absolute;left:50%;top:62px;width:180px;height:180px;margin-left:-90px;animation:entrarBolita 1.1s cubic-bezier(.3,1.4,.5,1) both}
.bigotudo svg,.tres-bolitas .bolita svg{display:block;width:100%;height:100%;overflow:visible}
.sombrero{transform-box:fill-box;transform-origin:50% 100%;animation:sombrero 2.4s ease-in-out 1.4s infinite}
@keyframes sombrero{0%,55%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-16px) rotate(-14deg)}85%{transform:translateY(0) rotate(0)}}
.chispas{position:absolute;left:50%;top:150px;width:0;height:0}
.chispas i{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--lila);opacity:0;animation:chispa 1.2s ease-out .6s both;animation-delay:calc(.6s + var(--t));transform:rotate(var(--a)) translateX(0)}
.chispas i:nth-child(3n){background:var(--verde)}
.chispas i:nth-child(4n){background:var(--morado);width:8px;height:8px}
@keyframes entrarBolita{0%{transform:translateY(-320px) scale(.6)}60%{transform:translateY(0) scale(1.15,.85)}80%{transform:translateY(-18px)}100%{transform:none}}
@keyframes chispa{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(.4)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1)}}

/* las tres bolitas en fila: entran (pantalla de paso), saltan (carga y correo) o bailan (celebración) */
.tres-bolitas{position:relative;height:260px;flex:none}
.tres-bolitas .bolita{position:absolute;width:84px;height:84px;top:140px;left:50%}
.tres-bolitas .b1{margin-left:-136px}
.tres-bolitas .b2{margin-left:-42px}
.tres-bolitas .b3{margin-left:52px}
.tres-bolitas.entran .bolita{animation:entrarBolita 1.2s cubic-bezier(.3,1.4,.5,1) both}
.tres-bolitas.entran .b2{animation-delay:.15s}
.tres-bolitas.entran .b3{animation-delay:.3s}
.tres-bolitas.saltan .bolita{animation:saltar .9s ease-in-out infinite}
.tres-bolitas.saltan .b2{animation-delay:.15s}
.tres-bolitas.saltan .b3{animation-delay:.3s}
.tres-bolitas.bailan .bolita{animation:bailar 1.4s ease-in-out infinite}
.tres-bolitas.bailan .b2{animation-delay:.2s}
.tres-bolitas.bailan .b3{animation-delay:.4s}
@keyframes saltar{0%,100%{transform:translateY(0) scale(1.08,.92)}50%{transform:translateY(-64px)}}
@keyframes bailar{0%,100%{transform:rotate(-10deg) translateY(0)}25%{transform:rotate(10deg) translateY(-18px)}50%{transform:rotate(-10deg)}75%{transform:rotate(10deg) translateY(-18px)}}

/* el confeti de la celebración: cae una vez */
.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confeti i{position:absolute;top:-20px;left:var(--x);width:9px;height:14px;border-radius:2px;background:var(--c);animation:caer var(--t) ease-in var(--d) both}
@keyframes caer{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),110vh) rotate(calc(var(--g) + 360deg))}}
@media (prefers-reduced-motion:reduce){.confeti{display:none}}