/* ============================================================
   HERO PARALLAX POR CAPAS — Eagles Shuttle Costa Rica
   Rediseño: composición enmarcada (no centrada), escena de
   paisaje anclada al fondo, follaje en las esquinas y aves en
   los laterales. Animación de entrada suave + parallax + motion.

   Estructura de cada capa:
     .hl            -> posición + parallax (translate var --px/--py)
       .hl-inner    -> animación de ENTRADA (una sola vez)
         img        -> animación CONTINUA (deriva / flotar / mecer)

   Se activa solo cuando <header> tiene la clase .hero-parallax.
   ============================================================ */

.hero-parallax {
    /* Cielo tropical al atardecer como base, por si tarda la imagen */
    background: linear-gradient(180deg, #bfe6ff 0%, #ddf0f7 38%, #ffe6c4 72%, #ffd9a8 100%) !important;
    min-height: clamp(580px, 100svh, 920px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

/* ---- Velos para legibilidad (nav arriba + texto al centro) ---- */
.hero-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,22,38,0.42) 0%, rgba(8,22,38,0.12) 14%, rgba(8,22,38,0) 26%),
        radial-gradient(125% 78% at 50% 42%, rgba(8,22,38,0.46) 0%, rgba(8,22,38,0.12) 46%, rgba(8,22,38,0) 66%),
        linear-gradient(0deg, rgba(8,22,38,0.30) 0%, rgba(8,22,38,0) 30%);
    display: block !important;
}

/* ---- Contenedor de escena: aloja todas las capas ---- */
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ---- Capa base ---- */
.hl {
    --px: 0px;
    --py: 0px;
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(var(--px), var(--py), 0);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hl-inner {
    width: 100%;
    height: 100%;
    /* Entrada por defecto (suave, hacia arriba) */
    opacity: 0;
    animation: hl-rise 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hl img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    user-select: none;
    -webkit-user-drag: none;
}

/* =====================================================
   CAPAS DE PAISAJE (ancladas al fondo, detrás del texto)
   ===================================================== */

/* CIELO — cubre todo (con margen extra para que el parallax de scroll
   no descubra un borde vacío en la parte superior) */
.hl-sky { inset: -8%; width: 116%; height: 116%; z-index: 1; }
.hl-sky img { object-fit: cover; object-position: center; }
.hl-sky .hl-inner { animation: hl-fade 1.8s ease both; }

/* NUBES — banda alta que deriva */
.hl-clouds { top: 2%; left: -12%; width: 124%; height: 42%; z-index: 2; opacity: 0.9; }
.hl-clouds img { object-fit: cover; object-position: top center; animation: hl-clouds-drift 90s linear infinite; }
.hl-clouds .hl-inner { animation: hl-fade 2s ease both 0.1s; }

/* NIEBLA LEJANA */
.hl-fog-back { bottom: 22%; left: -18%; width: 136%; height: 38%; z-index: 3; opacity: 0.4; }
.hl-fog-back img { object-fit: cover; animation: hl-fog-drift 60s ease-in-out infinite alternate; }
.hl-fog-back .hl-inner { animation: hl-fade 2.2s ease both 0.2s; }

/* VOLCÁN ARENAL — centrado en el horizonte */
.hl-volcano {
    left: 0; right: 0; margin-inline: auto;
    bottom: 6%;
    width: clamp(360px, 56%, 760px);
    height: 62%;
    z-index: 4;
}
.hl-volcano .hl-inner { animation: hl-rise-sm 1.7s cubic-bezier(0.16,1,0.3,1) both 0.15s; }

/* BOSQUE / SELVA — banda inferior (borde superior difuminado) */
.hl-forest { left: -5%; right: -5%; bottom: 0; width: 110%; height: 44%; z-index: 5; }
.hl-forest img {
    object-fit: cover; object-position: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
}
.hl-forest .hl-inner { animation: hl-rise 1.7s cubic-bezier(0.16,1,0.3,1) both 0.25s; }

/* LAGO */
.hl-lake { left: -6%; right: -6%; bottom: -2%; width: 112%; height: 24%; z-index: 6; }
.hl-lake img {
    object-fit: cover; object-position: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
}
.hl-lake .hl-inner { animation: hl-rise 1.7s cubic-bezier(0.16,1,0.3,1) both 0.3s; }

/* NIEBLA FRONTAL */
.hl-fog-front { bottom: 4%; left: -22%; width: 144%; height: 30%; z-index: 8; opacity: 0.34; }
.hl-fog-front img { object-fit: cover; animation: hl-fog-drift 44s ease-in-out infinite alternate-reverse; }
.hl-fog-front .hl-inner { animation: hl-fade 2.4s ease both 0.4s; }

/* =====================================================
   AVE EN VUELO
   ===================================================== */
.hl-macaw { top: 14%; left: 0; width: clamp(120px, 13%, 200px); height: 16%; z-index: 7; }
.hl-macaw img { object-fit: contain; object-position: center; animation: hl-macaw-fly 30s linear infinite 1s; }
.hl-macaw .hl-inner { animation: hl-fade 1.2s ease both 0.6s; }

/* =====================================================
   MARCO DE FOLLAJE (esquinas / laterales, sobre el texto)
   ===================================================== */

/* PALMERAS — enmarcan los laterales.
   Sobredimensionadas (inset negativo + ancho/alto >100%) para que
   cubran más pantalla y para que el parallax NUNCA descubra un borde
   vacío al mover el cursor. */
.hl-palms { inset: -12% -10%; width: 120%; height: 124%; z-index: 9; }
.hl-palms img { object-fit: cover; object-position: center bottom; }
.hl-palms .hl-inner { animation: hl-fade 2s ease both 0.15s; transform-origin: bottom center; }

/* MARIPOSAS — acento lateral izquierdo (fuera del texto) */
.hl-butterflies {
    left: -2%;
    top: 30%;
    width: clamp(150px, 22%, 320px);
    height: 40%;
    z-index: 10;
}
.hl-butterflies img { object-fit: contain; object-position: left center; animation: hl-butterfly-float 9s ease-in-out infinite 1.2s; }
.hl-butterflies .hl-inner { animation: hl-pop 1.4s cubic-bezier(0.16,1,0.3,1) both 0.7s; }

/* FLORES — acento inferior, difuminado para que no forme una franja sólida */
.hl-flowers { left: -6%; right: -6%; bottom: -2%; width: 112%; height: 24%; z-index: 12; opacity: 0.9; }
.hl-flowers img {
    object-fit: cover; object-position: bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 70%, transparent 100%);
}
.hl-flowers .hl-inner { animation: hl-rise 1.6s cubic-bezier(0.16,1,0.3,1) both 0.45s; }

/* HOJAS MONSTERA — marco SOLO en las esquinas superiores.
   Máscara: opacas arriba, se desvanecen hacia el centro para
   eliminar la "pared" verde sólida en la parte inferior. */
.hl-leaves { inset: -12%; width: 124%; height: 124%; z-index: 11; }
.hl-leaves img {
    object-fit: cover; object-position: center top;
    animation: hl-leaves-sway 12s ease-in-out infinite 1.6s;
    -webkit-mask-image: radial-gradient(170% 118% at 50% -10%, #000 46%, rgba(0,0,0,0.6) 62%, transparent 80%);
            mask-image: radial-gradient(170% 118% at 50% -10%, #000 46%, rgba(0,0,0,0.6) 62%, transparent 80%);
}
.hl-leaves .hl-inner { animation: hl-leaves-in 1.6s cubic-bezier(0.16,1,0.3,1) both 0.1s; transform-origin: center top; }

/* TUCÁN — posado en la esquina inferior derecha, sobre el follaje */
.hl-toucan {
    right: 2%;
    bottom: 14%;
    width: clamp(120px, 15%, 220px);
    height: 24%;
    z-index: 13;
}
.hl-toucan img { object-fit: contain; object-position: right bottom; transform-origin: bottom center; animation: hl-toucan-sway 6s ease-in-out infinite 1.4s; }
.hl-toucan .hl-inner { animation: hl-slide-right 1.5s cubic-bezier(0.16,1,0.3,1) both 0.8s; }

/* =====================================================
   TEXTO DEL HERO (siempre por encima de las capas)
   ===================================================== */
.hero-parallax .container.header-container {
    position: relative;
    z-index: 20;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hero-parallax .hero-content {
    margin-top: auto;
    margin-bottom: auto;
    text-shadow: 0 2px 18px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}
/* Entrada escalonada del contenido del hero */
.hero-parallax .hero-title   { opacity: 0; animation: hl-rise 1.1s cubic-bezier(0.16,1,0.3,1) both 0.35s; }
.hero-parallax .hero-subtitle{ opacity: 0; animation: hl-rise 1.1s cubic-bezier(0.16,1,0.3,1) both 0.55s; }
.hero-parallax .hero-buttons { opacity: 0; animation: hl-rise 1.1s cubic-bezier(0.16,1,0.3,1) both 0.75s; }

/* ============================================================
   KEYFRAMES — ENTRADA (una sola vez)
   ============================================================ */
@keyframes hl-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes hl-rise {
    from { opacity: 0; transform: translateY(46px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hl-rise-sm {
    from { opacity: 0; transform: translateY(28px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hl-pop {
    from { opacity: 0; transform: translateY(24px) scale(0.86); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hl-slide-right {
    from { opacity: 0; transform: translateX(60px) translateY(10px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes hl-leaves-in {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   KEYFRAMES — MOVIMIENTO CONTINUO (sobre <img>, sin -50%)
   ============================================================ */
@keyframes hl-clouds-drift {
    from { transform: translateX(-6%); }
    to   { transform: translateX(6%); }
}
@keyframes hl-fog-drift {
    from { transform: translateX(-5%); opacity: 0.85; }
    to   { transform: translateX(5%);  opacity: 1; }
}
@keyframes hl-macaw-fly {
    0%   { transform: translate(0, 0) scaleX(1); opacity: 0; }
    4%   { opacity: 1; }
    46%  { transform: translate(880%, -120%) scaleX(1); opacity: 1; }
    47%  { opacity: 0; }
    100% { transform: translate(880%, -120%) scaleX(1); opacity: 0; }
}
@keyframes hl-butterfly-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(-3%, -6%) rotate(-2deg); }
    50%      { transform: translate(2%, 3%) rotate(1.5deg); }
    75%      { transform: translate(-2%, -3%) rotate(-1deg); }
}
@keyframes hl-toucan-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-2.5deg); }
}
@keyframes hl-leaves-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(0.8deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .hl-volcano   { width: clamp(320px, 64%, 620px); }
    .hl-toucan    { width: clamp(120px, 20%, 200px); }
    .hl-butterflies { width: clamp(140px, 26%, 260px); }
}
@media (max-width: 768px) {
    .hero-parallax { min-height: clamp(560px, 92svh, 760px); }
    .hl-volcano   { width: clamp(280px, 82%, 460px); height: 50%; bottom: 8%; }
    .hl-forest    { height: 40%; }
    .hl-flowers   { height: 26%; }
    .hl-toucan    { width: clamp(110px, 30%, 170px); bottom: 10%; }
    .hl-butterflies { width: clamp(120px, 34%, 200px); top: 26%; }
    .hl-macaw     { width: clamp(90px, 22%, 150px); }
    .hero-parallax .hero-content { margin-top: 8vh; }
}
@media (max-width: 480px) {
    .hl-butterflies { opacity: 0.92; top: 22%; }
    .hl-toucan    { bottom: 8%; }
}

/* ============================================================
   ACCESIBILIDAD: respeta reduce-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hl, .hl-inner, .hl img,
    .hero-parallax .hero-title,
    .hero-parallax .hero-subtitle,
    .hero-parallax .hero-buttons {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}