/**
 * Homepage Premium Enhancements
 * BangHotDeals - Enhanced Homepage Styling
 * Adds scroll animations, premium effects to all homepage sections
 * Version: 1.0.0
 */

/* ============================================
   GLOBAL HOMEPAGE ENHANCEMENTS
   ============================================ */

/* Smooth font rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   HERO SECTION ENHANCEMENTS
   ============================================ */
.hero-section-modern {
    position: relative;
    overflow: hidden;
}

/* Animated gradient background */
.hero-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 25%,
        #667eea 50%,
        #5a67d8 75%,
        #667eea 100%
    );
    background-size: 400% 400%;
    animation: heroGradientShift 15s ease infinite;
    z-index: 0;
}

@keyframes heroGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Hero content entrance animation */
.hero-section-modern .container {
    position: relative;
    z-index: 1;
}

.hero-section-modern .container > div > div:first-child {
    animation: heroContentSlide 1s ease-out;
}

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

/* Hero carousel enhancement */
.hero-carousel-container {
    animation: heroCarouselFade 1s ease-out 0.3s both;
}

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

/* Stats counter animation */
.hero-section-modern [style*="grid-template-columns: repeat(4"] > div {
    opacity: 0;
    animation: statsReveal 0.6s ease forwards;
}

.hero-section-modern [style*="grid-template-columns: repeat(4"] > div:nth-child(1) { animation-delay: 0.5s; }
.hero-section-modern [style*="grid-template-columns: repeat(4"] > div:nth-child(2) { animation-delay: 0.65s; }
.hero-section-modern [style*="grid-template-columns: repeat(4"] > div:nth-child(3) { animation-delay: 0.8s; }
.hero-section-modern [style*="grid-template-columns: repeat(4"] > div:nth-child(4) { animation-delay: 0.95s; }

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

/* ============================================
   SECTION SCROLL ANIMATIONS
   ============================================ */

/* Section headers */
section h2 {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

section.in-view h2,
section:not(.scroll-section) h2 {
    opacity: 1;
    transform: translateY(0);
}

/* Section paragraphs */
section h2 + p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}

section.in-view h2 + p,
section:not(.scroll-section) h2 + p {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   STORE CARDS ANIMATION
   ============================================ */
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"] {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

section[style*="background: #f8f9fa"].in-view a[style*="background: white"][style*="text-align: center"],
section[style*="background: #f8f9fa"]:not(.scroll-section) a[style*="background: white"][style*="text-align: center"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger store card animations */
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(1) { transition-delay: 0.1s; }
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(2) { transition-delay: 0.15s; }
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(3) { transition-delay: 0.2s; }
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(4) { transition-delay: 0.25s; }
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(5) { transition-delay: 0.3s; }
section[style*="background: #f8f9fa"] a[style*="background: white"][style*="text-align: center"]:nth-child(6) { transition-delay: 0.35s; }

/* ============================================
   CATEGORY CARDS ENHANCEMENT
   ============================================ */
/* Category gradient cards */
section[style*="background: white"] a[style*="linear-gradient"] {
    position: relative;
    overflow: hidden;
}

section[style*="background: white"] a[style*="linear-gradient"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}

section[style*="background: white"] a[style*="linear-gradient"]:hover::after {
    left: 150%;
}

/* ============================================
   DEAL CARDS PREMIUM EFFECTS
   ============================================ */
.deal-card,
.product-card,
[style*="background: white"][style*="border-radius: 16px"][style*="overflow: hidden"] {
    position: relative;
}

/* Glow effect on hover */
.deal-card::before,
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 rgba(102, 126, 234, 0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.deal-card:hover::before,
.product-card:hover::before {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.2);
}

/* Image zoom on hover */
.deal-card img,
.product-card img {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.deal-card:hover img,
.product-card:hover img {
    transform: scale(1.08);
}

/* ============================================
   COUPON SECTION PREMIUM
   ============================================ */
section[style*="background: linear-gradient(180deg, #1a1a2e"] {
    position: relative;
}

/* Animated particles effect */
section[style*="background: linear-gradient(180deg, #1a1a2e"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
    animation: couponParticles 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes couponParticles {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(20px) translateY(-20px);
    }
    50% {
        transform: translateX(-10px) translateY(10px);
    }
    75% {
        transform: translateX(-20px) translateY(-10px);
    }
}

/* Coupon card premium hover */
.coupon-card-premium {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.coupon-card-premium:hover {
    transform: translateY(-10px) rotateX(2deg) scale(1.02) !important;
}

/* ============================================
   QUICK TOOLS SECTION
   ============================================ */
section a[style*="padding: 35px"][style*="border-radius: 20px"] {
    position: relative;
    overflow: hidden;
}

section a[style*="padding: 35px"][style*="border-radius: 20px"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

section a[style*="padding: 35px"][style*="border-radius: 20px"]:hover::before {
    opacity: 1;
}

/* ============================================
   CTA SECTION ENHANCEMENT
   ============================================ */
section[style*="text-align: center"][style*="padding: 80px"] {
    position: relative;
    overflow: hidden;
}

/* Animated gradient background */
section[style*="text-align: center"][style*="padding: 80px"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 33%,
        #667eea 66%,
        #5a67d8 100%
    );
    background-size: 300% 300%;
    animation: ctaGradient 10s ease infinite;
    z-index: 0;
}

@keyframes ctaGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

section[style*="text-align: center"][style*="padding: 80px"] .container {
    position: relative;
    z-index: 1;
}

/* ============================================
   BUTTON HOVER ENHANCEMENTS
   ============================================ */

/* Primary gradient buttons */
a[style*="background: linear-gradient(135deg, #667eea"],
button[style*="background: linear-gradient(135deg, #667eea"] {
    position: relative;
    overflow: hidden;
}

a[style*="background: linear-gradient(135deg, #667eea"]::before,
button[style*="background: linear-gradient(135deg, #667eea"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

a[style*="background: linear-gradient(135deg, #667eea"]:hover::before,
button[style*="background: linear-gradient(135deg, #667eea"]:hover::before {
    width: 300px;
    height: 300px;
}

/* Success/Green buttons */
a[style*="background: linear-gradient(135deg, #10B981"],
button[style*="background: linear-gradient(135deg, #10B981"] {
    position: relative;
    overflow: hidden;
}

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

/* Discount badges */
[style*="position: absolute"][style*="background: linear-gradient"][style*="border-radius: 20px"] {
    animation: badgeBounce 2s ease-in-out infinite;
}

@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   FLOATING ELEMENTS
   ============================================ */

/* Decorative circles in hero */
[style*="position: absolute"][style*="border-radius: 50%"][style*="background: rgba(255,255,255"] {
    animation: floatElement 8s ease-in-out infinite;
}

@keyframes floatElement {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.02); }
}

/* ============================================
   SCROLL REVEAL OBSERVER TRIGGERS
   ============================================ */

/* Mark sections for scroll observation */
section {
    position: relative;
}

/* Apply to all main content sections - VISIBLE BY DEFAULT */
section:not(.hero-section-modern) {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================
   GRID ITEM STAGGER ANIMATIONS
   ============================================ */

/* Product grid cards */
.products-grid > div,
[style*="display: grid"][style*="gap: 25px"] > div,
[style*="display: grid"][style*="gap: 25px"] > a,
[style*="display: grid"][style*="gap: 25px"] > article {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.products-grid.in-view > div,
.in-view [style*="display: grid"][style*="gap: 25px"] > div,
.in-view [style*="display: grid"][style*="gap: 25px"] > a,
.in-view [style*="display: grid"][style*="gap: 25px"] > article,
[style*="display: grid"][style*="gap: 25px"] > div,
[style*="display: grid"][style*="gap: 25px"] > a,
[style*="display: grid"][style*="gap: 25px"] > article {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered reveal */
[style*="display: grid"] > *:nth-child(1) { transition-delay: 0.05s; }
[style*="display: grid"] > *:nth-child(2) { transition-delay: 0.1s; }
[style*="display: grid"] > *:nth-child(3) { transition-delay: 0.15s; }
[style*="display: grid"] > *:nth-child(4) { transition-delay: 0.2s; }
[style*="display: grid"] > *:nth-child(5) { transition-delay: 0.25s; }
[style*="display: grid"] > *:nth-child(6) { transition-delay: 0.3s; }
[style*="display: grid"] > *:nth-child(7) { transition-delay: 0.35s; }
[style*="display: grid"] > *:nth-child(8) { transition-delay: 0.4s; }
[style*="display: grid"] > *:nth-child(9) { transition-delay: 0.45s; }
[style*="display: grid"] > *:nth-child(10) { transition-delay: 0.5s; }
[style*="display: grid"] > *:nth-child(11) { transition-delay: 0.55s; }
[style*="display: grid"] > *:nth-child(12) { transition-delay: 0.6s; }

/* ============================================
   PRICE ANIMATIONS
   ============================================ */

/* Price highlight effect */
[style*="font-size: 1.8em"][style*="font-weight: 800"][style*="color: #667eea"],
[style*="font-size: 1.6em"][style*="font-weight: 800"][style*="color: #10b981"] {
    position: relative;
}

/* Savings badge animation */
[style*="background: linear-gradient(135deg, #10b981"][style*="border-radius: 20px"] {
    animation: savingsPulse 3s ease-in-out infinite;
}

@keyframes savingsPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Page load animation */
body {
    animation: pageLoad 0.6s ease-out;
}

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

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {
    /* Reduce animation complexity */
    section:not(.hero-section-modern) {
        opacity: 1;
        transform: none;
    }

    /* Simpler card hover */
    .deal-card:hover,
    .product-card:hover {
        transform: translateY(-4px) !important;
    }

    /* Disable complex animations */
    .coupon-card-premium:hover {
        transform: translateY(-5px) scale(1.01) !important;
    }

    /* Reduce stagger delays */
    [style*="display: grid"] > * {
        transition-delay: 0s !important;
    }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    section:not(.hero-section-modern) {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    * {
        animation: none !important;
        transition: none !important;
    }

    section {
        opacity: 1 !important;
        transform: none !important;
    }
}