/* ============================================================
   HOTEL PRÍNCIPE — Animaciones
   Reveals al hacer scroll (activados por main.js con
   IntersectionObserver) + microanimaciones.
   ============================================================ */

/* Estado inicial de los elementos con reveal */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity .9s cubic-bezier(.22, .8, .3, 1),
        transform .9s cubic-bezier(.22, .8, .3, 1);
}

.reveal        { transform: translateY(36px); }
.reveal-left   { transform: translateX(-48px); }
.reveal-right  { transform: translateX(48px); }
.reveal-scale  { transform: scale(.9); }

/* En móvil y tablet, los reveals horizontales desplazan elementos de ancho
   completo ±48px fuera de la pantalla antes de revelarse. Eso genera un
   desbordamiento horizontal (sobre todo en producción/táctil). Los volvemos
   verticales: no hay corrimiento en X. Se aplica hasta 1024px porque en el
   rango tablet (861–1024) los elementos .reveal-right ocupan la columna
   derecha y su +48px se salía del viewport. */
@media (max-width: 1024px) {
    .reveal-left,
    .reveal-right { transform: translateY(36px); }
}

/* Estado visible (agregado por JS) */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: none;
}

/* Línea de scroll del hero */
@keyframes scrollPulse {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Brillo sutil sobre botones dorados */
.btn--gold::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn--gold:hover::after { left: 130%; }
.btn--gold { overflow: hidden; }

/* Flotado suave para la corona del hero */
.hero__crown {
    animation: floatCrown 5s ease-in-out infinite;
}
@keyframes floatCrown {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Accesibilidad: respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1;
        transform: none;
    }
    html { scroll-behavior: auto; }
}