/* ============================================================
   page-transitions.css
   Mobile performance: hardware acceleration, scroll smoothness,
   tap responsiveness, and layout stability
   ============================================================ */

/* ── Remove tap delay globally ──────────────────────────── */
* {
    touch-action: manipulation;
}

/* ── Smooth momentum scrolling on iOS ───────────────────── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* ── GPU-accelerate key UI elements ─────────────────────── */
/* This tells the browser to put these on their own layer,
   preventing repaints from affecting the rest of the page  */
nav,
.navbar,
.nav-container,
.mobile-menu,
.cart-sidebar,
.cart-icon,
.floating-cart,
.hero-section,
.product-card,
.flash-card,
.profile-nav,
.modal,
.toast,
.notification {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── Prevent flicker on animated elements ────────────────── */
.animated,
[class*="animate"],
[class*="transition"],
[class*="slide"],
[class*="fade"] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ── Smooth image rendering ──────────────────────────────── */
img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

/* ── Faster tap highlight removal ────────────────────────── */
a,
button,
[role="button"],
input,
select {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ── Prevent layout shifts during page transitions ──────── */
html, body {
    overflow-x: hidden;
}

/* ── Content below fold: defer rendering cost ───────────── */
@media (max-width: 768px) {
    /* On mobile, hint to browser which sections are offscreen */
    section,
    .section-container,
    footer {
        content-visibility: auto;
        contain-intrinsic-size: 0 400px;
    }

    /* Keep hero/navbar always visible */
    .hero-section,
    nav,
    .navbar,
    header {
        content-visibility: visible;
    }
}