/* ============================
La Piedra Angular – ANIMATIONS (DEV)
============================ */
:root{--verde-piedra:#3A6B35;--azul-profundo:#1E3A5F}

/* Hover Lift */
.hover-lift:hover,.card:hover{
    transform:translateY(-4px);
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:0 10px 22px rgba(30,58,95,.22)
}

/* Bounce CTA */
@keyframes waveBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wave-bounce{animation:waveBounce 2.4s ease-in-out infinite}

/* Reveal on Scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease var(--delay,0s), transform .7s ease var(--delay,0s)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn-cta,.btn-ghost,.btn,.card{transition:none}
  .wave-bounce,.gradient-text,.btn-cta,.btn-album{animation:none}
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Shimmer gradiente títulos */
.gradient-text{
    background:linear-gradient(90deg,var(--verde-piedra),var(--azul-profundo),var(--verde-piedra));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-size:200% auto;animation:shimmerMove 4s linear infinite
}
@keyframes shimmerMove{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* Glow suave CTA */
@keyframes pulseGlow{
    0%,100%{box-shadow:0 0 8px rgba(30,58,95,.35),0 0 16px rgba(58,107,53,.35)}
    50%{box-shadow:0 0 18px rgba(30,58,95,.55),0 0 36px rgba(58,107,53,.55)}
}
.btn-cta{animation:waveBounce 2.4s ease-in-out infinite, pulseGlow 3s ease-in-out infinite}

/* Shine del menú principal (opcional; requiere variables --i en <a>) */
@keyframes navShine{0%{background-position:-200% center}50%{background-position:200% center}100%{background-position:-200% center}}
.menu a{
    position:relative;color:#0f172a;
    background:linear-gradient(90deg,rgba(30,58,95,0) 0%,rgba(30,58,95,.8) 50%,rgba(30,58,95,0) 100%);
    background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#0f172a;
    animation:navShine 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*1.5s);
    text-shadow:0 0 6px rgba(255,255,255,.25)
}
/* Evitar estilos inline: establecer --i por posicion */
.menu a:nth-child(1){ --i: 0 }
.menu a:nth-child(2){ --i: 1 }
.menu a:nth-child(3){ --i: 2 }
.menu a:nth-child(4){ --i: 3 }

/* --- ANIMACIÓN BOTÓN ÁLBUM --- */
.btn-album {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: .2s;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}