/**
 * Performance Optimizations v2
 * Shared across all pages — include BEFORE page-specific CSS.
 *
 * Key principles:
 *  1. Avoid `will-change` on idle elements (wastes GPU memory).
 *  2. Use `contain` to prevent layout thrashing.
 *  3. Promote only elements that are *actively* animating to GPU layers.
 *  4. Never set perspective / preserve-3d on html or body.
 *  5. Use transform: translate3d(0,0,0) sparingly — only on hover targets.
 */

/* ─── Global box-sizing (defensive) ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ─── Background video — GPU composite, no transitions ─── */
video.bg-video {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    contain: strict;
    /* Remove transition — the video brightness never changes at runtime */
    transition: none !important;
}

/* ─── Navigation icons — GPU-accelerated hover only ─── */
.menu a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ─── Cards — contain layout to prevent full-page reflows ─── */
.cards {
    contain: layout style;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ─── Card images — promote on hover only ─── */
.cards:hover img,
.cards:hover .photo img,
.cards:hover .image img {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ─── Overlays — promote on hover only ─── */
.cards:hover .overlay {
    will-change: transform;
}

/* ─── ATM Card ─── */
.atm-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

/* ─── Event cards ─── */
.event-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

/* ─── SIG cards ─── */
.sig-card,
.sig-cards {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ─── Goal cards ─── */
.goal-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

/* ─── Reduce motion for users who prefer it ─── */
@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;
    }

    video.bg-video {
        filter: brightness(0.3) !important;
    }
}