/* ============================================================
   Raj Medicals Stores — Premium Quick-Commerce Animations
   Vanilla CSS micro-interactions (Blinkit/Zepto-style)
   ============================================================ */

/* ── 1. SKELETON LOADER ─────────────────────────────────── */
.skeleton,
.skeleton-text,
.skeleton-img {
    position: relative;
    overflow: hidden;
    background: #e9eef3;
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton::after,
.skeleton-text::after,
.skeleton-img::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
    animation: skeleton-shimmer 1.4s infinite;
}
.skeleton { min-height: 60px; width: 100%; }
.skeleton-text { height: 14px; width: 90%; border-radius: 4px; margin: 6px 0; }
.skeleton-text.skeleton-text--short { width: 55%; }
.skeleton-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; }
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

/* ── 2. MATERIAL RIPPLE EFFECT ──────────────────────────── */
.btn-ripple {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    animation: ripple-expand .6s ease-out forwards;
    pointer-events: none;
}
.btn-ripple-dark .ripple-effect { background: rgba(0,0,0,.14); }
@keyframes ripple-expand {
    to { transform: scale(4); opacity: 0; }
}

/* ── 3. CART BOUNCE MICRO-INTERACTION ───────────────────── */
.cart-bounce {
    animation: cart-bounce .55s cubic-bezier(.36,.07,.19,.97);
    transform-origin: center;
}
@keyframes cart-bounce {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.3) rotate(-10deg); }
    40%  { transform: scale(.9) rotate(8deg); }
    60%  { transform: scale(1.12) rotate(-4deg); }
    80%  { transform: scale(.96) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ── 4. FLY-TO-CART ─────────────────────────────────────── */
.fly-item {
    position: fixed;
    z-index: 9999;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
    opacity: 1;
    transition:
        left  .8s cubic-bezier(.22,.8,.29,.99),
        top   .8s cubic-bezier(.22,.8,.29,.99),
        width .8s cubic-bezier(.22,.8,.29,.99),
        height .8s cubic-bezier(.22,.8,.29,.99),
        opacity .8s ease-in;
    will-change: left, top, width, height, opacity;
}

/* ── 5. SMOOTH BOTTOM SHEET (mobile modal) ──────────────── */
.bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 32px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32,.72,.25,1);
    will-change: transform;
}
.bottom-sheet.bottom-sheet-up { transform: translateY(0); }
.bottom-sheet__handle {
    width: 44px; height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: #d5d9de;
}
.bottom-sheet__body { padding: 16px 20px 24px; }
.bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.bottom-sheet-backdrop.show { opacity: 1; visibility: visible; }

/* ── ACCESSIBILITY: reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after,
    .skeleton-text::after,
    .skeleton-img::after,
    .ripple-effect,
    .cart-bounce,
    .fly-item,
    .bottom-sheet,
    .bottom-sheet-backdrop {
        animation: none !important;
        transition: none !important;
    }
}