/* Sitewide luxury motion — CSS-first, respects prefers-reduced-motion */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration: 0.65s;
    --motion-stagger: 0.06s;
}

/* Soft header when scrolled */
.main-header {
    transition:
        background 0.35s var(--motion-ease),
        box-shadow 0.35s var(--motion-ease),
        border-color 0.35s var(--motion-ease),
        backdrop-filter 0.35s var(--motion-ease);
}

.main-header.is-scrolled {
    background: rgba(8, 36, 39, 0.78);
    border-bottom-color: rgba(218, 178, 93, 0.18);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

html[data-theme="light"] .main-header.is-scrolled {
    background: rgba(250, 244, 232, 0.96);
    border-bottom-color: rgba(160, 120, 42, 0.38);
    box-shadow: 0 6px 22px rgba(55, 38, 12, 0.09);
}

/* Scroll reveal — only after html.js (inline in layout). Without JS, content stays visible. */
html.js [data-reveal]:not(.is-inview) {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease);
    will-change: opacity, transform;
}

html.js [data-reveal].is-inview {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

html.js [data-reveal="fade"]:not(.is-inview) {
    transform: none;
}

html.js [data-reveal="left"]:not(.is-inview) {
    transform: translateX(18px);
}

html.js [data-reveal="right"]:not(.is-inview) {
    transform: translateX(-18px);
}

html.js [data-reveal].is-inview[data-reveal="left"],
html.js [data-reveal].is-inview[data-reveal="right"] {
    transform: translateX(0);
}

[data-reveal-delay="1"] { transition-delay: calc(var(--motion-stagger) * 1); }
[data-reveal-delay="2"] { transition-delay: calc(var(--motion-stagger) * 2); }
[data-reveal-delay="3"] { transition-delay: calc(var(--motion-stagger) * 3); }
[data-reveal-delay="4"] { transition-delay: calc(var(--motion-stagger) * 4); }
[data-reveal-delay="5"] { transition-delay: calc(var(--motion-stagger) * 5); }
[data-reveal-delay="6"] { transition-delay: calc(var(--motion-stagger) * 6); }

/* Hover micro-interactions (interactive surfaces only) */
.btn-gold,
.btn-ghost,
.primary-btn,
.secondary-btn,
.blog-card-more,
.mag-btn,
.btn-flip,
.btn-pdf,
.home-explore__link,
.header-icon-btn {
    transition:
        transform 0.22s var(--motion-ease),
        box-shadow 0.22s var(--motion-ease),
        border-color 0.22s var(--motion-ease),
        background 0.22s var(--motion-ease),
        color 0.22s var(--motion-ease),
        filter 0.22s var(--motion-ease);
}

.btn-gold:hover,
.primary-btn:hover {
    transform: translateY(-2px);
}

.btn-ghost:hover,
.secondary-btn:hover {
    transform: translateY(-1px);
}

.lux-lift {
    transition:
        transform 0.28s var(--motion-ease),
        box-shadow 0.28s var(--motion-ease),
        border-color 0.28s var(--motion-ease);
}

.lux-lift:hover {
    transform: translateY(-4px);
}

/* Mobile nav active indicator soft grow */
.mobile-nav .nav-item {
    transition: color 0.25s var(--motion-ease), background 0.25s var(--motion-ease);
}

.mobile-nav .nav-item.active::after {
    transition: width 0.28s var(--motion-ease), opacity 0.28s var(--motion-ease);
}

@media (prefers-reduced-motion: reduce) {
    .site-main,
    .main-header,
    html.js [data-reveal],
    .btn-gold,
    .btn-ghost,
    .primary-btn,
    .secondary-btn,
    .lux-lift,
    .mobile-nav .nav-item,
    .mobile-nav .nav-item.active::after,
    .gradient-orb,
    .background-animation .gradient-orb {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    html.js [data-reveal] {
        opacity: 1 !important;
        will-change: auto;
    }

    .btn-gold:hover,
    .primary-btn:hover,
    .btn-ghost:hover,
    .secondary-btn:hover,
    .lux-lift:hover {
        transform: none !important;
    }
}