/* Компоненты NOCTA — только из переменных tokens.css. Откуда каждый — в design-system.md, раздел «Компоненты».
   Порядок: основа → роли шрифтов → кнопка → поле → подпись-метка → меню-колонка и кадр хиро → строка-караоке →
   карточка из глубины → оптический заголовок и строки → переключатель моделей → характеристики «демо» →
   живые числа и подвал → обложка → значки из точек → прелоадер → кнопка-значок → галерея. */

/* ── Основа ─────────────────────────────────────────────────────────────────── */
html { background: var(--color-bg); color: var(--color-text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Роли шрифтов ───────────────────────────────────────────────────────────── */
.t-display, .t-h1, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
}
.t-display { font-size: var(--text-display); line-height: var(--lh-display); }
.t-h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
.t-h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
.t-h3 { font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); font-size: var(--text-h3); line-height: var(--lh-h3); }
.t-lead { font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--stretch-display); font-size: var(--text-lead); line-height: var(--lh-lead); }
.t-body-l { font-size: var(--text-body-l); line-height: var(--lh-body-l); }
.t-body { font-size: var(--text-body); line-height: var(--lh-body); }
.t-small { font-size: var(--text-small); line-height: var(--lh-small); }
.t-menu { font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); font-size: var(--text-menu); line-height: var(--lh-menu); }
.t-ui, .t-label, .t-number { font-family: var(--font-ui); font-weight: var(--weight-ui); letter-spacing: var(--tracking-ui); }
.t-ui { font-size: var(--text-ui); line-height: var(--lh-ui); text-transform: var(--case-ui); }
.t-label { font-size: var(--text-label); line-height: var(--lh-label); text-transform: var(--case-ui); }
.t-number { font-size: var(--text-number); line-height: var(--lh-number); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--color-muted); }
.t-wordmark {
  font-family: var(--font-body);
  font-weight: var(--weight-wordmark);
  font-stretch: var(--stretch-wordmark);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .72;   /* высота прописных Roboto Flex — 0,71 em: строка без пустых полей сверху и снизу */
  white-space: nowrap;
}

/* ── Кнопка: белая плашка, текст капсом моно, квадрат со стрелкой — Seasats «Explore products» ── */
.btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-icon-bg: var(--color-on-accent);
  --btn-icon-fg: var(--color-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  height: var(--control-height);
  max-width: 100%;
  padding: var(--control-pad) var(--control-pad) var(--control-pad) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: var(--case-ui);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) var(--ease-css), transform var(--dur-hover) var(--ease-css), opacity var(--dur-hover) var(--ease-css);
}
/* Перекат букв: у каждой буквы копия снизу; время 600 − 12 × букв мс, шаг 12 мс — Seasats */
.btn__label, .roll {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  height: 1.2em;            /* у источника .9 — у Д, Ц, Щ выносные вниз, им нужен запас */
  line-height: 1.2;
}
.roll .ch {
  display: inline-block;
  position: relative;
  white-space: pre;
  transition: transform calc(var(--dur-letter) - var(--step-letter) * var(--n, 0)) var(--ease-out-cubic);
  transition-delay: calc(var(--i, 0) * var(--step-letter));
}
.roll .ch::after { content: attr(data-ch); position: absolute; left: 0; top: 100%; }
.btn__label { flex: 1 1 auto; min-width: 0; }
.btn__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--control-height) - var(--control-pad) * 2);
  height: calc(var(--control-height) - var(--control-pad) * 2);
  border-radius: var(--radius-inner);
  background: var(--btn-icon-bg);
  color: var(--btn-icon-fg);
  overflow: hidden;
}
.btn__icon svg { grid-area: 1 / 1; width: var(--arrow-size); height: var(--arrow-size); transition: transform var(--dur-icon) var(--ease-out-cubic); }
.btn__icon svg + svg { transform: translateX(-200%); }
/* Наведение (только мышь), фокус с клавиатуры и образец состояния — одно и то же */
@media (hover: hover) {
  .btn:hover:not(:disabled):not(.is-loading) .ch,
  a:hover > .roll .ch, .roll-host:hover .roll .ch { transform: translateY(-100%); }
  .btn:hover:not(:disabled):not(.is-loading) .btn__icon svg:first-child { transform: translateX(200%); }
  .btn:hover:not(:disabled):not(.is-loading) .btn__icon svg + svg { transform: translateX(0); }
}
.btn:focus-visible .ch, .btn.is-hover .ch, a:focus-visible > .roll .ch, .roll-host:focus-visible .roll .ch { transform: translateY(-100%); }
.btn:focus-visible .btn__icon svg:first-child, .btn.is-hover .btn__icon svg:first-child { transform: translateX(200%); }
.btn:focus-visible .btn__icon svg + svg, .btn.is-hover .btn__icon svg + svg { transform: translateX(0); }
.btn:active:not(:disabled), .btn.is-active { background: var(--color-accent-active); transform: translateY(var(--border-width)); }
.btn:focus-visible, .btn.is-focus { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-offset); }
.btn:disabled, .btn[aria-disabled="true"]:not(.is-loading) { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn.is-loading { cursor: progress; }
.btn.is-loading .btn__icon svg { display: none; }
/* Загрузка — три диода в квадрате, пульс тревоги кожи (1,2 с), фазы через треть периода */
.diodes { display: inline-flex; gap: var(--space-1); }
.diodes i {
  width: var(--diode-ui); height: var(--diode-ui); border-radius: 50%;
  background: currentColor;
  opacity: var(--diode-dim);
  animation: diode-pulse var(--dur-pulse) var(--ease-sine-inout) infinite;
  animation-delay: calc(var(--dur-pulse) / 3 * var(--k, 0));
}
@keyframes diode-pulse { 0%, 100% { opacity: var(--diode-dim); } 50% { opacity: 1; } }
/* Вторая кнопка: плашка цвета страницы — как у Seasats плашки цвета своей страницы */
.btn--plate { --btn-bg: var(--color-surface); --btn-fg: var(--color-text); --btn-icon-bg: var(--color-bg); --btn-icon-fg: var(--color-text); }
@media (hover: hover) { .btn--plate:hover:not(:disabled) { background: var(--color-surface-hover); } }
.btn--plate:active:not(:disabled), .btn--plate.is-active { background: var(--color-surface-hover); }
/* Короткая кнопка без квадрата: «Повторить», «Меню» */
.btn--text { padding: 0 var(--space-3); }
.btn--small { height: auto; padding: var(--tag-pad); font-size: var(--text-label); }
/* Телефон: главная кнопка в 12 px — «Записаться на ходовые испытания» (31 знак) входит в 358 px без переноса */
@media (max-width: 519.98px) { .btn:not(.btn--small) { font-size: var(--text-label); gap: var(--space-2); } }

/* ── Кнопка-значок: квадратная плашка со стрелкой — добавлена после проверочного блока ── */
.btn-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-hover) var(--ease-css), opacity var(--dur-hover) var(--ease-css);
}
.btn-icon svg { grid-area: 1 / 1; width: var(--arrow-size); height: var(--arrow-size); transition: transform var(--dur-icon) var(--ease-out-cubic); }
.btn-icon svg + svg { transform: translateX(calc(var(--control-height) * -1)); }
.btn-icon--prev svg + svg { transform: translateX(var(--control-height)); }
@media (hover: hover) {
  .btn-icon:hover:not(:disabled) { background: var(--color-surface-hover); }
  .btn-icon:hover:not(:disabled) svg:first-child { transform: translateX(var(--control-height)); }
  .btn-icon--prev:hover:not(:disabled) svg:first-child { transform: translateX(calc(var(--control-height) * -1)); }
  .btn-icon:hover:not(:disabled) svg + svg { transform: translateX(0); }
}
.btn-icon.is-hover { background: var(--color-surface-hover); }
.btn-icon:active:not(:disabled) { background: var(--color-surface-hover); transform: translateY(var(--border-width)); }
.btn-icon:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn-icon--light { background: var(--color-accent); color: var(--color-on-accent); }
@media (hover: hover) { .btn-icon--light:hover:not(:disabled) { background: var(--color-accent-active); } }

/* ── Поле формы: подпись, поле и сообщение — три слота; высота поля одна во всех состояниях ── */
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.field__label { font-family: var(--font-ui); font-size: var(--text-label); line-height: var(--lh-label); text-transform: var(--case-ui); color: var(--color-muted); }
.field__control {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);       /* 16 px: меньше — айфон увеличивает страницу при вводе */
  line-height: var(--lh-body);
  transition: border-color var(--dur-hover) var(--ease-css);
  appearance: none;
}
.field__control::placeholder { color: var(--color-muted); opacity: 1; }
@media (hover: hover) { .field__control:hover { border-color: var(--color-muted); } }
.field__control:focus-visible, .field.is-focus .field__control { outline: var(--focus-width) solid var(--color-accent); outline-offset: var(--focus-offset); border-color: var(--color-accent); }
.field__msg { min-height: calc(1em * var(--lh-small)); font-size: var(--text-small); line-height: var(--lh-small); color: var(--color-muted); }
.field.is-error .field__control, .field__control[aria-invalid="true"] { border-color: var(--color-error); }
.field.is-error .field__msg { color: var(--color-error); }

/* ── Подпись-метка ──────────────────────────────────────────────────────────── */
/* Плашка подписи: моно капсом, цвет страницы — Seasats 6px 12px */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--tag-pad);
  border: 0;
  border-radius: var(--radius-inner);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-ui);
  text-transform: var(--case-ui);
  white-space: nowrap;
}
.tag--ui { font-size: var(--text-ui); line-height: var(--lh-ui); }
.tag--light { background: var(--color-accent); color: var(--color-on-accent); }
/* Метка без плашки: моно капсом, приглушённая; в скобках — подписи параметров Avion */
.label { font-family: var(--font-ui); font-size: var(--text-label); line-height: var(--lh-label); text-transform: var(--case-ui); color: var(--color-muted); }
.label--scene { color: var(--color-muted-scene); }
.label--bracket::before { content: "[\00a0"; }
.label--bracket::after { content: "\00a0]"; }
/* «демо» у придуманных цифр: подсказка по наведению, фокусу и касанию */
.demo { position: relative; display: inline-flex; vertical-align: middle; }
.demo .tag { cursor: help; background: var(--color-surface); color: var(--color-muted-scene); }
.demo__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-2));
  translate: calc(-50% + var(--tip-x, 0px)) var(--space-1);
  padding: var(--tag-pad);
  border-radius: var(--radius-inner);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-css), translate var(--dur-hover) var(--ease-css), visibility 0s linear var(--dur-hover);
  z-index: 3;
}
.demo:hover .demo__tip, .demo:focus-within .demo__tip, .demo.is-open .demo__tip { opacity: 1; visibility: visible; translate: calc(-50% + var(--tip-x, 0px)) 0; transition-delay: 0s; }

/* ── Кадр хиро и меню-колонка из плашек — Seasats HeroMedia + Nav ──────────── */
.hero {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  background: var(--color-bg);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 520px) { .hero { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .hero { aspect-ratio: 16 / 9; } }
.hero__media {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--frame-size) round var(--radius-frame));
  transition: clip-path var(--dur-frame) var(--ease-css);
}
@media (min-width: 1024px) {
  .hero__media { clip-path: inset(var(--frame-size) var(--menu-width) var(--frame-size) var(--frame-size) round var(--radius-frame)); }
}
.hero.is-closed .hero__media { clip-path: inset(0 0 0 0 round 0); transition-delay: var(--dur-frame); } /* сначала колонка, потом рамка */
.hero__img, .hero__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 60% 50%; }
.hero__skin { pointer-events: none; }
.hero__body {
  position: absolute;
  inset: var(--frame-size);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-3);
  text-align: center;
  pointer-events: none;
}
@media (min-width: 1024px) { .hero__body { right: var(--menu-width); padding: var(--space-4); } }
.hero__body > * { pointer-events: auto; }
.hero__top { justify-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.hero__mark { font-size: var(--text-h3); }
.hero__title { margin-top: var(--space-5); max-width: 12ch; }
@media (min-width: 1024px) { .hero__title { max-width: none; } }
.hero__lead { max-width: 30em; margin: var(--space-3) auto 0; color: var(--color-text); text-wrap: balance; }
.hero__foot { display: grid; gap: var(--space-3); justify-items: center; }
.hero__hint { color: var(--color-muted-scene); }
.hero__hint-touch { display: none; }
@media (hover: none) { .hero__hint-mouse { display: none; } .hero__hint-touch { display: inline; } }
.hero__menu-btn { display: inline-flex; }
@media (min-width: 1024px) { .hero__menu-btn { display: none; } }
/* Появление кнопки — 0,8 с cubic-out, задержка 0,6 с + 0,15 с на кнопку — Seasats */
.rise-in { animation: rise-in var(--dur-button-in) var(--ease-out-cubic) both; animation-delay: calc(var(--delay-button-in) + var(--step-button-in) * var(--k, 0)); }
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--cascade-shift)); } to { opacity: 1; transform: none; } }

.menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: var(--menu-width);
  max-width: 70%;
  padding: var(--frame-size);
  display: flex;
  flex-direction: column;
  clip-path: inset(var(--frame-size) round var(--radius-frame));
  transition: clip-path var(--dur-frame) var(--ease-css);
}
.menu__group { display: flex; flex-direction: column; flex: var(--rows, 1) 1 0; min-height: 0; background: var(--tone, var(--color-surface)); color: var(--color-text); }
.menu__group--light { --tone: var(--color-accent); color: var(--color-on-accent); }
.menu__item {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  box-sizing: border-box;
  padding: var(--gutter) var(--space-3);
  background: var(--tone, transparent);
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-stretch: var(--stretch-display);
  font-size: var(--text-menu);
  line-height: var(--lh-menu);
  outline-offset: calc(var(--focus-width) * -1);  /* колонка обрезана clip-path: рамка фокуса — внутрь */
}
.menu__item::after { content: ""; position: absolute; inset: 0; background: var(--overlay-hover); opacity: 0; transition: opacity var(--dur-hover) var(--ease-css); pointer-events: none; }
@media (hover: hover) { .menu__item:hover::after { opacity: 1; } }
.menu__item.is-hover::after, .menu__item:focus-visible::after { opacity: 1; }
.menu__item.is-current::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--menu-strip); background: currentColor; opacity: var(--opacity-dim-text); }
.menu__head { border-bottom: var(--border-width) solid var(--line-on-scene); }
.menu__group--light .menu__head { border-bottom-color: var(--color-border); }
.menu__num { font-family: var(--font-ui); font-size: var(--text-label); line-height: var(--lh-menu); opacity: var(--opacity-dim-text); }
/* Свёрнутое меню: от колонки остаётся полоса 6 px с цветами групп — Seasats clip-path 10 → 204 px */
.hero.is-closed .menu, .menu.is-closed { clip-path: inset(var(--frame-size) var(--frame-size) var(--frame-size) calc(var(--menu-width) - var(--frame-size) - var(--menu-strip)) round var(--radius-frame)); }
.hero.is-closed .menu__item, .menu.is-closed .menu__item { visibility: hidden; transition: visibility 0s linear var(--dur-frame); }
.menu__edge { position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--frame-size) * 3); z-index: 3; display: none; border: 0; padding: 0; background: transparent; cursor: pointer; }
.hero.is-closed .menu__edge { display: block; }
@media (max-width: 1023.98px) {
  .hero .menu { clip-path: inset(var(--frame-size) var(--frame-size) var(--frame-size) 100% round var(--radius-frame)); }
  .hero .menu .menu__item { visibility: hidden; transition: visibility 0s linear var(--dur-frame); }
  .hero.is-menu-open .menu { clip-path: inset(var(--frame-size) round var(--radius-frame)); }
  .hero.is-menu-open .menu .menu__item { visibility: visible; transition-delay: 0s; }
  .hero.is-closed .menu__edge { display: none; }
}

/* ── Строка-караоке: столбец строк по центру, яркая одна — Seasats Intro ───── */
.karaoke {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  text-align: center;
}
.karaoke__line {
  transition: transform var(--dur-karaoke-in) var(--ease-css), opacity var(--dur-karaoke-in) var(--ease-css);
  transition-delay: calc(var(--i, 0) * var(--step-karaoke));
}
.karaoke__text { display: inline-block; opacity: var(--opacity-dim); transition: opacity var(--dur-karaoke) var(--ease-out); }
.karaoke__line.is-active .karaoke__text { opacity: 1; }
.karaoke.is-out .karaoke__line { opacity: 0; transform: translateY(var(--karaoke-shift)); transition-duration: var(--dur-karaoke); transition-delay: 0s; }
.karaoke.is-pre .karaoke__line { opacity: 0; transform: translateY(var(--karaoke-shift)); transition: none; }

/* ── Карточка из глубины: кадр без скругления и подпись-плашка — Seasats ────── */
.pop-card { display: grid; gap: var(--space-2); justify-items: start; width: var(--card-width); margin: 0; }
.pop-card__media { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-block); background: var(--overlay-media); overflow: hidden; }
.pop-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-media-in) var(--ease-out); }
.pop-card__media img.is-loaded { opacity: 1; }
.pop-card--cut .pop-card__media { background: transparent; aspect-ratio: 2.29 / 1; }
.pop-card--cut .pop-card__media img { object-fit: contain; }

/* ── Сцена пролёта ──────────────────────────────────────────────────────────── */
.fly {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg);
  perspective: var(--fly-perspective);
  perspective-origin: 50% 50%;
  isolation: isolate;
}
@media (max-width: 519.98px) { .fly { aspect-ratio: 9 / 16; } }
@media (min-width: 520px) { .fly { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .fly { aspect-ratio: 16 / 9; } }
.fly__under { position: absolute; inset: 0; background: var(--scene-underlay); }
.fly__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly__shade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--overlay-media) 0%, var(--overlay-media) 22%, transparent 55%, transparent 72%, var(--overlay-media) 100%); }
.fly__lines { position: absolute; left: 50%; top: var(--space-7); translate: -50% 0; width: min(36ch, calc(100% - var(--space-5))); z-index: 1; }
.fly__card { position: absolute; left: 50%; top: 50%; margin: 0; width: var(--card-width); translate: -50% -50%; will-change: transform, opacity; opacity: 0; z-index: var(--z, 1); pointer-events: none; }
.fly__outro { position: absolute; inset: auto 0 var(--space-7) 0; text-align: center; z-index: 2; }
.fly__ui { position: absolute; left: var(--space-3); bottom: var(--space-3); right: var(--space-3); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); z-index: 3; }
.fly__progress { flex: 1; height: var(--progress-height); background: var(--line-on-scene); position: relative; max-width: var(--progress-max); }
.fly__progress i { position: absolute; inset: 0; background: var(--color-text); transform-origin: left; transform: scaleX(var(--p, 0)); }
/* Уменьшение движения: пролёт стоит — все строки яркие, карточки плоской сеткой под текстом, без глубины */
.fly.is-static { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: var(--space-5) var(--space-3); padding: var(--space-7) var(--space-3) var(--space-6); perspective: none; }
@media (min-width: 520px) { .fly.is-static { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fly.is-static { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fly.is-static .fly__lines, .fly.is-static .fly__outro { position: relative; inset: auto; translate: none; grid-column: 1 / -1; justify-self: center; }
.fly.is-static .fly__card { position: relative; left: auto; top: auto; translate: none; width: auto; opacity: 1; z-index: 1; pointer-events: auto; will-change: auto; }
.fly.is-static .fly__card .tag { white-space: normal; font-size: var(--text-label); line-height: var(--lh-lead); }
.fly.is-static .fly__shade { background: var(--overlay-media); }
.fly.is-static .karaoke__text { opacity: 1; }
.fly.is-static .fly__ui { display: none; }

/* ── Оптический заголовок: слова поднимаются на 60 % и проявляются — Butter ── */
.optical .w { display: inline-block; }
.optical .w__i { display: inline-block; transform: translateY(var(--word-shift)); opacity: 0; transition: transform var(--dur-word) var(--ease-butter), opacity var(--dur-word-fade) linear; transition-delay: calc(var(--i, 0) * var(--step-word)); }
.optical.is-in .w__i { transform: none; opacity: 1; }
.optical.is-reset .w__i { transition: none; }
/* Строки текста: из-под маски с наклоном 5° — Seasats, 1,6 с power4.out, шаг 0,12 с */
.lines .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.lines .ln__i { display: block; transform: translateY(100%) skewY(var(--line-skew)); transform-origin: 0 0; transition: transform var(--dur-line) var(--ease-out-quint); transition-delay: calc(var(--delay-line) + var(--i, 0) * var(--step-line)); }
.lines.is-in .ln__i { transform: none; }
.lines.is-reset .ln__i { transition: none; }
/* Строки по Butter (вариант строк): 0,6 с, шаг 0,1 с — для абзацев под оптическим заголовком */
.lines--butter .ln { overflow: visible; }
.lines--butter .ln__i { transform: translateY(var(--word-shift)); opacity: 0; transition: transform var(--dur-line-butter) var(--ease-butter), opacity var(--dur-word-fade) linear; transition-delay: calc(var(--i, 0) * var(--step-line-butter)); }
.lines--butter.is-in .ln__i { transform: none; opacity: 1; }

/* ── Сцена моделей: фон перетекает под моделью — Seasats Products ──────────── */
.models { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg); isolation: isolate; }
@media (min-width: 520px) { .models { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .models { aspect-ratio: 16 / 9; } }
.models__bg { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-bg) var(--ease-sine-inout); }
.models__bg[data-tone="sky"] { background: var(--scene-sky); }
.models__bg[data-tone="water"] { background: var(--scene-water); }
.models__bg[data-tone="fog"] { background: var(--scene-fog); }
/* Новый слой проявляется в первые 75 % перехода, старый гаснет в последние 75 % — как у источника */
.models__bg.is-on { opacity: 1; z-index: 1; transition-duration: calc(var(--dur-bg) * .75); transition-delay: 0s; }
.models__bg.is-off { opacity: 0; z-index: 0; transition-duration: calc(var(--dur-bg) * .75); transition-delay: calc(var(--dur-bg) * .25); }
.models__yacht { position: absolute; left: 50%; bottom: 13%; width: calc(52% * var(--len, 1)); aspect-ratio: 2440 / 1137; translate: -50% 0; z-index: 2; transition: width var(--dur-bg) var(--ease-sine-inout); }
@media (max-width: 1023.98px) { .models__yacht { width: calc(86% * var(--len, 1)); bottom: 16%; } }
.models__yacht img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.models__yacht canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.models__text { position: absolute; z-index: 3; left: var(--space-3); top: var(--space-3); right: var(--space-3); display: grid; gap: var(--space-3); max-width: 34em; }
@media (min-width: 1024px) { .models__text { left: var(--space-5); top: var(--space-5); max-width: 44%; } }
.models__brief { position: absolute; z-index: 3; right: var(--space-5); top: var(--space-5); width: min(var(--brief-width), 34%); display: grid; gap: var(--space-3); }
.models__brief ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.models__brief li { padding-top: var(--space-2); border-top: var(--border-width) solid var(--line-on-scene); }
@media (max-width: 1023.98px) { .models__brief { display: none; } }
.models__nav { position: absolute; z-index: 4; left: 50%; bottom: var(--space-3); translate: -50% 0; display: flex; gap: var(--space-2); align-items: center; }
@media (max-width: 519.98px) { .models__nav .btn-icon { display: none; } }

/* ── Переключатель моделей: панель плашек, активная — в тоне своей модели ──── */
.switch {
  --tone: var(--tone-sky);
  display: inline-flex;
  gap: var(--control-pad);
  padding: var(--control-pad);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  clip-path: inset(0 0 0 0 round var(--radius-control));
  transition: clip-path var(--dur-panel-in) var(--ease-css);
}
.switch.is-hidden { clip-path: inset(0 50% 0 50% round var(--radius-control)); transition-duration: var(--dur-panel-out); }
.switch__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: calc(var(--control-height) - var(--control-pad) * 2);
  padding: 0 var(--gutter);
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  text-transform: var(--case-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-css);
}
@media (hover: hover) { .switch__btn:hover { background: var(--color-surface); } }
.switch__btn.is-hover { background: var(--color-surface); }
.switch__btn[aria-pressed="true"] { background: var(--tone); }
.switch__btn:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
@media (max-width: 519.98px) { .switch__btn { padding: 0 var(--space-2); gap: var(--space-1); } }
/* Длина модели точками: 7, 9 и 12 — язык диодов вместо значка лодки у Seasats */
.switch__len { display: inline-flex; gap: var(--len-dot); }
.switch__len i { width: var(--len-dot); height: var(--len-dot); border-radius: 50%; background: currentColor; }
.tone-sky { --tone: var(--tone-sky); }
.tone-water { --tone: var(--tone-water); }
.tone-fog { --tone: var(--tone-fog); }

/* ── Ряд характеристик с пометкой «демо» — Seasats Comparison и «Вкратце» ──── */
.specs { display: grid; margin: 0; }
.specs__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); }
.specs__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: var(--gutter) 0; }
.specs__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--border-width); background: var(--line, var(--color-border)); transform-origin: 0 50%; transition: transform var(--dur-line) var(--ease-css); transition-delay: calc(var(--i, 0) * var(--step-line)); }
.specs.is-pre .specs__row::before { transform: scaleX(0); transition: none; }
.specs__label { font-family: var(--font-ui); font-size: var(--text-ui); line-height: var(--lh-ui); text-transform: var(--case-ui); color: var(--label-color, var(--color-muted)); }
.specs__value { font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--stretch-display); font-size: var(--text-h3); line-height: var(--lh-h3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.specs--scene { --line: var(--line-on-scene); --label-color: var(--color-muted-scene); }

/* ── Живые числа и подвал — Seasats Footer ─────────────────────────────────── */
.live { position: relative; display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-9) + var(--space-5)), max-content)); gap: var(--space-5) var(--space-7); align-items: end; }
.stat { display: grid; gap: var(--space-2); }
.stat__value { display: flex; align-items: baseline; gap: var(--space-1); }
.stat__num { font-family: var(--font-ui); font-size: var(--text-number); line-height: var(--lh-number); font-variant-numeric: tabular-nums; }
.stat__unit { font-family: var(--font-ui); font-size: var(--text-label); line-height: var(--lh-label); text-transform: var(--case-ui); }
.stat__phrase { min-height: calc(2em * var(--lh-lead)); }
.foot { position: relative; overflow: hidden; background: var(--color-bg); padding: var(--space-6) var(--margin-page) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.foot__field { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; width: 100%; pointer-events: none; opacity: 1; }
.foot__row { position: relative; display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .foot__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.foot__links a { font-family: var(--font-display); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); font-size: var(--text-h3); line-height: var(--lh-h3); display: inline-flex; }
.foot__links a:focus-visible { outline-offset: var(--space-1); }
.foot__mark { position: relative; display: block; padding-bottom: var(--margin-page); }
.foot__mark .t-wordmark { display: inline-block; font-size: var(--text-display); pointer-events: none; } /* знак не кнопка: его поля глифов не перекрывают ссылки и кнопки над ним */
/* Каскад подвала: 1,6 с power4.out, старт 0,2 + 0,12 × (k − 1) с, y 40 px, наклон 3° */
.cascade > * { transform: translateY(var(--cascade-shift)) skewY(var(--cascade-skew)); opacity: 0; transform-origin: 0 0; transition: transform var(--dur-cascade) var(--ease-out-quint), opacity var(--dur-cascade) var(--ease-out-quint); transition-delay: calc(var(--delay-cascade) + var(--k, 0) * var(--step-cascade)); }
.cascade.is-in > * { transform: none; opacity: 1; }
.cascade.is-reset > * { transition: none; }

/* ── Обложка «С обложки»: страница журнала 4:5 растёт в разворот — Sobha ──── */
.cover-scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg); container-type: inline-size; --e: 0; --p: 0; }
.cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqi;
  aspect-ratio: 4 / 5;
  translate: -50% -50%;
  transform: scale(calc(1 / 3 + 2 / 3 * var(--e)));
  transform-origin: 50% 50%;
  background: var(--color-text);   /* жемчужная бумага — единственная светлая поверхность */
  color: var(--color-on-accent);
  will-change: transform;
}
.cover__top { position: absolute; left: 0; right: 0; top: 7%; display: grid; justify-items: center; gap: 2cqi; text-align: center; }
.cover__kicker { font-family: var(--font-ui); font-size: calc(var(--text-label) * 3); line-height: var(--lh-label); text-transform: var(--case-ui); }
.cover__title { font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: var(--stretch-display); letter-spacing: var(--tracking-display); font-size: 9cqi; line-height: var(--lh-display); }
.cover__frame { position: absolute; left: 25%; top: 50%; width: 50%; aspect-ratio: 3 / 2; translate: 0 -50%; overflow: hidden; clip-path: inset(0 calc(26.66% * (1 - var(--e)))); }
.cover__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.25 - .25 * var(--e))); }
.cover__para { position: absolute; left: 8.33%; right: 8.33%; bottom: 3.33%; font-family: var(--font-body); font-size: calc(var(--text-small) * 3); line-height: var(--lh-small); text-align: center; transform: scale(calc(1 - 2 / 3 * var(--e))); transform-origin: 50% 100%; }
.cover-scene .label { color: inherit; }
.cover-scene__cap, .cover-scene__text { position: absolute; color: var(--color-on-accent); opacity: clamp(0, calc((var(--p) - .5) * 2), 1); z-index: 2; }
.cover-scene__cap { right: calc(75% + var(--space-3)); top: calc(50% - 100cqi / 6); width: 20%; text-align: right; display: grid; gap: var(--space-2); justify-items: end; }
.cover-scene__text { left: calc(75% + var(--space-4)); bottom: calc(50% - 100cqi / 6); width: 18%; font-size: var(--text-small); line-height: var(--lh-small); }
.cover-scene__ui { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 3; }
/* На телефоне приближения нет: обложка во всю ширину, разворот под ней — как решено в карточке механики */
@media (max-width: 519.98px) {
  .cover-scene { aspect-ratio: auto; display: grid; gap: var(--space-4); padding-bottom: var(--space-4); --e: 1; --p: 1; }
  .cover { position: relative; left: auto; top: auto; translate: none; transform: none; width: 100%; aspect-ratio: 4 / 5; }
  .cover__frame { clip-path: none; }
  .cover__frame img { transform: none; }
  .cover__para { transform: scale(.3333); }
  .cover__kicker { font-size: var(--text-label); }
  .cover__title { font-size: 11cqi; }
  .cover__frame { left: 10%; width: 80%; }
  .cover-scene__cap, .cover-scene__text { position: static; opacity: 1; width: auto; text-align: left; justify-items: start; color: var(--color-text); padding: 0 var(--space-3); }
  .cover-scene__ui { display: none; }
}

/* ── Значки реакций из точек: сетка 9 × 9, горят белым, остальные — спят ───── */
.dot-icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); color: var(--diode-color); flex: none; }
.dot-icon--l { width: var(--icon-size-l); height: var(--icon-size-l); }
.dot-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dot-icon circle { fill: currentColor; opacity: var(--diode-dim); }
.dot-icon circle.on { opacity: 1; }
.dot-icon.is-live circle.on { animation: var(--anim, diode-pulse) var(--period, var(--dur-pulse)) var(--ease-sine-inout) infinite; animation-delay: calc(var(--period, var(--dur-pulse)) * var(--d, 0)); }
.dot-icon[data-dot-icon="wave"] { --period: var(--dur-ring); --anim: diode-wave; }
.dot-icon[data-dot-icon="step"] { --period: calc(var(--dur-step) * 2); --anim: diode-step; }
.dot-icon[data-dot-icon="wind"] { --period: var(--dur-wind); --anim: diode-wave; }
.dot-icon[data-dot-icon="alert"] { --period: var(--dur-pulse); --anim: diode-pulse; }
@keyframes diode-wave { 0% { opacity: var(--diode-dim); } 18% { opacity: 1; } 60%, 100% { opacity: var(--diode-dim); } }
@keyframes diode-step { 0%, 49% { opacity: 1; } 50%, 100% { opacity: var(--diode-dim); } }

/* ── Реакции: колонки параметров и круг-шкала — Avion ───────────────────────── */
.reactions { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0 0; background: var(--color-bg); }
.reactions__stage { position: relative; aspect-ratio: 2.29 / 1; margin: 0 auto; width: min(100%, var(--stage-max)); }
.reactions__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(.55); }
.reactions__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.reactions__dial { position: relative; justify-self: center; display: grid; place-items: center; width: var(--dial-size); height: var(--dial-size); }
.reactions__ring { position: absolute; inset: 0; transition: transform var(--dur-dial) var(--ease-swing); }
.reactions__ring circle { fill: var(--diode-color); opacity: var(--diode-dim); }
.reactions__ring circle.on { opacity: 1; }
.reactions__icons { position: relative; display: grid; place-items: center; }
.reactions__icons .dot-icon { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-param-icon) var(--ease-css); }
.reactions__icons .dot-icon.is-on { opacity: 1; }
.reactions__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-width) solid var(--color-border); }
@media (min-width: 1024px) { .reactions__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reactions__col {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  align-content: start;
  padding: var(--space-4) var(--space-2);
  border: 0;
  border-left: var(--border-width) solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  opacity: var(--opacity-inactive);
  transition: opacity var(--dur-param) var(--ease-material);
  outline-offset: calc(var(--focus-width) * -1);
}
.reactions__col:first-child { border-left: 0; }
@media (hover: hover) { .reactions__col:hover { opacity: var(--opacity-dim-text); } }
.reactions__col[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 var(--focus-width) 0 var(--color-accent); }
.reactions__col .t-small { color: var(--color-muted-scene); max-width: 24ch; }
/* вход — фильтром и сдвигом: прозрачность колонки занята выбором */
.reactions__in > * { filter: opacity(0); translate: 0 var(--cascade-shift); transition: opacity var(--dur-param) var(--ease-material), filter var(--dur-param-in) var(--ease-param-in), translate var(--dur-param-in) var(--ease-param-in); transition-delay: 0s, calc(var(--delay-param-in) + var(--k, 0) * var(--step-param-in)), calc(var(--delay-param-in) + var(--k, 0) * var(--step-param-in)); }
.reactions__in.is-in > * { filter: none; translate: 0 0; }

/* ── Свет под кожей: фото, холст диодов и плашки пресетов ──────────────────── */
.skin { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg); }
@media (min-width: 520px) { .skin { aspect-ratio: 16 / 9; } }
.skin img, .skin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.skin img { object-fit: cover; object-position: 60% 50%; }
.skin canvas { pointer-events: none; }
.skin__ui { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2); z-index: 2; pointer-events: none; }
.skin__ui > * { pointer-events: auto; }
.skin__hint { color: var(--color-muted-scene); pointer-events: none; }

/* ── Прелоадер: поле точек, как вода; корпус собирается из точек — Cipher + Seasats ── */
.pre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg); display: grid; place-items: center; transition: opacity var(--dur-pre-out) var(--ease-css); }
@media (min-width: 520px) { .pre { aspect-ratio: 16 / 9; } }
.pre canvas, .pre__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pre__img { object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity var(--dur-reveal) var(--ease-css); }
.pre.is-revealed .pre__img { opacity: 1; }
.pre canvas { pointer-events: none; }
.pre__mark { position: absolute; left: 50%; top: 14%; translate: -50% 0; display: flex; overflow: hidden; font-size: var(--text-h2); z-index: 1; }
.pre__mark span { display: inline-block; }
.pre.is-done .pre__mark span { animation: letter-hide var(--dur-pre-letter) var(--ease-in-cubic) forwards; animation-delay: calc(var(--step-pre-letter) * (var(--i, 0) + 1)); }
@keyframes letter-hide { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.pre__status { position: absolute; left: 50%; bottom: var(--space-5); translate: -50% 0; color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pre__status { transition: opacity var(--dur-pre-out) var(--ease-css); }
.pre.is-done .pre__status { opacity: 0; }
.pre__ui { position: absolute; right: var(--space-3); top: var(--space-3); }

/* ── Галерея мест: лента карточек с прокруткой по точкам — проверочный блок ── */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-1); }
.gallery__track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .gallery__track { grid-auto-columns: calc((100% - var(--space-4) * 2) / 2.4); } }
.gallery__card { scroll-snap-align: start; display: grid; gap: var(--space-2); margin: 0; }
.gallery__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--overlay-media); }
@media (min-width: 1024px) { .gallery__media { aspect-ratio: 4 / 3; } }
.gallery__media img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--opacity-dim-text); transition: opacity var(--dur-karaoke) var(--ease-out); }
.gallery__card.is-active .gallery__media img { opacity: 1; }
.gallery__media .tag { position: absolute; left: var(--space-2); top: var(--space-2); }
.gallery__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.gallery__nav { display: flex; gap: var(--space-2); }
.dotmap { position: relative; aspect-ratio: 4 / 1; background: var(--color-bg); overflow: hidden; }
.dotmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dotmap__pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.dotmap__pin i { width: var(--pin-size); height: var(--pin-size); border-radius: 50%; background: var(--diode-color); opacity: var(--opacity-dim); transition: opacity var(--dur-karaoke) var(--ease-out); }
.dotmap__pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--pin-size); height: var(--pin-size); margin: calc(var(--pin-size) / -2) 0 0 calc(var(--pin-size) / -2); border-radius: 50%; box-shadow: 0 0 0 var(--border-width) var(--diode-color); opacity: 0; }
.dotmap__pin[aria-pressed="true"] i { opacity: 1; }
.dotmap__pin[aria-pressed="true"]::after { animation: pin-ring var(--dur-ring) var(--ease-out) infinite; }
@keyframes pin-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
.dotmap__label { position: absolute; left: var(--x); top: calc(var(--y) + var(--space-4)); translate: -50% 0; white-space: nowrap; pointer-events: none; }

/* ── Уменьшение движения: циклы стоят, состояния видны сразу ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .diodes i, .dot-icon.is-live circle.on, .dotmap__pin[aria-pressed="true"]::after, .rise-in { animation: none; }
  .diodes i { opacity: 1; }
  .rise-in { opacity: 1; transform: none; }
}
.reduce-motion .diodes i, .reduce-motion .dot-icon.is-live circle.on, .reduce-motion .dotmap__pin[aria-pressed="true"]::after, .reduce-motion .rise-in { animation: none; }
.reduce-motion .diodes i { opacity: 1; }
.reduce-motion .rise-in { opacity: 1; transform: none; }