/* ============================================================
   Rennuce — animations.css  (v3 — conflict-aware final rewrite)
   ============================================================

   GROUND RULES — kya is file mein hai aur kya nahi:

   ✅ IS FILE MEIN:
      • Scroll reveal (.animate-on-scroll → .is-visible)
      • is-visible display bug fix (flex containers break)
      • Toast — transition approach (main.js ka requirement)
      • Cart sidebar — backdrop + panel
      • Search overlay — backdrop + panel
      • Cart item entry animation
      • Search result stagger
      • WA tooltip show/hide
      • Newsletter check draw
      • Spinner utility

   ❌ IS FILE MEIN NAHI (doosri files handle karti hain):
      • Hero — hero.css ka kaam hai (conflict hota tha)
      • Product card hover/ATC/overlay — product-card.css
      • Cat card, testimonial, promo hover — home.css
      • Back-to-top visibility — components.css (sahi kaam kar raha)
      • WA ring + btn — components.css
      • Announcement bar — components.css
      • Skeleton shimmer — components.css
      • Modal panel animation — components.css (animation: modal-in)

   🔧 IS FILE MEIN FIX:
      • Toast: components.css animation approach override →
        transition approach (main.js .toast--visible/.toast--hiding
        classes use karta hai, transitionend sunata hai)
      • is-visible + display:block!important conflict fix
        (.testimonial-card, .trust-strip__item flex hain,
         display:block se toot jaate hain)

   ============================================================ */


/* ─────────────────────────────────────────────────────────
   1. KEYFRAMES
───────────────────────────────────────────────────────── */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawCheck {
    from {
        stroke-dashoffset: 60;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ─────────────────────────────────────────────────────────
   2. SCROLL REVEAL  (.animate-on-scroll + .is-visible)
   main.js → initScrollAnimations() adds .is-visible
───────────────────────────────────────────────────────── */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger siblings */
.animate-on-scroll:nth-child(2) {
    transition-delay: 70ms;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: 140ms;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: 210ms;
}

.animate-on-scroll:nth-child(5) {
    transition-delay: 280ms;
}

.animate-on-scroll:nth-child(6) {
    transition-delay: 350ms;
}

/* ── BUG FIX: components.css has `.is-visible { display: block !important }`
   Ye flex containers ko toda hai (testimonial-card, trust-strip__item).
   Yahan sahi display restore karte hain. ── */
.testimonial-card.is-visible {
    display: flex !important;
}

.trust-strip__item.is-visible {
    display: flex !important;
}

.cat-card.is-visible {
    display: block !important;
}

/* Cat card scroll reveal — thoda scale bhi */
.cat-card.animate-on-scroll {
    transform: translateY(22px) scale(0.985);
    transition:
        opacity 0.60s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.60s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-card.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Hover ab kaam karega kyunki specificity conflict remove hua */
}


/* ─────────────────────────────────────────────────────────
   3. TOAST NOTIFICATIONS — COMPLETE OVERRIDE
   
   Problem: components.css uses `animation: toast-in` on .toast
   directly, jo immediately fire hoti hai aur main.js ka
   transitionend event kabhi nahi milta. Toast elements
   stack hote hain aur remove nahi hote.

   Fix: transitions override karo jo .toast--visible /
   .toast--hiding classes pe depend hain (main.js yehi use karta hai).
───────────────────────────────────────────────────────── */

/* Override components.css `animation: toast-in` */
.toast {
    animation: none !important;
    /* components.css ki animation cancel */
    opacity: 0;
    transform: translateX(110%);
    transition:
        opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

/* JS: requestAnimationFrame(() => toast.classList.add('toast--visible')) */
.toast--visible {
    opacity: 1;
    transform: translateX(0);
}

/* JS: adds .toast--hiding on dismiss, listens for transitionend */
.toast--hiding {
    opacity: 0;
    transform: translateX(110%);
    transition:
        opacity 0.18s ease-in,
        transform 0.18s ease-in;
}

/* Close button spin */
.toast__close {
    transition:
        opacity 0.15s ease,
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast__close:hover {
    opacity: 0.65;
    transform: rotate(90deg);
}


/* ─────────────────────────────────────────────────────────
   4. CART SIDEBAR
   components.css mein nahi hai — yahan add karte hain
───────────────────────────────────────────────────────── */

/* Backdrop */
.cart-sidebar__backdrop {
    opacity: 0;
    transition: opacity 0.30s ease;
    pointer-events: none;
}

.cart-sidebar--open .cart-sidebar__backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Panel — right se slide-in */
.cart-sidebar__panel {
    transform: translateX(100%);
    transition: transform 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-sidebar--open .cart-sidebar__panel {
    transform: translateX(0);
}

/* Cart item jab add ho */
.cart-item {
    animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Qty buttons */
.cart-item__qty-btn {
    transition:
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.15s ease;
}

.cart-item__qty-btn:hover {
    transform: scale(1.14);
}

.cart-item__qty-btn:active {
    transform: scale(0.90);
}

/* Remove button */
.cart-item__remove {
    transition: color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-item__remove:hover {
    transform: scale(1.15);
}

/* Coupon chevron */
.coupon-toggle__chevron {
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-sidebar__coupon-toggle[aria-expanded="true"] .coupon-toggle__chevron {
    transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────
   5. SEARCH OVERLAY
───────────────────────────────────────────────────────── */

.search-overlay__backdrop {
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.search-overlay--open .search-overlay__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.search-overlay__panel {
    opacity: 0;
    transform: translateY(-14px);
    transition:
        opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.search-overlay--open .search-overlay__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Result items stagger */
.search-result-item {
    animation: fadeUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.search-result-item:nth-child(2) {
    animation-delay: 40ms;
}

.search-result-item:nth-child(3) {
    animation-delay: 80ms;
}

.search-result-item:nth-child(4) {
    animation-delay: 120ms;
}

.search-result-item:nth-child(5) {
    animation-delay: 160ms;
}

.search-result-item:nth-child(6) {
    animation-delay: 200ms;
}

/* Tag chips hover */
.search-tag,
.search-cat-link {
    transition:
        transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.16s ease,
        color 0.16s ease;
}

.search-tag:hover,
.search-cat-link:hover {
    transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────────
   6. WHATSAPP TOOLTIP
   components.css btn hover handle karta hai lekin
   tooltip transition nahi hai wahan.
───────────────────────────────────────────────────────── */

.wa-float__tooltip {
    opacity: 0;
    transform: translateX(8px) translateY(-50%);
    transition:
        opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.wa-float__tooltip--visible {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}


/* ─────────────────────────────────────────────────────────
   7. MISC UTILITIES
───────────────────────────────────────────────────────── */

/* Spinner (newsletter submit button) */
.newsletter-form__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.70s linear infinite;
}

/* Newsletter success checkmark draw */
.newsletter-form__success svg polyline {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: drawCheck 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.20s forwards;
}

/* Modal + search loading spinner */
.modal__loading::before,
.search-overlay__loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    flex-shrink: 0;
}

/* Generic spin utility */
.anim-spin {
    animation: spin 0.75s linear infinite;
    display: inline-block;
}