/* Mobile performance pass: preserve the visual hierarchy while avoiding expensive blur, filter and hover work. */
@media (max-width: 760px), (pointer: coarse) {
    .site-header,
    body.storefront-page .site-header {
        background: var(--background) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.storefront-page .site-navigation {
        contain: layout paint;
        box-shadow: -10px 0 30px color-mix(in srgb, var(--background) 25%, transparent) !important;
    }

    body.storefront-page .site-navigation > a {
        transition: transform .2s ease, opacity .2s ease, background .16s ease, border-color .16s ease !important;
        transition-delay: 0ms !important;
    }

    body.storefront-page .sf-hero--configured .sf-hero-slide::before,
    .sf-storefront .sf-category-card--configured::before,
    .sf-storefront .sf-category-media-glow {
        display: none !important;
    }

    .sf-storefront .sf-category-card--configured {
        contain: layout paint;
        transform: none !important;
        transition: none !important;
        box-shadow: 0 5px 16px color-mix(in srgb, var(--background) 15%, transparent) !important;
    }

    .sf-storefront .sf-category-card--configured .sf-category-photo,
    .sf-storefront .sf-category-card--configured .sf-category-title,
    .sf-storefront .sf-category-card--configured .sf-category-action,
    .sf-storefront .sf-category-count-badge {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .sf-storefront .sf-category-count-badge,
    .sf-storefront .sf-category-card--configured > .sf-category-media > .sf-image-placeholder {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sf-storefront .sf-category-media::before,
    .sf-storefront .sf-category-action::before {
        display: none !important;
        content: none !important;
    }

    .sf-storefront .sf-product-slide {
        transition-duration: .35s !important;
    }

    .sf-storefront .sf-product-card {
        contain: layout paint;
        content-visibility: auto;
        contain-intrinsic-size: 320px 280px;
        transition: border-color .2s ease !important;
        box-shadow: none !important;
    }

    .sf-storefront .sf-product-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .sf-storefront .sf-stock-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sf-storefront .sf-quick-card {
        transition: border-color .2s ease, background-color .2s ease !important;
        box-shadow: none !important;
    }

    body.storefront-page.has-site-background,
    body.storefront-page[style*="--site-bg-image"] {
        background-attachment: scroll !important;
    }
}

@media (max-width: 760px), (pointer: coarse) {
    .sf-storefront .sf-purchase-marquee {
        touch-action: pan-y;
    }

    .sf-storefront .sf-purchase-track {
        animation-duration: 42s;
    }

    .sf-storefront .sf-purchase-marquee.is-user-paused .sf-purchase-track {
        animation-play-state: paused;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .site-navigation {
        will-change: transform !important;
    }

    .site-navigation > a,
    .navigation-toggle {
        will-change: auto !important;
    }
}

/* Mobile smooth motion: restore lightweight touch feedback without bringing
   back expensive blur, filter, or large hover layers. */
@media (max-width: 760px) {
    body.storefront-page .site-navigation {
        transition-timing-function: cubic-bezier(.22,.75,.25,1) !important;
        will-change: transform !important;
    }

    body.storefront-page .site-navigation > a {
        transform: translate3d(12px, 0, 0) !important;
        opacity: 0 !important;
        transition: transform .28s cubic-bezier(.22,.75,.25,1), opacity .22s ease, background-color .18s ease, border-color .18s ease !important;
        transition-delay: 0ms !important;
    }

    body.storefront-page .site-navigation.is-open > a,
    body.storefront-page.navigation-open .site-navigation > a {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    body.storefront-page .site-navigation.is-open > a:nth-child(2),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(2) { transition-delay: .03s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(3),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(3) { transition-delay: .06s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(4),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(4) { transition-delay: .09s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(5),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(5) { transition-delay: .12s !important; }
    body.storefront-page .site-navigation.is-open > a:nth-child(6),
    body.storefront-page.navigation-open .site-navigation > a:nth-child(6) { transition-delay: .15s !important; }

    .navigation-toggle {
        transform: translateZ(0);
        transition: transform .22s cubic-bezier(.22,.75,.25,1), background-color .18s ease, border-color .18s ease !important;
    }
    .navigation-toggle:active { transform: scale(.92) !important; }

    .sf-storefront .sf-category-card--configured {
        transform: translateZ(0) !important;
        transition: transform .28s cubic-bezier(.22,.75,.25,1), border-color .22s ease, box-shadow .22s ease !important;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--background) 18%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured:active {
        transform: translate3d(0, -2px, 0) scale(.992) !important;
        border-color: color-mix(in srgb, var(--main) 58%, var(--border)) !important;
        box-shadow: 0 12px 27px color-mix(in srgb, var(--background) 24%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured .sf-category-photo {
        transform: translateZ(0);
        transition: transform .36s cubic-bezier(.22,.75,.25,1) !important;
    }
    .sf-storefront .sf-category-card--configured:active .sf-category-photo {
        transform: scale(1.018) !important;
    }
    .sf-storefront .sf-category-card--configured .sf-category-title,
    .sf-storefront .sf-category-card--configured .sf-category-action,
    .sf-storefront .sf-category-count-badge {
        transform: translateZ(0) !important;
        transition: transform .24s cubic-bezier(.22,.75,.25,1), opacity .2s ease, color .18s ease !important;
    }

    .sf-storefront .sf-product-card {
        transition: transform .24s cubic-bezier(.22,.75,.25,1), border-color .2s ease, box-shadow .2s ease !important;
        box-shadow: 0 7px 18px color-mix(in srgb, var(--background) 16%, transparent) !important;
    }
    .sf-storefront .sf-product-card:active,
    .sf-storefront .sf-product-card:focus-within {
        transform: translate3d(0, -2px, 0) scale(.995) !important;
        border-color: color-mix(in srgb, var(--main) 55%, var(--border)) !important;
        box-shadow: 0 11px 24px color-mix(in srgb, var(--background) 22%, transparent) !important;
    }

    .sf-storefront .sf-quick-card,
    .sf-storefront .sf-quick-card--configured {
        transform: translateZ(0);
        transition: transform .24s cubic-bezier(.22,.75,.25,1), border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
        box-shadow: 0 7px 18px color-mix(in srgb, var(--background) 14%, transparent) !important;
    }
    .sf-storefront .sf-quick-card:active,
    .sf-storefront .sf-quick-card--configured:active {
        transform: scale(.986) !important;
        border-color: color-mix(in srgb, var(--main) 55%, var(--border)) !important;
    }

    .sf-storefront .sf-button,
    .sf-storefront .sf-product-button,
    .sf-storefront .sf-category-action {
        transition: transform .2s cubic-bezier(.22,.75,.25,1), background-color .18s ease, border-color .18s ease, color .18s ease !important;
        touch-action: manipulation;
    }
    .sf-storefront .sf-button:active,
    .sf-storefront .sf-product-button:active,
    .sf-storefront .sf-category-action:active {
        transform: scale(.97) !important;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .motion-ready-mobile [data-reveal].is-visible {
        animation-duration: .42s;
    }
}

/* Second mobile pass: remove the remaining paint-heavy layers from the
   StatBox/review area and make its cards feel like display-only surfaces. */
@media (max-width: 760px) {
    .site-statbox-wrap {
        background: color-mix(in srgb, var(--surface) 9%, transparent) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .site-stat-card,
    .site-stat-card * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .site-stat-card {
        cursor: default !important;
        touch-action: manipulation;
        background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--surface)) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--background) 17%, transparent) !important;
        transition: transform .18s cubic-bezier(.22,.75,.25,1), border-color .18s ease, box-shadow .18s ease !important;
    }
    .site-stat-card::before,
    .site-stat-card::after {
        display: none !important;
        content: none !important;
    }
    .site-stat-card:hover {
        transform: none !important;
        filter: none !important;
        border-color: color-mix(in srgb, var(--font) 9%, transparent) !important;
        box-shadow: 0 6px 16px color-mix(in srgb, var(--background) 17%, transparent) !important;
    }
    .site-stat-card:active {
        transform: scale(.992) !important;
        border-color: color-mix(in srgb, var(--font) 9%, transparent) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--background) 22%, transparent) !important;
    }
    .site-stat-card:hover .site-stat-icon,
    .site-stat-card:focus-within .site-stat-icon {
        transform: none !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--main) 11%, transparent) !important;
    }
    .site-stat-icon {
        box-shadow: 0 8px 18px color-mix(in srgb, var(--main) 11%, transparent) !important;
        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .site-review-marquee {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        contain: paint;
    }
    .site-review-track {
        animation-duration: 52s !important;
        will-change: transform;
    }
    .site-review-card {
        background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 5px 14px color-mix(in srgb, var(--background) 14%, transparent) !important;
        transition: none !important;
    }

    .sf-storefront .sf-category-card--configured {
        box-shadow: 0 6px 15px color-mix(in srgb, var(--background) 16%, transparent) !important;
    }
    .sf-storefront .sf-category-card--configured:active {
        box-shadow: 0 9px 19px color-mix(in srgb, var(--background) 20%, transparent) !important;
    }
    .sf-storefront .sf-product-card {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 14%, transparent) !important;
    }
    .sf-storefront .sf-product-card:active,
    .sf-storefront .sf-product-card:focus-within {
        box-shadow: 0 7px 16px color-mix(in srgb, var(--background) 19%, transparent) !important;
    }
    .sf-storefront .sf-quick-card,
    .sf-storefront .sf-quick-card--configured {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--background) 12%, transparent) !important;
    }

    /* Touch browsers may keep :hover alive after a tap. Never start the
       decorative shine loop there; it is visual-only and costs a repaint. */
    .sf-storefront .sf-product-card:hover::after,
    .sf-storefront .sf-product-button:hover::before {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Mobile boost v2 (2026-09-28)
   Goal: keep every animation, but make each one cheap for phones.
   Rules of thumb used here:
   - animate only transform/opacity (compositor-only), never filter/blur/shadow
   - promote a layer only while it is actually moving
   - pause endless loops when they are scrolled out of view
   - skip layout/paint work for sections far below the fold
   ========================================================================== */

/* Loops that scrolled out of view stop ticking (class toggled by app.js). */
.is-offscreen,
.is-offscreen *,
.is-offscreen::before,
.is-offscreen::after { animation-play-state: paused !important; }

@media (max-width: 960px), (pointer: coarse) {
    /* Faster taps, no double-tap-zoom delay. */
    a, button, summary, label, input, select, textarea { touch-action: manipulation; }

    /* Below-the-fold sections are laid out and painted only when near the screen. */
    .sf-storefront .sf-section + .sf-section,
    .sf-storefront .sf-section--activity ~ .sf-section,
    .site-statbox-wrap,
    .site-footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 560px;
    }

    /* Menu overlay: solid tint instead of a full-screen blur. */
    body.navigation-open::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Hero carousel: only the two slides that are moving get their own layer. */
    .sf-storefront .sf-hero--configured .sf-hero-slide { will-change: auto; }
    .sf-storefront .sf-hero--configured .sf-hero-slide.is-active,
    .sf-storefront .sf-hero--configured .sf-hero-slide.is-leaving { will-change: opacity, transform; }
    .sf-storefront .sf-hero--configured .sf-hero-slide > img { backface-visibility: hidden; }

    /* Marquees: one composited layer, transform-only movement. */
    .sf-storefront .sf-purchase-track,
    .site-review-track { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
    .sf-storefront .sf-purchase-marquee { contain: paint; }

    /* Falling particles: each flake is its own light layer, the layer itself is fixed. */
    .christmas-particle-layer { transform: translateZ(0); }
    .christmas-particle { will-change: transform; backface-visibility: hidden; }

    /* Footer logo bounce keeps bouncing, but without leaving a layer behind. */
    .footer-logo-bounce { backface-visibility: hidden; }

    /* Loading screen: same look, cheaper glow. */
    .site-loading-glow { filter: none; }
    .site-loading-progress i { box-shadow: 0 0 8px color-mix(in srgb, var(--main) 60%, transparent); will-change: transform; }

    /* ---- Landing / welcome page: identical motion, no per-frame filters ---- */
    .landing-gateway__bg { animation-name: landing-bg-breathe-lite; will-change: transform; }
    .landing-gateway__art img,
    .landing-gateway__art span {
        animation-name: landing-logo-float-lite;
        will-change: transform;
        filter: drop-shadow(0 22px 34px rgba(0,0,0,.24));
    }
    .landing-gateway__art::before {
        box-shadow: inset 0 0 40px rgba(255,255,255,.05), 0 0 56px color-mix(in srgb, var(--main) 20%, transparent);
        will-change: transform;
    }
    .landing-gateway__art::after {
        filter: none;
        mix-blend-mode: normal;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    }
    .landing-gateway__orb--one,
    .landing-gateway__orb--two { will-change: transform; }
    .landing-gateway__spark { box-shadow: 0 0 14px rgba(255,255,255,.45); }
    .landing-gateway__button { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

    /* Admin on phones: sticky bars use a solid surface instead of blur. */
    .admin-page .admin-topbar,
    .admin-topbar,
    .admin-context-tabs,
    .admin-page .admin-context-tabs,
    .admin-page .modal-footer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@keyframes landing-bg-breathe-lite { from { transform: scale(1.03); } to { transform: scale(1.07); } }
@keyframes landing-logo-float-lite {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
    50%      { transform: translate3d(0, -14px, 0) rotate(-4deg) scale(1.02); }
}

/* Older / low-memory phones (class set by app.js): trim only the purely decorative loops. */
.perf-lite .landing-gateway__spark,
.perf-lite .landing-gateway__orb--two,
.perf-lite .landing-gateway__art::after { display: none !important; }
.perf-lite .christmas-particle-layer { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
    .landing-gateway__bg,
    .landing-gateway__art img,
    .landing-gateway__art span,
    .landing-gateway__art::before { animation: none !important; }
}