/* =====================================================================
   «ГРЁЗЫ» — стили
   Все цвета, шрифты и размеры взяты из макета в Figma (фрейм «макет», 393 px).
   Координаты внутри блоков — те же, что в Figma: top/left в пикселях
   от верхнего левого угла блока шириной 393 px.
   ===================================================================== */

/* ---------- Шрифты ---------- */
@font-face {
  font-family: "Emotical Typeface";
  src: url("../fonts/emotical-title.woff2") format("woff2");
  font-display: block;           /* в файле всего 5 букв, он крошечный — ждём его, а не показываем чужой шрифт */
  /* В шрифте два набора «высот букв»: один читают Mac и Figma, другой — Windows.
     Во втором буквы стоят на 44 px ниже, и на Windows заголовок налезал на подпись.
     Эти три строки заставляют все системы брать высоты как в Figma. */
  ascent-override: 46.4%;
  descent-override: 54%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Pushkin";
  src: url("../fonts/pushkin.woff2") format("woff2");
  font-display: swap;
  /* То же выравнивание высот, что у заголовка: одинаково на Windows, Mac и в Figma */
  ascent-override: 93.6%;
  descent-override: 74.8%;
  line-gap-override: 0.7%;
}
/* Inter — бесплатный шрифт (лицензия SIL OFL, файл fonts/Inter-OFL.txt).
   Один файл содержит все начертания; кириллица и латиница — отдельными файлами,
   браузер скачивает только нужный. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Переменные из Figma ---------- */
:root {
  --black: #000103;
  --white: #FFFDF9;
  --blue-500: #7A90E1;
  --blue-800: #1A2E73;
  --red: #CC2936;
  --neutral-400: #9F9FA9;
  --neutral-500: #71717B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-900: #18181B;

  /* Серый «непрочитанный» текст в блоке «О чём».
     В макете #52525C (контраст 2.7:1).
     Предложение: #7B7B85 (контраст 4.9:1) — чтобы включить, поменяйте значение ниже. */
  --about-dim: #52525C;

  --font-title: "Emotical Typeface", "Pushkin", cursive;
  --font-hand: "Pushkin", cursive;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  --stage: 393px;                /* ширина макета */

  /* ---- Первый экран подгоняется под высоту телефона ----
     Из Figma: полная высота 976, заголовок начинается за 320 px до низа блока,
     между рисунком и заголовком 57 px, рисунок 443 × 399.
     НА ГЛАЗ (можно менять): */
  --hero-min: 640px;             /* ниже этой высоты экран не сжимается — иначе рисунок станет совсем мелким */
  --hero-drawing-top: 100px;     /* выше этой линии рисунок не поднимается (под логотипом 52 + 23 px и воздух) */
  --hero-scroll-gap: 16px;       /* от кнопки «Листайте вниз» до нижнего края экрана */

  --hero-h: clamp(var(--hero-min), 100vh, 976px);
}
/* svh — высота экрана с учётом панелей браузера на телефоне.
   Где браузер её не знает, остаётся обычная vh из строки выше. */
@supports (height: 100svh) {
  :root { --hero-h: clamp(var(--hero-min), 100svh, 976px); }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* запасной вариант для старых браузеров */
}

img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p { margin: 0; font-weight: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

/* Текст только для программ чтения с экрана */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.noscript { padding: 24px; font-size: 16px; }

/* ---------- Блок и «сцена» ----------
   Каждый блок во всю ширину экрана, а внутри — «сцена» шириной 393 px,
   ровно как фрейм в Figma, всегда по центру экрана.
   На узком телефоне (360 px) края сцены чуть срезаются, но все тексты
   стоят в колонке 345 px и помещаются. */
.block {
  position: relative;
  width: 100%;
  overflow-x: clip;
}
.stage {
  position: relative;
  width: var(--stage);
  left: 50%;
  margin-left: calc(var(--stage) / -2);
}

/* Картинка, которой пока нет.
   Обычно она просто тихо исчезает: зритель не видит ни битой иконки, ни рамки.
   В режиме проверки (открыть страницу с ?dev в конце адреса, например
   index.html?dev) на её месте видна пунктирная рамка с именем нужного файла. */
.asset { position: absolute; display: block; }
.asset > img { width: 100%; height: 100%; object-fit: contain; }
.asset.is-missing > img { visibility: hidden; }

.dev .asset.is-missing { outline: 1px dashed rgba(122, 144, 225, .55); outline-offset: -1px; }
.dev .asset.is-missing::after {
  content: attr(data-file);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  padding: 4px 8px;
  font: 500 13px/18px var(--font-text);
  color: var(--blue-500);
  background: rgba(0, 1, 3, .7);
  text-align: center;
  white-space: normal;
}


/* =====================================================================
   ШАПКА — закреплена сверху на всех экранах
   В Figma логотип стоит на 52 px от верха, но это место под строку состояния
   телефона (часы, батарея) в рамке макета. В браузере её нет, поэтому шапка
   начинается от самого верха, а логотип стоит по центру её высоты.
   ===================================================================== */
:root {
  --header-h: 56px;              /* НА ГЛАЗ: высота шапки */
  --progress-w: 171px;           /* из Figma: длина линии прогресса */
  --progress-h: 2px;             /* НА ГЛАЗ: толщина линии (в Figma — векторная линия, толщину не видно) */
}
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: var(--header-h);
  background: var(--black);
}
.site-header__inner {
  height: 100%;
  width: min(345px, calc(100% - 48px));       /* как колонка текста в макете: 345 px, поля 24 */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1024px) {
  .site-header__inner { width: min(1200px, calc(100% - 80px)); }   /* как контейнер первого экрана */
}
.site-header__logo {
  font: 500 20px/23px var(--font-text);       /* из Figma */
  letter-spacing: -0.1px;
  color: var(--neutral-500);
}
/* Кнопка меню: значок 24 × 19 (из Figma), а нажимать можно на 44 × 44 */
.site-header__burger {
  width: 44px; height: 44px;
  margin-right: -10px;                        /* значок встаёт ровно по правому краю колонки */
  display: grid;
  place-items: center;
  color: var(--neutral-500);
}
.site-header__icon { width: 24px; height: auto; }

/* Полоска прогресса — линия между логотипом и меню (Figma: 171 px).
   Серая линия — вся страница, голубая — сколько уже пролистано. */
.site-header__progress {
  width: var(--progress-w);
  height: var(--progress-h);
  border-radius: 2px;
  background: var(--neutral-800);
  overflow: hidden;
}
.site-header__progress i {
  display: block;
  height: 100%;
  background: var(--blue-500);                /* НА ГЛАЗ: цвет заполнения в макете не показан */
  transform: scaleX(0);
  transform-origin: left center;
}
@media (min-width: 1024px) {
  :root { --progress-w: 320px; }              /* НА ГЛАЗ: на широкой шапке 171 px теряется */
}

/* Блоки не прячутся под шапку, когда к ним переходишь по ссылке */
.block { scroll-margin-top: var(--header-h); }
.block:focus { outline: none; }

/* ---------- Меню — Figma «navigation» ----------
   Чёрный фон на весь экран, по центру карточка 345 px.
   Сверху карточки — хронометраж и крестик, ниже — пункты. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 20;                                /* выше шапки */
  background: var(--black);
  overflow-y: auto;
  padding: 179px 0 40px;                      /* из Figma: карточка на 179 px от верха */
}
.menu[hidden] { display: none; }
@media (max-height: 700px), (min-width: 1024px) {
  /* на низком экране и на десктопе карточка встаёт по центру по вертикали */
  .menu { display: grid; place-items: center; padding: 24px 0; }
  .menu[hidden] { display: none; }
}
.menu__card {
  width: min(345px, calc(100% - 48px));
  margin: 0 auto;
  padding: 16px 20px 40px;
  background: var(--neutral-900);
  filter: drop-shadow(0 1px 2px rgba(47, 13, 104, .04)) drop-shadow(0 4px 5px rgba(47, 13, 104, .08));
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.menu__top {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-height: 20px;
}
/* Хронометраж по центру карточки: 13 px, белый, между пунктами 40 px (из Figma) */
.menu__facts {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  margin: 0; padding: 0;
  list-style: none;
  font: 500 13px/18px var(--font-text);
  letter-spacing: 0.26px;
  color: var(--white);
  white-space: nowrap;
}
/* Крестик: рисунок 20 × 20, а нажимать можно на 44 × 44 */
.menu__close {
  width: 44px; height: 44px;
  margin: -12px -12px -12px 0;
  display: grid;
  place-items: center;
  color: var(--white);
}
.menu__close-icon { width: 20px; height: 20px; }

.menu__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;                                  /* из Figma — но см. ниже про зону нажатия */
  text-align: center;
}
.menu__link {
  display: block;
  font: 500 28px/36px var(--font-text);       /* из Figma: heading/m */
  letter-spacing: -0.28px;
  color: var(--blue-500);
  text-decoration: none;
  /* Строка 36 px, а нажимать можно на 44: добавляем по 4 px сверху и снизу,
     промежуток между пунктами уменьшаем на столько же — визуально ничего не меняется */
  padding: 4px 0;
  margin: -4px 0;
}
.menu-open, .menu-open body { overflow: hidden; }   /* страница под открытым меню не листается */

/* =====================================================================
   1. ПЕРВЫЙ ЭКРАН — Figma «hero», 393 × 976
   ===================================================================== */
.hero { background: var(--black); z-index: 2; overflow: visible; overflow-x: clip; overflow-clip-margin: 0; }
.hero .stage { height: var(--hero-h); }


/* Рисунок стоит на 57 px выше заголовка. Если экран низкий, рисунок
   уменьшается (пропорции сохраняются), но не заходит выше --hero-drawing-top.
   На экране высотой 976 он ровно там же, где в Figma: 443 × 399, top 200. */
.hero__drawing {
  top: auto;
  bottom: calc(320px + 57px);
  height: min(399px, calc(var(--hero-h) - 320px - 57px - var(--hero-drawing-top)));
  aspect-ratio: 443 / 399;
  left: 50%;
  transform: translateX(calc(-50% + 4px));   /* в Figma центр рисунка на 4 px правее центра экрана */
}
.hero__drawing > img { object-fit: cover; }

.hero__titles {
  position: absolute;
  left: 50%;
  top: calc(var(--hero-h) - 320px);   /* в Figma: 656 из 976 */
  width: 345px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  color: var(--blue-500);
  text-align: center;
}
/* Размеры заголовка записаны в em — долях кегля. Тогда при смене кегля
   (на десктопе он больше) точки над Ё и габариты едут вместе с буквами.
   Пересчёт из Figma при кегле 140 px: ширина 347 = 2.479em, высота 85 = 0.607em,
   трекинг −4.2 = −0.03em, точки: left 177 = 1.264em, top −28 = −0.2em,
   габарит 36 × 15 = 0.257em × 0.108em. */
.hero__title {
  position: relative;
  font: 400 var(--hero-title-size, 140px)/1.2 var(--font-title);
  width: 2.479em;
  height: 0.607em;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.hero__yo {                       /* точки над Ё — отдельный рисунок, как в макете */
  position: absolute;
  left: 1.264em; top: -0.2em;
  width: 0.257em; height: 0.108em;
}
/* Временные точки над Ё, пока нет файла img/hero/yo.svg.
   Нарисованы НА ГЛАЗ: размер точки — переменная --yo-dot.
   Буква Ё из шрифта не используется совсем — так решила график. */
.hero__yo-temp {
  position: absolute;
  left: 1.264em; top: -0.2em;
  width: 0.257em; height: 0.108em;       /* габарит точек — из Figma */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero__yo-temp i {
  width: var(--yo-dot, 0.093em);          /* 13 px при кегле 140 */
  height: var(--yo-dot, 0.093em);
  border-radius: 50%;
  background: currentColor;
}

.hero__subtitle {
  width: 100%;
  font: 400 var(--hero-subtitle-size, 32px)/0.91 var(--font-hand);
}

/* Край во всю ширину экрана: на телефоне 393 px он 402 px, как в макете,
   на экране шире — растягивается до краёв (до 1024 px, дальше — повтор, см. ниже) */
.hero__edge { left: calc(50% + 0.5px); bottom: 0; width: max(402px, 100vw + 4px); height: 96px; transform: translateX(-50%); }
.hero__edge > img { object-fit: fill; }

.hero__scroll {
  position: absolute;
  left: calc(50% + 0.5px);
  /* В Figma кнопка на 934 px и вылезает за низ блока на 14 px.
     Здесь она всегда целиком на экране: --hero-scroll-gap от нижнего края. */
  top: calc(var(--hero-h) - 56px - var(--hero-scroll-gap));
  transform: translateX(-50%);
  z-index: 1;
  height: 56px;
  min-width: 120px;
  padding: 12px 28px;
  border-radius: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--neutral-400);
  font: 700 16px/22px var(--font-text);
  letter-spacing: 0.32px;
  text-decoration: none;
  white-space: nowrap;
}
.hero__scroll svg,
.hero__arrow { width: 21px; height: 24px; flex: none; }   /* размер файла стрелки из Figma */


/* ---------- Первый экран на десктопе (от 1024 px) ----------
   Макета для десктопа нет, композиция моя.
   Две колонки в контейнере до 1200 px: слева заголовок с подписью, справа рисунок.
   Слово ГРЕЗЫ растягивается на всю ширину левой колонки — чем шире экран,
   тем крупнее слово (пока контейнер не упрётся в 1200 px).
   Всё, что НА ГЛАЗ, — в переменных ниже. */
@media (min-width: 1024px) {
  .hero {
    --hero-side: 40px;                 /* поля по бокам */
    --hero-col-gap: 48px;              /* на глаз: промежуток между колонками */
    --hero-gap: 32px;                  /* на глаз: от заголовка до подписи */
    --hero-subtitle-size: 44px;        /* на глаз: 32 из макета × ~1.4 */
    --hero-drawing-max: 620px;         /* на глаз: наибольшая высота рисунка */
  }
  .hero .stage {
    width: min(1200px, calc(100% - 2 * var(--hero-side)));
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: var(--hero-col-gap);
    /* сверху — место под шапку, снизу — под кнопку «Листайте вниз» */
    padding: calc(var(--header-h) + 24px) 0 calc(56px + var(--hero-scroll-gap) + 24px);
  }

  /* Левая колонка: заголовок и подпись по центру по вертикали */
  .hero__titles {
    position: static;
    grid-column: 1; grid-row: 1;
    align-self: center;
    transform: none;
    width: 100%;
    align-items: center;
    gap: var(--hero-gap);
    container-type: inline-size;       /* заголовок мерит ширину этой колонки */
  }
  /* Буквы слова ровно от левого до правого края колонки.
     Измерено по файлу шрифта: сами буквы (без пустых полей по бокам) занимают
     2.244 кегля, а первая буква начинается на 0.0445 кегля правее своей клетки.
     Значит, кегль = ширина колонки / 2.244, и строку сдвигаем влево на 0.0445em.
     Первая строка font-size — для старых браузеров, вторая — точная. */
  .hero__title {
    font-size: calc((min(1200px, 100vw - 2 * var(--hero-side)) - var(--hero-col-gap)) / 2 / 2.244);
    font-size: calc(100cqw / 2.244);
    width: 2.244em;
    text-align: left;
    text-indent: -0.0445em;
    margin-top: 0.2em;                 /* место под точки над Ё — они выше строки */
  }
  /* Точки над Ё едут вместе со сдвигом строки: 1.264 − 0.0885 − 0.0445 = 1.131em */
  .hero__yo,
  .hero__yo-temp { left: 1.131em; }
  /* balance — строки примерно равной длины, без одинокого «снов» на второй строке */
  .hero__subtitle { width: auto; max-width: 100%; text-wrap: balance; }

  /* Правая колонка: рисунок во всю высоту колонки, пропорции сохраняются */
  .hero__drawing {
    position: relative;
    grid-column: 2; grid-row: 1;
    left: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: var(--hero-drawing-max);
    align-self: center;
    aspect-ratio: auto;
  }
  .hero__drawing > img { position: absolute; inset: 0; object-fit: contain; }

  .hero__scroll { top: auto; bottom: var(--hero-scroll-gap); }

  /* Рваный край: на широком экране не растягиваем картинку (она поплывёт),
     а повторяем по горизонтали. Повторяется пара «картинка + её зеркальная копия»
     (файл edge-hero-wide.webp, 804 × 96): так края совпадают и шва не видно. */
  .hero__edge {
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: url("../img/edges/edge-hero-wide.webp") repeat-x left bottom / 804px 96px;
  }
  .hero__edge > img { display: none; }
}

/* =====================================================================
   2. ФАКТЫ НА ОДЕЯЛАХ — Figma «facts», 393 × 792
   Три слоя, каждый — одеяло со своим словом.
   При прокрутке красное одеяло выезжает слева, нижнее белое — снизу.
   ===================================================================== */
.facts { background: var(--blue-800); z-index: 1; }
.facts .stage { height: 792px; }

.facts__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* Одеяла: размеры и положение — по габаритам слоёв Background в Figma */
.facts__blanket--top    { left: -83.9px; top: -50.2px; width: 622.73px; height: 848.26px; }
.facts__blanket--middle { left: -92px;   top: 132.4px; width: 567.51px; height: 832.12px; }
.facts__blanket--bottom { left: -99px;   top: 394.1px; width: 634.54px; height: 856.23px; }

/* Слова из плюшевых букв */
.facts__word--top    { left: 100px; top: 95px;  width: 223.89px; height: 75.48px; }
.facts__word--middle { left: 23px;  top: 256px; width: 357.2px;  height: 143.8px; }
.facts__word--bottom { left: 121px; top: 596px; width: 223.89px; height: 75.48px; }

/* Если картинки со словом нет — показываем сам текст */
.facts__word.is-missing::after,
.dev .facts__word.is-missing::after {
  content: attr(data-text);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 700 32px/1.1 var(--font-text);
  text-transform: uppercase;
  color: var(--blue-800);
  background: var(--white);
  padding: 4px 10px;
  white-space: nowrap;
  max-width: none;
}

/* =====================================================================
   3. О ЧЁМ — Figma «about», 393 × 918
   ===================================================================== */
.about { background: var(--black); }
.about .stage { height: 918px; }

.about__edge { left: 0; top: 0; width: 402px; height: 64px; }
.about__edge > img { object-fit: fill; }

.about__label {
  position: absolute;
  left: 154px; top: 149px;
  font: 400 32px/0.91 var(--font-hand);
  color: var(--blue-500);
  white-space: nowrap;
}
.about__text {
  position: absolute;
  left: 50%; top: 212px;
  width: 345px;
  transform: translateX(-50%);
  font: 400 32px/1.2 var(--font-text);
  letter-spacing: -0.32px;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue-500);
}
/* Слова, которые ещё не «прочитаны». Класс ставит скрипт — без скрипта весь текст синий. */
.about__text .w { transition: color 200ms linear; }
.about__text .w.is-dim { color: var(--about-dim); }

.about__quote {
  position: absolute;
  left: 9px; top: 719px;
  width: 313px;
  font: 400 25px/0.8 var(--font-hand);
  color: var(--blue-500);
  text-align: center;
}
.about__quote-tail {
  position: absolute;
  left: 145px; top: 759px;
  width: 313px;
  font: 400 25px/0.8 var(--font-hand);
  color: var(--blue-500);
  text-align: center;
}

/* =====================================================================
   4. ПОДУШКИ «НАМ СНИЛОСЬ…» — Figma «sky», 393 × 1080
   ===================================================================== */
.pillows { background: var(--black); }
.pillows .stage { height: 1080px; }

.pillows__title {
  position: absolute;
  left: 24px; top: 52px;
  font: 400 48px/1.2 var(--font-hand);
  letter-spacing: -0.48px;
  color: var(--blue-500);
  white-space: nowrap;
}
.pillows__title span { display: block; }
.pillows__title span + span { margin: -18.6px 0 0 32px; }   /* вторая строка: сдвиг 32 px вправо, 39 px от первой */

/* Поле с подушками — Figma «Frame 41»: 450 × 984, сдвинуто на −28 px */
.pillows__field {
  position: absolute;
  left: -28px; top: 27px;
  width: 450px; height: 984px;
  overflow: hidden;
}

/* Подушка = кнопка. Место нажатия чуть меньше картинки, чтобы соседние
   подушки не перехватывали нажатия друг у друга. */
.pillow {
  position: absolute;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.pillow .asset { inset: 0; }
.pillow__hit {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
}
.pillow:focus-visible { outline: none; }
.pillow:focus-visible .pillow__hit { outline: 2px solid var(--blue-500); outline-offset: 2px; }

/* Положение и размер — габариты картинок в Figma (уже с поворотом) */
.pillow--pillow           { left: 162px; top: 202px; width: 359.18px; height: 392.56px; }
.pillow--moon             { left: 136px; top: -30px; width: 343.49px; height: 343.49px; }
.pillow--star-red         { left: -28px; top: 363px; width: 288.43px; height: 288.43px; }
.pillow--star-white-small { left: 253px; top: 507px; width: 131.17px; height: 131.17px; }
.pillow--star-white-big   { left: 15px;  top: 194px; width: 168.63px; height: 168.63px; }

/* Покачивание */
@keyframes pillow-sway {
  from { transform: rotate(-2.5deg) translateY(0); }
  to   { transform: rotate(2.5deg)  translateY(-4px); }
}
/* Подушка, на которую нажали, качается сильнее один раз */
@keyframes pillow-poke {
  0%   { transform: rotate(0) scale(1); }
  30%  { transform: rotate(-7deg) scale(1.04); }
  60%  { transform: rotate(5deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .pillow .asset { animation: pillow-sway var(--sway, 4s) ease-in-out var(--delay, 0s) infinite alternate; }
  .pillow--moon             { --sway: 4.6s; --delay: -1.2s; }
  .pillow--pillow           { --sway: 3.8s; --delay: -2.0s; }
  .pillow--star-red         { --sway: 4.2s; --delay: -0.4s; }
  .pillow--star-white-small { --sway: 3.2s; --delay: -1.6s; }
  .pillow--star-white-big   { --sway: 3.6s; --delay: -2.8s; }
  .pillow.is-poked .asset   { animation: pillow-poke 600ms ease-out 1; }
  .pillows.is-offscreen .pillow .asset { animation-play-state: paused; }
}

/* Карточка сна — Figma «Frame 24», стоит внизу поля */
.dream {
  position: absolute;
  left: 50%; top: 665px;
  width: 345px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.dream__caption {
  font: 500 13px/18px var(--font-text);
  letter-spacing: 0.26px;
  color: var(--neutral-500);
  white-space: nowrap;
}
.dream__card {
  width: 100%;
  height: 285px;
  padding: 16px 20px;
  background: var(--neutral-900);
  filter: drop-shadow(0 1px 2px rgba(47, 13, 104, .04)) drop-shadow(0 4px 5px rgba(47, 13, 104, .08));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  touch-action: pan-y;           /* вертикальная прокрутка страницы работает, горизонтальный свайп листает сны */
}
.dream__nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Стрелка нарисована 20 × 20, а нажимать можно на область 44 × 44 */
.dream__arrow {
  width: 44px; height: 44px;
  margin: -12px;
  display: grid;
  place-items: center;
  color: var(--neutral-500);
}
.dream__arrow svg { width: 20px; height: 20px; }
.dream__dots { display: flex; gap: 6px; }
.dream__dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--neutral-700);
}
.dream__dots i.is-active { background: var(--white); }

.dream__text {
  width: 100%;
  text-align: center;
  font-size: 20px;
  letter-spacing: -0.1px;
  transition: opacity 200ms ease;
}
.dream__start { font-weight: 400; line-height: 26px; color: var(--neutral-500); }
.dream__dream { font-weight: 500; line-height: 23px; color: var(--blue-500); }

.dream__who {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  transition: opacity 200ms ease;
}
.dream__person {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font: 500 13px/18px var(--font-text);
  letter-spacing: 0.26px;
  color: var(--neutral-500);
  white-space: nowrap;
}
.dream__photo { position: relative; width: 40px; height: 40px; border-radius: 100px; overflow: hidden; flex: none; }
.dream__photo > img { object-fit: cover; }
.dream__photo.is-missing,
.dev .dream__photo.is-missing { background: var(--neutral-700); outline: 0; }
.dev .dream__photo.is-missing::after { display: none; }
.dream__card.is-switching .dream__text,
.dream__card.is-switching .dream__who { opacity: 0; }

.pillows__edge { left: -1px; top: 1016px; width: 402px; height: 64px; }
.pillows__edge > img { object-fit: fill; }

/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .facts__layer { transform: none !important; }
}