/* ═══════════════════════════════════════════════════════════════════
   perf.css — global scroll + animation performance patch.
   Loaded site-wide (see resources/views/new/partials/head.blade.php).
   Everything here is defensive/generic — specific components can still
   override. Organised top-to-bottom by impact.
═══════════════════════════════════════════════════════════════════ */


/* ── 1. Honour user reduced-motion preference site-wide ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ── 2. GPU-accelerate all scroll containers ────────────────────── */
html, body {
    -webkit-overflow-scrolling: touch;
    /* Native Chrome PTR is too sensitive (a short downward flick reloads).
       Custom PTR in app.blade.php requires a long, held pull instead. */
    overscroll-behavior-y: none;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── 3. `content-visibility` is OPT-IN only ──────────────────────
   Add `.perf-lazy-row` to list rows where you explicitly want the
   browser to skip rendering off-screen items. We don't auto-apply
   this by class name because a wrong `contain-intrinsic-size` estimate
   (relative to the actual row height) makes scroll jump / anchors
   miss — and real rows on this site vary from 48px to 220px tall.
   Opt-in keeps behavior predictable. ─────────────────────────────── */
.perf-lazy-row {
    content-visibility: auto;
    contain-intrinsic-size: 0 72px;
}


/* ── 4. Promote animated elements to their own GPU layer ────────── */
.game-card, .sport-card, .match-card, .event-card, .casino-tile,
.bet-tile, .odds-btn, .slide, .carousel-slide, .swiper-slide,
.scroll-tab, .chip, .pill {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}


/* ── 5. `will-change` lives on explicitly-animated elements only ─ */
[data-animate="true"],
.is-animating,
.modal.show,
.drawer.open,
.toast.show {
    will-change: transform, opacity;
}


/* ── 6. Restrict layout recalc inside perf-opt-in rows only.
        Blanket `contain` can break sticky children and bfcache.  ─── */
.perf-contain {
    contain: layout style paint;
}


/* ── 7. Smooth scroll only when the user hasn't opted out (handled
        above by prefers-reduced-motion). Safe default. ───────────── */
html { scroll-behavior: smooth; }


/* ── 8. Images: async decode only (no content-visibility — it causes
        layout shifts for small icons / logos / avatars) ──────────── */
img {
    image-rendering: auto;
}


/* ── 9. Kill expensive effects during scroll ────────────────────── */
/* `background-attachment: fixed` forces a full-page repaint every
   scroll frame — wipes out the main-thread on mobile. */
* { background-attachment: scroll !important; }

/* `backdrop-filter` is ~4× the paint cost of `filter`. Drop it on
   navbars/headers/drawers which are most likely to be visible while
   scrolling. A semi-opaque background color is visually equivalent. */
.navbar, .nav-wrap, .header, .site-header,
.bottom-nav, .drawer, .sidebar, .top-bar,
.sticky-nav, .floating-nav, [class*="blur"]:not(.preserve-blur) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ── 10. Horizontal carousels: momentum + snap ──────────────────── */
.scroll-x, .carousel-row, .sport-scroll-row,
.casino-row, .games-row, .chip-row {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;              /* Firefox */
}
.scroll-x::-webkit-scrollbar,
.carousel-row::-webkit-scrollbar,
.sport-scroll-row::-webkit-scrollbar,
.casino-row::-webkit-scrollbar,
.games-row::-webkit-scrollbar,
.chip-row::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
.scroll-x > *, .carousel-row > *, .sport-scroll-row > *,
.casino-row > *, .games-row > *, .chip-row > * {
    scroll-snap-align: start;
}


/* ── 11. Disable hover transitions on touch devices ─────────────── */
/* Hover :hover fires on first tap on touch devices, triggering a
   transition on EVERY card → jank. Suppress on coarse-pointer. */
@media (hover: none) {
    * {
        transition: none !important;
    }
    /* Allow the explicit transitions we actually want to keep */
    .modal, .drawer, .toast, .lf-input, .lf-btn,
    [data-keep-transition] {
        transition: revert !important;
    }
}


/* ── 12. Safer hover transitions on desktop ─────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .game-card, .sport-card, .match-card, .casino-tile {
        transition: transform .18s ease, box-shadow .18s ease;
    }
    /* Prefer transform over margin/padding for hover pop. */
    .game-card:hover, .sport-card:hover,
    .match-card:hover, .casino-tile:hover {
        transform: translateY(-2px) translateZ(0);
    }
}


/* ── 13. Lightweight skeleton placeholders (avoids layout thrash) ─ */
.skeleton {
    background: linear-gradient(90deg, #1a2c38 0%, #223b4a 50%, #1a2c38 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.2s linear infinite;
    will-change: background-position;
}
@keyframes skeletonShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}