/* FAYMURE - Premium Micro-Animations
 * Performance-optimized animations using only opacity + transform
 * GPU-friendly, respects prefers-reduced-motion
 */

/* ============================================
   A) Scroll Reveal
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 360ms ease-out, transform 360ms ease-out;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   B) Stagger Helper (optional)
   ============================================ */
.stagger .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger .reveal:nth-child(2) { transition-delay: 90ms; }
.stagger .reveal:nth-child(3) { transition-delay: 180ms; }
.stagger .reveal:nth-child(4) { transition-delay: 270ms; }
.stagger .reveal:nth-child(5) { transition-delay: 360ms; }
.stagger .reveal:nth-child(6) { transition-delay: 450ms; }
.stagger .reveal:nth-child(7) { transition-delay: 540ms; }
.stagger .reveal:nth-child(8) { transition-delay: 630ms; }

/* ============================================
   C) Product Card Hover (subtle)
   ============================================ */
.hover-lift {
    transition: transform 280ms ease-out, box-shadow 280ms ease-out;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(128,0,32,0.15) !important;
}

.img-zoom img {
    transition: transform 250ms ease-out;
}

.img-zoom:hover img {
    transform: scale(1.02);
}

/* ============================================
   D) Nav Underline Sweep (premium)
   ============================================ */
.nav-underline {
    position: relative;
    display: inline-block;
}

.nav-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-out;
}

.nav-underline:hover::after,
.nav-underline:focus::after {
    transform: scaleX(1);
}

/* ============================================
   E) Button Press Micro-Interaction
   ============================================ */
.btn-press {
    transition: transform 120ms ease-out;
}

.btn-press:active {
    transform: scale(0.98);
}

/* ============================================
   F) Reviews Marquee (CSS-only, seamless loop)
   ============================================ */
.marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee__track {
    display: flex;
    gap: 30px;
    animation: marquee-scroll 12s linear infinite;
    will-change: transform;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   G) Sticky Header "Glass" Effect
   ============================================ */
.main-header {
    transition: background 300ms ease-out, backdrop-filter 300ms ease-out, box-shadow 300ms ease-out;
}

.main-header.is-scrolled {
    background: rgba(249, 246, 240, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================
   H) Reduced Motion (REQUIRED)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .marquee__track {
        animation: none !important;
        transform: none !important;
    }
    
    .hover-lift,
    .img-zoom img,
    .btn-press {
        transition: none !important;
    }
    
    .btn-press:active {
        transform: none !important;
    }
    
    .main-header {
        transition: none !important;
    }
    
    .nav-underline::after {
        transition: none !important;
    }
}