/**
 * Mammtech Corporation – Scroll & Loading Performance Fixes
 * Addresses: invisible sections, scroll jank, layout thrashing, GPU compositing
 */

/* =====================================================
   1. REMOVE body transition that causes scroll jank
   The dark-theme.css adds `transition: background 0.35s`
   to body which fires EVERY time a class changes on scroll.
   We override it to only fire on dark-mode toggle.
   ===================================================== */
body {
    transition: none; /* Remove blanket body transition */
}
body.dark-mode-transitioning {
    transition: background 0.35s ease, color 0.35s ease;
}

/* =====================================================
   2. GPU PROMOTE elements that animate on scroll
   will-change tells the browser to create a separate
   composite layer — prevents painting the whole page.
   NOTE: Do NOT add will-change to elements that use
   visibility:hidden — it can trap them in a hidden
   compositing layer that JS cannot toggle.
   ===================================================== */
#header,
.section-indicator,
.mmt-toast {
    will-change: transform;
}

.why-cards-track {
    will-change: transform;
}

/* =====================================================
   3. ENSURE ALL SECTIONS ARE ALWAYS VISIBLE
   The IntersectionObserver in premium-script.js only
   targets .feature-card, .product-card, .service-card.
   But other elements may be invisible due to CSS issues.
   Force key section elements to always be visible.
   ===================================================== */

/* Stats section text must always be visible */
.stat-item h3,
.stat-item p,
.counter {
    opacity: 1 !important;
    visibility: visible !important;
}

/* FAQ answers always show (they're SEO content, not hidden by JS) */
.faq-answer {
    opacity: 1;
    visibility: visible;
}

/* Section titles always visible */
.section-title,
.section-title h2,
.section-title p {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Contact section cards always visible */
.contact-cta,
.contact-cta .contact-card,
.contact-grid,
.contact-grid > div {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Footer always visible */
footer,
footer * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================================================
   4. CONTENT-VISIBILITY: prevent off-screen rendering
   (Removed due to scroll tagging)
   ===================================================== */
section {
    /* Kept default */
}

/* =====================================================
   5. FIX ACCORDION BODY – was opacity:0 by default
   In how-it-works.css, accordion-body has opacity:0 
   even when NO active class is set correctly. 
   The first item is .active so it should be visible.
   ===================================================== */
.accordion-item.active .accordion-body {
    opacity: 1 !important;
    max-height: 600px !important; /* Give enough room for long content */
    padding: 0 20px 20px !important;
}

/* Transition only opacity and max-height, NOT all properties */
.accordion-body {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease,
                padding 0.3s ease;
}

/* =====================================================
   6. FIX MARQUEE – success stories section
   The marquee-wrapper uses --bg-main variable that
   doesn't exist, causing edge fades to be black/wrong.
   ===================================================== */
.marquee-wrapper::before {
    background: linear-gradient(to right, var(--bg-white, #ffffff) 0%, transparent 100%) !important;
}
.marquee-wrapper::after {
    background: linear-gradient(to left, var(--bg-white, #ffffff) 0%, transparent 100%) !important;
}
body.dark-mode .marquee-wrapper::before {
    background: linear-gradient(to right, var(--bg-white, #111827) 0%, transparent 100%) !important;
}
body.dark-mode .marquee-wrapper::after {
    background: linear-gradient(to left, var(--bg-white, #111827) 0%, transparent 100%) !important;
}

/* =====================================================
   7. SMOOTH SCROLL BEHAVIOUR
   Use scroll-behavior: smooth on html but with reduced
   motion respect.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   8. PREVENT LAYOUT SHIFTS from lazy-loaded images
   Explicitly set image dimensions so they don't cause
   Cumulative Layout Shift (CLS).
   ===================================================== */
img {
    max-width: 100%;
    height: auto;
}

.product-img-photo img,
.story-flag {
    display: block;
}

/* =====================================================
   9. OPTIMISE ANIMATIONS – use transform/opacity ONLY
   Any animation that uses top/left/width/height causes
   layout recalculation. Replace with transform.
   ===================================================== */

/* Pulse animation on hero CTA button - was using box-shadow which is OK
   but let's add GPU hint */
.btn-pulse {
    will-change: box-shadow;
}

/* Animated text container — ensure no overflow causes reflow */
.animated-text-container {
    contain: layout;  /* Contain layout so inner animations don't affect page */
}

/* =====================================================
   10. FIX DARK MODE BODY TRANSITION
   Only add transition when actively toggling, not on scroll
   ===================================================== */
body.theme-transitioning {
    transition: background-color 0.35s ease, color 0.35s ease !important;
}

/* =====================================================
   11. Z-INDEX STACKING CONTEXT FIXES
   Ensure overlapping fixed elements don't cause repaint
   ===================================================== */
#header {
    isolation: isolate; /* Create stacking context */
}

.full-nav-dropdown {
    /* Ensure dropdown doesn't cause layout recalculation */
    position: absolute;
    contain: layout style;
}

/* =====================================================
   12. WHATSAPP WIDGET & SCROLL-TO-TOP — correct z-index
   #wa-widget-root is the actual container ID.
   .scroll-to-top is already z-index:9998 in premium-style.
   ===================================================== */
#wa-widget-root {
    z-index: 9999 !important;
    position: fixed !important;
    bottom: 24px;
    right: 24px;
}

/* Scroll-to-top: ensure it stays visible above all sections
   but below the WhatsApp widget */
.scroll-to-top {
    z-index: 9998 !important;
    position: fixed !important;
    bottom: 90px;
    right: 24px;
}

/* =====================================================
   13. MARKET INTELLIGENCE SECTION – ensure it renders
   ===================================================== */
.market-data-section,
.market-intelligence-section,
[id="market-intelligence"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =====================================================
   14. REMOVE RENDER-BLOCKING on feature flip cards
   These use preserve-3d which can be expensive on mobile
   ===================================================== */
@media (max-width: 768px) {
    .feature-flip-card-inner {
        transform-style: flat; /* Disable 3D on mobile for performance */
    }
    .feature-flip-card:hover .feature-flip-card-inner {
        transform: none; /* No flip on mobile – use tap style instead */
    }
    .feature-flip-card:active .feature-flip-card-inner {
        transform: rotateY(180deg);
    }
}