/* ============================================================
   Stan Market — Premium Layer v2
   Кардинальный визуальный апгрейд поверх базовой дизайн-системы.
   ============================================================ */

/* ── Токены ──────────────────────────────────────────────── */
:root {
    --card-shadow:       0 1px 3px rgba(0, 0, 0, .06), 0 4px 18px rgba(0, 0, 0, .06);
    --card-shadow-hover: 0 10px 40px -6px rgba(248, 199, 0, .24), 0 4px 20px -4px rgba(0, 0, 0, .12);
    --dur-ui:    180ms;
    --dur-enter: 300ms;
    --spring:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Кнопки: cursor-tracking spotlight ──────────────────── */

.btn-primary {
    position:   relative;
    overflow:   hidden;
    transition:
        transform   var(--dur-ui) var(--spring),
        box-shadow  var(--dur-ui) var(--spring);
}

/* Spotlight-слой следует за курсором (позиция задаётся JS) */
.btn-primary::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(
                        circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
                        rgba(255, 255, 255, .48) 0%,
                        rgba(255, 255, 255, .0) 65%
                    );
    opacity:        0;
    transition:     opacity .18s ease;
    pointer-events: none;
}

.btn-primary:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 18px -4px rgba(248, 199, 0, .50);
}

.btn-primary:hover::after {
    opacity: 1;
}

.btn-primary:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* Небольшой lift для вторичных кнопок */
.btn:not(.btn-primary):not(.btn-dark):not(.btn-link):hover {
    transform:  translateY(-1px);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .10);
    transition: transform var(--dur-ui) var(--spring),
                box-shadow var(--dur-ui) var(--spring);
}

/* ── Карточки: глубина по умолчанию + сильный hover ─────── */

.product-card,
.company-card,
.cat-card {
    box-shadow:  var(--card-shadow);
    transition:
        transform    var(--dur-ui) var(--spring),
        box-shadow   var(--dur-ui) var(--spring),
        border-color var(--dur-ui) var(--spring),
        background   var(--dur-ui) var(--spring);
    will-change: transform;
}

.product-card:hover,
.company-card:hover,
.cat-card:hover {
    transform:    translateY(-5px);
    box-shadow:   var(--card-shadow-hover);
    border-color: rgba(248, 199, 0, .55);
}

/* Категории: тёплый фон при наведении + желтый акцент-бар */
.cat-card {
    position: relative;
    overflow: hidden;
}

.cat-card::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      3px;
    background: linear-gradient(180deg, var(--y-400, #FFD835), var(--y-600, #E5B800));
    opacity:    0;
    transform:  scaleY(.4);
    transition:
        opacity   var(--dur-ui) var(--spring),
        transform var(--dur-ui) var(--spring);
}

.cat-card:hover {
    background: linear-gradient(145deg, #fff 0%, #FFFCF0 100%);
}

.cat-card:hover::before {
    opacity:   1;
    transform: scaleY(1);
}

/* Товарные карточки: плейсхолдер изображения */
.product-img:not(img) {
    background: linear-gradient(145deg, #EEEEED 0%, #E4E9F0 100%);
}

/* ── Hero: тёплый фон + ambient orb ─────────────────────── */

.hero {
    position:     relative;
    overflow:     hidden;
    background:
        linear-gradient(150deg, rgba(255,255,255,.86) 0%, rgba(255,252,240,.72) 50%, rgba(255,248,225,.62) 100%),
        url('/design/hero-bg.png') center / cover no-repeat !important;
    border-bottom-color: rgba(248, 199, 0, .18) !important;
    padding:      72px 0 80px !important;
}

.hero::before {
    content:        '';
    position:       absolute;
    right:          -60px;
    top:            -100px;
    width:          580px;
    height:         580px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(248, 199, 0, .14) 0%, transparent 65%);
    animation:      hero-orb 10s ease-in-out infinite;
    pointer-events: none;
    z-index:        0;
}

.hero .container {
    position: relative;
    z-index:  1;
}

/* Hero heading — крупнее */
.hero h1 {
    font-size:      58px !important;
    font-weight:    200 !important;
    letter-spacing: -0.034em !important;
    line-height:    1.03 !important;
}

/* Жёлтый градиентный текст (применяется через класс в HTML) */
.text-gold {
    font-style:           normal;
    background:           linear-gradient(135deg, #b88a00 0%, var(--y-500, #F8C700) 55%, var(--y-400, #FFD835) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:      text;
}

/* ── KPI-блок главной: мини-карточки ─────────────────────── */

.kpis {
    border-top:  none !important;
    padding-top: 28px !important;
    gap:         12px !important;
}

.kpi {
    background:    #fff;
    border:        1px solid rgba(248, 199, 0, .22);
    border-radius: 12px;
    padding:       18px 14px;
    text-align:    center;
    box-shadow:    0 1px 6px rgba(0, 0, 0, .05);
}

.kpi b {
    font-size:   40px !important;
    font-weight: 200 !important;
    letter-spacing: -0.035em;
    background:  linear-gradient(135deg, var(--ink, #2B2B2B) 0%, #555 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display:     block;
}

.kpi span {
    font-size:  12px !important;
    margin-top: 2px;
    display:    block;
}

/* ── QS-панель: золотое свечение ─────────────────────────── */

.qs-panel {
    background:   linear-gradient(150deg, #fff 0%, #FFFCF0 100%) !important;
    box-shadow:   0 8px 48px -8px rgba(248, 199, 0, .22), 0 2px 20px rgba(0, 0, 0, .07) !important;
    border-color: rgba(248, 199, 0, .3) !important;
}

/* ── Шапка: постоянная тень ──────────────────────────────── */

.header {
    box-shadow: 0 1px 0 var(--line, #E5E5E5), 0 4px 24px -4px rgba(0, 0, 0, .09);
}

/* ── Brand mark: постоянный glow ─────────────────────────── */

.brand-mark {
    box-shadow:  0 2px 10px rgba(248, 199, 0, .38);
    transition:  transform var(--dur-ui) var(--spring),
                 box-shadow var(--dur-ui) var(--spring);
}

.brand:hover .brand-mark {
    transform:  rotate(-5deg) scale(1.10);
    box-shadow: 0 4px 20px rgba(248, 199, 0, .55);
}

/* ── Поисковая строка: focus glow ────────────────────────── */

.searchbar {
    transition: box-shadow var(--dur-ui) var(--spring);
}

.searchbar:focus-within {
    box-shadow: 0 0 0 3px rgba(248, 199, 0, .22), 0 4px 20px -4px rgba(0, 0, 0, .10);
}

/* ── Subnav: полоска вместо точки ────────────────────────── */

.subnav a {
    position:   relative;
    transition: color var(--dur-ui) var(--spring);
}

.subnav a.active::after {
    content:       '';
    position:      absolute;
    bottom:        -1px;
    left:          6px;
    right:         6px;
    height:        2px;
    border-radius: 2px 2px 0 0;
    background:    var(--y-500, #F8C700);
    /* перекрываем точку из базовых стилей */
    width:  auto;
    top:    auto;
    margin: 0;
}

/* ── Секции: больше воздуха ──────────────────────────────── */

.section {
    padding: 56px 0 !important;
}

.section-head {
    margin-bottom: 24px !important;
}

/* ── Scroll reveal ───────────────────────────────────────── */

.reveal {
    opacity:   0;
    transform: translateY(18px);
    transition:
        opacity   var(--dur-enter) var(--spring),
        transform var(--dur-enter) var(--spring);
    transition-delay: calc(var(--i, 0) * 44ms);
}

.reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}

/* ── Cabinet: KPI-карточки ───────────────────────────────── */

.kpi-card {
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition:
        transform   var(--dur-ui) var(--spring),
        box-shadow  var(--dur-ui) var(--spring);
}

.kpi-card::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: linear-gradient(90deg, var(--y-600, #E5B800), var(--y-400, #FFD835));
    opacity:    0;
    transition: opacity var(--dur-ui) var(--spring);
    pointer-events: none;
}

.kpi-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, .14);
}

.kpi-card:hover::after {
    opacity: 1;
}

.kpi-card .big {
    font-size:   34px !important;
    font-weight: 300 !important;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* ── Панели кабинета: тень ───────────────────────────────── */

.panel {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05), 0 4px 18px rgba(0, 0, 0, .04);
}

/* ── Таблицы: hover строк ────────────────────────────────── */

.tbl tbody tr {
    transition: background var(--dur-ui) ease;
}

.tbl tbody tr:hover td {
    background: var(--bg-soft, #F7F7F5);
}

/* ── Mobile: без lift и orb ─────────────────────────────── */

@media (max-width: 760px) {
    .product-card:hover,
    .company-card:hover,
    .cat-card:hover {
        transform:  none;
        box-shadow: var(--card-shadow);
    }

    .btn-primary:hover,
    .btn:not(.btn-primary):not(.btn-dark):not(.btn-link):hover {
        transform:  none;
        box-shadow: none;
    }

    .hero::before { display: none; }

    .hero {
        padding: 24px 0 32px !important;
    }

    .hero h1 {
        font-size: 36px !important;
    }

    .kpi b {
        font-size: 28px !important;
    }

    .section {
        padding: 28px 0 !important;
    }
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation:  none !important;
        transition: none !important;
    }

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

    .btn-primary::after {
        display: none;
    }
}

/* ── Keyframes ───────────────────────────────────────────── */

@keyframes hero-orb {
    0%, 100% { opacity: .07; transform: scale(1); }
    50%       { opacity: .12; transform: scale(1.08); }
}