/* ==========================================================================
   GORAT — фирменный стиль сайта
   Редакторская светлая система: тёплый холст, белые карточки, тонкие
   зелёно-серые линии, один акцент. Шрифты: Fraunces (дисплейная антиква)
   и Inter (интерфейсный гротеск).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Нейтрали */
  --parchment:   #fefffc;
  --paper:       #ffffff;
  --linen:       #f9faf7;
  --ink-black:   #171717;
  --graphite:    #2c2c2c;
  --charcoal:    #444141;
  --ash:         #646464;
  --fog:         #b4b8b4;
  --mist:        #dee2de;
  --twilight:    #282834;
  --dusk:        #1f1f29;

  /* Акцент — фирменный зелёный GORAT */
  --signal:        #237539;  /* контурные действия, ссылки, метки */
  --signal-bright: #45d15e;  /* знак и акценты на тёмном */
  --deep:          #0e1a12;  /* единственная насыщенная поверхность */

  /* Шрифты */
  --font-display: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Тени */
  --shadow-nav:     rgba(0, 0, 0, .15) 0 2px 6px 0;
  --shadow-card:    rgba(0, 0, 0, .08) 0 1px 1px 0, rgba(0, 0, 0, .08) 0 4px 5px 0;
  --shadow-soft:    rgba(0, 0, 0, .05) 0 1px 8px 0;

  /* Раскладка */
  --page: 1200px;
  --gutter: 24px;

  /* Плавность */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------- типографика --- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--graphite);
  text-wrap: balance;
  margin: 0;
  font-variant-ligatures: none;
}

h1 {
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

h3 {
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: -.04em;
}

h4 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--graphite);
  margin: 0;
}

p { margin: 0 0 16px; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--graphite);
  max-width: 30ch;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 16px;
}

.muted { color: var(--ash); }
.small { font-size: 15px; line-height: 1.5; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--graphite); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------- сетка --- */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 80px 0; }
section.tight { padding: 56px 0; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.split-center { align-items: center; gap: 56px; }

.section-head { margin-bottom: 40px; max-width: 62ch; }
.section-head p { margin-top: 16px; color: var(--ash); }

/* ------------------------------------------------------------ навигация --- */

.nav-shell {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 var(--gutter);
}

.nav {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 11px 24px;
  border-radius: 50px;
  border: 1px solid var(--mist);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-nav);
  transition: max-width .5s var(--ease), background-color .35s ease, border-color .35s ease;
}

/* За пределами первого экрана пилюля подбирается и становится плотнее. */
.nav.scrolled {
  max-width: 860px;
  background: rgba(255, 255, 255, .94);
  border-color: #c9d1c7;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--graphite);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}

.nav-links a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--charcoal);
  text-decoration: none;
}

.nav-links a { position: relative; transition: color .25s ease; }
.nav-links a:hover { color: var(--signal); }

/* Подчёркивание вырастает слева, уходит вправо. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s var(--ease);
}

.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* -------------------------------------------------------------- кнопки --- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, transform .3s var(--ease);
}

/* Подложка «наливается» слева направо. currentColor — поэтому одно правило
   работает и для зелёной, и для тёмной, и для светлой кнопки. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s var(--ease), opacity .3s ease;
}

.btn:hover::before { transform: scaleX(1); opacity: .08; }
.btn:active { transform: translateY(1px); }

.btn-primary { border-color: var(--signal); color: var(--signal); }
.btn-primary:hover { border-color: var(--signal); }
.btn-primary:hover .arrow { background: var(--signal); color: var(--paper); border-color: var(--signal); }

.btn-secondary { border-color: var(--twilight); color: var(--twilight); }
.btn-secondary:hover .arrow { background: var(--twilight); color: var(--paper); border-color: var(--twilight); }

.btn-filled { background: var(--dusk); border-color: var(--twilight); color: #ffffff; }
.btn-filled:hover { background: var(--twilight); color: #ffffff; }

/* Кнопки поверх фотографии. В покое — тёмная подложка с размытием, чтобы
   кнопка читалась на любом кадре, а не висела контуром. При наведении —
   полная инверсия в белое: на снимке это единственное состояние, которое
   нельзя спутать с фоном. Заливка меняется целиком, без «наливания» слева,
   иначе половина подписи повисает тёмным по тёмному. */
.btn-light {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(12, 16, 13, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-light::before {
  background: #ffffff;
  transform: none;
  transition: opacity .2s ease;
}

.btn-light:hover {
  color: var(--graphite);
  border-color: #ffffff;
  transition: color .14s ease, border-color .2s ease, transform .3s var(--ease);
}

.btn-light:hover::before { opacity: 1; }

.btn-light:hover .arrow {
  background: var(--graphite);
  color: #ffffff;
  border-color: var(--graphite);
}

.btn-sm { padding: 7px 12px; font-size: 14px; }

.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  line-height: 1;
  transition: transform .42s var(--ease), background-color .28s ease,
              color .28s ease, border-color .28s ease;
}

.btn:hover .arrow { transform: translateX(3px); }

/* --------------------------------------------------------------- герой --- */

.hero {
  position: relative;
  /* vh на мобильных считается вместе с адресной строкой и даёт скачок,
     поэтому ниже тот же размер повторяется в svh для браузеров, которые умеют. */
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 11, .62) 0%, rgba(10, 14, 11, .22) 38%, rgba(10, 14, 11, 0) 68%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}

.hero-card {
  max-width: 640px;
  border-radius: 24px;
  padding: 32px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero-card .eyebrow { color: #e3e8e2; }
.hero-card h1 { color: #ffffff; }
.hero-card p { color: #eef1ed; margin: 16px 0 24px; max-width: 46ch; }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------- карточки --- */

.card {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.card h4 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--ash); }

.card-media {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0;
}

.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-media .cap { padding: 16px; }
.card-media .cap h4 { margin-bottom: 4px; }
.card-media .cap p { margin: 0; font-size: 15px; color: var(--ash); }

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(35, 117, 57, .09);
  color: var(--signal);
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------------------------------------------------- крупные поверхности --- */

.band {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.band-img { width: 100%; height: 100%; object-fit: cover; }

.band-sign {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.band-sign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-sign .band-text { position: relative; z-index: 1; padding: 64px; max-width: 620px; }
.band-sign .band-text .eyebrow { color: #cfd6ce; }
.band-sign .band-text h2 { color: #ffffff; }
.band-sign .band-text p { color: #e4e8e3; margin-top: 16px; }
.band-sign::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 10, 9, .82) 0%, rgba(8, 10, 9, .55) 48%, rgba(8, 10, 9, .1) 100%);
}
.band-deep {
  background: var(--deep);
  border-radius: 24px;
  padding: 64px;
  box-shadow: rgba(0, 0, 0, .06) 0 2px 2px 0, rgba(0, 0, 0, .04) 0 0 0 5px;
}

.band-deep .eyebrow { color: #8fa392; }
.band-deep h2 { color: #ffffff; }
.band-deep p { color: #ccd5cc; }
.band-deep li { color: #dfe6df; }
.band-deep .small { color: #93a395; }
.band-deep a { color: var(--signal-bright); }

/* --------------------------------------------------------------- списки --- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--signal-bright);
}

/* ------------------------------------------------------------- факты --- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--mist);
  border: 1px solid var(--mist);
  border-radius: 12px;
  overflow: hidden;
}

.fact { background: var(--paper); padding: 20px; }
.fact dt { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); margin-bottom: 8px; }
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.04em;
  color: var(--graphite);
}
.fact dd .unit { font-family: var(--font-ui); font-size: 15px; letter-spacing: -.01em; color: var(--ash); }

/* ----------------------------------------------------------- партнёры --- */

.partners { display: flex; flex-wrap: wrap; gap: 10px; }

.partner {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--mist);
  border-radius: 8px;
  background: var(--paper);
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--charcoal);
}
.partner span { color: var(--ash); font-weight: 400; }

/* ------------------------------------------------------------ контакты --- */

.contact-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mist);
  flex-wrap: wrap;
}
.contact-row:last-child { border-bottom: none; }
.contact-row dt { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); min-width: 130px; }
.contact-row dd {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.012em;
  color: var(--graphite);
  overflow-wrap: anywhere;
}
.contact-row dd a { color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--mist); }
.contact-row dd a:hover { color: var(--signal); border-bottom-color: var(--signal); }
.contact-row dd .note { display: block; font-size: 15px; color: var(--ash); margin-top: 4px; }

/* -------------------------------------------------------------- подвал --- */

footer {
  background: var(--paper);
  border-top: 1px solid var(--mist);
  padding: 72px 0 40px;
  margin-top: 40px;
}

.footer-statement {
  font-family: var(--font-display);
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--graphite);
  max-width: 20ch;
  margin: 0 0 40px;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--mist);
}

.footer-cols h5 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 12px;
}

.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-cols a { font-size: 15px; color: var(--charcoal); text-decoration: none; }
.footer-cols a:hover { color: var(--signal); }

.footer-legal {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ash);
}

/* --------------------------------------------------- текстовые страницы --- */

.page-head {
  padding: 140px 0 48px;
  border-bottom: 1px solid var(--mist);
}

.prose { max-width: 70ch; padding: 56px 0 80px; }
.prose h2 { font-size: 27px; letter-spacing: -.04em; line-height: 1.25; margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; font-family: var(--font-ui); font-weight: 500; letter-spacing: -.012em; margin: 32px 0 12px; }
.prose p, .prose li { font-size: 16px; line-height: 1.62; overflow-wrap: break-word; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--fog); }
.prose strong { font-weight: 600; color: var(--graphite); }

.callout {
  background: var(--linen);
  border: 1px solid var(--mist);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.callout p { font-size: 15px; }

.toc {
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.toc a { font-size: 15px; color: var(--charcoal); text-decoration: none; }
.toc a:hover { color: var(--signal); }
.toc li::marker { color: var(--fog); font-size: 13px; }

/* ------------------------------------------------------------ адаптив --- */

@supports (height: 100svh) {
  .hero { min-height: min(88svh, 760px); }
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-center { gap: 28px; }
  .band-sign .band-text, .band-deep { padding: 40px; }
  section { padding: 64px 0; }

  /* Затемнение под текстом идёт слева направо и на узкой карточке перестаёт
     работать: подпись съезжает на светлую часть кадра. Разворачиваем его
     вертикально и прижимаем текст к низу — к самому тёмному краю. */
  .band-sign { align-items: flex-end; }
  .band-sign::after {
    background: linear-gradient(to top,
      rgba(8, 10, 9, .88) 0%,
      rgba(8, 10, 9, .60) 45%,
      rgba(8, 10, 9, .28) 100%);
  }
}

@media (max-width: 560px) {
  /* Шапка перестаёт помещаться: убираем ещё одну ссылку и поджимаем отступы. */
  .nav { gap: 16px; padding: 10px 18px; }
  .nav-links { gap: 16px; }
  .nav-links .hide-xs { display: none; }
}

@media (max-width: 390px) {
  /* На самых узких экранах от логотипа остаётся только знак. */
  .nav-word { display: none; }
  .nav { gap: 14px; padding: 10px 16px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }

  section { padding: 48px 0; }
  section.tight { padding: 36px 0; }

  .grid { gap: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { gap: 28px; }
  .section-head { margin-bottom: 28px; }

  .nav-links .hide-sm { display: none; }

  /* Область нажатия у ссылок шапки: сам текст даёт около 20px по высоте,
     этого мало для пальца. Подчёркивание сдвигается вслед за отступом. */
  .nav-links a { padding: 8px 0; }
  .nav-links a::after { bottom: 3px; }

  .hero { min-height: 620px; }
  .hero-card { padding: 24px; border-radius: 16px; }
  .hero-actions { gap: 10px; }

  .btn { padding: 13px 18px; }

  .band-sign .band-text, .band-deep { padding: 28px; }
  .band-sign { min-height: 340px; }

  .page-head { padding: 116px 0 36px; }
  .prose { padding: 40px 0 64px; }
  .prose h2 { margin: 36px 0 14px; }

  .contact-row dt { min-width: 100%; }
  .contact-row { gap: 6px; padding: 14px 0; }

  .footer-cols { gap: 24px; }
  footer { padding: 56px 0 32px; }
}

@supports (height: 100svh) {
  @media (max-width: 640px) {
    .hero { min-height: min(620px, 92svh); }
  }
}

@media (max-width: 420px) {
  /* Две кнопки в герое перестают помещаться в строку — растягиваем на всю
     ширину, чтобы перенос выглядел решением, а не случайностью. */
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Ставится последним среди адаптивных правил: ширина 640 и меньше совпадает
   с альбомной ориентацией на маленьком телефоне, и высота должна победить. */
@media (max-height: 520px) and (orientation: landscape) {
  /* Телефон в альбомной ориентации: герой не должен занимать три экрана. */
  .hero { min-height: 420px; }
  .page-head { padding: 92px 0 32px; }
}


/* ==========================================================================
   ДВИЖЕНИЕ
   Одна оркестрованная сцена на входе и спокойные появления при прокрутке.
   Всё выключается через prefers-reduced-motion в конце файла.
   ========================================================================== */

/* --- вход на первый экран --- */

@keyframes gorat-hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

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

@keyframes gorat-card-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero-img { animation: gorat-hero-zoom 2.4s var(--ease-soft) both; }

.hero-card { animation: gorat-card-in .9s var(--ease-soft) both .1s; }

.hero-card > * { animation: gorat-rise .8s var(--ease-soft) both; }
.hero-card > *:nth-child(1) { animation-delay: .30s; }
.hero-card > *:nth-child(2) { animation-delay: .40s; }
.hero-card > *:nth-child(3) { animation-delay: .52s; }
.hero-card > *:nth-child(4) { animation-delay: .64s; }

.nav { animation: gorat-rise .7s var(--ease-soft) both .05s; }

/* --- появление при прокрутке --- */

html.js .reveal,
html.js .stagger > * {
  opacity: 0;
  transform: translateY(16px);
}

.reveal,
.stagger > * {
  transition: opacity .75s var(--ease-soft), transform .75s var(--ease-soft);
}

html.js .reveal.in,
html.js .stagger.in > * {
  opacity: 1;
  transform: none;
}

/* Страховка: если site.js не загрузился, контент показывается целиком. */
html.no-motion .reveal,
html.no-motion .stagger > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Кадр SOHO мягко доезжает до масштаба 1 вместе с появлением блока. */
html.js .band-sign img { transform: scale(1.07); }
.band-sign img { transition: transform 1.8s var(--ease-soft); }
html.js .band-sign.in img { transform: scale(1); }
html.no-motion .band-sign img { transform: none; }

/* --- наведение на карточки --- */

.card,
.card-media {
  transition: border-color .3s ease, transform .35s var(--ease), box-shadow .3s ease;
}

.card:hover,
.card-media:hover {
  border-color: var(--fog);
  transform: translateY(-3px);
}

.card-media img { transition: transform .9s var(--ease-soft); }
.card-media:hover img { transform: scale(1.045); }

.mark { transition: background-color .35s ease, color .35s ease, transform .4s var(--ease); }
.card:hover .mark { background: var(--signal); color: var(--paper); }

.partner { transition: border-color .3s ease, color .3s ease, transform .3s var(--ease); }
.partner:hover { border-color: var(--signal); color: var(--graphite); transform: translateY(-2px); }

/* Квадратик у пункта списка подтягивается к тексту при наведении. */
.ticks li::before { transition: transform .35s var(--ease), background-color .3s ease; }
.ticks li:hover::before { transform: scale(1.35); }

.fact { transition: background-color .3s ease; }
.fact:hover { background: var(--linen); }

.contact-row dd a,
.footer-cols a,
.toc a { transition: color .25s ease, border-color .25s ease; }

/* --- уважение к системной настройке --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  /* Контент обязан остаться видимым, даже когда переходы выключены. */
  html.js .reveal,
  html.js .stagger > * {
    opacity: 1;
    transform: none;
  }

  html.js .band-sign img,
  html.js .band-sign.in img,
  .hero-img { transform: none; }
}