/* ============================================================
   NASMA LUXE — Cinematic Animation & Motion Layer CSS
   STRICT RULE: This ONLY adds motion/transition support.
   Zero redesign. Zero layout disruption. Zero content changes.
   ============================================================ */

/* ============================================================
   01 — LENIS CINEMATIC SMOOTH SCROLL
   ============================================================ */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ============================================================
   02 — FILM GRAIN TEXTURE (2.5% OPACITY, NON-BLOCKING)
   ============================================================ */
#nl-grain-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9990 !important;
    pointer-events: none !important;
    opacity: 0.028 !important;
    mix-blend-mode: overlay !important;
}

/* ============================================================
   03 — FOUC PREVENTION / DEFAULT VISIBILITY
   All existing content is ALWAYS visible if JS fails.
   GSAP initializes animation states dynamically at runtime.
   ============================================================ */
.hero-section,
.bestsellers-slider-section,
.large-feature-section,
.before-after-section,
.products-section,
.testimonials-section,
.site-footer,
.site-header {
    opacity: 1 !important;
}

/* ============================================================
   04 — HERO CINEMATIC CAMERA & DEPTH CONTAINER
   ============================================================ */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* Line-by-line masked title container */
.hero-line-mask {
    display: block;
    overflow: hidden;
    line-height: 1.18;
}

.hero-line-inner {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* Hero CTA Breathing Pulse (Subtle Luxury Glow, NOT neon) */
@keyframes nl-cta-breathe {
    0%, 100% {
        box-shadow: 0 4px 18px rgba(229, 184, 105, 0.32), 0 0 0 0 rgba(229, 184, 105, 0.2);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 8px 28px rgba(229, 184, 105, 0.55), 0 0 16px rgba(229, 184, 105, 0.25);
        transform: translateY(-1.5px);
    }
}

.hero-cta-btn.is-pulsing {
    animation: nl-cta-breathe 3.8s ease-in-out infinite;
}

/* 3D Stage Depth Perspectives */
.hero-product-col {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hero-stage-inner {
    position: relative;
    transform-style: preserve-3d;
}

.hero-main-bottle-wrap {
    transform-origin: 50% 80%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.hero-floating-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.hero-glowing-ring,
.hero-halo-element {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* ============================================================
   05 — SECTION TRANSITION SYSTEM (SCENE BLENDING)
   ============================================================ */
/* Soft atmospheric gradients that blend scenes seamlessly */
.scene-transition-blend-down {
    position: relative;
}

.scene-transition-blend-down::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(6, 29, 21, 0.15));
    pointer-events: none;
    z-index: 4;
}

/* ============================================================
   06 — BEST SELLERS SLIDER & PRODUCT CARDS
   ============================================================ */
.product-card-3d {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

@media (hover: hover) and (min-width: 1024px) {
    .product-card-3d:hover {
        transform: translateY(-6px) scale(1.018) !important;
        box-shadow: 0 22px 48px rgba(6, 29, 21, 0.14) !important;
    }

    .product-card-3d:hover img {
        transform: translateY(-6px) scale(1.03) !important;
        transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
}

.product-card-3d img {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* Numerical price counter styling */
.price-counter-val {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* ============================================================
   07 — SCENE 03: HERBAL FEATURE 3D STAGE & DOLLY
   ============================================================ */
.large-feature-section {
    position: relative;
    overflow: hidden;
}

.feat-center-col {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.feat-stage-wrapper {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.feat-bottle-box,
.feat-ring-element,
.feat-golden-ring,
.feat-pedestal-wrap,
.feat-herb-decor {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* ============================================================
   08 — SCENE 04: BEFORE & AFTER CINEMATIC MOMENT
   ============================================================ */
.ba-compare-frame {
    position: relative;
    overflow: hidden;
    will-change: clip-path, transform;
}

.ba-circle-handle {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease !important;
}

.ba-drag-divider.is-active-drag .ba-circle-handle {
    transform: scale(1.18) !important;
    box-shadow: 0 0 24px rgba(229, 184, 105, 0.8) !important;
}

.stat-number-val {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    will-change: transform, opacity;
}

/* ============================================================
   09 — SCENE 06: TESTIMONIALS & FOOTER
   ============================================================ */
.testi-card-box {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

@media (hover: hover) and (min-width: 1024px) {
    .testi-card-box:hover {
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
    }
}

/* ============================================================
   10 — MICRO-INTERACTIONS & LUXURY ACCENTS
   ============================================================ */
.button-gold,
.button-gold-sm {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
}

@media (hover: hover) {
    .button-gold:hover,
    .button-gold-sm:hover {
        transform: translateY(-2px) scale(1.03) !important;
        box-shadow: 0 8px 24px rgba(212, 163, 89, 0.45) !important;
    }

    .button-gold:active,
    .button-gold-sm:active {
        transform: translateY(0) scale(0.97) !important;
    }
}

.primary-nav a {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease;
}

@media (hover: hover) {
    .primary-nav a:hover {
        transform: translateY(-1.5px);
    }
}

/* ============================================================
   11 — ORDER SUCCESS CELEBRATION
   ============================================================ */
#nl-petal-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}

#order-success-card {
    will-change: transform, opacity;
    animation: nl-success-glow 3.5s infinite ease-in-out alternate;
}

@keyframes nl-success-glow {
    0% {
        box-shadow: 0 15px 40px rgba(6, 31, 21, 0.25), 0 0 0 rgba(212, 163, 89, 0);
    }
    100% {
        box-shadow: 0 22px 55px rgba(6, 31, 21, 0.35), 0 0 35px rgba(212, 163, 89, 0.35);
    }
}

/* ============================================================
   12 — ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    #nl-grain-canvas,
    #nl-petal-canvas {
        display: none !important;
    }

    .hero-section,
    .hero-bg-layer,
    .hero-title,
    .hero-description,
    .hero-cta-wrapper,
    .hero-benefit-item,
    .hero-main-bottle-wrap,
    .hero-floating-card,
    .hero-glowing-ring,
    .hero-halo-element,
    .botanical-foliage,
    .hero-pure-badge,
    .hero-eyebrow,
    .hero-carousel-controls,
    .ba-compare-frame,
    .product-card-3d,
    .testi-card-box,
    .site-header {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}