:root {
    --motion-instant: 90ms;
    --motion-fast: 180ms;
    --motion-base: 320ms;
    --motion-slow: 560ms;
    --motion-page: 680ms;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-ease-soft: cubic-bezier(.33, 1, .68, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    opacity: 1;
    transform: translateZ(0);
}

body.production-page-enter {
    animation: production-page-enter var(--motion-page) var(--motion-ease) both;
}

body.production-page-leave {
    pointer-events: none;
    animation: production-page-leave 280ms ease both;
}

a,
button,
input,
textarea,
select,
.hud-panel,
.public-card,
.choice-card,
.personnel-card,
.report-list-card,
.command-list-item,
.channel-button,
.member-row,
.voice-control,
.dossier-stat-card,
.dossier-list-item,
.dossier-record-card,
.dossier-media-card {
    transition:
        color var(--motion-fast) ease,
        background-color var(--motion-base) var(--motion-ease-soft),
        border-color var(--motion-base) var(--motion-ease-soft),
        box-shadow var(--motion-base) var(--motion-ease-soft),
        opacity var(--motion-base) var(--motion-ease-soft),
        transform var(--motion-base) var(--motion-ease);
}

.reveal {
    opacity: 0;
    transform: translateY(18px) scale(.992);
    filter: blur(3px);
    transition:
        opacity var(--motion-slow) var(--motion-ease),
        transform var(--motion-slow) var(--motion-ease),
        filter var(--motion-slow) var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.hud-panel:hover,
.public-card:hover,
.choice-card:hover,
.personnel-card:hover,
.dossier-stat-card:hover,
.dossier-record-card:hover,
.dossier-media-card:hover {
    transform: translateY(-3px);
}

.hud-button:active,
button:active {
    transform: translateY(0) scale(.985);
    transition-duration: var(--motion-instant);
}

.sidebar {
    transition:
        transform 380ms var(--motion-ease),
        width 380ms var(--motion-ease),
        box-shadow 380ms var(--motion-ease);
}

.sidebar-backdrop {
    transition:
        opacity 320ms ease,
        visibility 320ms ease;
}

.command-palette,
.phoenix-lightbox,
.modal-shell,
.public-route-check {
    transition:
        opacity var(--motion-base) ease,
        visibility var(--motion-base) ease;
}

.command-palette-panel,
.phoenix-lightbox-panel,
.modal-card,
.public-route-check-card {
    transform-origin: 50% 10%;
    transition:
        opacity var(--motion-base) ease,
        transform var(--motion-base) var(--motion-ease);
}

.command-palette[hidden],
.phoenix-lightbox[hidden],
.modal-shell[hidden] {
    display: none !important;
}

.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: .35;
    transition:
        grid-template-rows var(--motion-base) var(--motion-ease),
        opacity var(--motion-base) ease;
}

.accordion-body > * {
    min-height: 0;
    overflow: hidden;
}

.accordion-item.open .accordion-body {
    grid-template-rows: 1fr;
    opacity: 1;
}

.dossier-tab-panel {
    animation: dossier-panel-enter 420ms var(--motion-ease) both;
}

.loading-panel::after,
.phoenix-loader-progress i {
    transition: width 240ms var(--motion-ease);
}

.phoenix-loader {
    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}

.phoenix-loader-card {
    transition:
        opacity 420ms ease,
        transform 520ms var(--motion-ease);
}

.phoenix-loader.is-finished .phoenix-loader-card {
    transform: translateY(-8px) scale(.985);
}

@keyframes production-page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes production-page-leave {
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes dossier-panel-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

.production-dialog {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 5, 10, .78);
    backdrop-filter: blur(14px);
    transition:
        opacity 260ms ease,
        visibility 260ms ease;
}

.production-dialog[hidden] {
    display: none;
}

.production-dialog.open {
    opacity: 1;
    visibility: visible;
}

.production-dialog-card {
    width: min(570px, 100%);
    padding: 24px;
    opacity: 0;
    border: 1px solid rgba(102, 211, 255, .46);
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(48, 170, 242, .14),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            rgba(7, 29, 48, .98),
            rgba(1, 10, 18, .99)
        );
    box-shadow:
        0 35px 100px rgba(0, 0, 0, .56),
        0 0 45px rgba(31, 151, 231, .13);
    transform: translateY(16px) scale(.975);
    transition:
        opacity 300ms ease,
        transform 360ms var(--motion-ease);
    clip-path: polygon(
        13px 0,
        100% 0,
        100% calc(100% - 13px),
        calc(100% - 13px) 100%,
        0 100%,
        0 13px
    );
}

.production-dialog-card.open {
    opacity: 1;
    transform: none;
}

.production-dialog-card h2 {
    margin: 8px 0;
    color: var(--white);
    letter-spacing: 1.5px;
}

.production-dialog-card p {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
    white-space: pre-wrap;
}

.production-dialog-card textarea {
    width: 100%;
    margin-top: 17px;
    padding: 13px;
    color: var(--white);
    border: 1px solid rgba(76, 177, 238, .27);
    background: rgba(1, 10, 18, .8);
    resize: vertical;
}

.production-dialog-card textarea:focus {
    border-color: rgba(111, 219, 255, .72);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 167, 239, .07);
}

.production-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}