/* ---------- Animación de las decoraciones alrededor del nombre (portada) ----------
   Lo usan la invitación (show.ejs) y la vista previa del editor (.anim-stage). Clases en <body> o en .anim-stage: anim-in-<entrada>, anim-sp-<velocidad>, anim-idle-<movimiento>, anim-isp-<velocidad del movimiento> (data.anim, editor → Diseño).
   En el sobre de apertura entran al cargar; en la portada, al abrir la invitación (anim-go). No aplica a esquinas ni recortes. */
:where(body.inv, .anim-stage) { --ad: 1.4s; --a-enter: none; --a-idle: none; --idle-d: 6s; --idle-k: 1; }
/* Velocidad del movimiento continuo: alarga o acorta cada ciclo */
.anim-isp-slow { --idle-k: 1.6; } .anim-isp-fast { --idle-k: .6; }
.anim-sp-slow { --ad: 2.3s; } .anim-sp-fast { --ad: .75s; }
.anim-in-fade { --a-enter: deco-in-fade; } .anim-in-rise { --a-enter: deco-in-rise; } .anim-in-zoom { --a-enter: deco-in-zoom; }
.anim-in-unfold { --a-enter: deco-in-unfold; } .anim-in-blur { --a-enter: deco-in-blur; } .anim-in-bounce { --a-enter: deco-in-bounce; }
.anim-in-spin { --a-enter: deco-in-spin; }
.anim-idle-float { --a-idle: deco-float; --idle-d: 6s; } .anim-idle-sway { --a-idle: deco-sway; --idle-d: 7s; }
.anim-idle-breathe { --a-idle: deco-breathe; --idle-d: 5s; } .anim-idle-drift { --a-idle: deco-drift; --idle-d: 9s; }
.anim-idle-bob { --a-idle: deco-bob; --idle-d: 7.5s; }
:is(.hero, .opener, .st-hero, .anim-stage) :is(.decor-top, .decor-bottom) { --dir: -1; --dl: 0s; transform-origin: 50% 50%; will-change: transform, opacity; }
:is(.hero, .opener, .st-hero, .anim-stage) .decor-bottom { --dir: 1; --dl: .25s; }
/* Mientras no se abre la invitación, las de la portada esperan ocultas (si tienen entrada) */
body.inv:not(.anim-in-none):not(.anim-go) :is(.hero, .st-hero) :is(.decor-top, .decor-bottom) { opacity: 0; }
body.inv.anim-go :is(.hero, .st-hero) :is(.decor-top, .decor-bottom), .opener :is(.decor-top, .decor-bottom), .anim-stage.anim-go :is(.decor-top, .decor-bottom) {
  animation: var(--a-enter) var(--ad) cubic-bezier(.22, 1, .36, 1) var(--dl) both, var(--a-idle) calc(var(--idle-d) * var(--idle-k)) ease-in-out calc(var(--ad) + var(--dl)) infinite;
}
@keyframes deco-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes deco-in-rise { from { opacity: 0; transform: translateY(calc(var(--dir) * 42px)); } to { opacity: 1; transform: none; } }
@keyframes deco-in-zoom { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes deco-in-unfold { from { opacity: 0; transform: scaleX(0); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes deco-in-blur { from { opacity: 0; filter: blur(14px); transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } }
@keyframes deco-in-bounce { 0% { opacity: 0; transform: translateY(calc(var(--dir) * 70px)); } 55% { opacity: 1; transform: translateY(calc(var(--dir) * -12px)); }
  75% { transform: translateY(calc(var(--dir) * 5px)); } 100% { opacity: 1; transform: none; } }
@keyframes deco-in-spin { from { opacity: 0; transform: rotate(calc(var(--dir) * 16deg)) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes deco-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes deco-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(1.6deg); } 75% { transform: rotate(-1.6deg); } }
@keyframes deco-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes deco-drift { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(9px); } 75% { transform: translateX(-9px); } }
@keyframes deco-bob { 0%, 100% { transform: translateY(0) rotate(0); } 33% { transform: translateY(-7px) rotate(1.2deg); } 66% { transform: translateY(-3px) rotate(-1.2deg); } }
@media (prefers-reduced-motion: reduce) {
  :is(.hero, .opener, .st-hero, .anim-stage) :is(.decor-top, .decor-bottom) { animation: none !important; opacity: 1 !important; }
}