/**
 * строй.онлайн — Motion + elevation layer
 * Подключать после site-visual-v2.css.
 * Контракт: docs/DESIGN_SYSTEM.md (Motion / Elevation).
 */
:root {
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 360ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.1), 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-nav: 0 4px 18px rgba(15, 23, 42, 0.08);
    --shadow-nav-scrolled: 0 8px 28px rgba(15, 23, 42, 0.12);
    --shadow-surface: var(--shadow-md);
    --shadow-surface-hover: var(--shadow-hover);
}

[data-theme="dark"] {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.38);
    --shadow-nav: 0 4px 18px rgba(0, 0, 0, 0.35);
    --shadow-nav-scrolled: 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-surface: var(--shadow-md);
    --shadow-surface-hover: var(--shadow-hover);
}

/* Hover/chrome motion only — never animate theme color/background (contrast mid-frame). */
.site-body .card,
.site-body .surface-card,
.site-body .btn,
.site-body .nav-link,
.site-body .form-control,
.site-body .form-select,
.site-body .alert,
.site-navbar-inner {
    transition:
        border-color var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

/* ——— Wave 1: micro-interactions ——— */
.site-body .btn:not(.btn-close):not(.btn-link),
.site-body .btn-sm:not(.btn-close):not(.btn-link),
.site-body .btn-lg:not(.btn-close):not(.btn-link) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm) !important;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out) !important;
}

.site-body .btn-primary:hover,
.site-body .btn-primary:focus-visible,
.site-body .nav-link-cta:hover,
.site-body .nav-link-cta:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

.site-body .btn-primary:active,
.site-body .nav-link-cta:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

.site-body .btn-outline-primary:hover,
.site-body .btn-outline-secondary:hover,
.site-body .btn-outline-primary:focus-visible,
.site-body .btn-outline-secondary:focus-visible {
    transform: translateY(-1px) !important;
}

.site-nav-links .nav-link {
    transition: transform var(--motion-base) var(--ease-out);
}

.site-navbar-inner {
    box-shadow: var(--shadow-nav) !important;
    transition: box-shadow var(--motion-base) var(--ease-out);
}

.site-navbar.is-scrolled .site-navbar-inner {
    box-shadow: var(--shadow-nav-scrolled) !important;
}

.card,
.surface-card,
.directory-card,
.mobile-data-card,
.tender-card,
.home-guest-hero__content,
.home-guest-hero__panel,
.home-guest-steps,
.auth-card,
.mikhalych-thread-card {
    box-shadow: var(--shadow-md) !important;
    transition:
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out),
        border-color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-slow) var(--ease-standard) !important;
}

a.directory-card:hover,
a.mobile-data-card:hover,
a.tender-card:hover,
a.site-clickable-card:hover,
.directory-card-grid .directory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover) !important;
}

.site-clickable-row {
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.alert,
.surface-alert,
.foreman-panel-alert,
.foreman-panel-alert--soft {
    animation: motion-alert-in var(--motion-base) var(--ease-out);
}

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

[data-skeleton-content] {
    animation: motion-fade-in var(--motion-slow) var(--ease-out);
}

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

/* ——— Wave 2: marketing reveal ——— */
.page-marketing .motion-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
}

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

.page-marketing .motion-stagger > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
}

.page-marketing .motion-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.page-marketing .motion-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.page-marketing .motion-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.page-marketing .motion-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.page-marketing .motion-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.page-marketing .motion-stagger.is-visible > *:nth-child(n+6) { transition-delay: 280ms; }

.page-marketing .motion-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.page-marketing .hero-visual-card img,
.page-marketing .hero-split .hero-visual-card img {
    transition: transform 8s linear;
}

.page-marketing .hero-visual-card:hover img {
    transform: scale(1.03);
}

.page-marketing.site-body::after {
    background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(180, 83, 9, 0.08), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(15, 23, 42, 0.04), transparent 50%),
        linear-gradient(180deg, rgba(243, 240, 235, 0.15), transparent 40%);
    pointer-events: none;
}

[data-theme="dark"] .page-marketing.site-body::after {
    background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(232, 160, 84, 0.1), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(15, 23, 42, 0.35), transparent 50%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.25), transparent 40%);
}

.landing-review-card {
    transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.landing-reviews-dot {
    transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.landing-reviews-dot--active {
    transform: scale(1.15);
}

.calculator-section .calc-tab-btn {
    transition:
        background-color var(--motion-base) var(--ease-out),
        color var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out) !important;
}

.home-guest-steps li {
    transition: transform var(--motion-base) var(--ease-out), color var(--motion-fast) var(--ease-standard);
}

/* ——— Wave 3: directory / tenders ——— */
.page-directory .directory-filter-row .card,
.tenders-open-filters.card,
.page-app .card.mb-3 {
    transition: box-shadow var(--motion-base) var(--ease-out);
}

.page-app .directory-card-grid.motion-stagger > .directory-card,
.page-app .directory-card-grid.motion-stagger > a {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.page-app .directory-card-grid.motion-stagger.is-visible > .directory-card,
.page-app .directory-card-grid.motion-stagger.is-visible > a {
    opacity: 1;
    transform: translateY(0);
}

.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(1) { transition-delay: 0ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(2) { transition-delay: 40ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(3) { transition-delay: 80ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(4) { transition-delay: 120ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(5) { transition-delay: 160ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(6) { transition-delay: 200ms; }
.page-app .directory-card-grid.motion-stagger.is-visible > :nth-child(n+7) { transition-delay: 220ms; }

.site-body .card:hover,
.site-body .surface-card:hover,
.site-body .project-card:hover,
.site-body .home-tender-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-hover) !important;
}

.tenders-open-status-chip {
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}

.tenders-open-status-chip:hover,
.tenders-open-status-chip--active {
    transform: translateY(-1px);
}

.site-navbar.is-scrolled + .site-main .tenders-open-filters,
.directory-filters-sticky.is-stuck {
    box-shadow: var(--shadow-md);
}

.directory-card__quiet {
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.directory-card:hover .directory-card__quiet {
    opacity: 1;
}

.badge.surface-badge,
.tenders-open-list-item__status-new,
.tenders-open-list-item__status-active,
.directory-role-badge {
    transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-standard);
}

/* ——— Wave 4: chat / auth / cabinet ——— */
.page-mikhalych-chat .foreman-scenario-chip,
.page-mikhalych-chat .foreman-starter__btn {
    transition:
        transform var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard) !important;
}

.page-mikhalych-chat .foreman-scenario-chip:hover,
.page-mikhalych-chat .foreman-starter__btn:hover {
    transform: translateY(-2px) !important;
}

.chat-messages > .chat-bubble {
    animation: motion-msg-in var(--motion-base) var(--ease-out);
}

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

.auth-card {
    animation: motion-fade-up var(--motion-slow) var(--ease-out);
}

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

.role-pick {
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.role-pick:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.site-body--cabinet .card:hover {
    box-shadow: var(--shadow-hover) !important;
}

.site-body--bottom-nav .site-bottom-nav a,
.site-body--bottom-nav .bottom-nav-item {
    transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-standard);
}

.site-body--bottom-nav .site-bottom-nav a:active,
.site-body--bottom-nav .bottom-nav-item:active {
    transform: scale(0.96);
}

/* Notify / collapse soft */
.notify-drawer__panel,
.dropdown-menu {
    animation: motion-fade-up var(--motion-base) var(--ease-out);
}

/* ——— Wave 5: atmosphere polish ——— */
.page-app.site-body::before {
    opacity: 0.22;
}

.page-marketing .hero-cta-primary {
    box-shadow: 0 6px 18px rgba(180, 83, 9, 0.28) !important;
}

.page-marketing .hero-cta-primary:hover {
    box-shadow: 0 10px 26px rgba(180, 83, 9, 0.34) !important;
}

[data-theme="dark"] .page-marketing .hero-cta-primary,
[data-theme="dark"] .page-marketing .hero-cta-primary:hover,
[data-theme="dark"] .page-marketing .hero-cta-primary:focus-visible {
    /* Opaque fill + neutral shadow so contrast smoke samples AA (≥4.5). */
    background-color: #e8a054 !important;
    background-image: none !important;
    color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

.flow-empty-state {
    transition: box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.flow-empty-state:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover) !important;
}

/* ——— Waves 2–5 depth (marketing / showcase / product / art) ——— */

/* Wave 2: hero media drift + section rhythm */
.page-marketing .hero-visual-panel--alive {
    position: relative;
}

.page-marketing .hero-visual-duo--drift .hero-visual-card--house {
    transform: translateY(0);
    animation: hero-drift-a 14s var(--ease-standard) infinite alternate;
}

.page-marketing .hero-visual-duo--drift .hero-visual-card--apt {
    transform: translateY(0);
    animation: hero-drift-b 16s var(--ease-standard) infinite alternate;
}

@keyframes hero-drift-a {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

@keyframes hero-drift-b {
    from { transform: translateY(0); }
    to { transform: translateY(6px); }
}

.page-marketing .hero-visual-card__media img {
    filter: saturate(1.02) contrast(1.02);
}

[data-theme="dark"] .page-marketing .hero-visual-card__media img {
    filter: saturate(0.95) contrast(1.05) brightness(0.92);
}

.page-marketing .platform-scope--rhythm .scope-block {
    padding: 1.25rem 1.35rem;
    border-radius: var(--border-radius-lg, 14px);
    border: 1px solid var(--surface-border-strong, var(--line));
    background: var(--surface-raised, var(--surface));
    height: 100%;
}

.page-marketing .platform-scope--rhythm .scope-block--apt {
    background:
        linear-gradient(165deg, rgba(180, 83, 9, 0.04), transparent 42%),
        var(--surface-raised, var(--surface));
}

.page-marketing .landing-partner-strip--beat .landing-partner-strip__inner {
    border-style: solid;
    background:
        linear-gradient(90deg, rgba(180, 83, 9, 0.06), transparent 40%),
        rgba(100, 116, 139, 0.06);
}

.page-marketing .calc-result-box:not(.d-none) {
    animation: motion-fade-up var(--motion-slow) var(--ease-out);
}

.page-marketing .landing-review-card--active {
    animation: motion-fade-up var(--motion-slow) var(--ease-out);
}

/* Guest home workspace mock + icon steps */
.home-guest-workspace {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem !important;
    background: var(--surface-raised, var(--surface-glass)) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--surface-border-strong) !important;
}

.home-guest-workspace__chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.home-guest-workspace__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--text-muted);
    opacity: 0.45;
}

.home-guest-workspace__title {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.home-guest-workspace__row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--surface-border-strong, var(--line));
    background: var(--surface);
    font-size: 0.875rem;
    color: var(--text-body);
}

.home-guest-workspace__row--accent {
    border-color: color-mix(in srgb, var(--primary) 28%, transparent);
    background: var(--primary-soft, rgba(180, 83, 9, 0.08));
}

.home-guest-workspace__icon {
    display: inline-flex;
    color: var(--primary);
    flex: 0 0 auto;
}

.home-guest-steps {
    grid-column: 1 / -1;
}

.home-guest-steps .home-guest-step-icon {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark, #9a3412);
    background: var(--primary-soft, #ffedd5);
}

.home-guest-steps li:has(.home-guest-step-icon)::before {
    content: none;
    display: none;
}

.home-demo-list--cards {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.home-demo-card-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--surface-border-strong, var(--line));
    background: var(--surface-raised, var(--surface));
    color: var(--text-body);
}

.home-demo-card-item__icon {
    flex: 0 0 auto;
}

/* Wave 3: directory / tenders showcase */
.directory-filters-sticky {
    position: sticky;
    top: 4.25rem;
    z-index: 30;
    background: var(--surface);
}

.directory-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.directory-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--surface-border-strong, var(--line));
    background: var(--surface-raised, var(--surface));
    color: var(--text-body);
    text-decoration: none;
    font-size: 0.8125rem;
    transition:
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-fast) var(--ease-standard);
}

.directory-filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--text-heading);
}

.directory-card__open-hint {
    margin-left: auto;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-out);
    font-size: 0.75rem;
}

.directory-card:hover .directory-card__open-hint,
.directory-card:focus-visible .directory-card__open-hint {
    opacity: 0.85;
    transform: translateX(0);
}

.directory-card__avatar--partner {
    background: var(--badge-partner-bg, rgba(180, 83, 9, 0.12));
    color: var(--badge-partner-fg, var(--primary-dark));
}

.directory-card__avatar--supplier {
    background: var(--badge-supplier-bg, rgba(59, 130, 246, 0.12));
    color: var(--badge-supplier-fg, #1d4ed8);
}

.directory-card__avatar--contractor {
    background: var(--badge-contractor-bg, rgba(16, 185, 129, 0.12));
    color: var(--badge-contractor-fg, #047857);
}

.directory-results-count strong,
.tenders-open-results-summary strong {
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.tenders-open-empty-preview--scene .tenders-open-preview-item {
    box-shadow: var(--shadow-md);
}

.tenders-open-list .list-group-item {
    transition:
        transform var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background-color var(--motion-fast) var(--ease-standard);
}

.tenders-open-list a.list-group-item:hover,
.tenders-open-list .list-group-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Wave 4: messenger / auth / cabinet */
.foreman-compose--messenger {
    border-radius: 14px;
    border: 1px solid var(--surface-border-strong, var(--line));
    background: var(--surface-raised, var(--surface));
    padding: 0.45rem;
    gap: 0.4rem;
}

.page-mikhalych-chat .foreman-thread-header,
.page-mikhalych-chat .chat-thread-header {
    border-bottom: 1px solid var(--surface-border-strong, var(--line));
}

.page-mikhalych-chat .foreman-starter {
    background:
        linear-gradient(180deg, rgba(180, 83, 9, 0.05), transparent 70%),
        var(--surface);
}

.auth-alert-soft {
    border-radius: 12px;
    animation: motion-alert-in var(--motion-base) var(--ease-out);
}

.page-auth .auth-card .form-control:focus,
.page-auth .auth-card .form-select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.home-action-panel--next {
    border: 1px solid var(--surface-border-strong, var(--line));
    border-radius: var(--border-radius-lg, 14px);
    background: var(--surface-raised, var(--surface));
    box-shadow: var(--shadow-md);
}

.home-onboarding-frames {
    display: grid;
    gap: 0.45rem;
}

/* Wave 5: art direction / empty / onboarding */
.flow-empty-state--illustrated {
    background:
        radial-gradient(circle at 50% 0%, rgba(180, 83, 9, 0.07), transparent 55%),
        var(--surface) !important;
}

.flow-empty-state--illustrated .flow-empty-state__icon {
    width: 4.25rem;
    height: 4.25rem;
    margin-inline: auto;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft, rgba(180, 83, 9, 0.1));
    color: var(--primary-dark, var(--primary));
}

.page-marketing .site-brand--hero {
    letter-spacing: -0.02em;
}

.page-marketing .site-brand--hero .site-brand__name--hero {
    font-weight: 700;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html,
    html *,
    .page-marketing .motion-reveal,
    .page-marketing .motion-stagger > *,
    .page-app .directory-card-grid.motion-stagger > .directory-card,
    .page-app .directory-card-grid.motion-stagger > a,
    .site-body .btn:not(.btn-close):not(.btn-link),
    a.directory-card:hover,
    a.mobile-data-card:hover,
    .chat-messages > .chat-bubble,
    .auth-card,
    .alert,
    .notify-drawer__panel,
    .dropdown-menu,
    .page-marketing .hero-visual-duo--drift .hero-visual-card--house,
    .page-marketing .hero-visual-duo--drift .hero-visual-card--apt,
    .page-marketing .landing-review-card--active,
    .page-marketing .calc-result-box:not(.d-none) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .page-marketing .motion-reveal,
    .page-marketing .motion-stagger > *,
    .page-app .directory-card-grid.motion-stagger > .directory-card,
    .page-app .directory-card-grid.motion-stagger > a {
        opacity: 1 !important;
    }
}