/* ============================================
   THE OAKS — SCROLL ANIMATIONS
   ============================================ */

/* --- Fade-up base state (hidden until JS adds .in-view) --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- Fade-in (no movement) --- */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.fade-in.in-view {
    opacity: 1;
}

/* --- Staggered children --- */
.stagger-children > * {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.stagger-children.in-view > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay: 0.05s; }
.stagger-children.in-view > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay: 0.15s; }
.stagger-children.in-view > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay: 0.25s; }
.stagger-children.in-view > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay: 0.35s; }
.stagger-children.in-view > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay: 0.45s; }
.stagger-children.in-view > *:nth-child(6) { opacity:1; transform:translateY(0); transition-delay: 0.55s; }

/* --- Slide in from left --- */
.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* --- Slide in from right --- */
.slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* --- Scale up --- */
.scale-up {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.scale-up.in-view {
    opacity: 1;
    transform: scale(1);
}

/* --- Hero entrance (title + subtitle + CTA) --- */
.hero-title {
    animation: heroSlideDown 1s ease 0.2s both;
}
.hero-subtitle {
    animation: heroSlideDown 1s ease 0.45s both;
}
.hero-cta {
    animation: heroSlideDown 1s ease 0.65s both;
}
.hero-badges {
    animation: heroSlideDown 1s ease 0.85s both;
}

@keyframes heroSlideDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Hero image parallax wrapper --- */
.hero-grid {
    will-change: transform;
}

/* --- Section title accent line grows in --- */
.section-title::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s ease 0.3s;
}
.section-title.in-view::after {
    transform: scaleX(1);
}

/* --- Book Tour button pulse --- */
.book-tour-btn {
    animation: none;
    position: relative;
    overflow: hidden;
}
.book-tour-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    border-radius: inherit;
    opacity: 0;
    animation: btnPulse 2.8s ease-in-out 1.2s infinite;
}
@keyframes btnPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.04); }
}

/* --- Counter number count-up placeholder --- */
.stat-number {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* --- Smooth header glass on scroll (JS-driven) --- */
.header.scrolled {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 24px rgba(0,0,0,0.12) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* --- Respect reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
    .fade-up, .fade-in, .stagger-children > *,
    .slide-left, .slide-right, .scale-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hero-title, .hero-subtitle, .hero-cta, .hero-badges {
        animation: none !important;
    }
    .book-tour-btn::after { animation: none !important; }
}