:root {
    --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
    --motion-ease-soft: cubic-bezier(.2, .72, .3, 1);
}

body > .topbar,
body > .site-topbar,
.home-topbar {
    animation: motion-fade-in 520ms var(--motion-ease-out) both;
}

body > .hero,
body > .masthead,
body > .event-hero,
.home-art {
    animation: motion-hero-in 760ms var(--motion-ease-out) both;
}

.hero-brand,
.hero-content,
.masthead-brand,
.brand,
.event-brand,
.home-intro {
    animation: motion-brand-in 820ms 100ms var(--motion-ease-out) both;
}

body > main,
body > .page {
    animation: motion-content-in 700ms 120ms var(--motion-ease-out) both;
}

.brand-logo-wrap,
.logo-wrap,
.masthead-logo,
.hero-logo {
    transform-origin: center;
    animation: motion-logo-breathe 5.6s ease-in-out infinite !important;
}

.tab-panel:not([hidden]),
.result.show,
.lookup-panel:not([hidden]),
.ui-panel:not([hidden]) {
    animation: motion-panel-in 340ms var(--motion-ease-soft) both;
}

dialog[open] .dialog-inner {
    animation: motion-dialog-in 280ms var(--motion-ease-out) both;
}

button,
.back,
.tab,
.date-option,
.date-tab,
.desktop-session,
.ticket-picker,
.seat-card,
.file-trigger,
.qr-frame {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease,
        transform 220ms var(--motion-ease-soft);
}

@media (hover:hover) and (pointer:fine) {
    .submit:hover,
    .primary-button:hover,
    .dialog-confirm:hover,
    .dialog-close:hover,
    .start:hover,
    .action-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    }

    .back:hover,
    .icon-button:hover,
    .ghost-button:hover,
    .copy:hover,
    .tab:hover {
        transform: translateY(-1px);
    }
}

button:active,
.back:active,
.tab:active,
.date-option:active,
.date-tab:active {
    transform: scale(.985);
}

@keyframes motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motion-hero-in {
    from { opacity: 0; filter: brightness(.84); }
    to { opacity: 1; filter: brightness(1); }
}

@keyframes motion-brand-in {
    from { opacity: 0; transform: translateY(10px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-content-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-logo-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}