/* Movimiento con intención: atravesar la ventana (misterio), ambiente discreto y amanecer (revelación).
   Solo transform/opacity (+ blur puntual en transiciones). Las animaciones ambientales son lentas y baratas. */

/* Transición: atravesar la ventana. Lo nuevo queda debajo; lo viejo se agranda y se desvanece. */
.bd.enter-push { animation: bd-push-in var(--dur-push) var(--ease-cine) both; }
.bd.leave-push { animation: bd-push-out var(--dur-push) var(--ease-cine) both; }
.bd.enter-fade { animation: fade-in var(--dur-fade) linear both; }
.bd.leave-fade { animation: fade-out var(--dur-fade) linear both; }
@keyframes bd-push-in  { from { transform: scale(1.5); opacity: 0; filter: blur(12px); } 60% { opacity: 1; } to { transform: none; opacity: 1; filter: none; } }
@keyframes bd-push-out { from { transform: none; opacity: 1; filter: none; } to { transform: scale(2.1); opacity: 0; filter: blur(14px); } }
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } } /* .reveal parte de opacity:0: necesita destino explícito */

/* Ambiente (calidad alta/media): parpadeo de estrellas y ventanas, halo de la luna, nubes, lámpara */
.tw { animation: tw 5s ease-in-out infinite; } .tw2 { animation-duration: 6.4s; animation-delay: -1.7s; } .tw3 { animation-duration: 4.2s; animation-delay: -3s; }
@keyframes tw { 50% { opacity: 0.15; } }
.fl { animation: fl 9s linear infinite; } .fl2 { animation-duration: 12s; animation-delay: -4s; } .fl3 { animation-duration: 7s; animation-delay: -2s; }
@keyframes fl { 0%, 40%, 52%, 100% { opacity: 0.85; } 44%, 48% { opacity: 0.15; } }
.halo { animation: halo 9s ease-in-out infinite alternate; }
@keyframes halo { to { opacity: 0.72; } }
.lamp { animation: halo 6s ease-in-out infinite alternate; }
.cloud { animation: cloud 60s ease-in-out infinite alternate; }
@keyframes cloud { to { transform: translateX(22px); } }
/* Deriva lenta de capas (muy sutil) */
.p1 { animation: d1 16s ease-in-out infinite alternate; }
.p2 { animation: d2 16s ease-in-out infinite alternate; }
.p3 { animation: d3 16s ease-in-out infinite alternate; }
@keyframes d1 { to { transform: translateX(-2px); } }
@keyframes d2 { to { transform: translateX(-5px); } }
@keyframes d3 { to { transform: translateX(-10px); } }

/* Aparición escalonada del texto (retardos por clase; sin style en línea por la CSP) */
.reveal { opacity: 0; animation: reveal 1.3s var(--ease-out) var(--d, 0s) forwards; }
.r1 { --d: 1.3s; } .r2 { --d: 1.55s; } .r3 { --d: 1.85s; } .r4 { --d: 2.15s; } .r5 { --d: 2.5s; }
.t1 { --d: 1.3s; } .t2 { --d: 1.6s; } .t3 { --d: 2.2s; } .t4 { --d: 2.8s; } .t5 { --d: 3.3s; }
.d1 { --d: 0.5s; } .d2 { --d: 0.9s; } .d3 { --d: 1.2s; } .d4 { --d: 1.6s; } .d5 { --d: 2s; } .d6 { --d: 2.4s; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Entrada y salida de la tarjeta */
.scene { animation: scene-in 1.1s var(--ease-out) 0.3s both; }
@keyframes scene-in { from { opacity: 0; transform: translateY(22px); } }
.scene.leaving { animation: scene-out 0.7s var(--ease-in-out) forwards; pointer-events: none; }
@keyframes scene-out { to { opacity: 0; transform: translateY(16px); filter: blur(6px); } }

/* Amanecer de la revelación: un único destello suave */
.stage[data-state="gift"]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 50% at 50% 55%, rgba(255, 244, 220, 0.9), transparent 70%);
  animation: flash 1.8s ease-in-out 0.3s 1 both;
}
@keyframes flash { 0% { opacity: 0; } 35% { opacity: 0.5; } 100% { opacity: 0; } }

/* Cruzar la puerta (botón de la invitación): destello cálido breve */
.stage.passing::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(55% 60% at 62% 50%, rgba(255, 214, 140, 0.85), rgba(255, 170, 80, 0.25) 55%, transparent 80%);
  animation: pass 1.8s ease-in-out both;
}
@keyframes pass { 0% { opacity: 0; } 35% { opacity: 0.7; } 100% { opacity: 0; } }

/* Saltar / ya visto: todo instantáneo */
.is-instant, .is-instant *, .is-instant *::before, .is-instant *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important;
}

/* Calidad media: sin parpadeos ni nubes (se mantienen halo, deriva y parallax) */
[data-quality="medium"] .tw, [data-quality="medium"] .fl, [data-quality="medium"] .cloud { animation: none; }

/* Calidad baja y movimiento reducido: solo fundidos, escena estática */
[data-quality="low"] .tw, [data-quality="low"] .fl, [data-quality="low"] .cloud, [data-quality="low"] .halo, [data-quality="low"] .lamp,
[data-quality="low"] .p1, [data-quality="low"] .p2, [data-quality="low"] .p3 { animation: none; }
[data-quality="low"] .L1, [data-quality="low"] .L2, [data-quality="low"] .L3, [data-quality="low"] .L4 { transform: none; }
[data-quality="low"] .backdrop { animation: fade-in 0.8s linear both; }
[data-quality="low"] .pill { animation: fade-in 0.6s linear both; }
[data-quality="low"] .bd.enter-push, [data-quality="low"] .bd.enter-fade { animation: fade-in 0.6s linear both; }
[data-quality="low"] .bd.leave-push, [data-quality="low"] .bd.leave-fade { animation: fade-out 0.6s linear both; }
[data-quality="low"] .reveal { animation: appear 0.6s linear calc(var(--d, 0s) / 3) forwards; }
[data-quality="low"] .scene { animation: fade-in 0.5s linear both; }
[data-quality="low"] .scene.leaving { animation: fade-out 0.3s linear forwards; }
[data-quality="low"] .stage[data-state="gift"]::after, [data-quality="low"] .stage.passing::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .backdrop { animation: fade-in 0.8s linear both; }
  .pill { animation: fade-in 0.6s linear both; }
  .bd.enter-push, .bd.enter-fade { animation: fade-in 0.6s linear both; }
  .bd.leave-push, .bd.leave-fade { animation: fade-out 0.6s linear both; }
  .reveal { animation: appear 0.6s linear forwards; animation-delay: 0s; }
  .scene { animation: fade-in 0.4s linear both; }
  .scene.leaving { animation: fade-out 0.3s linear forwards; }
  .unit__num.tick, .tw, .fl, .halo, .lamp, .cloud, .p1, .p2, .p3, .interior .glow { animation: none; }
  .L1, .L2, .L3, .L4 { transform: none; transition: none; }
  .stage[data-state="gift"]::after, .stage.passing::before { display: none; }
  .bd__inner { transition: none; transform: none; }
}