/* --- Mar y Selva — Animations --- */

/* --- Page Load Transition --- */
@keyframes fallbackShow { to { opacity: 1; } }
body {
    opacity: 0;
    transition: opacity 0.8s var(--ease-smooth);
    animation: fallbackShow 0s 3s forwards;
}
body.is-loaded { opacity: 1; animation: none; }

/* --- Scroll Reveal Base --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); will-change: auto; }
/* Staggered children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.64s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.72s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > * { will-change: auto; }
/* Reveal from left */
.reveal--left {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}
.reveal--left.is-visible { opacity: 1; transform: translateX(0); will-change: auto; }
/* Reveal from right */
.reveal--right {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}
.reveal--right.is-visible { opacity: 1; transform: translateX(0); will-change: auto; }
/* Fade only (no transform) */
.reveal--fade {
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-smooth);
    will-change: opacity;
}
.reveal--fade.is-visible { opacity: 1; will-change: auto; }
/* Scale reveal */
.reveal--scale {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}
.reveal--scale.is-visible { opacity: 1; transform: scale(1); will-change: auto; }

/* --- Hero Animations --- */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollIndicator {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.1% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero__content > *:not(.hero__content-backdrop) { animation: heroFadeIn 1.2s var(--ease-out) both; }
.hero__content > *:nth-child(2) { animation-delay: 0.5s; }  /* subtitle */
.hero__content > *:nth-child(3) { animation-delay: 0.75s; } /* title */
.hero__content > *:nth-child(4) { animation-delay: 1s; }    /* tagline */
.hero__content > *:nth-child(5) { animation-delay: 1.25s; } /* CTA */
.hero__scroll { opacity: 0; animation: heroFadeIn 1s var(--ease-out) both; animation-delay: 1.8s; }
.hero__scroll-line::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: var(--color-text-on-dark);
    animation: scrollIndicator 2.8s var(--ease-in-out) infinite;
    animation-delay: 2.5s;
}

/* --- Gallery Lightbox --- */
@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes lightboxSlideIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.gallery-lightbox { animation: lightboxFadeIn 0.5s var(--ease-smooth) both; }
.gallery-lightbox__image { animation: lightboxSlideIn 0.6s var(--ease-out) both; animation-delay: 0.1s; transition: opacity 0.3s var(--ease-smooth); }
.gallery-lightbox__close { animation: heroFadeIn 0.4s var(--ease-out) both; animation-delay: 0.3s; }
.gallery-lightbox__nav { animation: heroFadeIn 0.4s var(--ease-out) both; animation-delay: 0.25s; }
.gallery-lightbox__counter { animation: heroFadeIn 0.4s var(--ease-out) both; animation-delay: 0.35s; }

/* --- Subtle Hover Effects --- */
.villa-card__image img { transition: transform 0.8s var(--ease-out); }
.experience-card__image img { transition: transform 0.8s var(--ease-out); }
@media (hover: hover) {
    .villa-card:hover .villa-card__image img { transform: scale(1.04); }
    .experience-card:hover .experience-card__image img { transform: scale(1.04); }
}

/* --- Nav Animation --- */
.nav {
    transition:
        background-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth);
}

/* --- Section Divider Line --- */
@keyframes lineGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.section-divider { transform-origin: center; }
.section-divider.is-visible { animation: lineGrow 1.2s var(--ease-out) both; }