/* ========================================================
   Independent Scroll Animation & Effects System
   Al-Amana Moving and Storage Company
   ======================================================== */

/* Default states before scroll reveal */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

/* Fade up effect */
.reveal-fade-up {
    transform: translateY(40px);
}

/* Direct fade in effect */
.reveal-fade-in {
    transform: translateY(0);
}

/* Slide from right effect */
.reveal-slide-right {
    transform: translateX(-50px);
}

/* Slide from left effect */
.reveal-slide-left {
    transform: translateX(50px);
}

/* Progressive zoom in effect */
.reveal-zoom-in {
    transform: scale(0.92);
}

/* ========================================================
   Active state after scroll intersection (Animation Trigger)
   ======================================================== */
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Staggering delays for consecutive elements */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }

/* Improve animation experience for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ========================================================
   Premium Button Hover/Active Transitions
   ======================================================== */
.btn {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

.btn:active {
    transform: translateY(-1px) scale(0.98) !important;
}

/* ========================================================
   Desktop Dropdown Transitions (Screens >= 992px)
   ======================================================== */
@media (min-width: 992px) {
    .dropdown-menu {
        display: block !important; /* Forces layout rendering so transition animations work */
        margin-top: 15px !important;
        transform: translateY(15px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                    visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Show dropdown on hover */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Rotate the caret icon on hover */
    .nav-item.dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }

    /* Bridge the gap between the nav-link and the dropdown menu to prevent flickering */
    .dropdown-menu::before {
        content: '' !important;
        position: absolute !important;
        top: -16px !important; /* Spans slightly more than the 15px margin-top */
        left: 0 !important;
        right: 0 !important;
        height: 16px !important;
        background: transparent !important;
        display: block !important;
        z-index: -1 !important;
    }

    .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}

/* ========================================================
   Responsive Typography System
   ======================================================== */

@media (max-width: 768px) {
    /* Hero Titles */
    .hero-title, 
    .hero-content .title, 
    .service-title, 
    .main-heading,
    .hero-content h1, 
    .hero-content-ac h1, 
    .about-us-section .section-title .title,
    .about-hero h1,
    .hero-parquet-service h1.hero-title,
    h1 {
        font-size: 1.65rem !important;
        line-height: 1.35 !important;
    }
    
    /* Section Main Headings (H2) */
    h2, 
    .section-title h2, 
    .section-title-ac h2, 
    .section-title-deep h2, 
    .why-choose-us-service-title, 
    .why-choose-us-title,
    .team-section .section-title .title,
    .standards-section .section-title .title,
    .parquet-installation-service-header-title,
    .custom-info-title,
    .cta-title {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
    }
    
    /* Sub-headings and Cards (H3/H4/H5) */
    h3, 
    h4,
    h5,
    .about-us-item h2, 
    .services-list-item .content .title, 
    .standards-list .standards-item .content .title,
    .feature-item-title, 
    .installation-process-item-title, 
    .parquet-type-item-title,
    .team-card .title,
    .care-tip-item-title,
    .why-choose-us-service-item-title,
    .feature-text h5,
    .feature-item-ac h5 {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
    }

    /* Paragraphs and Subtitles */
    p,
    .hero-subtitle, 
    .hero-content .description, 
    .parquet-installation-service-header-text,
    .hero-parquet-text-content .hero-subtitle,
    .service-description,
    .cta-text {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    /* Very Small Phones */
    
    /* Hero Titles */
    .hero-title, 
    .hero-content .title, 
    .service-title, 
    .main-heading,
    .hero-content h1, 
    .hero-content-ac h1, 
    .about-us-section .section-title .title,
    .about-hero h1,
    .hero-parquet-service h1.hero-title,
    h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    
    /* Section Main Headings (H2) */
    h2, 
    .section-title h2, 
    .section-title-ac h2, 
    .section-title-deep h2, 
    .why-choose-us-service-title, 
    .why-choose-us-title,
    .team-section .section-title .title,
    .standards-section .section-title .title,
    .parquet-installation-service-header-title,
    .custom-info-title,
    .cta-title {
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
    }
    
    /* Sub-headings and Cards (H3/H4/H5) */
    h3, 
    h4,
    h5,
    .about-us-item h2, 
    .services-list-item .content .title, 
    .standards-list .standards-item .content .title,
    .feature-item-title, 
    .installation-process-item-title, 
    .parquet-type-item-title,
    .team-card .title,
    .care-tip-item-title,
    .why-choose-us-service-item-title,
    .feature-text h5,
    .feature-item-ac h5 {
        font-size: 1.05rem !important;
    }

    /* Paragraphs and Subtitles */
    p,
    .hero-subtitle, 
    .hero-content .description, 
    .parquet-installation-service-header-text,
    .hero-parquet-text-content .hero-subtitle,
    .service-description,
    .cta-text {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* Reduce vertical padding for small screens */
    .section-padding, 
    section[class*="padding"],
    section[class*="-service"],
    .furniture-services {
        padding: 30px 0 !important;
    }
}

/* ========================================================
   Anchor Scroll Margin (Fixed Navbar Offset)
   ======================================================== */
[id] {
    scroll-margin-top: 80px;
}