/* ============================================================
   AVatar Сайты · Направление C — «Панорамный разворот» (ДНК 19)
   Холодная кинематографичная система: Oswald / Manrope / IBM Plex Mono
   ============================================================ */

/* ---------- Шрифты (self-hosted, кириллица + латиница) ---------- */
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-cyrillic-500.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-500.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Manrope"; src: url("fonts/manrope-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-cyrillic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

/* ---------- Токены ---------- */
:root {
  /* палитра 60/30/10 — холодная, провенанс в манифесте */
  --day: #F2F4F7;          /* 60 · пасмурный дневной свет */
  --night: #0E0F12;        /* тёмные развороты */
  --surface-day: #E6EAF0;  /* 30 · полосы/карточки на светлом */
  --surface-night: #16181D;/* 30 · поверхности на тёмном */
  --ink: #15171A;
  --ink-muted: #454C56;
  --ink-inv: #E7EAEF;
  --ink-inv-muted: #98A2AE;
  --line-day: #D4DAE3;
  --line-night: #262A31;
  --steel: #31669B;        /* 10 · акцент: фирменный синий webfarm, десатурированный до S52/L40 */
  --steel-hover: #2A5885;
  --steel-ondark: #7FA9CE; /* фокус-кольцо и активные метки на тёмном */
  --grade: #33506B;        /* тон холодной градации серии */

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* шкала ×1.25, база 16 */
  --fs-0: 1rem;        /* 16 */
  --fs-1: 1.25rem;     /* 20 */
  --fs-2: 1.5625rem;   /* 25 */
  --fs-3: 1.9375rem;   /* 31 */
  --fs-4: 2.4375rem;   /* 39 */
  --fs-5: 3.0625rem;   /* 49 */
  --fs-6: 3.8125rem;   /* 61 */
  --fs-small: 0.875rem;/* 14 · служебные подписи */

  --ease: cubic-bezier(.33, .12, .16, 1); /* одна кривая на сайт */
  --dur: 240ms;

  --gutter: clamp(16px, 2.2vw, 32px);
  --maxw: 1600px;
}

/* ---------- Межстраничные переходы (View Transitions, MPA) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--day);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b { font-weight: 600; }

::selection { background: var(--steel); color: var(--day); }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; border-radius: 4px; }
.cases :focus-visible, .nav.is-open :focus-visible { outline-color: var(--steel-ondark); }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 60;
  padding: 8px 16px; background: var(--night); color: var(--ink-inv);
  font-size: var(--fs-small); text-decoration: none; border-radius: 4px;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 8px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-0);
  text-decoration: none; border-radius: 4px; border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary { background: var(--steel); color: var(--day); }
.btn--primary:hover { background: var(--steel-hover); }
.btn--ghost { border-color: rgba(231, 234, 239, .55); color: var(--ink-inv); }
.btn--ghost:hover { border-color: var(--ink-inv); }
.btn--lg { min-height: 52px; padding: 0 32px; }

.ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 4px;
  border: 1px solid rgba(231, 234, 239, .4); background: rgba(14, 15, 18, .55);
  color: var(--ink-inv); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ctrl:hover { border-color: var(--ink-inv); }
.ctrl--night { background: var(--surface-night); border-color: var(--line-night); }
.ctrl--night:hover { border-color: var(--ink-inv-muted); }

/* ---------- Рубрикаторы ---------- */
.kicker {
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.kicker--ondark { color: var(--ink-inv-muted); }
.kicker--onnight { color: var(--ink-inv-muted); }

/* ---------- Топ-полоса ---------- */
.topstrip {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 8px var(--gutter);
  background: var(--night); color: #C9D2DC;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase;
}
.topstrip__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--gutter);
  min-height: 64px;
  background: var(--day);
  border-bottom: 1px solid var(--line-day);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--night); color: var(--ink-inv);
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: .02em;
}
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-1);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
}
.brand__name em { font-style: normal; font-weight: 500; color: var(--ink-muted); }

.nav { margin-left: auto; }
.nav__list { display: flex; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-weight: 500; font-size: var(--fs-0); text-decoration: none; color: var(--ink);
  border-radius: 4px;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--steel); }
.nav__close { display: none; }
.header__actions { display: flex; align-items: center; gap: 16px; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 12px;
  background: none; border: 1px solid var(--line-day); border-radius: 4px; cursor: pointer;
}
.burger__line { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 999px; }

/* ---------- Холодная градация серии ---------- */
.cold { position: relative; overflow: hidden; background: var(--night); }
.cold img { filter: grayscale(.22) saturate(.85) contrast(1.04) brightness(.98); }
.cold::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grade); mix-blend-mode: color; opacity: .42;
  pointer-events: none;
}

/* ---------- ЭКРАН 1 · Hero: панорама + строгая конденс-полоса ---------- */
.hero { color: var(--ink-inv); background: var(--night); }
.hero__stage {
  position: relative;
  height: 58vh; min-height: 380px; max-height: 640px;
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.hero__slide.is-active { opacity: 1; }
/* кроп ниже шапки кадра-сайта: панорама — объект-витрина, не продолжение нашего интерфейса */
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

.hero__meta {
  position: absolute; top: 24px; right: var(--gutter); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.hero__meta-chip {
  display: inline-block; padding: 8px 12px; border-radius: 4px;
  background: rgba(14, 15, 18, .85); color: #C7D0DA;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hero__counter b { color: var(--ink-inv); font-weight: 500; }

/* строгая полоса под панорамой — текст рядом с кадром, не поверх */
.hero__band {
  border-top: 1px solid var(--line-night);
  max-width: var(--maxw); margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px; align-items: end;
}
.hero__block { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.125rem, 3.6vw, var(--fs-5));
  line-height: 1.08; letter-spacing: .015em; text-transform: uppercase;
  text-wrap: balance;
}
.hero__sub { font-size: var(--fs-1); font-weight: 500; color: #C9D2DC; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border: 1px solid rgba(231, 234, 239, .38); border-radius: 999px;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-inv);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

.hero__side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
}
.hero__bignum {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(var(--fs-5), 6vw, 5.5rem);
  line-height: .9; color: var(--surface-night);
  -webkit-text-stroke: 1px var(--ink-inv-muted);
  font-variant-numeric: tabular-nums;
}
.hero__controls { display: flex; align-items: center; gap: 16px; }
.hero__dots { display: flex; gap: 8px; }
.dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
}
.dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 3px; border-radius: 999px; background: rgba(231, 234, 239, .45);
  transition: background-color var(--dur) var(--ease);
}
.dot.is-active::before { background: var(--ink-inv); }

/* ---------- Полоса характеристик ---------- */
.facts { background: var(--surface-day); border-bottom: 1px solid var(--line-day); }
.facts__list {
  max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.facts__item { display: flex; gap: 16px; align-items: baseline; }
.facts__num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.facts__text { font-size: var(--fs-1); font-weight: 500; color: var(--ink-muted); max-width: 26ch; }

/* ---------- ЭКРАН 2 · Тёмный кейс-разворот ---------- */
.cases { background: var(--night); color: var(--ink-inv); padding: 96px 0 96px; }
.cases__head {
  max-width: var(--maxw); margin: 0 auto 48px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42ch); gap: 16px 64px; align-items: end;
}
.cases__head .kicker { grid-column: 1 / -1; }
.cases__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(var(--fs-4), 3.4vw, var(--fs-5));
  line-height: 1.1; letter-spacing: .015em; text-transform: uppercase;
  text-wrap: balance;
}
.cases__lead { color: var(--ink-inv-muted); font-size: var(--fs-1); line-height: 1.5; }

.rail-wrap { max-width: none; }
.rail {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 auto; width: min(72vw, 720px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.card__chrome {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; background: var(--surface-night);
  border: 1px solid var(--line-night); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.card__dots { display: inline-flex; gap: 5px; }
.card__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2E333B; }
.card__addr {
  flex: 1; padding: 4px 12px; border-radius: 4px; background: var(--night);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase;
  color: #C9D2DC; text-align: center;
  font-variant-numeric: tabular-nums;
}
.card__shot { aspect-ratio: 16 / 10; border: 1px solid var(--line-night); border-top: 0; }
.card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card__cap {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 4px 0;
  font-size: var(--fs-small); font-weight: 500; color: var(--ink-inv-muted);
}
.card__num {
  font-family: var(--font-mono); font-weight: 500; color: var(--ink-inv);
  font-variant-numeric: tabular-nums;
}

.rail-nav {
  max-width: var(--maxw); margin: 32px auto 0; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.rail-nav__arrows { display: flex; gap: 8px; }
.rail-nav__counter {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: .08em;
  color: var(--ink-inv-muted); font-variant-numeric: tabular-nums;
}
.rail-nav__counter b { color: var(--ink-inv); font-weight: 500; }
.cases__note {
  max-width: var(--maxw); margin: 24px auto 0; padding: 0 var(--gutter);
  font-size: var(--fs-small); color: var(--ink-inv-muted); max-width: 72ch;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
@media (min-width: 1648px) {
  .cases__note { margin-left: auto; margin-right: auto; }
}

/* ---------- Полоса вертикальных панорам «сайт целиком» ---------- */
.pan-pair {
  max-width: var(--maxw); margin: 64px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.pan { display: flex; flex-direction: column; }
.pan img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border: 1px solid var(--line-night);
}
@media (max-width: 767px) {
  .pan-pair { grid-template-columns: 1fr; }
}

/* ---------- Reveal секций (один момент: единая система, одна кривая) ---------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .nav {
    position: fixed; inset: 0; z-index: 50;
    display: none;
    background: var(--night); color: var(--ink-inv);
    padding: 24px;
  }
  .nav.is-open { display: block; }
  .nav__close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 4px;
    background: none; border: 1px solid var(--line-night); color: var(--ink-inv); cursor: pointer;
  }
  .nav__list { flex-direction: column; gap: 8px; margin-top: 72px; }
  .nav__link {
    font-family: var(--font-display); font-size: var(--fs-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em; color: var(--ink-inv);
    min-height: 56px;
  }
  .burger { display: inline-flex; }

  .hero__stage { height: 46vh; min-height: 320px; }
  /* на узких вьюпортах cover почти не кропит 1440-кадр — увеличиваем кадр,
     чтобы шапка сайта-объекта не выглядела продолжением нашей */
  .hero__slide img { width: 148%; max-width: none; margin-left: -24%; object-position: center 58%; }
  .hero__band { grid-template-columns: 1fr; align-items: start; padding: 32px var(--gutter) 40px; }
  .hero__side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .hero__bignum { font-size: var(--fs-4); }
  .facts__list { grid-template-columns: 1fr; gap: 24px; padding: 32px var(--gutter); }
  .cases { padding: 64px 0; }
  .cases__head { grid-template-columns: 1fr; align-items: start; margin-bottom: 32px; }
  .card { width: min(84vw, 560px); }
}

@media (max-width: 599px) {
  .topstrip__item--right { display: none; }
  .header { gap: 12px; }
  .header__actions { margin-left: auto; gap: 8px; }
  .header .btn--primary { padding: 0 16px; }
  .brand__name { font-size: 1.0625rem; }
  .brand { gap: 8px; }
  .hero__stage { height: 40vh; min-height: 280px; }
  .hero__slide img { width: 200%; margin-left: -50%; }
  .hero__meta { top: 16px; right: 16px; }
  #hero-caption { display: none; }
  .hero__block { gap: 12px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .card { width: 86vw; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
  .hero__slide, .btn, .ctrl, .dot::before, .nav__link, .skip-link { transition: none; }
}