/* ═══════════════════════════════════════════════════════════════════════
   3D-ГАЛЕРЕЯ (/3d) · відомість моделей + робоче вікно CAD
   Стрічка карток = аркуш-відомість (ПОЗ · найменування · деталі · габарит),
   під нею той самий переглядач, що в кейсах (стилі .mv у style.css).
   ═══════════════════════════════════════════════════════════════════════ */
.crumbs { font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pencil); margin-bottom: 28px; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.crumbs a:hover { color: var(--drafting); }
.crumbs [aria-current] { color: var(--ink); }

/* ── Hero: три числа архіву ─────────────────────────────────────────── */
.sr-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
    margin-top: clamp(36px, 5vh, 56px);
    border-top: var(--line-strong);
}
.sr-stats > div { padding: 18px 20px 4px 0; }
.sr-stats > div + div { padding-left: 20px; border-left: var(--line); }
.sr-stats dt { font: 500 10px/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pencil); }
.sr-stats dd { margin-top: 6px; font: 400 clamp(40px, 5vw, 64px)/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sr-stats > div:last-child dd { color: var(--drafting); }

/* ── Відомість ──────────────────────────────────────────────────────── */
.sr-sheet { padding-top: clamp(56px, 8vh, 96px); overflow: hidden; }
.sr-index__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(245, 242, 232, 0.16);
    font: 500 11px/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark-ink);
}
.sr-index__head em { font-style: normal; color: var(--dark-muted); letter-spacing: 0.1em; }

.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 16px; }
.sr-chip {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 9px 14px 8px;
    border: 1px solid rgba(245, 242, 232, 0.16); background: transparent; border-radius: var(--radius);
    font: 500 11px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted);
    cursor: pointer;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.sr-chip i { font-style: normal; font-size: 9px; color: var(--faded); transition: color 0.3s var(--ease); }
.sr-chip:hover { color: var(--dark-ink); border-color: rgba(245, 242, 232, 0.4); }
.sr-chip[aria-pressed="true"] { color: var(--dark-ink); border-color: var(--drafting-bright); background: rgba(229, 68, 56, 0.1); }
.sr-chip[aria-pressed="true"] i { color: var(--drafting-bright); }
.sr-chip:focus-visible { outline: 1px solid var(--drafting-bright); outline-offset: 2px; }

.sr-strip {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 14px;
    scrollbar-width: thin; scrollbar-color: rgba(245, 242, 232, 0.25) transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.sr-strip::-webkit-scrollbar { height: 3px; }
.sr-strip::-webkit-scrollbar-thumb { background: rgba(245, 242, 232, 0.25); }
.sr-cards { display: flex; gap: 10px; list-style: none; width: max-content; }
.sr-cards > li { display: flex; scroll-snap-align: start; }

.sr-card {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: 10px; align-content: start; width: 236px; padding: 0 0 14px; text-align: left;
    background: #141413; border: 1px solid rgba(245, 242, 232, 0.1); border-radius: var(--radius);
    color: var(--dark-ink); cursor: pointer;
    transition: border-color 0.35s var(--ease), transform 0.5s var(--ease);
}
.sr-card__img { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 12px; background: #0e0e0c; }
.sr-card__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(0.85) brightness(0.72) contrast(1.05);
    transform: scale(1.02);
    transition: filter 0.5s var(--ease), transform 0.8s var(--ease);
}
.sr-card__pos { grid-row: 2 / 4; padding-left: 12px; font: 500 10px/1.9 var(--f-mono); letter-spacing: 0.1em; color: var(--faded); }
.sr-card__name { padding-right: 12px; font: 400 19px/1.15 var(--f-display); letter-spacing: -0.005em; }
.sr-card__meta { padding-right: 12px; margin-top: 6px; font: 500 9.5px/1.4 var(--f-mono); letter-spacing: 0.08em; color: var(--dark-muted); font-variant-numeric: tabular-nums; }
/* креслярські кути активної позиції */
.sr-card::before, .sr-card::after {
    content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
    border: 0 solid var(--drafting-bright); opacity: 0; transition: opacity 0.3s var(--ease);
}
.sr-card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.sr-card::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

@media (hover: hover) {
    .sr-card:hover { border-color: rgba(245, 242, 232, 0.3); }
    .sr-card:hover .sr-card__img img { filter: grayscale(0.2) brightness(0.92); transform: scale(1.06); }
}
.sr-card[aria-pressed="true"] { border-color: rgba(229, 68, 56, 0.55); }
.sr-card[aria-pressed="true"]::before, .sr-card[aria-pressed="true"]::after { opacity: 1; }
.sr-card[aria-pressed="true"] .sr-card__img img { filter: none; transform: scale(1); }
.sr-card[aria-pressed="true"] .sr-card__pos { color: var(--drafting-bright); }
.sr-card:focus-visible { outline: 1px solid var(--drafting-bright); outline-offset: 3px; }

/* ── Поточна модель ─────────────────────────────────────────────────── */
.sr-now {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: clamp(16px, 2vw, 28px);
    margin: clamp(40px, 6vh, 64px) 0 20px;
}
.sr-now__pos { grid-row: 1 / 3; font: 400 clamp(56px, 7vw, 104px)/0.8 var(--f-display); color: var(--drafting-bright); font-variant-numeric: tabular-nums; }
.sr-now__name { font: 400 clamp(32px, 4.2vw, 60px)/1 var(--f-display); letter-spacing: -0.02em; color: var(--dark-ink); }
.sr-now__meta { grid-column: 2; margin-top: 10px; font: 500 11px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.sr-now__link {
    grid-row: 1 / 3; grid-column: 3; align-self: end;
    padding: 12px 0 6px; border-bottom: 1px solid rgba(245, 242, 232, 0.35);
    font: 500 11px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-ink); text-decoration: none;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sr-now__link:hover { color: var(--drafting-bright); border-color: var(--drafting-bright); }
/* зміна моделі: назва з'являється знизу — лише transform/opacity */
.sr-sheet.is-swapping .sr-now__pos, .sr-sheet.is-swapping .sr-now__name, .sr-sheet.is-swapping .sr-now__meta {
    animation: sr-in 0.7s var(--ease) both;
}
.sr-sheet.is-swapping .sr-now__name { animation-delay: 0.05s; }
.sr-sheet.is-swapping .sr-now__meta { animation-delay: 0.1s; }
@keyframes sr-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* ── Переглядач: заміна моделі ──────────────────────────────────────── */
.sr-slot { position: relative; }
.sr-slot .mv__stage canvas { transition: opacity 0.45s var(--ease-out); }
.sr-slot .mv.is-leaving .mv__stage canvas { opacity: 0; }
.sr-slot .mv.is-leaving .mv__hud, .sr-slot .mv.is-leaving .mv__layer { opacity: 0; transition: opacity 0.3s; }

@media (max-width: 900px) {
    .sr-now { grid-template-columns: auto minmax(0, 1fr); }
    .sr-now__link { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 18px; }
}
@media (max-width: 640px) {
    .sr-stats > div { padding-right: 10px; }
    .sr-stats > div + div { padding-left: 12px; }
    .sr-index__head em { display: none; }
    .sr-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; }
    .sr-chips::-webkit-scrollbar { display: none; }
    .sr-chip { flex: none; }
    .sr-card { width: 196px; }
    .sr-card__name { font-size: 17px; }
    .sr-now { margin-top: 32px; }
    .sr-now__pos { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-sheet.is-swapping .sr-now__pos, .sr-sheet.is-swapping .sr-now__name, .sr-sheet.is-swapping .sr-now__meta { animation: none; }
    .sr-card, .sr-card__img img { transition: none; }
}