/* ============================================
   MH LUXURY BOUTIQUE — VISUAL ENHANCEMENTS
   Pure additive styles. Zero modifications to existing CSS.
   ============================================ */

/* Extended accent palette */
:root {
    --pearl: #F5EDE3;
    --burgundy: #6B1D2A;
    --champagne: #E8D5B7;
    --gold-glow: rgba(201, 169, 97, 0.15);
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   Applied via JS — elements stay visible if JS fails
   ============================================ */

.mh-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mh-reveal[data-mh-anim="fade-up"] {
    transform: translateY(48px);
}

.mh-reveal[data-mh-anim="fade-in"] {
    transform: none;
}

.mh-reveal[data-mh-anim="slide-right"] {
    transform: translateX(-60px);
}

.mh-reveal[data-mh-anim="slide-left"] {
    transform: translateX(60px);
}

.mh-reveal[data-mh-anim="scale-up"] {
    transform: scale(0.92);
}

/* RTL: mirror horizontal slides */
[dir="rtl"] .mh-reveal[data-mh-anim="slide-right"] {
    transform: translateX(60px);
}

[dir="rtl"] .mh-reveal[data-mh-anim="slide-left"] {
    transform: translateX(-60px);
}

/* Revealed state */
.mh-reveal.mh-revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* RTL revealed state — must match specificity of RTL slide overrides */
[dir="rtl"] .mh-reveal.mh-revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* ============================================
   HERO PAGE-LOAD ENTRANCE ANIMATION
   ============================================ */

.mh-hero-anim {
    opacity: 0;
    transform: translateY(30px);
    animation: mhHeroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-play-state: paused;
}

.mh-hero-active .mh-hero-anim {
    animation-play-state: running;
}

@keyframes mhHeroIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title divider — scale from center */
.mh-hero-divider {
    opacity: 0;
    transform: scaleX(0);
    animation: mhDividerIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-play-state: paused;
}

.mh-hero-active .mh-hero-divider {
    animation-play-state: running;
}

@keyframes mhDividerIn {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* ============================================
   ATMOSPHERIC SECTION ENHANCEMENTS
   Uses ::after on sections that already have position: relative
   ============================================ */

/* Hero — layered gradient for depth */
.hero-home::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(201, 169, 97, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(107, 29, 42, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Page headers — warm gradient accent */
.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 85% 80%, rgba(201, 169, 97, 0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 10% 20%, rgba(107, 29, 42, 0.015) 0%, transparent 40%);
    pointer-events: none;
}

/* Philosophy section — decorative gold accent line at bottom */
.philosophy-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}

/* Mission section — decorative gold accent line at top */
.mission-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}

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

@media (prefers-reduced-motion: reduce) {
    .mh-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .mh-hero-anim,
    .mh-hero-divider {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}