/**
 * MAAC Chandmari – Performance Optimizer CSS v3
 * ──────────────────────────────────────────────
 * Replaces perf-optimizations.css.
 * Works with perf-optimizer.js which adds
 * html.perf-low or html.perf-normal classes.
 */


/* ============================================
   LOW-END DEVICE OVERRIDES
   Applied when html.perf-low is present
   ============================================ */

/* Faster transitions — still visible, not jarring */
.perf-low *,
.perf-low *::before,
.perf-low *::after {
    animation-duration: 0.2s !important;
    transition-duration: 0.15s !important;
}

/* Kill expensive backdrop-filter */
.perf-low .navbar,
.perf-low .mobile-menu,
.perf-low .carousel-container,
.perf-low [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Strip box-shadows (GPU compositing cost) */
.perf-low * {
    box-shadow: none !important;
}

/* …except the navbar needs a shadow for clarity */
.perf-low .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Disable 3D tilt cards */
.perf-low [data-tilt],
.perf-low .tilt-card {
    transform: none !important;
}

/* Prevent unnecessary GPU layer promotion */
.perf-low * {
    will-change: auto !important;
}

/* Disable parallax */
.perf-low [data-speed] {
    transform: none !important;
}

/* Reduce particle visibility */
.perf-low #particles-js {
    opacity: 0.25;
    pointer-events: none;
}

/* Decorative blurs — remove */
.perf-low .background-blur,
.perf-low .decorative-overlay {
    filter: none !important;
}

/* Ensure GSAP reveal targets are always visible on low-end */
.perf-low [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Disable hover transforms on low-end touch devices */
.perf-low .course-card:hover,
.perf-low .gallery-item:hover,
.perf-low .post-card:hover,
.perf-low .nav-link:hover,
.perf-low .btn:hover {
    transform: none !important;
}


/* ============================================
   GENERAL GPU COMPOSITING HINTS
   Applied to ALL devices
   ============================================ */

.page-section,
.navbar,
[data-reveal] {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Layout / style containment for navbar */
.navbar {
    contain: layout style;
}

/*
 * NOTE: content-visibility:auto is NOT used here.
 * It caused CLS (scroll jumps) when the browser
 * re-estimated off-screen section heights on Hostinger.
 */


/* ============================================
   REDUCED MOTION  (user OS preference)
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    #particles-js {
        display: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ============================================
   MOBILE OPTIMIZATIONS  (≤ 768px)
   ============================================ */

@media (max-width: 768px) {

    /* Particles lighter on mobile */
    #particles-js {
        opacity: 0.45;
    }

    /* No hover transforms on touch */
    .nav-link:hover,
    .btn:hover {
        transform: none;
    }

    /* Minimal card lift */
    .course-card:hover,
    .gallery-item:hover,
    .post-card:hover {
        transform: translateY(-2px);
    }
}


/* ============================================
   SMOOTH-PREFERENCE FLAG
   Body.prefers-smooth is set by JS when
   device memory ≤ 4 GB or DPR ≤ 1.25
   ============================================ */

body.prefers-smooth .course-card:hover,
body.prefers-smooth .gallery-item:hover,
body.prefers-smooth .post-card:hover {
    transition-duration: 0.1s;
}


/* ============================================
   PRINT MEDIA  (clean printed pages)
   ============================================ */

@media print {

    #particles-js,
    .navbar,
    .mobile-menu,
    .mobile-menu-toggle,
    .floating-buttons,
    .footer-map iframe {
        display: none !important;
    }

    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    img {
        max-width: 100% !important;
    }
}