/**
 * First Interaction Animation Pattern
 *
 * Performance optimization that keeps initial page load static (no animations)
 * for optimal Core Web Vitals, then adds subtle animations on first user interaction.
 *
 * ⚠️ IMPORTANT: Only use for ABOVE-THE-FOLD content visible on initial page load.
 * DO NOT apply to scroll-triggered elements (gallery, stats cards, etc.)
 *
 * Version: 1.0.1
 * Documentation: See FIRST_INTERACTION_PATTERN.md
 */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes subtleFadeIn {
    from {
        opacity: 0.7;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtleSlideIn {
    from {
        opacity: 0.8;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes subtleSlideInRight {
    from {
        opacity: 0.8;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes subtleSlideDown {
    from {
        opacity: 0.9;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subtleScaleIn {
    from {
        opacity: 0.7;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ultraSubtle {
    from {
        opacity: 0.95;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   ABOVE-THE-FOLD ANIMATIONS
   Only applies to hero section and top-bar
   ============================================ */

/* Hero Section Animations */
body.user-interacted .hero-items > * {
    animation: subtleFadeIn 0.6s ease-out forwards;
}

body.user-interacted .hero-title {
    animation: subtleSlideIn 0.8s ease-out forwards;
}

/* ============================================
   FIX: Navbar Trembling Prevention
   Disable navbar hover transitions until after
   first interaction animations complete
   ============================================ */

/* Disable navbar transitions before user interaction */
body:not(.user-interacted) .navbar {
    transition: none !important;
}

/* Prevent hover effects before user interaction completes */
body:not(.user-interacted) .navbar:hover {
    border-color: var(--broders) !important;
    background-color: var(--white-shade-80) !important;
    box-shadow: none !important;
}

/* ============================================
   FIX: Top Bar Webflow Conflict
   Override Webflow's inline styles to prevent trembling
   ============================================ */

/* Force top-bar to be visible immediately (override Webflow inline styles) */
body:not(.user-interacted) .top-bar {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

/* After user interaction, allow our subtle animation */
body.user-interacted .top-bar {
    animation: subtleSlideDown 0.5s ease-out forwards;
}

/* ============================================
   FIX: Hero Section Webflow Conflict
   Override Webflow's inline styles for instant visibility
   Only after page is loaded to prevent flash
   ============================================ */

/* Override Webflow's inline opacity on hero wrapper (only after page loads) */
body.page-loaded .hero-items-wrapper[style*="opacity"] {
    opacity: 1 !important;
}

/* Override Webflow's inline transform on hero title (only after page loads) */
body.page-loaded .hero-title[style*="transform"] {
    transform: translate3d(0, 0, 0) !important;
}

/* Ensure hero section content is visible after load */
body.page-loaded .hero-section .hero-items-wrapper,
body.page-loaded .hero-section .hero-items,
body.page-loaded .hero-section .hero-title,
body.page-loaded .hero-section h1,
body.page-loaded .hero-section p {
    opacity: 1 !important;
}

/* ============================================
   FIX: Prevent flash of hero before preloader
   Hide hero on initial load to prevent flash on all devices
   ============================================ */

/*
 * Hide hero until page is ready (mobile and desktop)
 * Uses opacity to preserve LCP detection while preventing visual flash
 * Note: visibility:hidden breaks LCP, so we use opacity with pointer-events
 */
.hero-section {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* Show hero after page is loaded (class added by window.onload) */
body.page-loaded .hero-section {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   RESPONSIVE HERO: Mobile Image vs Desktop Spline
   ============================================ */

/* Mobile: Show static AVIF image, hide Spline 3D scene */
@media (max-width: 767px) {
    .hero-mobile-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-mobile-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .hero-spline-container {
        display: none !important;
    }
}

/* Desktop/Tablet: Hide image, show Spline 3D scene */
@media (min-width: 768px) {
    .hero-mobile-image {
        display: none !important;
    }

    .hero-spline-container {
        display: block;
    }
}

/* ============================================
   ACCESSIBILITY
   Respect user motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    body.user-interacted * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   NOTES FOR DEVELOPERS
   ============================================

   ❌ DO NOT add animations for:
   - .big-numbers-card (has data-w-id scroll trigger)
   - Gallery elements (has data-w-id scroll trigger)
   - Any element with data-w-id attribute

   ✅ Only animate elements visible on initial page load:
   - Hero section (.hero-items, .hero-title)
   - Top navigation bar (.top-bar)
   - Header elements above the fold

   See FIRST_INTERACTION_PATTERN.md for full documentation.
   ============================================ */