/* 
 * Luxury Motion System
 * Modern, premium, calm interactions
 */

:root {
    /* Colors */
    --luxury-primary-bg: #070f24;
    --luxury-section-bg: #0b142a;
    --luxury-accent-primary: #b3a572;
    --luxury-accent-muted: #837b5c;
    --luxury-text-primary: #ffffff;
    --luxury-text-sub: rgba(255, 255, 255, 0.7);

    /* Timing & Easing */
    --lux-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --lux-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --lux-duration-fast: 200ms;
    --lux-duration-base: 300ms;
    --lux-duration-slow: 600ms;

    /* Metrics */
    --lux-lift-y: -4px;
    --lux-shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.25);
    --lux-shadow-glow: 0 0 15px rgba(179, 165, 114, 0.3);
}

/* ----------------------------------------------
 * Utilities: Scroll Reveal
 * ---------------------------------------------- */

/* Base state: Hidden and slightly down */
.lux-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--lux-duration-slow) var(--lux-ease),
        transform var(--lux-duration-slow) var(--lux-ease);
    will-change: opacity, transform;
}

/* Active state: Visible and at natural position */
.lux-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.lux-delay-100 {
    transition-delay: 100ms;
}

.lux-delay-200 {
    transition-delay: 200ms;
}

.lux-delay-300 {
    transition-delay: 300ms;
}

.lux-delay-400 {
    transition-delay: 400ms;
}

/* ----------------------------------------------
 * Utilities: Cards & Hovers
 * ---------------------------------------------- */

.lux-card-hover {
    transition: transform var(--lux-duration-base) var(--lux-ease),
        box-shadow var(--lux-duration-base) var(--lux-ease),
        border-color var(--lux-duration-base) var(--lux-ease);
    will-change: transform, box-shadow;
}

.lux-card-hover:hover {
    transform: translateY(var(--lux-lift-y));
    box-shadow: var(--lux-shadow-hover);
    border-color: rgba(179, 165, 114, 0.4) !important;
}

/* Image Zoom on Hover (add to container of img) */
.lux-img-zoom-container {
    overflow: hidden;
}

.lux-img-zoom-container img {
    transition: transform 600ms var(--lux-ease);
    will-change: transform;
}

.lux-card-hover:hover .lux-img-zoom-container img {
    transform: scale(1.05);
}

/* ----------------------------------------------
 * Utilities: CTA & Buttons
 * ---------------------------------------------- */

.lux-btn-anim {
    transition: all var(--lux-duration-fast) var(--lux-ease);
    position: relative;
    overflow: hidden;
}

.lux-btn-anim:hover {
    transform: translateY(-2px);
    box-shadow: var(--lux-shadow-glow);
    filter: brightness(1.1);
}

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

/* ----------------------------------------------
 * Utilities: Inputs
 * ---------------------------------------------- */

.lux-input-anim {
    transition: border-color var(--lux-duration-fast) var(--lux-ease),
        box-shadow var(--lux-duration-fast) var(--lux-ease);
}

.lux-input-anim:focus {
    border-color: #b3a572 !important;
    box-shadow: 0 0 0 3px rgba(179, 165, 114, 0.1) !important;
    outline: none;
}

/* ----------------------------------------------
 * Utilities: Dropdowns & Modals
 * ---------------------------------------------- */

@keyframes luxFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lux-dropdown-anim {
    animation: luxFadeInUp var(--lux-duration-fast) var(--lux-ease) forwards;
    transform-origin: top center;
}

/* ----------------------------------------------
 * Accessibility
 * ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}