/* =========================================================================
   MOTION SYSTEM — единая система плавных анимаций
   Подключается ПОСЛЕ styles.css. Содержит только то, что реально используется.
   ========================================================================= */

:root {
    /* Длительности */
    --dur-xs: 100ms;
    --dur-sm: 160ms;
    --dur-md: 240ms;
    --dur-lg: 320ms;
    --dur-xl: 420ms;

    /* Easing */
    --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);    /* Apple-like ease-out */
    --ease-in:          cubic-bezier(0.55, 0, 0.68, 0.06);
    --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);        /* Material 3 emphasized */
    --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);     /* мягкая пружина */
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1); /* лёгкий overshoot */
}

/* -------------------------------------------------------------------------
   ВКЛАДКИ — плавное переключение (вход)
   ------------------------------------------------------------------------- */
.tab-content.active {
    animation: motion-tab-in var(--dur-lg) var(--ease-spring-soft) both;
}

.tab-content.is-tab-leaving {
    animation: motion-tab-out var(--dur-sm) var(--ease-in) both;
    pointer-events: none;
}

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

@keyframes motion-tab-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-4px) scale(0.998); }
}

/* View Transitions API (Chrome/Edge/Safari TP) — нативный кроссфейд */
::view-transition-old(tab-content) {
    animation: motion-fade-out var(--dur-sm) var(--ease-in) both;
}
::view-transition-new(tab-content) {
    animation: motion-tab-in var(--dur-md) var(--ease-emphasized) both;
}
@keyframes motion-fade-out {
    to { opacity: 0; }
}

/* -------------------------------------------------------------------------
   МОДАЛКИ — открытие и закрытие
   ------------------------------------------------------------------------- */
.modal.active {
    animation: motion-overlay-in var(--dur-md) var(--ease-out) both;
}
.modal.active .modal-content {
    animation: motion-modal-in var(--dur-lg) var(--ease-spring-soft) both;
}

/* Закрытие — навешивается JS-хелпером closeModal() */
.modal.is-closing {
    animation: motion-overlay-out var(--dur-sm) var(--ease-in) both;
    pointer-events: none;
}
.modal.is-closing .modal-content {
    animation: motion-modal-out var(--dur-sm) var(--ease-in) both;
}

@keyframes motion-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes motion-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes motion-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes motion-modal-out {
    from { opacity: 1; transform: translateY(0)   scale(1);    }
    to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* -------------------------------------------------------------------------
   КАРТОЧКИ — каскадное появление stat-card / empty-state
   Строки .data-card — через rd-card-enter в motion.js (revealDataCards).
   ------------------------------------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(4px);
    transition:
        opacity var(--dur-lg) var(--ease-spring-soft),
        transform var(--dur-lg) var(--ease-spring-soft),
        filter var(--dur-lg) var(--ease-spring-soft);
    transition-delay: calc(var(--i, 0) * 38ms);
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* -------------------------------------------------------------------------
   РАЗВОРАЧИВАНИЕ блока привязанных реквизитов
   Грид-трюк grid-template-rows 0fr → 1fr — без JS-замера высоты
   ------------------------------------------------------------------------- */
.linked-requisites-container {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top-color: transparent !important;
    transition:
        grid-template-rows var(--dur-lg) var(--ease-spring-soft),
        opacity var(--dur-md) var(--ease-out),
        margin-top var(--dur-md) var(--ease-out),
        padding-top var(--dur-md) var(--ease-out),
        border-top-color var(--dur-sm) var(--ease-out);
}

.linked-requisites-container.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top-color: var(--border) !important;
}

.linked-requisites-container > * {
    min-height: 0;
    overflow: hidden;
}

.linked-requisites-container.is-expanded .linked-requisite-item {
    animation: motion-list-item-in var(--dur-md) var(--ease-spring-soft) both;
    animation-delay: calc(var(--i, 0) * 42ms);
}

@keyframes motion-list-item-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-expand-btn .expand-icon {
    transition: transform var(--dur-md) var(--ease-spring-soft);
}

.card-expand-btn[aria-expanded="true"],
.card-expand-btn.is-expanded {
    color: var(--primary);
    background: var(--bg-secondary);
}

.card-expand-btn[aria-expanded="true"] .expand-icon,
.card-expand-btn.is-expanded .expand-icon {
    transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   GRID — плавная смена страниц / поиск / фильтры
   ------------------------------------------------------------------------- */
.motion-grid {
    will-change: opacity, transform, filter;
}

.motion-grid.is-swapping-out {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
    filter: blur(2.5px);
    pointer-events: none;
    transition:
        opacity var(--dur-sm) var(--ease-in),
        transform var(--dur-sm) var(--ease-in),
        filter var(--dur-sm) var(--ease-in);
}

.motion-grid.is-swapping-in {
    animation: motion-grid-in var(--dur-lg) var(--ease-spring-soft) both;
}

@keyframes motion-grid-in {
    from { opacity: 0; transform: translateY(12px) scale(0.988); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* -------------------------------------------------------------------------
   ПАГИНАЦИЯ
   ------------------------------------------------------------------------- */
.pagination {
    animation: motion-fade-up var(--dur-md) var(--ease-spring-soft) both;
}

.pagination-btn {
    transition:
        transform var(--dur-xs) var(--ease-spring-soft),
        background-color var(--dur-sm) var(--ease-out),
        border-color var(--dur-sm) var(--ease-out),
        box-shadow var(--dur-sm) var(--ease-out),
        color var(--dur-sm) var(--ease-out);
}

.pagination-btn:hover {
    transform: translateY(-1px);
}

.pagination-btn:active {
    transform: scale(0.94) translateY(0);
}

.pagination-btn.active {
    animation: motion-pagination-active var(--dur-md) var(--ease-spring) both;
}

@keyframes motion-pagination-active {
    0%   { transform: scale(0.92); }
    55%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

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

/* -------------------------------------------------------------------------
   СТАТИСТИКА — блоки без enter-анимации (статичная вёрстка при открытии/обновлении)
   ------------------------------------------------------------------------- */
.rd-stats-kpi .rd-kpi-card,
.rd-stats-daterange,
.rd-stats-head-row,
#statistics-tab .stat-card {
  animation: none !important;
}

.rd-motion-soft-out {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
    filter: blur(3px);
    transition:
        opacity var(--dur-sm) var(--ease-in),
        transform var(--dur-sm) var(--ease-in),
        filter var(--dur-sm) var(--ease-in);
}

.rd-motion-soft-in {
  animation: none !important;
}

@keyframes motion-stats-block-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.988);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes motion-stats-card-in {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.984);
        filter: blur(5px);
    }
    62% {
        opacity: 1;
        transform: translateY(-2px) scale(1.008);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.content-header,
.cards-statistics {
    animation: motion-section-in var(--dur-md) var(--ease-spring-soft) both;
}

/* Grid анимируется через revealDataCards / скелетоны — без второго fade поверх tab-in */
.tab-content.active > .cards-grid {
    animation: none !important;
}

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

/* -------------------------------------------------------------------------
   БОКОВЫЕ ВКЛАДКИ
   ------------------------------------------------------------------------- */
body.authenticated .tabs button {
    transition:
        background-color var(--dur-sm) var(--ease-out),
        color var(--dur-sm) var(--ease-out),
        box-shadow var(--dur-md) var(--ease-spring-soft),
        transform var(--dur-xs) var(--ease-spring-soft) !important;
}

body.authenticated .tabs button:active {
    transform: scale(0.97) !important;
}

body.authenticated .tabs button.active {
    animation: motion-sidebar-tab var(--dur-md) var(--ease-spring-soft) both;
}

@keyframes motion-sidebar-tab {
    0%   { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* -------------------------------------------------------------------------
   ТУМБЛЕРЫ
   ------------------------------------------------------------------------- */
.traffic-toggle-slider,
.status-toggle-slider {
    transition:
        background var(--dur-md) var(--ease-spring-soft),
        background-color var(--dur-md) var(--ease-spring-soft),
        border-color var(--dur-md) var(--ease-out),
        box-shadow var(--dur-md) var(--ease-spring-soft) !important;
}

.traffic-toggle-slider::before,
.status-toggle-slider::before {
    transition:
        transform var(--dur-md) var(--ease-spring-soft),
        box-shadow var(--dur-md) var(--ease-out) !important;
}

.motion-toggle-pulse {
    animation: motion-toggle-pulse var(--dur-lg) var(--ease-spring-soft);
}

@keyframes motion-toggle-pulse {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(1.14); }
    100% { filter: brightness(1); }
}

/* -------------------------------------------------------------------------
   КОПИРОВАНИЕ — flash на элементе
   ------------------------------------------------------------------------- */
.motion-copy-flash {
    animation: motion-copy-pulse var(--dur-md) var(--ease-spring) both;
}

@keyframes motion-copy-pulse {
    0%   { transform: scale(1); box-shadow: none; }
    35%  { transform: scale(1.025); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3B82F6) 28%, transparent); }
    100% { transform: scale(1); box-shadow: none; }
}

/* -------------------------------------------------------------------------
   TOAST — spring-вход
   ------------------------------------------------------------------------- */
.rd-toast.rd-toast-in {
    animation: motion-toast-in var(--dur-xl) var(--ease-spring-soft) both;
    transition: none !important;
}

.rd-toast.rd-toast-out {
    animation: motion-toast-out var(--dur-sm) var(--ease-in) both;
    transition: none !important;
}

@keyframes motion-toast-in {
    0%   { opacity: 0; transform: translateX(36px) scale(0.94); filter: blur(3px); }
    62%  { opacity: 1; transform: translateX(-3px) scale(1.015); filter: blur(0); }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}

@keyframes motion-toast-out {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to   { opacity: 0; transform: translateX(28px) scale(0.96); filter: blur(2px); }
}

/* -------------------------------------------------------------------------
   СМЕНА ТЕМЫ
   ------------------------------------------------------------------------- */
html.motion-theme-switch,
html.motion-theme-switch *:not(.tabs):not(.tabs *) {
    transition:
        background-color var(--dur-lg) var(--ease-emphasized),
        color var(--dur-lg) var(--ease-emphasized),
        border-color var(--dur-lg) var(--ease-emphasized),
        fill var(--dur-lg) var(--ease-emphasized),
        stroke var(--dur-lg) var(--ease-emphasized),
        box-shadow var(--dur-lg) var(--ease-emphasized) !important;
}

/* Лого-сайдбар: не трогаем transition/animation при смене темы */
html.motion-theme-switch body.authenticated .tabs::before {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur-lg);
    animation-timing-function: var(--ease-emphasized);
}

/* root VT не используется для темы — правило оставлено для совместимости */

/* -------------------------------------------------------------------------
   Атмосферный фон: подсветки, сетка, плавающие orbы.
   Слои фиксированы на вьюпорт, не перехватывают клики, лежат под контентом.
   Активируются в обеих темах со своими палитрами.
   ------------------------------------------------------------------------- */
.atmo-bg,
.atmo-grid,
.atmo-orb {
    display: none;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: -1;
}

[data-theme="dark"] .atmo-bg,
[data-theme="dark"] .atmo-grid,
[data-theme="dark"] .atmo-orb,
[data-theme="orange"] .atmo-bg,
[data-theme="orange"] .atmo-grid,
[data-theme="orange"] .atmo-orb {
    display: block;
}

/* ===== ТЁМНАЯ ТЕМА: синие подсветки в цвете --primary: #4681ff ===== */
[data-theme="dark"] .atmo-bg {
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(70, 129, 255, 0.18), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(99, 102, 241, 0.12), transparent 65%),
        radial-gradient(50% 50% at 0% 100%, rgba(70, 129, 255, 0.08), transparent 70%);
}

[data-theme="dark"] .atmo-grid {
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 75%);
            mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 75%);
}

[data-theme="dark"] .atmo-orb {
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
}

[data-theme="dark"] .atmo-orb--1 {
    top: 10%;
    left: 6%;
    width: min(72vw, 320px);
    height: min(72vw, 320px);
    background: rgba(70, 129, 255, 0.22);
    animation: atmo-orb-drift 22s ease-in-out infinite;
}

[data-theme="dark"] .atmo-orb--2 {
    bottom: 12%;
    right: 8%;
    top: auto;
    left: auto;
    width: min(55vw, 240px);
    height: min(55vw, 240px);
    background: rgba(129, 140, 248, 0.18);
    animation: atmo-orb-drift-alt 28s ease-in-out infinite;
}

/* ===== СВЕТЛАЯ ТЕМА (orange): тёплые персиково-оранжевые подсветки ===== */
[data-theme="orange"] .atmo-bg {
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(249, 115, 22, 0.14), transparent 70%),
        radial-gradient(55% 45% at 100% 100%, rgba(251, 146, 60, 0.12), transparent 65%),
        radial-gradient(50% 50% at 0% 100%, rgba(252, 187, 0, 0.10), transparent 70%);
}

[data-theme="orange"] .atmo-grid {
    opacity: 0.05;
    background-image:
        linear-gradient(rgba(139, 111, 71, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 111, 71, 0.35) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 75%);
            mask-image: radial-gradient(75% 65% at 50% 45%, #000 20%, transparent 75%);
}

[data-theme="orange"] .atmo-orb {
    border-radius: 50%;
    filter: blur(72px);
    will-change: transform;
}

[data-theme="orange"] .atmo-orb--1 {
    top: 10%;
    left: 6%;
    width: min(72vw, 320px);
    height: min(72vw, 320px);
    background: rgba(249, 115, 22, 0.20);
    animation: atmo-orb-drift 22s ease-in-out infinite;
}

[data-theme="orange"] .atmo-orb--2 {
    bottom: 12%;
    right: 8%;
    top: auto;
    left: auto;
    width: min(55vw, 240px);
    height: min(55vw, 240px);
    background: rgba(251, 146, 60, 0.18);
    animation: atmo-orb-drift-alt 28s ease-in-out infinite;
}

@keyframes atmo-orb-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(2.5vw, -1.2vh, 0) scale(1.03);
    }
    66% {
        transform: translate3d(3.5vw, 1.5vh, 0) scale(1.05);
    }
}

@keyframes atmo-orb-drift-alt {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    40% {
        transform: translate3d(-2vw, 1.8vh, 0) scale(1.04);
    }
    75% {
        transform: translate3d(-3.5vw, -1vh, 0) scale(1.02);
    }
}

/* -------------------------------------------------------------------------
   Уважение к настройкам пользователя (reduced motion)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}