/* Cali Sorpresas · animación del logo (6 s). Compartido por React y HTML puro. */
.cali-logo {
  --cali-size: 220px;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--cali-size);
  max-width: 100%;
  aspect-ratio: 1 / 1; /* reserva el espacio desde el inicio */
  container-type: inline-size;
  background: transparent;
  line-height: 0;
}
@media (max-width: 640px) { .cali-logo { --cali-size: 160px; } }

.cali-logo__art, .cali-logo__base { position: absolute; inset: 0; }
.cali-logo__art img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.cali-logo__base { width: 100%; height: 100%; z-index: 2; }

/* Capas del sol, recortadas del archivo original (sin redibujar). */
.cali-logo__sun-clip { position: absolute; z-index: 1; overflow: hidden; left: 42.82%; top: 14.27%; width: 14.43%; height: 11.32%; }
.cali-logo__sun-disk { width: 100%; height: 100%; }
.cali-logo__ray { position: absolute; z-index: 1; }
.cali-logo__ray--1 { left: 35.57%; top: 15.31%; width: 6.22%; --rx: 30%; --ry: 30%; }
.cali-logo__ray--2 { left: 40.03%; top: 9.25%; width: 5.10%; --rx: 25%; --ry: 35%; }
.cali-logo__ray--3 { left: 48.64%; top: 5.18%; width: 2.71%; --rx: 0%; --ry: 30%; }
.cali-logo__ray--4 { left: 54.94%; top: 9.25%; width: 5.10%; --rx: -25%; --ry: 35%; }
.cali-logo__ray--5 { left: 58.29%; top: 15.31%; width: 6.14%; --rx: -30%; --ry: 30%; }

.cali-logo__hearts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cali-logo__heart {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  fill: #ad1457; opacity: 0;
}
.cali-logo__heart--light { fill: #f6a5c0; }

/* ---- Secuencia: solo cuando JavaScript confirma que las capas cargaron ---- */
.cali-logo--playing .cali-logo__art { animation: cali-in 1s cubic-bezier(.22,.61,.36,1) both; }
.cali-logo--playing .cali-logo__sun-disk { animation: cali-sunrise 1.5s cubic-bezier(.33,.0,.2,1) 1s both; }
.cali-logo--playing .cali-logo__ray { animation: cali-ray .7s ease-out both; }
.cali-logo--playing .cali-logo__ray--3 { animation-delay: 1.55s; }
.cali-logo--playing .cali-logo__ray--2, .cali-logo--playing .cali-logo__ray--4 { animation-delay: 1.7s; }
.cali-logo--playing .cali-logo__ray--1, .cali-logo--playing .cali-logo__ray--5 { animation-delay: 1.85s; }
.cali-logo--playing .cali-logo__heart { animation: cali-heart var(--dur) ease-in-out var(--d) both; }

@keyframes cali-in {
  from { opacity: 0; transform: translateY(4cqw) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes cali-sunrise {
  from { opacity: 0; transform: translateY(100%); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes cali-ray {
  from { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(.6); }
  to { opacity: 1; transform: none; }
}
@keyframes cali-heart {
  0% { opacity: 0; transform: translate(0, 0) scale(.55); }
  20% { opacity: .9; }
  50% { transform: translate(calc(var(--dx) * -.5), -10cqw) scale(1); }
  75% { opacity: .75; }
  100% { opacity: 0; transform: translate(var(--dx), -20cqw) scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  .cali-logo--playing .cali-logo__art,
  .cali-logo--playing .cali-logo__sun-disk,
  .cali-logo--playing .cali-logo__ray,
  .cali-logo--playing .cali-logo__heart { animation: none; }
  .cali-logo__heart { display: none; }
}

.cali-logo--paused *{animation-play-state:paused!important}
.logo-motion-toggle{border:0;background:transparent;color:#ad1457;font-family:inherit;font-size:11px;padding:6px 10px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.logo-motion-toggle{display:none}}