/* ================================================================
   MANIAC MOODY COLLECTIBLES — Motion & Texture Layer
   Extends "The Contact Sheet": film grain, ticker band, hero deal-in,
   line-mask reveals, foil sweep, loupe chase, grid stagger, ledger
   count-up. Transform + opacity only. Reveal pre-hides are gated on
   body.mm-fx (set by effects.js when reduced-motion is off and IO
   exists); CSS animations self-neutralize under prefers-reduced-motion.
   ================================================================ */

:root {
    /* Pop with overshoot — the site's spring feel (Emil Kowalski) */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Film grain: static print texture over everything ─────── */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05; mix-blend-mode: overlay;
}

/* ── Ticker band (home, ambient) ──────────────────────────── */
.mm-ticker { border-block: 1px solid var(--line); background: var(--mat); overflow: hidden; }
.mm-ticker-track { display: flex; width: max-content; animation: mm-ticker-move 48s linear infinite; }
.mm-ticker:hover .mm-ticker-track { animation-play-state: paused; }
.mm-ticker-group { display: flex; align-items: center; white-space: nowrap; }
.mm-ticker-item {
    font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--dim); padding: 9px 26px 9px 0; display: inline-flex; align-items: center; gap: 26px;
}
.mm-ticker-item b { color: var(--foil); font-weight: 400; }
.mm-ticker-star { color: var(--cyan); font-size: 8px; }
@keyframes mm-ticker-move { to { transform: translateX(-50%); } }

/* ── Line-mask reveal (Anton display lines) ───────────────── */
.strip-name .mm-line, .page-hero h1 .mm-line { display: block; overflow: hidden; }
.strip-name .mm-line > span, .page-hero h1 .mm-line > span {
    display: block; transform: translateY(112%);
    animation: mm-line-up 0.65s var(--ease-out) both;
}
.strip-name .mm-line:nth-child(2) > span { animation-delay: 90ms; }
@keyframes mm-line-up { to { transform: none; } }

/* Gold rule draw under section heroes */
.mm-rule {
    display: block; height: 2px; width: 90px; margin-top: 18px;
    background: linear-gradient(90deg, var(--foil), transparent);
    transform-origin: left center; animation: mm-rule-draw 0.7s var(--ease-out) 0.25s both;
}
@keyframes mm-rule-draw { from { transform: scaleX(0); } }

/* ── Hero deal-in: frames settle like prints on a table ───── */
.strip-dealt .sf-inner {
    transform: translateY(18px) rotate(calc(var(--settle-rot, 0deg) * 2.5));
    opacity: 0;
    transition: transform var(--dur-deal, 0.38s) var(--ease-out) var(--deal-d, 0ms),
                opacity var(--dur-deal, 0.38s) var(--ease-out) var(--deal-d, 0ms);
}
.strip-dealt.dealt-in .sf-inner { transform: rotate(var(--settle-rot, 0deg)); opacity: 1; }

/* ── Contact-sheet rows: develop in on scroll ─────────────── */
body.mm-fx .sheet-row.mm-pre .sheet-frame { opacity: 0; }
body.mm-fx .sheet-row.mm-pre .sheet-title, body.mm-fx .sheet-row.mm-pre .sheet-row-end { opacity: 0; }
.sheet-row.mm-in .sheet-frame { animation: mm-rise 0.45s var(--ease-out) backwards; animation-delay: var(--d, 0ms); }
.sheet-row.mm-in .sheet-title, .sheet-row.mm-in .sheet-row-end { animation: mm-slide 0.4s var(--ease-out) backwards; }
@keyframes mm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes mm-slide { from { opacity: 0; transform: translateX(-8px); } }

/* ── Section grids: staggered entrance, replays on re-render */
[data-mm-grid-wrap] .product-card, [data-mm-grid-wrap] .empty-state {
    animation: mm-rise 0.45s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 26ms);
}

/* ── Foil sweep on card hover (pointer-fine only) ─────────── */
@media (hover: hover) and (pointer: fine) {
    .pc-art::after, .sheet-frame::after, .sc-frame::after, .strip-frame::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 1;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14) 42%, rgba(229, 174, 44, 0.2) 54%, transparent 66%);
        transform: translateX(-115%) skewX(-14deg); pointer-events: none;
    }
    .product-card:hover .pc-art::after, .sheet-frame:hover::after,
    .sc-frame:hover::after, .strip-frame:hover::after {
        animation: mm-foil-sweep 0.7s var(--ease-in-out) both;
    }
}
@keyframes mm-foil-sweep { to { transform: translateX(235%) skewX(-14deg); } }

/* ── Loupe: chase the cursor instead of sitting fixed ────── */
.loupe { right: auto; top: 0; left: 0; }
.loupe, .loupe.on { transform: translate(var(--lx, -2000px), var(--ly, -2000px)); }
.loupe-inner { transition: transform 0.28s var(--ease-spring); transform: scale(0.94); }
.loupe.on .loupe-inner { transform: scale(1); }

/* ── Sticky header: hairline + shadow when stuck ──────────── */
.site-header { position: sticky; top: 0; }
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--line-foil); opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.site-header.mm-stuck::after { opacity: 1; }

/* ── Cart: badge pop, item stagger, removal ───────────────── */
[data-mm-cart-count] { display: inline-block; }
.cart-btn [data-mm-cart-count].mm-pop { animation: mm-badge-pop 0.5s var(--ease-spring); }
@keyframes mm-badge-pop {
    0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); }
}
.cart-drawer.open .cart-item { animation: mm-rise 0.3s var(--ease-out) backwards; }
.cart-drawer.open .cart-item:nth-child(n + 4) { animation-delay: 0.2s; }
.cart-item.mm-removing { animation: mm-item-out 0.18s ease-in both; }
@keyframes mm-item-out { to { opacity: 0; transform: translateX(16px); } }

/* ── Gold CTAs: foil glow on hover ────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .btn-gold, .btn-primary { transition: transform 0.16s var(--ease-out), background-color 0.16s var(--ease-out), color 0.16s var(--ease-out), border-color 0.16s var(--ease-out), box-shadow 0.25s var(--ease-out); }
    .btn-gold:hover, .btn-primary:hover { box-shadow: 0 0 0 1px rgba(229, 174, 44, 0.35), 0 4px 20px rgba(229, 174, 44, 0.22); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-ticker-track { animation: none; }
    body.mm-fx .sheet-row.mm-pre .sheet-frame,
    body.mm-fx .sheet-row.mm-pre .sheet-title,
    body.mm-fx .sheet-row.mm-pre .sheet-row-end { opacity: 1; }
}