/*
 * MAHARAJAH PREMIUM MOTION SYSTEM
 *
 * This file contains presentation-only motion. Business state remains in
 * sources/js/main.js and server-rendered markup. Keep this stylesheet loaded
 * after style.css and bootstrap-refactor.css.
 */

:root {
    --motion-gold: #c79232;
    --motion-gold-soft: rgba(199, 146, 50, .24);
    --motion-ease-premium: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-emphasis: cubic-bezier(.34, 1.56, .64, 1);
    --motion-duration-fast: 240ms;
    --motion-duration-base: 640ms;
    --motion-duration-slow: 960ms;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Page entrance */
.motion-enabled .site-header {
    transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease;
}

.motion-enabled .site-header.motion-scrolled {
    background: rgba(3, 3, 3, .92);
    border-bottom-color: rgba(199, 146, 50, .18);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.motion-enabled .site-header .brand {
    animation: premium-soft-in .72s var(--motion-ease-premium) both;
}

@media (min-width: 1400px) {
    .motion-enabled .site-header .navbar-collapse {
        animation: premium-soft-in .78s var(--motion-ease-premium) 80ms both;
    }
}

.motion-enabled .site-header .brand img,
.motion-enabled .site-footer .footer-brand img {
    transition: filter .45s ease, transform .65s var(--motion-ease-premium);
}

.motion-enabled .site-header .brand:hover img,
.motion-enabled .site-header .brand:focus-visible img,
.motion-enabled .site-footer .footer-brand:hover img,
.motion-enabled .site-footer .footer-brand:focus-visible img {
    filter: brightness(1.12) drop-shadow(0 8px 18px rgba(199, 146, 50, .18));
    transform: translateY(-2px) scale(1.025);
}

/* Intersection-based reveals. JS adds these classes only when motion is active. */
.motion-enabled .motion-reveal {
    --motion-distance: 28px;
    --motion-delay: 0ms;
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, var(--motion-distance), 0);
    transition:
        opacity var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay),
        filter var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay),
        transform var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay);
    will-change: opacity, filter, transform;
}

.motion-enabled .motion-reveal.motion-from-left {
    transform: translate3d(-34px, 0, 0);
}

.motion-enabled .motion-reveal.motion-from-right {
    transform: translate3d(34px, 0, 0);
}

.motion-enabled .motion-reveal.motion-scale {
    transform: translate3d(0, 18px, 0) scale(.975);
}

.motion-enabled .motion-reveal.is-revealed {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

/*
 * Branch cards use the shared reveal transition with their JS-assigned
 * stagger. Do not add a keyframe animation here: running an animation and a
 * transition on opacity/transform at the same time produces a visible flash.
 */

/* Hero choreography */
.motion-enabled .motion-hero-item {
    animation: premium-hero-rise 1s var(--motion-ease-premium) both;
    animation-delay: calc(140ms + (var(--motion-index, 0) * 105ms));
}

.motion-enabled .mh-hero .mh-benefits,
.motion-enabled .mh-hero .mh-slider {
    animation: premium-soft-in 1.15s var(--motion-ease-premium) .5s both;
}

.motion-enabled .menu-hero::after,
.motion-enabled .restaurant-hero::after,
.motion-enabled .auth-stage::after {
    animation: premium-overlay-breathe 7s ease-in-out infinite alternate;
}

/* Cards and media */
.motion-enabled :is(
    .mh-branch-card,
    .menu-product,
    .mh-dish,
    .settings-card,
    .checkout-panel,
    .account-addresses,
    .account-orders,
    .account-orders-summary,
    .account-all-orders,
    .contact-facts,
    .contact-form,
    .contact-directions,
    .restaurant-facts,
    .restaurant-directions,
    .order-items,
    .order-totals
) {
    transition:
        opacity var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay, 0ms),
        filter var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay, 0ms),
        border-color .42s ease,
        box-shadow .55s var(--motion-ease-premium),
        transform var(--motion-duration-slow) var(--motion-ease-premium) var(--motion-delay, 0ms);
}

@media (hover: hover) and (pointer: fine) {
    .motion-enabled :is(
        .mh-branch-card,
        .menu-product,
        .mh-dish,
        .settings-card,
        .checkout-panel,
        .contact-directions,
        .restaurant-directions
    ):hover {
        border-color: rgba(199, 146, 50, .5);
        box-shadow: 0 24px 55px rgba(0, 0, 0, .28), 0 0 0 1px rgba(199, 146, 50, .06);
        transform: translate3d(0, -6px, 0);
    }

    .motion-enabled :is(.mh-branch-card, .menu-product, .mh-dish, .restaurant-gallery-item) img {
        transition: filter .7s ease, transform 1s var(--motion-ease-premium);
    }

    .motion-enabled :is(.mh-branch-card, .menu-product, .mh-dish, .restaurant-gallery-item):hover img {
        filter: brightness(1.06) saturate(1.04);
        transform: scale(1.045);
    }
}

/* Buttons and primary links */
.motion-enabled :is(
    .mh-button,
    .mh-order-now,
    .menu-reserve,
    .restaurant-reserve,
    .nav-account-button,
    .auth-submit,
    .checkout-submit,
    .reservation-submit,
    .settings-card-save,
    .settings-delete,
    .contact-form button,
    .cart-drawer-summary > a,
    .btn-gold
) {
    transition:
        color var(--motion-duration-fast) ease,
        background-color var(--motion-duration-fast) ease,
        border-color var(--motion-duration-fast) ease,
        box-shadow .4s var(--motion-ease-premium),
        filter var(--motion-duration-fast) ease,
        transform .32s var(--motion-ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .motion-enabled :is(
        .mh-button,
        .menu-reserve,
        .restaurant-reserve,
        .nav-account-button,
        .auth-submit,
        .checkout-submit,
        .reservation-submit,
        .settings-card-save,
        .contact-form button,
        .cart-drawer-summary > a,
        .btn-gold
    ):not(:disabled):not(.disabled):hover {
        box-shadow: 0 12px 28px rgba(199, 146, 50, .22);
        transform: translate3d(0, -2px, 0);
    }

    .motion-enabled :is(
        .mh-button,
        .mh-order-now,
        .menu-reserve,
        .restaurant-reserve,
        .auth-submit,
        .checkout-submit,
        .reservation-submit,
        .settings-card-save,
        .contact-form button
    ):hover :is(.bi-arrow-right, .bi-arrow-right-circle) {
        transform: translateX(4px);
    }
}

.motion-enabled :is(
    .mh-button,
    .mh-order-now,
    .menu-reserve,
    .restaurant-reserve,
    .nav-account-button,
    .auth-submit,
    .checkout-submit,
    .reservation-submit,
    .settings-card-save,
    .settings-delete,
    .contact-form button,
    .cart-drawer-summary > a,
    .btn-gold
):not(:disabled):not(.disabled):active {
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
    transform: translate3d(0, 1px, 0) scale(.985);
}

.motion-enabled :is(.bi-arrow-right, .bi-arrow-right-circle) {
    display: inline-block;
    transition: transform .35s var(--motion-ease-premium);
}

/* Forms */
.motion-enabled :is(
    .form-control,
    .form-select,
    .reservation-form input,
    .reservation-form textarea,
    .auth-view input
) {
    transition:
        color .25s ease,
        background-color .35s ease,
        border-color .3s ease,
        box-shadow .4s var(--motion-ease-premium),
        transform .35s var(--motion-ease-premium);
}

.motion-enabled :is(
    .form-control,
    .form-select,
    .reservation-form input,
    .reservation-form textarea,
    .auth-view input
):focus {
    box-shadow: 0 0 0 3px rgba(199, 146, 50, .1), 0 12px 30px rgba(0, 0, 0, .14);
    transform: translateY(-1px);
}

.motion-enabled :is(.contact-field, .contact-message-field, .settings-card label, .auth-view label) {
    transition: color .3s ease, transform .4s var(--motion-ease-premium);
}

.motion-enabled :is(.contact-field, .contact-message-field, .settings-card label, .auth-view label):focus-within {
    color: var(--motion-gold);
}

/* Dropdowns, footer accordion and overlays */
.motion-enabled :is(.nav-dropdown-menu, .language-options, .menu-restaurant-options):not([hidden]) {
    animation: premium-dropdown-in .32s var(--motion-ease-premium) both;
    transform-origin: top center;
}

.motion-enabled .footer-accordion-panel a {
    transition: color .25s ease, opacity .25s ease, transform .35s var(--motion-ease-premium);
}

@media (hover: hover) and (pointer: fine) {
    .motion-enabled .footer-accordion-panel a:hover {
        transform: translateX(4px);
    }
}

.motion-enabled .reservation-modal.open .reservation-dialog {
    animation: premium-dialog-in .5s var(--motion-ease-premium) both;
}

.motion-enabled .auth-view.motion-view-enter {
    animation: premium-auth-view-in .55s var(--motion-ease-premium) both;
}

.motion-enabled .cart-drawer-root.open .cart-drawer-item {
    animation: premium-drawer-item-in .55s var(--motion-ease-premium) both;
    animation-delay: calc(80ms + (var(--motion-index, 0) * 55ms));
}

.motion-enabled .cart-link {
    transition: color .3s ease, border-color .3s ease, box-shadow .45s ease, transform .4s var(--motion-ease-emphasis);
}

@media (hover: hover) and (pointer: fine) {
    .motion-enabled .cart-link:hover {
        box-shadow: 0 10px 32px var(--motion-gold-soft);
        transform: translateY(-3px) rotate(-3deg);
    }
}

@keyframes premium-hero-rise {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes premium-soft-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes premium-overlay-breathe {
    from { opacity: .82; }
    to { opacity: 1; }
}

@keyframes premium-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes premium-dialog-in {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes premium-auth-view-in {
    from {
        opacity: 0;
        filter: blur(4px);
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes premium-drawer-item-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Touch layouts avoid compositor-heavy filters and translated page sections.
   Opacity preserves the reveal without interfering with native scrolling. */
@media (max-width: 1399.98px) {
    html.motion-enabled {
        scroll-behavior: auto !important;
    }

    .motion-enabled .motion-reveal,
    .motion-enabled .motion-reveal.motion-from-left,
    .motion-enabled .motion-reveal.motion-from-right,
    .motion-enabled .motion-reveal.motion-scale {
        filter: none;
        transform: none;
        overflow-anchor: none;
        transition:
            opacity .52s ease-out var(--motion-delay),
            border-color .32s ease,
            box-shadow .32s ease;
        will-change: opacity;
    }

    .motion-enabled .motion-reveal.is-revealed {
        filter: none;
        transform: none;
        will-change: auto;
    }

    .motion-enabled .motion-hero-item {
        animation-name: premium-mobile-fade;
        animation-duration: .68s;
    }

    .motion-enabled .menu-hero::after,
    .motion-enabled .restaurant-hero::after,
    .motion-enabled .auth-stage::after {
        animation: none;
    }
}

@keyframes premium-mobile-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Accessibility: disable both this layer and existing decorative motion. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .motion-enabled .motion-reveal,
    .motion-enabled .motion-reveal.motion-from-left,
    .motion-enabled .motion-reveal.motion-from-right,
    .motion-enabled .motion-reveal.motion-scale {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}