/* ============================================================
   effects.css – látványeffektek a vásárlói oldalon (5. fázis, 2026.10.22)

   Rocket Code ihletésű mozgások: rugós belépés, fénycsík, pecsét, ping,
   kosárba repülés, szikraeső, kattintási hullám, mezőrázás. Csak transform,
   opacity (GPU-barát); a végtelenített animációk csak a képernyőn látszó
   elemeken futnak (.fx-vis – az effects.js kapcsolja). Hover-effekt csak
   egeres eszközön. Mozgáscsökkentésnél minden áll.

   NEM töltődik be a pénztárban és a fizetés-visszaigazolón; az admin
   Beállításokban egy kapcsolóval az egész kikapcsolható (header/footer).
   ============================================================ */
:root {
    --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fx-out:    cubic-bezier(.2, .8, .2, 1);
}

/* ── 1. Termékkártyák: lépcsőzetes belépés ─────────────────── */
.fx-ready .fx-card:not(.fx-in) { opacity: 0; transform: translateY(18px) scale(.97); }
.fx-ready .fx-card.fx-in:not(.fx-done) { animation: fxCardIn .65s var(--fx-spring) both; animation-delay: calc(var(--fx-i, 0) * 55ms); }
@keyframes fxCardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Kártya-hover: végigfutó fénycsík + finom kép-ráközelítés (csak egérrel) */
@media (hover: hover) and (pointer: fine) {
    .prod-card::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
        transform: translateX(-110%);
    }
    .prod-card:hover::after { animation: fxBeam .9s var(--fx-out); }
    .prod-card .prod-img img { transition: transform .6s var(--fx-out); }
    .prod-card:hover .prod-img img { transform: scale(1.07); }
    .prod-card:hover .pbadges .pbadge { animation: fxWiggle .5s var(--fx-spring); }
}
@keyframes fxBeam { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes fxWiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-6deg) scale(1.08); } 65% { transform: rotate(4deg) scale(1.04); } }

/* ── 2. Badge-ek ────────────────────────────────────────────
   Belépéskor „pecsét” / „pop” / „ejtés”, utána időnként fénycsík-söprés.
   A söprés pszeudo-elem (transform), így nem fest újra. Az .fx-in a
   konténeren (kártya, hero, árblokk) marad; a végtelenített mozgás csak
   akkor fut, ha a konténer látszik (.fx-vis) – különben szünetel. */
.pbadge, .hero-pcard-badge, .price-pct, .termek-price-badge, .perk { position: relative; overflow: hidden; }
.pbadge::after, .hero-pcard-badge::after, .price-pct::after, .termek-price-badge::after, .perk::after, .promo-tpl__badge::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
    transform: translateX(-180%) skewX(-12deg);
}
.promo-tpl__badge { overflow: hidden; }
.fx-in:not(.fx-vis) *, .fx-in:not(.fx-vis) *::before, .fx-in:not(.fx-vis) *::after { animation-play-state: paused !important; }

/* Akció (−X%): pecsét, majd lüktetés + fénycsík */
.fx-in .badge--sale, .fx-in .hb-sale, .fx-in .price-pct, .fx-in .termek-price-badge {
    animation: fxStamp .6s var(--fx-spring) both, saleBadgePulse 2.2s ease-in-out .7s infinite;
}
.fx-in .badge--sale::after, .fx-in .hb-sale::after, .fx-in .price-pct::after, .fx-in .termek-price-badge::after {
    animation: fxSweep 4.2s ease-in-out infinite; animation-delay: var(--fx-d, 0s);
}
@keyframes fxStamp { 0% { opacity: 0; transform: scale(2.1) rotate(-14deg); } 60% { opacity: 1; transform: scale(.92) rotate(3deg); } 100% { transform: none; } }

/* Kiemelt: pop, arany fénycsík, a sarkában felvillanó ✦ */
.fx-in .badge--new, .fx-in .hb-new { animation: fxPop .55s var(--fx-spring) .08s both; }
.fx-in .badge--new::after, .fx-in .hb-new::after { animation: fxSweep 5.6s ease-in-out infinite; animation-delay: calc(var(--fx-d, 0s) + 1.2s); }
.fx-in .badge--new::before {
    content: '✦';
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 8px;
    line-height: 1;
    color: #fff6d8;
    animation: fxTwinkle 3.2s ease-in-out infinite;
    animation-delay: var(--fx-d, 0s);
}
@keyframes fxPop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes fxTwinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 80% { opacity: 1; transform: scale(1.3) rotate(30deg); } 90% { opacity: .9; transform: scale(.9) rotate(60deg); } }

/* Új: „leejtve” érkezik, kék fénycsík */
.fx-in .badge--uj { animation: fxDrop .7s var(--fx-spring) .15s both; }
.fx-in .badge--uj::after { animation: fxSweep 6.4s ease-in-out infinite; animation-delay: calc(var(--fx-d, 0s) + 2.4s); }
@keyframes fxDrop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 55% { opacity: 1; transform: translateY(2px) scale(1.08); } 100% { transform: none; } }

/* Pontos találat: pop + kétszeres zöld radar-gyűrű */
.fx-in .badge--sku { animation: fxPop .5s var(--fx-spring) both, fxRadar 1.2s ease-out .3s 2; }
@keyframes fxRadar { 0% { box-shadow: 0 0 0 0 rgba(26,122,60,.55); } 100% { box-shadow: 0 0 0 14px rgba(26,122,60,0); } }

@keyframes fxSweep { 0%, 62% { transform: translateX(-180%) skewX(-12deg); } 82%, 100% { transform: translateX(260%) skewX(-12deg); } }

/* Ingyenes szállítás: a teherautó „behajt”, utána időnként döccen; fénycsík */
.fx-in .perk--ship .perk-truck { animation: fxDriveIn .9s var(--fx-out) .25s both, fxBump 3.2s ease-in-out 1.4s infinite; }
.fx-in .perk--ship::after { animation: fxSweep 7s ease-in-out infinite; animation-delay: calc(var(--fx-d, 0s) + .6s); }
@keyframes fxDriveIn { 0% { opacity: 0; transform: translateX(-26px); } 70% { opacity: 1; transform: translateX(2px); } 100% { transform: none; } }
@keyframes fxBump { 0%, 82%, 100% { transform: none; } 88% { transform: translateY(-2px) rotate(-4deg); } 94% { transform: translateY(0) rotate(2deg); } }

/* Akció-visszaszámláló: a keret „ketyeg” */
.fx-in .perk--timer { animation: fxTick 1s steps(2) infinite; }
@keyframes fxTick { 50% { border-color: rgba(192,57,43,.6); } }

/* Elérhető: élő pont táguló gyűrűvel */
.fx-in .stock--available::before { animation: fxPing 2.4s ease-out infinite; animation-delay: var(--fx-d, 0s); }
@keyframes fxPing { 0% { box-shadow: 0 0 0 0 rgba(26,122,60,.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(26,122,60,0); } }

/* Promó sarok-badge: szalag-csillanás */
.fx-in .promo-tpl__badge::after { animation: fxSweep 5s ease-in-out infinite; }

/* Pontelőnézet: az érme megpördül belépéskor, utána időnként csillan */
.fx-in .tp-coin { animation: fxCoin 1.1s var(--fx-out) .2s both, fxCoinShine 5s ease-in-out 2s infinite; }
.termek-points.fx-pts-tick .tp-num { display: inline-block; animation: fxPop .45s var(--fx-spring); }
@keyframes fxCoin { 0% { transform: rotateY(0) scale(.4); opacity: 0; } 60% { transform: rotateY(540deg) scale(1.15); opacity: 1; } 100% { transform: rotateY(720deg) scale(1); } }
@keyframes fxCoinShine { 0%, 85%, 100% { filter: none; transform: none; } 90% { filter: brightness(1.35); transform: scale(1.12) rotate(-8deg); } }

/* Kosár: „Vendégként ennyit hagysz itt” – a szmájli szomorkodik, könnye gördül */
.fx-in .ln-sad { animation: fxSadIn .7s var(--fx-spring) both, fxSadShake 5s ease-in-out 1.5s infinite; transform-origin: 50% 80%; }
.fx-in .ln-sad__tear { animation: fxTear 2.6s ease-in 1s infinite; transform-box: fill-box; transform-origin: 50% 0; }
.fx-in .ln-sad__mouth { animation: fxMouth 2.6s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.fx-in .ln-coupon .ln-lock { animation: fxLock 4s ease-in-out 2s infinite; transform-origin: 50% 20%; }
.fx-in .ln-coin { animation: fxCoin 1.1s var(--fx-out) .2s both, fxCoinShine 5s ease-in-out 2s infinite; }
.fx-in .loyalty-nudge--member .ln-ticket, .fx-in.loyalty-nudge--member .ln-ticket { display: inline-block; animation: fxWiggle 1s var(--fx-spring) .6s both; }
@keyframes fxSadIn { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes fxSadShake { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-8deg); } 94% { transform: rotate(6deg); } 97% { transform: rotate(-3deg); } }
@keyframes fxTear { 0% { opacity: 0; transform: translateY(-3px) scale(.6); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(9px) scale(1.05); } 100% { opacity: 0; transform: translateY(14px) scale(.8); } }
@keyframes fxMouth { 0%, 100% { transform: none; } 50% { transform: scaleY(1.25) translateY(1px); } }
@keyframes fxLock { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-14deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-5deg); } }

/* Küszöb-sáv: a most elért mérföldkő ugrik egyet */
.ms-marker.is-new .ms-marker__icon { animation: fxMilestone .8s var(--fx-spring); }
@keyframes fxMilestone { 0% { transform: scale(1); } 35% { transform: scale(1.8) rotate(-12deg); } 70% { transform: scale(.9) rotate(6deg); } 100% { transform: none; } }

/* Kosár-pörgető: a kar pörgés közben forog */
.cheap-picks.is-spinning .cp-lever { animation: fxSpinLever .6s linear infinite; }
@keyframes fxSpinLever { to { transform: rotate(-360deg); } }

/* Kosárjelvény: számváltáskor pörgés + ugrás */
.nav-cart-badge.fx-roll { animation: fxRoll .55s var(--fx-spring); }
@keyframes fxRoll { 0% { transform: translateY(-60%) scale(.6); opacity: 0; } 60% { transform: translateY(8%) scale(1.25); opacity: 1; } 100% { transform: none; } }
.nav-icon--cart.fx-bump { animation: fxBag .6s var(--fx-spring); }
@keyframes fxBag { 0% { transform: none; } 30% { transform: scale(1.25) rotate(-10deg); } 60% { transform: scale(.95) rotate(6deg); } 100% { transform: none; } }

/* ── 3. Kosárba repülés, szikraeső, szív ───────────────────── */
.fx-fly {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    will-change: transform, opacity;
}
.fx-fly--dot { background: var(--gold); border-radius: 50%; }
.fx-burst { position: fixed; z-index: 100001; width: 0; height: 0; pointer-events: none; }
.fx-burst i {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--gold);
    animation: fxSpark .8s var(--fx-out) forwards;
}
.fx-burst--red i { background: var(--red); }
.fx-burst i:nth-child(3n) { background: #fff; width: 5px; height: 5px; }
.fx-burst i:nth-child(4n) { border-radius: 1px; }
@keyframes fxSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.js-wishlist.fx-heart { animation: fxHeart .6s var(--fx-spring); }
@keyframes fxHeart { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 55% { transform: scale(.88); } 100% { transform: scale(1); } }

/* ── 4. Kattintási hullám, mezőrázás ───────────────────────── */
.fx-rip-host { overflow: hidden; }
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .28;
    transform: scale(0);
    animation: fxRipple .6s var(--fx-out) forwards;
}
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }
.fx-shake { animation: fxShake .45s var(--fx-out); }
@keyframes fxShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* ── 5. „Visszavárt a kosarad” értesítő ────────────────────── */
.fx-cartnote {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 12px 12px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid rgba(var(--gold-rgb), .45);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
    animation: fxNoteIn .6s var(--fx-spring) both;
    overflow: hidden;
}
.fx-cartnote.is-out { animation: fxNoteOut .35s var(--fx-out) forwards; }
.fx-cartnote-ico { font-size: 22px; animation: fxBag 1s var(--fx-spring) .4s; }
.fx-cartnote b { display: block; font-family: var(--fd); font-size: 15px; letter-spacing: .3px; }
.fx-cartnote span { font-size: 12.5px; color: var(--text-2); }
.fx-cartnote a { margin-left: 4px; white-space: nowrap; font-weight: 700; color: var(--gold); text-decoration: none; }
.fx-cartnote a:hover { text-decoration: underline; }
.fx-cartnote-x { border: 0; background: none; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.fx-cartnote::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; animation: fxNoteBar 9s linear forwards; }
@keyframes fxNoteIn { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fxNoteOut { to { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes fxNoteBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Mozgáscsökkentés ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fx-ready .fx-card:not(.fx-in) { opacity: 1; transform: none; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}