/* ==========================================================================
   SIHIPAK PREMIUM ANIMATIONS & LUXURY STYLING
   ========================================================================== */

:root {
    --theme-cream: #FFF8F2;
    --theme-dark-brown: #3B2417;
    --theme-royal-gold: #D89B2B;
    --theme-warm-orange: #E56A1C;
    --anim-duration: 0.9s;
    --anim-ease: cubic-bezier(0.25, 1, 0.5, 1); /* easeOut */
    --hover-ease: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius-premium: 24px;
}

/* --- Premium Hover Effects (Glassmorphism & Glow) --- */
.premium-hover-card {
    transition: transform var(--hover-ease), box-shadow var(--hover-ease), border-color var(--hover-ease);
    border: 1px solid transparent;
}

.premium-hover-card:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(59, 36, 23, 0.1);
    border-color: rgba(216, 155, 43, 0.4); /* Golden border glow */
}

/* Glassmorphism accent utility */
.glass-accent {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.glass-accent:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* --- Scroll Reveal Base Styles --- */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}

.reveal-fade-in {
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-ease);
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}

/* Active State for Intersection Observer */
.reveal-fade-up.active,
.reveal-fade-in.active,
.reveal-slide-left.active,
.reveal-slide-right.active {
    opacity: 1;
    transform: translate(0);
}

/* --- Staggered Reveals (For Grid/Flex Children) --- */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}

.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.6s; }
.reveal-stagger.active > *:nth-child(7) { transition-delay: 0.7s; }
.reveal-stagger.active > *:nth-child(8) { transition-delay: 0.8s; }

.reveal-stagger.active > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- Alternating Slide Reveal --- */
.reveal-alternate-slide > *:nth-child(odd) {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}
.reveal-alternate-slide > *:nth-child(even) {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease);
}
.reveal-alternate-slide.active > * {
    opacity: 1;
    transform: translate(0);
    transition-delay: 0.1s;
}

/* --- Gift Pack Golden Glow & Rotate --- */
.gift-pack-hover {
    transition: all var(--hover-ease);
}
.gift-pack-hover:hover {
    box-shadow: 0 0 20px rgba(216, 155, 43, 0.6);
    border: 1px solid var(--theme-royal-gold);
}
.gift-pack-hover:hover .product-img {
    transform: rotate(5deg) scale(1.05);
}

/* --- Specific Animations --- */

/* Hero Banner */
.hero-animate-in {
    animation: heroFadeScale 1.2s var(--anim-ease) forwards;
}

@keyframes heroFadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Floating Sweet Particles */
.floating-particle {
    display: none !important;
}

@keyframes floatAnimation {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(10deg); }
}

/* Golden Vertical Line Draw */
.golden-line-container {
    position: relative;
}
.golden-line-draw {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--theme-royal-gold), var(--theme-warm-orange));
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 1.5s var(--anim-ease);
}
.golden-line-container.active .golden-line-draw {
    transform: scaleY(1);
}

/* Button Spring Pop */
.btn-spring-pop {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.active .btn-spring-pop {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   MOBILE RESPONSIVE SCROLL ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Mobile Fast Touch Hardware Acceleration */
@media (max-width: 768px) {
    /* Product/category cards must not rise into place or retain delayed motion on touch. */
    .category-card.reveal-fade-up,
    .product-card.reveal-fade-up,
    .vendor-card.reveal-fade-up,
    .blog-card.reveal-fade-up,
    .vendor-video-card.reveal-fade-up,
    .reveal-stagger > .category-card,
    .reveal-stagger > .product-card,
    .reveal-stagger > .vendor-card,
    .reveal-stagger > .blog-card,
    .reveal-stagger > .vendor-video-card,
    .reveal-alternate-slide > .category-card,
    .reveal-alternate-slide > .product-card,
    .reveal-alternate-slide > .vendor-card,
    .reveal-alternate-slide > .blog-card,
    .reveal-alternate-slide > .vendor-video-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        will-change: auto !important;
    }

    .reveal-fade-up,
    .reveal-fade-in,
    .reveal-slide-left,
    .reveal-slide-right,
    .reveal-stagger > *,
    .mobile-scroll-reveal {
        will-change: opacity, transform;
        transition-duration: 0.65s !important;
        transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .reveal-fade-up {
        transform: translateY(28px) !important;
    }

    .reveal-slide-left {
        transform: translateX(-30px) !important;
    }

    .reveal-slide-right {
        transform: translateX(30px) !important;
    }

    .reveal-fade-up.active,
    .reveal-fade-in.active,
    .reveal-slide-left.active,
    .reveal-slide-right.active,
    .mobile-scroll-reveal.active {
        opacity: 1 !important;
        transform: translate(0) scale(1) !important;
    }
}

/* Scroll-to-Top Floating Mobile Button */
.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e85d04;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(232, 93, 4, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.35s ease;
    cursor: pointer;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-btn:active {
    transform: scale(0.9);
}

/* Sticky Header Scroll Elevation Effect */
.main-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.3s ease;
}