/* 
 * Homepage Premium Styles 
 * Adds Playfair Display, Parallax, and Premium Animations
 */

:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --color-gold: #fbbf24;
    --color-green-dark: #1e5a3e;
    --color-green-light: #2d8659;
}

/* Typography Updates */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-heading);
}

body {
    font-family: var(--font-body);
    background-color: #f8fafc;
    /* Premium light gray for contrast */
    color: #374151;
}

/* Parallax Utilities */
.parallax-container {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    /* Taller for parallax movement */
    background-size: cover;
    background-position: center;
    will-change: transform;
    z-index: -1;
    transform: translateZ(0);
    /* Hardware acceleration */
}

/* Premium Animations */
@keyframes fadeInUpPremium {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up-premium {
    opacity: 0;
    animation: fadeInUpPremium 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* Glassmorphism Premium */
.glass-premium {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* Hover Effects */
.hover-lift-premium {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Section Separators */
.section-separator-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.section-separator-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.section-separator-wave .shape-fill {
    fill: #FFFFFF;
}

/* ============================================================
   SCROLL ANIMATIONS - UX/UI EXPERT REFONTE
   ============================================================ */

/* Fade-in up animation - default state (invisible) */
.fade-in-up-premium {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Visible state (triggered by Intersection Observer) */
.fade-in-up-premium.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for sequential reveals */
.fade-in-up-premium.delay-100 {
    transition-delay: 0.1s;
}

.fade-in-up-premium.delay-200 {
    transition-delay: 0.2s;
}

.fade-in-up-premium.delay-300 {
    transition-delay: 0.3s;
}

.fade-in-up-premium.delay-400 {
    transition-delay: 0.4s;
}

.fade-in-up-premium.delay-500 {
    transition-delay: 0.5s;
}

.fade-in-up-premium.delay-600 {
    transition-delay: 0.6s;
}

/* Fade-in scale animation variant */
.fade-in-scale-premium {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out,
                transform 0.6s ease-out;
}

.fade-in-scale-premium.visible {
    opacity: 1;
    transform: scale(1);
}

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

.slide-in-left-premium.visible {
    opacity: 1;
    transform: translateX(0);
}

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

.slide-in-right-premium.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up-premium,
    .fade-in-scale-premium,
    .slide-in-left-premium,
    .slide-in-right-premium {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS - Reduce spacing for compact layout
   ============================================ */

@media (max-width: 768px) {
    /* Reduce section padding for all sections */
    section,
    .section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Reduce hero sections padding */
    .contact-hero,
    .hero-section,
    [class*="-hero"] {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    /* Reduce section headers margin */
    .section-header,
    .section-header-premium,
    [class*="section-header"] {
        margin-bottom: 2rem !important;
    }

    /* Reduce title margins */
    .section-title,
    .section-title-premium,
    h1, h2 {
        margin-bottom: 0.75rem !important;
    }

    /* Reduce subtitle margins */
    .section-subtitle,
    [class*="subtitle"] {
        margin-bottom: 1rem !important;
    }

    /* Reduce container padding */
    .container,
    [class*="container"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce grid gaps */
    .grid,
    [class*="grid"] {
        gap: 1rem !important;
    }

    /* Reduce card padding */
    .card,
    [class*="card"] {
        padding: 1rem !important;
    }

    /* Reduce form spacing */
    form .form-group,
    form [class*="form-group"] {
        margin-bottom: 1rem !important;
    }

    /* Reduce button padding */
    button,
    .btn,
    [class*="button"] {
        padding: 0.75rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Even more aggressive spacing reduction for small mobiles */
    section,
    .section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .contact-hero,
    .hero-section,
    [class*="-hero"] {
        padding-top: 2.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .section-header,
    .section-header-premium {
        margin-bottom: 1.5rem !important;
    }

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ==========================================================================
   MOBILE NAVIGATION FIX - Force correct display behavior
   ========================================================================== */

/* Mobile: Show hamburger button */
@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
    }

    /* Desktop navigation hidden on mobile */
    .main-navigation {
        display: none !important;
    }

    /* Mobile menu panel */
    .mobile-menu {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 9999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .mobile-menu.active {
        transform: translateX(0) !important;
    }
}

/* Desktop: Hide hamburger, show nav */
@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .mobile-menu {
        display: none !important;
    }

    .main-navigation {
        display: flex !important;
    }
}