/* ================================================================
   HOSPITAL FX — удобство и анимации интерфейса
   Палитра берётся из hospital-theme.css (:root --h-*), поэтому слой
   автоматически совпадает с лоадером и остальными страницами.

   ПРАВИЛО БЕЗОПАСНОСТИ (соблюдено во всём файле):
   здесь меняются только transform / opacity / box-shadow / outline /
   background-color / color / border-color / transition / filter.
   Ни одно правило не трогает width, height, display, position, margin,
   padding или grid — то есть слой физически не может разъехать вёрстку,
   даже если селектор внезапно совпадёт с чужим элементом.
   Любое движение отключается при prefers-reduced-motion: reduce.
   ================================================================ */

:root {
    --fx-accent: var(--h-crimson, #eb2d41);
    --fx-accent-soft: var(--h-crimson-soft, #f5b0b0);
    --fx-surface: var(--h-surface, #1a1c21);
    --fx-surface-2: var(--h-surface-2, #27282e);
    --fx-border: var(--h-border, rgba(87, 97, 107, 0.25));
    --fx-border-glow: var(--h-border-glow, rgba(87, 97, 107, 0.6));
    --fx-text: var(--h-text, #dadee6);
    --fx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 1. Фокус с клавиатуры видно всегда ------------------------------- */
/* Раньше outlined-состояния терялись на тёмном фоне: при навигации Tab
   было непонятно, где ты находишься. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.sub-plan-btn:focus-visible {
    outline: 2px solid var(--fx-accent) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}

::selection {
    background: var(--fx-accent);
    color: #0b0c10;
}

/* --- 2. Выделение текста и скроллбар в тон интерфейса ------------------ */
html {
    scrollbar-color: var(--fx-surface-2) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--fx-surface-2);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--fx-border-glow);
    background-clip: content-box;
}

/* --- 3. Тап на телефоне: без подсветки и без задержки 300 мс ---------- */
@media (hover: none) {
    a, button, [role="button"], .sub-plan-btn, .cabinet-quick-btn, .site-nav-link {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* --- 4. Живой отклик на действие -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    a,
    button,
    .btn,
    .sub-plan-btn,
    .cabinet-quick-btn,
    .sub-balance-cta,
    .site-nav-link,
    .sub-balance-link,
    input,
    select,
    textarea {
        transition:
            background-color .18s var(--fx-ease),
            border-color .18s var(--fx-ease),
            color .18s var(--fx-ease),
            box-shadow .22s var(--fx-ease),
            transform .14s var(--fx-ease),
            opacity .18s var(--fx-ease);
    }

    /* Нажатие подтверждается физически: палец/мышь получают ответ до того,
       как сервер успел ответить. */
    button:active,
    .btn:active,
    .sub-plan-btn:active,
    .cabinet-quick-btn:active,
    .sub-balance-cta:active,
    .site-nav-link:active {
        transform: translateY(1px) scale(.985);
    }

    /* Карточки: подъём + акцентная тень. Тень двусторонняя (чёрная снизу,
       лаймовая по контуру) — так объект читается объёмным, а не «светящимся». */
    .product-card,
    .sub-plan-card,
    .cabinet-widget,
    .card,
    .pp-card,
    .social-card,
    .home-how-step,
    .sub-product-hero,
    .sub-balance-card,
    .sub-freeze-card {
        transition:
            transform .26s var(--fx-ease),
            box-shadow .26s var(--fx-ease),
            border-color .26s var(--fx-ease),
            background-color .26s var(--fx-ease);
        will-change: transform;
    }

    .product-card:hover,
    .sub-plan-card:hover,
    .cabinet-widget:hover,
    .card:hover,
    .pp-card:hover,
    .social-card:hover,
    .home-how-step:hover {
        transform: translateY(-4px);
        border-color: var(--fx-border-glow);
        box-shadow:
            0 18px 40px rgba(0, 0, 0, .55),
            0 0 0 1px rgba(235, 45, 65, .14);
    }

    /* Отдельная подсветка выбранного тарифа: он и так помечен классом is-hot,
       здесь добавляется только свечение при наведении. */
    .sub-plan-card.is-hot:hover,
    .product-card.featured:hover {
        box-shadow:
            0 20px 46px rgba(0, 0, 0, .6),
            0 0 0 1px rgba(235, 45, 65, .3),
            0 0 34px rgba(235, 45, 65, .12);
    }

    /* Боковое меню кабинета: подчёркивание «выезжает» из-под ссылки, а не
       появляется рывком. Верхнее меню не трогаем — у него своя подсветка
       активного пункта, и перекрывать её нельзя. */
    .cabinet-nav-link {
        position: relative;
    }

    .cabinet-nav-link::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 1px;
        background: var(--fx-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .22s var(--fx-ease);
        pointer-events: none;
    }

    .cabinet-nav-link:hover::after,
    .cabinet-nav-link.active::after {
        transform: scaleX(1);
    }

    /* Поля ввода: рамка «оживает» вместе с фокусом. */
    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--fx-accent-soft) !important;
        box-shadow: 0 0 0 3px rgba(235, 45, 65, .12);
    }

    /* Статусные индикаторы (активная подписка, заморозка) дышат медленно:
       движение с периодом 2.4 с читается как «живой», а не мигающий. */
    .sub-status-badge.on .sub-status-dot,
    .cabinet-avatar-badge,
    .sub-status-dot {
        animation: fx-pulse 2.4s var(--fx-ease) infinite;
    }

    /* Полоса заполнения подписки растёт от нуля: видно, что это прогресс. */
    .sub-scale-fill {
        transition: width .6s var(--fx-ease);
    }

    /* Появление секций при первом показе. Класс .reveal уже используется
       на главной — здесь добавляется мягкий ввод без сдвига документа. */
    .reveal {
        animation: fx-rise .5s var(--fx-ease) both;
    }
}

@keyframes fx-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

@keyframes fx-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- 5. Спокойный режим: движение выключено, читаемость остаётся ------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- 6. Печать: интерфейсные украшения не печатаем -------------------- */
@media print {
    .site-nav,
    .cabinet-sidebar,
    .sub-freeze-card,
    .topup-overlay {
        display: none !important;
    }
}

/* ================================================================
   ПЛАВНЫЕ ПЕРЕХОДЫ (04.10.2026)
   Один слой на все интерактивные элементы: раньше переходы были только у
   отдельных карточек, поэтому наведение на кнопку, ссылку или поле
   срабатывало рывком и интерфейс читался как «дёрганый».
   Набор свойств намеренно узкий (цвет, фон, рамка, тень, прозрачность,
   сдвиг) — раскладку ни одно правило не меняет, поэтому слой безопасен и
   снимается одной строкой.
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
    a, button,
    .h-btn, .h-nav-link, .h-toast, .h-card,
    input, select, textarea,
    .sub-plan-btn, .sub-plan-card, .topup-submit,
    .product-card, .cabinet-nav-link, .cabinet-quick-btn, .cabinet-btn,
    .sp-chips label, .sp-files a, .sp-mine, .sp-opt {
        transition:
            background-color .26s cubic-bezier(.22, .68, .24, 1),
            border-color .26s cubic-bezier(.22, .68, .24, 1),
            color .2s ease,
            box-shadow .32s cubic-bezier(.22, .68, .24, 1),
            opacity .26s ease,
            transform .26s cubic-bezier(.22, .68, .24, 1);
    }

    /* Кнопки и ссылки: мягкий подъём и живая тень вместо мгновенной смены цвета. */
    .h-btn:hover, .sub-plan-btn:hover, .topup-submit:hover, .cabinet-btn:hover, .cabinet-quick-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(235, 45, 65, .22);
    }
    .h-btn:active, .sub-plan-btn:active, .topup-submit:active, .cabinet-btn:active {
        transform: translateY(0);
        transition-duration: .09s;
    }

    /* Акцентная линия появляется плавно, а не включается рывком. */
    .sub-plan-card::after, .product-card::after {
        transition: opacity .3s cubic-bezier(.22, .68, .24, 1), transform .35s cubic-bezier(.22, .68, .24, 1);
    }

    /* Поля: рамка и свечение набираются постепенно. */
    input:focus, select:focus, textarea:focus {
        transition: border-color .24s ease, box-shadow .3s cubic-bezier(.22, .68, .24, 1);
    }

    /* Плавная прокрутка страницы. */
    html { scroll-behavior: smooth; }
}