/* ===== SCROLL SNAP FUNCTIONALITY FOR TAILORBIRD PATTERNS ===== */

/* Enable smooth scrolling on landing pages */
html {
    scroll-behavior: smooth;
}

body.landing-page {
    scroll-snap-type: y proximity;
    overflow-y: auto;
}

/* Scroll snap alignment for sections */
.landing-section {
    scroll-snap-align: start;
}

/* Only hero sections should be full viewport height */
.landing-section.section-hero,
.landing-section.tailorbirds-hero {
    min-height: 100vh;
}

.scroll-snap {
    scroll-snap-align: start;
}

/* Hide any scroll indicators/dots */
.scroll-indicator,
.scroll-dots {
    display: none !important;
}

/* ===== SCROLL ANIMATIONS ===== */

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile: Ensure hero section is immediately visible (no JS wait) */
/* CRITICAL: NO body.landing-page dependency - works instantly */
@media (max-width: 767px) {
    .landing-section.section-hero *,
    .landing-section.tailorbirds-hero *,
    .section-hero *,
    .tailorbirds-hero * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Desktop: Non-blocking animations - elements start visible, animate when in view */
/* CRITICAL: NO body.landing-page dependency - immediate visibility */
@media (min-width: 768px) {
    /* All elements start fully visible - no opacity:0 or hidden state */
    .landing-section h1,
    .landing-section h2,
    .landing-section h3,
    .landing-section p,
    .landing-section .wp-block-button,
    .landing-section .feature-card,
    .landing-section .service-card,
    .landing-section .testimonial-card,
    .landing-section .pricing-card {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Optional: Add subtle animation enhancement when JS adds .in-view class */
    /* This is progressive enhancement - works fine without JS */
    .landing-section.in-view h1,
    .landing-section.in-view h2,
    .landing-section.in-view h3,
    .landing-section.in-view p,
    .landing-section.in-view .wp-block-button,
    .landing-section.in-view .feature-card,
    .landing-section.in-view .service-card,
    .landing-section.in-view .testimonial-card,
    .landing-section.in-view .pricing-card {
        opacity: 1;
        transform: translateY(0);
    }
}