/* =============================================
   CAMPAMENTO ONAWA — Cinematic Animations V3
   Optimized for performance
   ============================================= */

/* ----- Scroll Reveal (suave y premium) ----- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1s var(--ease-in-out-premium, cubic-bezier(0.33, 1, 0.68, 1)),
        transform 1s var(--ease-in-out-premium, cubic-bezier(0.33, 1, 0.68, 1));
}

.scroll-reveal[data-direction="left"] {
    transform: translateX(-36px);
}

.scroll-reveal[data-direction="right"] {
    transform: translateX(36px);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* ----- Hero Text Reveal ----- */
.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 1.05s var(--ease-out-expo),
        transform 1.05s var(--ease-out-expo);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Scroll Line Pulse ----- */
@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

/* ----- Fog Drift ----- */
@keyframes fogDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(30px);
    }
}

/* ----- Stats Counted State ----- */
.stats__item.counted .stats__number {
    color: var(--amber-light);
    transition: color 0.5s ease;
}

/* ----- Timeline: reveal suave por etapa ----- */
.timeline__item .timeline__sign {
    transition: transform 0.55s var(--ease-out-expo), opacity 0.6s ease, filter 0.5s ease;
}

.timeline__item .timeline__sign-text {
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

/* ----- Timeline Line Glow ----- */
.timeline__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, rgba(212, 145, 58, 0.12), transparent 80%);
    filter: blur(3px);
    pointer-events: none;
}

/* ----- Tier Card Hover Shine ----- */
.tier-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(232, 224, 212, 0.02), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1;
}

.tier-card:hover::after {
    left: 100%;
}

/* ----- Experience Card Hover Border ----- */
.experiences__card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: border-color 0.5s ease;
    pointer-events: none;
    z-index: 5;
}

.experiences__card:hover::after {
    border-color: rgba(212, 145, 58, 0.15);
}

/* ----- En Desarrollo card: shimmer sutil al hover ----- */
.in-dev__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 145, 58, 0.03), transparent);
    transition: left 0.7s var(--ease-in-out-smooth, ease);
    pointer-events: none;
    z-index: 0;
}

.in-dev__card:hover::after {
    left: 100%;
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-reveal,
    .reveal-up {
        opacity: 1;
        transform: none;
    }

    .fog-layer,
    .lamp-light {
        display: none;
    }

    /* Hoja de ruta: línea completa visible sin animación de progreso */
    .timeline__trail-progress {
        height: 100% !important;
    }

    /* Chips "Actualmente contamos con" visibles sin animación */
    .amenity-chip {
        opacity: 1 !important;
        transform: none !important;
    }

    .expansion-heading__desc {
        opacity: 1 !important;
        transform: none !important;
    }
}