/* Shared interaction rhythm. Ambient artwork keeps its own choreography.
   This file loads without blocking the first paint (build.js), so it holds
   transitions and motion states only, never geometry: panel sizes and
   positions live in styles.css, where they are present before a panel opens. */
:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-exit: cubic-bezier(.4, 0, .2, 1);
    --motion-press: 100ms;
    --motion-release: 320ms;
    --motion-reveal: 460ms;
    --motion-panel: 580ms;
    --motion-close: 360ms;
    --motion-theme: 480ms;
}

body, .hero, .hero-content, .menu-section, .menu2-card,
.menu-gallery .deck-item, .work-caption {
    transition: background-color var(--motion-theme) var(--motion-ease),
        color var(--motion-theme) var(--motion-ease),
        border-color var(--motion-theme) var(--motion-ease);
}

/* Independent scale does not overwrite a control's placement transform. */
:root :is(button, summary, [role="button"], select, .theme-toggle) {
    transition: scale var(--motion-release) var(--motion-ease),
        transform var(--motion-release) var(--motion-ease),
        color 220ms ease, background-color 220ms ease,
        border-color 220ms ease, box-shadow var(--motion-release) var(--motion-ease);
    -webkit-tap-highlight-color: transparent;
}
/* --press is set on pointerdown in proportion to the control's size (motion plan B13):
   .965 for a small button, about .993 for a wide menu row. A tap on these controls gets no
   second pulse on release (PRESSED in interface-motion.js lists the same controls). */
:root :where(button, summary, [role="button"], .theme-toggle):where(:not(:disabled):not([aria-disabled="true"])):active {
    scale: var(--press, .965);
    transition-duration: var(--motion-press);
}
.menu2-add:active, .size-option:active, .addon-option:active,
.btn-primary:active, .sheet-close:active, .qty-btn:active {
    transform: none;
    opacity: 1;
}
.menu2-card-media:active, .menu-gallery .deck-item:active .showcase-plate { transform: none; }
:root :is(.showcase-open, .menu2-card-media):active { scale: .985; }
:root :is(.reader-toggle, .seo-context-summary):active { scale: .995; }
:root :is(a, button, summary, select, [role="button"]):focus-visible {
    outline-offset: 5px;
}
/* The language options became links; they keep the buttons' motion and press. */
:root .lang-dropdown-menu .lang-btn {
    transition: scale var(--motion-release) var(--motion-ease),
        transform var(--motion-release) var(--motion-ease),
        color 220ms ease, background-color 220ms ease,
        border-color 220ms ease, box-shadow var(--motion-release) var(--motion-ease);
}
:root .lang-dropdown-menu .lang-btn:active {
    scale: .965;
    transition-duration: var(--motion-press);
}
.nav-logo-img, .nav-wave::after, .brand-wave img, .footer-brand img {
    transition: filter var(--motion-release) var(--motion-ease),
        opacity var(--motion-release) var(--motion-ease), transform var(--motion-release) var(--motion-ease);
}
.nav-menu-btn span, .menu-bars i {
    transition: transform var(--motion-reveal) var(--motion-ease), background-color 220ms ease;
}
.theme-icon, .art-theme-toggle .icon {
    transition: opacity var(--motion-release) ease, transform var(--motion-reveal) var(--motion-ease);
}
/* Motion plan B2: while the other theme's photos load (never more than the
   2.5 s deadline), the toggle is aria-busy and interface-motion.js lets its
   icon breathe from the next frame on, then eases it back to rest when the
   theme commits (a CSS animation would drop to rest in one frame). */
.theme-toggle[aria-busy="true"] { cursor: progress; }
.lang-dropdown-menu {
    transform-origin: top right;
    transform: translateY(-6px) scale(.975);
    transition: opacity 220ms ease, transform var(--motion-release) var(--motion-ease),
        visibility 0s linear var(--motion-release);
}
.lang-dropdown.is-open .lang-dropdown-menu {
    transform: none;
    transition-delay: 0s;
}
.art-language.is-enhanced[open] .art-language-panel {
    animation: none;
    opacity: 0;
    transform-origin: top right;
    transform: translateY(-6px) scale(.975);
    pointer-events: none;
    transition: opacity 220ms ease, transform var(--motion-release) var(--motion-ease);
}
.art-language.is-enhanced.is-open .art-language-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.mobile-menu, .art-menu.is-enhanced .art-menu-panel {
    transition: opacity var(--motion-close) var(--motion-exit);
}
.mobile-menu.active, .art-menu.is-open .art-menu-panel {
    transition-duration: 520ms;
    transition-timing-function: var(--motion-ease);
}
.mobile-link, .art-menu-panel li a {
    transition: transform var(--motion-reveal) var(--motion-ease), opacity 300ms ease, color 180ms ease;
    letter-spacing: inherit;
}
.mobile-link:hover, .art-menu-panel a:is(:hover, :focus-visible) { letter-spacing: inherit; }
.mobile-menu.active .mobile-link, .art-menu.is-open li a { transition-delay: 0s; }
.mobile-menu.active .mobile-link:nth-child(1), .art-menu.is-open li:nth-child(1) a { transition-delay: 35ms, 35ms, 0s; }
.mobile-menu.active .mobile-link:nth-child(2), .art-menu.is-open li:nth-child(2) a { transition-delay: 65ms, 65ms, 0s; }
.mobile-menu.active .mobile-link:nth-child(3), .art-menu.is-open li:nth-child(3) a { transition-delay: 95ms, 95ms, 0s; }
.mobile-menu.active .mobile-link:nth-child(4), .art-menu.is-open li:nth-child(4) a { transition-delay: 125ms, 125ms, 0s; }
.mobile-menu.active .mobile-link:nth-child(5), .art-menu.is-open li:nth-child(5) a { transition-delay: 155ms, 155ms, 0s; }
.mobile-menu.active .mobile-link:nth-child(6), .art-menu.is-open li:nth-child(6) a { transition-delay: 185ms, 185ms, 0s; }

.item-sheet, .cart-drawer {
    transition: transform var(--motion-close) var(--motion-exit), opacity 240ms ease;
}
.item-sheet.open, .cart-drawer.open {
    transition-duration: var(--motion-panel), var(--motion-reveal);
    transition-timing-function: var(--motion-ease), ease;
}
.sheet-backdrop, .cart-backdrop {
    transition: opacity var(--motion-close) ease;
}
.cart-drawer {
    transform: translateX(24px) scale(.985);
    transform-origin: bottom right;
}
.cart-drawer.open { transform: translateX(0) scale(1); }
.cart-fab { transition: scale var(--motion-release) var(--motion-ease), box-shadow var(--motion-release) ease; }
/* No hover growth, and no scale here: a hovered fab (every tap leaves it hovered) must still
   show the :active press, since a tap gets no second pulse (motion plan B13). */
.cart-fab:hover { transform: none; }
.seo-context.motion-enhanced .seo-context-inner { animation: none; }
.seo-context-chevron, .lang-chevron, .language-chevron, .reader-icon:after,
.gallery-menu-link svg, .deck-tab::after {
    transition: transform var(--motion-reveal) var(--motion-ease);
}
/* The segmented control (home deck, menu gallery) moves as one control: the label colour takes
   the thumb's duration and curve instead of the buttons' 220 ms, which finished before the thumb
   arrived (motion plan B17). :root .deck-tab outranks the button rule above; the press keeps
   its short scale-down. */
:root .deck-tab {
    transition: color var(--motion-panel) var(--motion-ease), scale var(--motion-release) var(--motion-ease);
}
:root .deck-tab:active { transition-duration: var(--motion-panel), var(--motion-press); }
.deck-switch-thumb { transition: transform var(--motion-panel) var(--motion-ease); }
.service-link, .loyalty-tier, .loyalty-cta, .social-link, .home-link {
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease,
        transform var(--motion-release) var(--motion-ease), box-shadow var(--motion-release) ease;
}
.loyalty-tier .loyalty-tier-info {
    transition: translate var(--motion-release) var(--motion-ease);
}
.loyalty-tier:hover .loyalty-tier-info, .loyalty-tier.is-active .loyalty-tier-info { translate: 8px 0; }

@media (max-width: 720px) {
    .item-sheet { transform: translateY(32px) scale(.985); }
    .item-sheet.open { transform: translateY(0) scale(1); }
    .cart-drawer { transform: translateY(28px) scale(.985); transform-origin: bottom center; }
    .cart-drawer.open { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    :root *, :root *::before, :root *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    :root :is(button, summary, [role="button"], .theme-toggle, .lang-btn):active { scale: 1 !important; }
    /* No motion: the waiting toggle dims instead, at once. */
    .theme-toggle[aria-busy="true"] { opacity: .6; }
}