/* ═══════════════════════════════════════════════════════════════════════
   🎮 GAME CLUB POS — ANIMATIONS.CSS v3
   ═══════════════════════════════════════════════════════════════════════

   KEY ANIMATIONS:
   ─────────────────────────────────────────────────────────────────
   1. Page entrance (header, shift bar, cart slide-in)
   2. DROP-INTO-CART (product flies UP then DROPS DOWN into bottom cart)
   3. Cart impact bump (when item lands)
   4. Cart roll-out / roll-in (payment flow)
   5. Toast in/out
   6. Modal in/out
   7. Confetti
   8. Floating numbers
   9. Status indicators
   ─────────────────────────────────────────────────────────────────

   ═══════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   1. PAGE ENTRANCE                                               ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.header     { animation: slideDown 0.5s var(--spring); }
.shift-bar  { animation: slideDown 0.5s 0.06s var(--spring) backwards; }
.category-tabs { animation: slideDown 0.5s 0.10s var(--spring) backwards; }
.products-area { animation: fadeIn 0.4s 0.14s ease-out backwards; }
.cart-bottom   { animation: slideUp 0.55s 0.10s var(--spring) backwards; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   2. ★★★ DROP INTO CART — Product falls into bottom cart ★★★    ║
   ║                                                                   ║
   ║   When user clicks product:                                       ║
   ║   1. Product clone appears at original position                   ║
   ║   2. Flies UP first (arc up)                                      ║
   ║   3. Then DROPS DOWN into cart (gravity)                          ║
   ║   4. Cart bumps on impact                                         ║
   ║                                                                   ║
   ║   Note: actual path is set by JS using Web Animations API        ║
   ║   These keyframes are fallbacks / supporting styles               ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* The flying product clone */
.flying-product {
    position: fixed;
    pointer-events: none;
    z-index: 99990;
    filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 24px rgba(0, 122, 255, 0.25));
    will-change: transform, opacity;
}

.flying-product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Trail / glow behind flying product */
.flying-product::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(
        circle,
        rgba(0, 122, 255, 0.2) 0%,
        rgba(0, 122, 255, 0.08) 40%,
        transparent 70%);
    filter: blur(6px);
    z-index: -1;
    opacity: 0;
    animation: trailGlow 0.6s ease-out;
}

@keyframes trailGlow {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   3. CART IMPACT BUMP — when product lands                       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes cartBump {
    0%   { transform: translateY(0) scaleY(1); }
    25%  { transform: translateY(6px) scaleY(0.96); }
    55%  { transform: translateY(-3px) scaleY(1.02); }
    80%  { transform: translateY(2px) scaleY(0.99); }
    100% { transform: translateY(0) scaleY(1); }
}

.cart-bottom.item-landed {
    animation: cartBump 0.45s var(--spring);
}

/* Cart icon shake */
@keyframes cartIconShake {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-8deg); }
    40%      { transform: rotate(7deg); }
    60%      { transform: rotate(-4deg); }
    80%      { transform: rotate(2deg); }
}

.cart-icon-wrap.shake {
    animation: cartIconShake 0.5s var(--spring);
}

/* Badge pop */
@keyframes badgePop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    70%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.cart-count-badge.pop {
    animation: badgePop 0.4s var(--spring);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   4. ★ CART ROLL-OUT / ROLL-IN (on payment) ★                    ║
   ║                                                                   ║
   ║   After payment success:                                          ║
   ║   - Cart slides off to the right (cart leaves)                    ║
   ║   - Fresh empty cart slides in from left                          ║
   ║                                                                   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes cartRollOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    60% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes cartRollIn {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    40% {
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.cart-body.rolling-out {
    animation: cartRollOut 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.cart-body.rolling-in {
    animation: cartRollIn 0.7s var(--spring);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   5. CART ITEM ENTRANCE                                          ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes cartItemDrop {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.7);
    }
    60% {
        opacity: 1;
        transform: translateY(4px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cart-item {
    animation: cartItemDrop 0.4s var(--spring);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   6. TOTAL VALUE BUMP                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes totalBump {
    0%   { transform: scale(1); color: var(--text-primary); }
    30%  { transform: scale(1.18); color: var(--ios-green); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); color: var(--text-primary); }
}

.cart-total-value.bumping {
    animation: totalBump 0.5s var(--spring);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   7. TOAST IN/OUT                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

.toast            { animation: toastIn 0.35s var(--spring); }
.toast.exiting    { animation: toastOut 0.25s ease-in forwards; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   8. MODAL IN/OUT                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

.modal-overlay        { animation: overlayIn 0.2s ease; }
.modal                { animation: modalIn 0.45s var(--spring); }
.modal.closing        { animation: modalOut 0.25s ease-in forwards; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   9. PAYMENT SUCCESS — Big icon pop                              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes successPop {
    0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
    50%  { transform: scale(1.25) rotate(10deg); opacity: 1; }
    75%  { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
}

.success-icon {
    animation: successPop 0.65s var(--spring);
}

/* Screen flash on payment */
@keyframes screenFlash {
    0%   { opacity: 0; }
    15%  { opacity: 0.08; }
    100% { opacity: 0; }
}

.screen-flash {
    position: fixed;
    inset: 0;
    background: var(--ios-green);
    pointer-events: none;
    z-index: 99998;
    animation: screenFlash 0.5s ease-out forwards;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   10. CONFETTI                                                   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes confettiFallA {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}

@keyframes confettiFallB {
    0%   { transform: translateY(-20px) rotate(45deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(900deg) translateX(-50px); opacity: 0; }
}

@keyframes confettiFallC {
    0%   { transform: translateY(-20px) rotate(-30deg) scale(1); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg) scale(0.4); opacity: 0; }
}

.confetti:nth-child(3n+1) { animation: confettiFallA var(--dur, 3s) var(--delay, 0s) ease-in forwards; }
.confetti:nth-child(3n+2) { animation: confettiFallB var(--dur, 3.4s) var(--delay, 0s) ease-in forwards; }
.confetti:nth-child(3n+3) { animation: confettiFallC var(--dur, 2.8s) var(--delay, 0s) ease-in forwards; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   11. FLOATING +PRICE NUMBER                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes floatUp {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
    20%  { opacity: 1; transform: translate(-50%, -20px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -90px) scale(0.7); }
}

.floating-number {
    position: fixed;
    pointer-events: none;
    z-index: 99500;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 800;
    color: var(--ios-green);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.6);
    animation: floatUp 1.1s cubic-bezier(0, 0, 0.2, 1) forwards;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   12. STATUS DOT PULSE                                           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes onlinePulse {
    0%, 70%, 100% { opacity: 1; }
    35%           { opacity: 0.35; }
}

.status-dot.online {
    animation: onlinePulse 3s ease-in-out infinite;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   13. SHIFT DOT PULSE                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes shiftDotRing {
    0%   { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}

.shift-dot {
    position: relative;
}

.shift-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ios-red);
    animation: shiftDotRing 2s ease-out infinite;
}

.shift-dot.active::after {
    border-color: var(--ios-green);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   14. LOGO BREATH                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes logoBreath {
    from { box-shadow: 0 0 16px rgba(0, 122, 255, 0.3),
                       inset 0 1px 0 rgba(255,255,255,0.2); }
    to   { box-shadow: 0 0 32px rgba(0, 122, 255, 0.5),
                       inset 0 1px 0 rgba(255,255,255,0.2); }
}

.logo-icon {
    animation: logoBreath 3s ease-in-out infinite alternate;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   15. PAY BUTTON SHIMMER                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.pay-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent);
    transform: skewX(-20deg);
    animation: payShimmer 3.5s infinite;
}

@keyframes payShimmer {
    0%   { left: -100%; }
    30%  { left: 200%; }
    100% { left: 200%; }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   16. EMPTY CART FLOAT                                           ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}

.cart-empty-icon {
    animation: emptyFloat 3s ease-in-out infinite;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   17. LOCK ICON FLOAT                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes lockFloat {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-8px) scale(1.05); }
}

.shift-lock-overlay .lock-icon {
    animation: lockFloat 3.5s ease-in-out infinite alternate;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   18. STOCK LOW BLINK                                            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes lowStockBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.stock-badge.low-stock,
.vizitka-stock.low {
    animation: lowStockBlink 2.5s ease-in-out infinite;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   19. SHIFT FLASH                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes shiftStartFlash {
    0%   { background: rgba(52, 199, 89, 0.15); }
    100% { background: transparent; }
}

@keyframes shiftEndFlash {
    0%   { background: rgba(255, 59, 48, 0.12); }
    100% { background: transparent; }
}

.shift-bar.shift-just-started { animation: shiftStartFlash 1.2s ease-out forwards; }
.shift-bar.shift-just-ended   { animation: shiftEndFlash 1s ease-out forwards; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║   20. CART HEADER GLOW (during payment)                          ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@keyframes cartProcessing {
    0%, 100% { box-shadow: inset 0 0 0 transparent; }
    50%      { box-shadow: inset 0 0 30px rgba(0, 122, 255, 0.15); }
}

.cart-bottom.processing {
    animation: cartProcessing 1.5s ease-in-out infinite;
}