/* La portada respira: el nombre del hotel se aparta un rato y la foto se ve entera.
 *
 * Historia, que importa para entender los números:
 *
 * La portada traía de fábrica un ciclo de 30 s que escondía el texto del 33 % al 97 %:
 * invisible casi dos tercios del tiempo. En un teléfono, donde la portada ES la primera
 * pantalla, lo más probable era entrar justo en ese hueco y ver una foto sin un solo texto,
 * sin saber siquiera en qué hotel se está. Por eso una sesión anterior lo apagó en móvil.
 *
 * Y tenía razón. Pero apagarlo del todo deja el otro problema: en un teléfono el nombre y
 * el lema tapan el centro de la foto todo el rato.
 *
 * El arreglo no es elegir un extremo, es acortar el ciclo. Con 18 s en vez de 30:
 *   · el nombre se ve unos 7 s, de sobra para leerlo;
 *   · la foto se ve limpia unos 9 s, que es lo que el hotel quiere enseñar;
 *   · y quien entra a mitad del hueco espera como mucho 9 s a ver el nombre, no 19.
 * Además arranca con la carga y con un segundo de margen, así que la primera impresión
 * SIEMPRE lleva el nombre puesto.
 *
 * Y mientras el texto no está, el velo oscuro baja: la foto recupera su luz. Antes se
 * quedaba apagada por un velo que en ese rato ya no tapaba nada.
 *
 * Los selectores llevan «html body» a propósito: hay una hoja anterior que fija el texto
 * con esa misma fuerza, y sin igualarla esto no pintaría nada.
 * Solo en el teléfono en vertical: en el ordenador el texto no tapa la foto.
 */

@media (max-width: 819px) and (orientation: portrait) {

    /* ------------------------------------------------------------ el texto */
    html body.hotel-home .hero .hero__content,
    html body .hero .hero__content {
        animation: heroTextoRespira 18s 1.2s infinite both !important;
    }

    @keyframes heroTextoRespira {
        0%, 38%   { opacity: 1; transform: translateY(0); }
        44%, 92%  { opacity: 0; transform: translateY(-8px); }
        100%      { opacity: 1; transform: translateY(0); }
    }

    /* ------------------------------------------------------------- el velo
       Al mismo compás. No se quita del todo: los precios y el botón de reservar que van
       sobre la foto siguen necesitando contraste para poder leerse. */
    html body.hotel-home .hero .hero__overlay,
    html body .hero .hero__overlay {
        animation: heroVeloRespira 18s 1.2s infinite both !important;
    }

    @keyframes heroVeloRespira {
        0%, 38%   { opacity: 1; }
        46%, 90%  { opacity: .32; }
        100%      { opacity: 1; }
    }

    /* Las fotos NO se tocan: cada «slide» lleva la animación del carrusel (heroSlideshow,
       con su retardo por foto). Ponerle otra animación encima habría parado la rotación.
       La luz la devuelve el velo al bajar, que es de donde venía la falta de luz. */
}

/* Quien pidió menos movimiento en su sistema no ve nada de esto: el texto se queda puesto.
   Un adorno nunca manda sobre lo que alguien ha pedido. El carrusel se deja como esté:
   es del hotel y no es cosa de esta hoja. */
@media (prefers-reduced-motion: reduce) {
    html body.hotel-home .hero .hero__content,
    html body .hero .hero__content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    html body.hotel-home .hero .hero__overlay,
    html body .hero .hero__overlay { animation: none !important; opacity: 1 !important; }
}