/* ============================================================
   NKP Animations — Pure CSS transitions & animations
   ============================================================ */

/* --- Smooth Scroll --- */
html {
    scroll-behavior: smooth;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

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

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineGrow {
    from { width: 0; }
    to { width: 40px; }
}

/* ============================================================
   PAGE LOAD ANIMATIONS
   ============================================================ */

.hero-slider {
    animation: fadeIn .7s ease both;
}

.section-heading {
    animation: fadeInUp .5s ease both;
}

.section-heading h2::after {
    animation: underlineGrow .6s ease both .3s;
}

/* ============================================================
   STAGGERED ENTRY — CATEGORIES
   ============================================================ */

.explore-categories .category-card {
    opacity: 0;
    animation: fadeInUp .5s ease both;
}
.explore-categories .category-card:nth-child(1) { animation-delay: .05s; }
.explore-categories .category-card:nth-child(2) { animation-delay: .1s; }
.explore-categories .category-card:nth-child(3) { animation-delay: .15s; }
.explore-categories .category-card:nth-child(4) { animation-delay: .2s; }
.explore-categories .category-card:nth-child(5) { animation-delay: .25s; }
.explore-categories .category-card:nth-child(6) { animation-delay: .3s; }
.explore-categories .category-card:nth-child(7) { animation-delay: .35s; }
.explore-categories .category-card:nth-child(8) { animation-delay: .4s; }

/* ============================================================
   STAGGERED ENTRY — PRODUCT GRID
   ============================================================ */

.product-grid .product-card {
    opacity: 0;
    animation: fadeInUp .45s ease both;
}
.product-grid .product-card:nth-child(1) { animation-delay: .0s; }
.product-grid .product-card:nth-child(2) { animation-delay: .06s; }
.product-grid .product-card:nth-child(3) { animation-delay: .12s; }
.product-grid .product-card:nth-child(4) { animation-delay: .18s; }
.product-grid .product-card:nth-child(5) { animation-delay: .24s; }
.product-grid .product-card:nth-child(6) { animation-delay: .3s; }
.product-grid .product-card:nth-child(7) { animation-delay: .36s; }
.product-grid .product-card:nth-child(8) { animation-delay: .42s; }

/* ============================================================
   STAGGERED ENTRY — SERVICES
   ============================================================ */

.services-strip .service-item {
    opacity: 0;
    animation: fadeInUp .5s ease both;
}
.services-strip .service-item:nth-child(1) { animation-delay: .1s; }
.services-strip .service-item:nth-child(2) { animation-delay: .2s; }
.services-strip .service-item:nth-child(3) { animation-delay: .3s; }
.services-strip .service-item:nth-child(4) { animation-delay: .4s; }

/* ============================================================
   STAGGERED ENTRY — VIDEO CARDS
   ============================================================ */

.video-grid .video-card {
    opacity: 0;
    animation: fadeInUp .45s ease both;
}
.video-grid .video-card:nth-child(1) { animation-delay: .05s; }
.video-grid .video-card:nth-child(2) { animation-delay: .12s; }
.video-grid .video-card:nth-child(3) { animation-delay: .19s; }
.video-grid .video-card:nth-child(4) { animation-delay: .26s; }

/* ============================================================
   STAGGERED ENTRY — DEAL CARDS
   ============================================================ */

.deals-section .deal-card {
    opacity: 0;
    animation: scaleIn .5s ease both;
}
.deals-section .col-md-6:nth-child(1) .deal-card { animation-delay: .1s; }
.deals-section .col-md-6:nth-child(2) .deal-card { animation-delay: .25s; }

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS (Modern CSS)
   Elements animate as they scroll into viewport
   ============================================================ */

@supports (animation-timeline: view()) {
    .section-heading,
    .explore-categories .category-card,
    .product-grid .product-card,
    .services-strip .service-item,
    .video-grid .video-card,
    .deals-section .deal-card,
    .caution-notice {
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
}

/* ============================================================
   HOVER TRANSITIONS — CARDS
   ============================================================ */

.product-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,.1);
}

.category-card {
    transition: transform .3s ease;
}
.category-card:hover {
    transform: translateY(-4px);
}

.deal-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.deal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.video-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

/* ============================================================
   HOVER TRANSITIONS — IMAGE ZOOM
   ============================================================ */

.product-img-wrap img,
.category-card img,
.deal-card img,
.video-thumbnail img {
    transition: transform .45s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.06);
}
.category-card:hover img {
    transform: scale(1.08);
}
.deal-card:hover img {
    transform: scale(1.04);
}
.video-card:hover .video-thumbnail img {
    transform: scale(1.06);
}

/* ============================================================
   HOVER TRANSITIONS — BUTTONS
   ============================================================ */

.btn-view-all,
.btn-shop-now {
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-view-all:hover,
.btn-shop-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* ============================================================
   HOVER TRANSITIONS — ICONS
   ============================================================ */

.icon-btn {
    transition: color .2s ease, transform .2s ease;
}
.icon-btn:hover {
    transform: scale(1.12);
}

.wishlist-btn {
    transition: transform .2s ease, color .2s ease;
}
.wishlist-btn:hover {
    transform: scale(1.2);
}

/* ============================================================
   HOVER TRANSITIONS — NAV & FOOTER LINKS
   ============================================================ */

.site-footer a {
    transition: color .2s ease;
}

.top-utility-nav a {
    transition: color .2s ease, opacity .2s ease;
}
.top-utility-nav a:hover {
    opacity: .8;
}

/* ============================================================
   SLIDER ARROWS & DOTS
   ============================================================ */

.slider-arrow {
    transition: background .2s ease, transform .2s ease;
}
.slider-arrow:hover {
    transform: scale(1.1);
}

.slider-dots .dot {
    transition: background .3s ease, transform .3s ease;
}
.slider-dots .dot.active {
    transform: scale(1.3);
}

/* ============================================================
   FORM INPUTS — FOCUS TRANSITION
   ============================================================ */

input, select, textarea {
    transition: border-color .25s ease, box-shadow .25s ease;
}

/* ============================================================
   BADGE ANIMATIONS
   ============================================================ */

.cart-badge,
.badge-tag {
    transition: transform .2s ease;
}
.icon-btn:hover .cart-badge {
    transform: scale(1.15);
}

/* ============================================================
   VIDEO PLAY BUTTON PULSE
   ============================================================ */

@keyframes pulsePlay {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.video-play-btn {
    animation: pulsePlay 2s ease infinite;
}
.video-card:hover .video-play-btn {
    animation: pulsePlay 1s ease infinite;
}

/* ============================================================
   MOBILE RESPONSIVE — LIGHTER ANIMATIONS
   ============================================================ */

@media (max-width: 767px) {
    .product-card:hover,
    .deal-card:hover,
    .video-card:hover {
        transform: none;
        box-shadow: none;
    }

    .product-card:hover .product-img-wrap img,
    .deal-card:hover img,
    .video-card:hover .video-thumbnail img {
        transform: none;
    }

    /* Keep stagger animations but make them faster on mobile */
    .explore-categories .category-card,
    .product-grid .product-card,
    .video-grid .video-card {
        animation-duration: .3s;
    }
}

/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}