/* =========================================================
   ANIMATIONS & SCROLL REVEALS — Ares & Itzel
   ========================================================= */

/* ─── Equalizer Bars (música) ─── */
@keyframes soundWave1 { 0%,100%{height:4px}  50%{height:18px} }
@keyframes soundWave2 { 0%,100%{height:14px} 50%{height:6px}  }
@keyframes soundWave3 { 0%,100%{height:8px}  50%{height:20px} }
@keyframes soundWave4 { 0%,100%{height:16px} 50%{height:5px}  }
.music-bar:nth-child(1){animation:soundWave1 1.2s infinite ease-in-out}
.music-bar:nth-child(2){animation:soundWave2 0.9s infinite ease-in-out}
.music-bar:nth-child(3){animation:soundWave3 1.1s infinite ease-in-out}
.music-bar:nth-child(4){animation:soundWave4 1.3s infinite ease-in-out}
.music-paused .music-bar{animation-play-state:paused;height:4px!important}

/* ─── Float suave para monogramas ─── */
@keyframes softFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.soft-float{animation:softFloat 4s ease-in-out infinite}

/* ─── Shimmer dorado ─── */
@keyframes goldShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.gold-shimmer-text{
    background:linear-gradient(90deg,#937438 0%,#DFBA6B 30%,#FFE9B3 50%,#DFBA6B 70%,#937438 100%);
    background-size:200% auto;color:transparent;
    -webkit-background-clip:text;background-clip:text;
    animation:goldShimmer 7s infinite linear
}

/* ─── Pulso corazón ─── */
@keyframes heartPulse { 0%,100%{transform:scale(1)} 15%{transform:scale(1.15)} 30%{transform:scale(1)} 45%{transform:scale(1.1)} }
.heart-pulse{display:inline-block;animation:heartPulse 2.2s infinite ease-in-out}


/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL — Estados iniciales (oculto antes de entrar)
   Se activa cuando IntersectionObserver agrega .sr-visible
   ═══════════════════════════════════════════════════════════ */

/* Respetar "prefers-reduced-motion" */
@media (prefers-reduced-motion: reduce) {
    [data-sr] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── Todos los elementos se ensamblan al entrar en pantalla ─── */
.hero-editorial [data-sr],
section:not(.hero-editorial) [data-sr],
footer [data-sr] {
    opacity: 0;
    will-change: opacity, transform;
}

/* ─── ACTIVADO: al entrar en el viewport ─── */
[data-sr].sr-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ─── Tipos de entrada: Armado progresivo de la invitación ─── */

/* Sube desde abajo y se asienta (párrafos, títulos, tarjetas) */
[data-sr="up"] {
    transform: translateY(35px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Baja desde arriba suavemente (títulos, monogramas) */
[data-sr="down"] {
    transform: translateY(-30px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tarjeta que se ensambla con elevación y sutil rotación */
[data-sr="assemble-card"] {
    transform: translateY(40px) scale(0.96) rotate(-0.8deg);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entra desde la izquierda y se acopla */
[data-sr="left"],
[data-sr="assemble-left"] {
    transform: translateX(-45px) rotate(-1deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entra desde la derecha y se acopla */
[data-sr="right"],
[data-sr="assemble-right"] {
    transform: translateX(45px) rotate(1deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Aparece escalando (sellos, monogramas, broches) */
[data-sr="scale"] {
    transform: scale(0.85) translateY(15px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Pop emergente (íconos, sellos pequeños) */
[data-sr="pop"] {
    transform: scale(0.75) translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Solo fade suave (texturas, fondos, divisores) */
[data-sr="fade"] {
    transform: none;
    transition: opacity 0.85s ease;
}

/* ─── Delays escalonados ágiles para efecto cascada / armado ─── */
[data-sr-delay="1"] { transition-delay: 0.06s; }
[data-sr-delay="2"] { transition-delay: 0.12s; }
[data-sr-delay="3"] { transition-delay: 0.18s; }
[data-sr-delay="4"] { transition-delay: 0.26s; }
[data-sr-delay="5"] { transition-delay: 0.34s; }
[data-sr-delay="6"] { transition-delay: 0.42s; }

/* ─── Compatibilidad con clases legadas ─── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.9s cubic-bezier(0.2,0.8,0.2,1),
                transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }
.scale-reveal { opacity:0; transform:scale(0.92); transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275); }
.scale-reveal.is-visible { opacity:1; transform:scale(1); }
.delay-1{transition-delay:0.15s} .delay-2{transition-delay:0.3s}
.delay-3{transition-delay:0.45s} .delay-4{transition-delay:0.6s}