/*
 * wall-preview.css — главная лендинг-страница (docs/index.html)
 *
 * Слои по z-index (снизу вверх):
 *   0  — #particles-canvas (космос)
 *   5  — .hand-layer (руки поверх космоса)
 *   15 — .marquee-shell (лента нужд)
 *   18 — .landing-hero (логотип)
 *   22 — .landing-policies, .landing-icons (поверх ленты, z-index 32)
 *   25 — .landing-footer
 */

/* -------------------------------------------------------------------------- */
/* :root — глобальные «ручки» настройки цветов, ширины колонки, шрифтов       */
/* -------------------------------------------------------------------------- */
:root {
  /* Фон страницы (чёрный как у референса) */
  --bg: #000000;
  /* Основной цвет текста нужд */
  --text: #f5f5f5;
  /* Акцент «золото» (ссылки, греческая строка) */
  --gold: #c9a85c;
  /*
   * Максимальная ширина колонки с нуждами (не рук).
   * min(30rem, 72vw) — на узких экранах уже, на широких не разъезжается.
   */
  --marquee-width: min(30rem, 72vw);
  /*
   * Ширина колонки с документом (политика / условия / о приложении): в 2 раза шире колонки ленты.
   * Лента нужд по-прежнему --marquee-width.
   */
  --marquee-doc-width: min(calc(var(--marquee-width) * 2), 94vw);
  /* Скорость «титров»: один полный цикл (половина списка = translate -50%) */
  --marquee-duration: 350s;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  /* Шрифт для UI / мета-строки */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* Удобный box-model: padding и border входят в width/height */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* На всю высоту вьюпорта, без полей у документа */
html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  /* Без полос прокрутки страницы — скролл только визуальный у ленты (анимация) */
  overflow: hidden;
}

/* Canvas «космос» — первый ребёнок .stage, position:fixed на весь вьюпорт */
#particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Нижний слой внутри .stage: под руками и текстом */
}

/* -------------------------------------------------------------------------- */
/* .stage — корневая «сцена»: отступы от краёв экрана + переменная для рук   */
/* -------------------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 10;
  /* Высота сцены: цепочка для абсолютных детей (иначе колонка ленты может схлопнуться) */
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  /*
   * Горизонтальный отступ слева/справа от края экрана (и для padding, и для
   * компенсации правой руки — см. .hand-layer--right).
   * Меняйте одно число — подстроится padding и сдвиг правой руки.
   */
  --stage-inline: 8%;
  /*
   * Внутренние поля сцены:
   *   первое значение  — сверху/снизу (10dvh ≈ «10% высоты» визуально;
   *                        чистый % у padding-top/bottom в CSS считается от ширины, не от высоты);
   *   второе значение — слева/справа из --stage-inline.
   */
  padding: 10dvh var(--stage-inline);
}

/* -------------------------------------------------------------------------- */
/* .landing-policies — верхний левый угол                                       */
/* -------------------------------------------------------------------------- */
.landing-policies {
  position: absolute;
  top: 2dvh;
  left: 5dvh;
  z-index: 32;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  max-width: min(48vw, 28rem);
  text-align: left;
  line-height: 1.5;
}

.landing-policies a,
.landing-policies__doc {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.48);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 0.06rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.landing-policies__doc {
  margin: 0;
  padding: 0 0 0.06rem;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.48);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.landing-policies a:hover,
.landing-policies__doc:hover {
  color: rgba(245, 245, 245, 0.88);
  border-bottom-color: rgba(201, 168, 92, 0.5);
}

.landing-policies a:focus-visible,
.landing-policies__doc:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* .landing-hero — центр: только AITEO, греч., подзаголовок                    */
/* -------------------------------------------------------------------------- */
.landing-hero {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  width: min(92vw, 36rem);
  text-align: center;
  padding-top: clamp(0.5rem, 2dvh, 1.25rem);
  pointer-events: none;
}

.landing-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7.5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  margin: 0 0 0.55rem;
  padding-left: 0.42em;
  color: #faf8f4;
  /* Золотистое свечение: несколько слоёв text-shadow (letter-spacing широкий — ореол визуально «тоньше») */
  text-shadow:
    0 0 6px rgba(201, 168, 92, 0.65),
    0 0 18px rgba(201, 168, 92, 0.45),
    0 0 40px rgba(201, 168, 92, 0.3),
    0 0 72px rgba(201, 168, 92, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.55);
  line-height: 1.05;
}

.landing-greek {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  font-weight: 400;
  color: rgba(201, 168, 92, 0.92);
  margin: 0 0 0.35rem;
  letter-spacing: 0.2em;
}

.landing-tagline {
  font-size: clamp(0.65rem, 1.45vw, 0.75rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(245, 245, 245, 0.38);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* .landing-icons — нижний правый: RuStore, Telegram, почта                  */
/* -------------------------------------------------------------------------- */
.landing-icons {
  position: absolute;
  bottom: clamp(2.35rem, 6dvh, 3.25rem);
  right: 5dvh;
  z-index: 32;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 1rem;
  max-width: min(70vw, 22rem);
}

.landing-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(245, 245, 245, 0.72);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.landing-action:hover {
  color: var(--gold);
  border-bottom-color: rgba(201, 168, 92, 0.45);
}

.landing-action:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.landing-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-action__icon svg {
  display: block;
}

.landing-brand-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* RuStore / Telegram — PNG в docs/assets/ */
.landing-brand-img--rustore,
.landing-brand-img--telegram {
  width: 28px;
  height: 28px;
  max-width: none;
}

.landing-dot {
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
}

@media (max-width: 520px) {
  .landing-title {
    letter-spacing: 0.28em;
    padding-left: 0.28em;
  }

  .landing-policies {
    max-width: 11.5rem;
    gap: 0.15rem 0.35rem;
  }

  .landing-policies a,
  .landing-policies__doc {
    font-size: 0.56rem;
  }

  .landing-icons {
    bottom: clamp(2.8rem, 8dvh, 4rem);
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
}

/* -------------------------------------------------------------------------- */
/* .marquee-shell — контейнер ленты: на всю внутреннюю область .stage         */
/* -------------------------------------------------------------------------- */
.marquee-shell {
  position: absolute;
  /* Совпадает с «контентным» прямоугольником внутри padding .stage */
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  z-index: 15;
  min-height: 0;
  height: 100%;
  /* Отступ под шапку задаётся у .marquee-feed-column / .marquee-doc-layer (top), иначе absolute залезает на заголовок */
  padding-top: 0;
  /* Прозрачная область вокруг колонки ленты не перехватывает клики (почта, магазины). */
  pointer-events: none;
}

.marquee-feed-column,
.marquee-doc-layer {
  pointer-events: auto;
}

/* Документ открыт: колонка iframe выше слоя с частицами; верх iframe см. .marquee-doc-layer при .landing-doc-open */
body.landing-doc-open .marquee-shell {
  z-index: 26;
}

body.landing-doc-open .landing-policies,
body.landing-doc-open .landing-icons,
body.landing-doc-open .landing-footer {
  z-index: 35;
}

/* -------------------------------------------------------------------------- */
/* .marquee-feed-column — узкая колонка только для ленты нужд               */
/* -------------------------------------------------------------------------- */
.marquee-feed-column {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(4rem, 12vh, 8rem);
  bottom: 0;
  width: var(--marquee-width);
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.marquee-feed-column[hidden] {
  display: none !important;
}

/* Слой ленты нужд (по умолчанию): маска затухания только на ленте, не на iframe */
.marquee-feed-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* Документ: отдельная ширина 2× от ленты, по центру */
.marquee-doc-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(4rem, 12vh, 8rem);
  bottom: 0;
  width: var(--marquee-doc-width);
  max-width: calc(100vw - 4vw);
  height: auto;
  z-index: 4;
  overflow: hidden;
  background: rgba(5, 5, 5, 0.94);
}

/* Заголовок лендинга поверх колонки iframe; верх колонки — ниже блока AITEO / αἰτέω / «молитвенная стена» */
body.landing-doc-open .landing-hero {
  z-index: 27;
}

body.landing-doc-open .marquee-doc-layer {
  top: clamp(7.25rem, 21dvh, 11.5rem);
}

.marquee-doc-layer[hidden] {
  display: none !important;
}

.marquee-doc-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0d0d0d;
}

/* -------------------------------------------------------------------------- */
/* .marquee-track — непрерывные «титры» вверх (дубликат в HTML = бесшовный цикл) */
/* -------------------------------------------------------------------------- */
.marquee-track {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  gap: clamp(2.5rem, 6vh, 4rem);
  animation: marquee-up var(--marquee-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/*
 * Ровно -50% высоты трека: вторая половина HTML — копия первой → шов незаметен.
 * translate3d — стабильнее на GPU, как у кинотитров.
 */
@keyframes marquee-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

/* -------------------------------------------------------------------------- */
/* .need-item — карточка нужды (подпись + дата + текст; ::before — линия)    */
/* -------------------------------------------------------------------------- */
.need-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 0.5rem;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
  flex-shrink: 0;
}

.need-item__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  font-family: var(--sans);
  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(230, 230, 235, 0.72);
}

.need-item__label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.need-item__date {
  font-size: 0.88em;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.need-item__body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3vw, 1.85rem);
  line-height: 1.32;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

.need-item__done {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 92, 0.88);
}

.need-item--message {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  line-height: 1.45;
  color: rgba(200, 200, 210, 0.75);
  max-width: 28rem;
}

.need-item--error {
  color: rgba(255, 160, 140, 0.85);
}

.marquee-track--static {
  animation: none !important;
  will-change: auto;
}

/* Тонкая горизонтальная «черта» над каждой карточкой */
.need-item::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 1rem;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
}

/* -------------------------------------------------------------------------- */
/* .hand-layer — общие правила для обеих PNG-рук                             */
/* -------------------------------------------------------------------------- */
.hand-layer {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

/*
 * Левая рука: нижний левый угол внутренней области .stage (с учётом padding).
 * width: базовый размер (vw и px-потолок) × множитель — «на сколько крупная рука».
 * transform: rotate — наклон; transform-origin — вокруг какой точки крутить.
 */
.hand-layer--left {
  bottom: 0;
  left: 0;
  width: calc(min(54vw, 540px) * 1.2);
  max-width: 100%;
  transform: rotate(-10deg);
  transform-origin: bottom left;
}

/*
 * Правая рука: верхний правый угол.
 * right: сдвиг от правого края внутренней области .stage.
 *   calc(0% - var(--stage-inline)) — вынести ровно на ширину бокового padding,
 *   тогда визуально рука у физического края экрана (если нужен именно край).
 *   Сейчас в формуле 4% — дополнительный сдвиг вправо/влево от «нулевой»
 *   компенсации; подберите под свой PNG (0%, 2%, отрицательные значения и т.д.).
 * width / transform — как у левой руки.
 */
.hand-layer--right {
  top: 0;
  right: calc(8% - var(--stage-inline));
  width: calc(min(48vw, 480px) * 1.2);
  max-width: 100%;
  transform: rotate(0deg);
  transform-origin: top right;
}

/* Картинка тянется на ширину блока .hand-layer, высота пропорциональна */
.hand-img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------- */
/* .landing-footer — копирайт внизу                                            */
/* -------------------------------------------------------------------------- */
.landing-footer {
  position: absolute;
  bottom: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  text-align: center;
  max-width: min(96vw, 28rem);
  line-height: 1.5;
  pointer-events: none;
}

.landing-footer__hint {
  opacity: 0.85;
}

/*
 * prefers-reduced-motion — системная настройка ОС/браузера («меньше анимации»):
 *   Windows: Параметры → Специальные возможности → Визуальные эффекты → Анимации в Windows
 *   macOS: Системные настройки → Универсальный доступ → Дисплей → Уменьшить движение
 *   iOS: Настройки → Универсальный доступ → Дисплей и размер текста → Уменьшить движение
 * Здесь: лента титров не отключается, а замедляется в 4 раза (всё ещё бесконечный цикл).
 */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation-duration: calc(var(--marquee-duration) * 4);
  }
}