/* ============================================================
   Stoa — motion layer (added on top of app.css, не трогает базу)
   Всё аккуратно: только opacity/transform (GPU), с учётом
   prefers-reduced-motion. Начальное «спрятанное» состояние живёт
   ТОЛЬКО когда JS отработал (html.anim-on) И движение разрешено —
   иначе контент всегда виден.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- scroll / load reveal --- */
  html.anim-on [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }
  html.anim-on [data-reveal].in {
    opacity: 1;
    transform: none;
    transition:
      opacity .62s cubic-bezier(.22, .61, .36, 1),
      transform .62s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--rd, 0ms);
  }

  /* --- hero ambient glow --- */
  .hx { position: relative; }
  .hx::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -14% -6% auto auto;
    width: 440px; height: 440px;
    max-width: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(91, 143, 176, .22), rgba(91, 143, 176, 0) 70%);
    filter: blur(6px);
    animation: hxGlow 9s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes hxGlow {
    from { transform: translate3d(0, 0, 0) scale(1);      opacity: .65; }
    to   { transform: translate3d(-26px, 20px, 0) scale(1.14); opacity: 1; }
  }

  /* hero art (горы): вход + параллакс + колыхание — ОДИН непрерывный
     transform из anim.js, без стыка CSS↔JS (иначе был рывок после входа).
     Opacity остаётся базовой — гора никогда не пропадает. */
  html.anim-on .hx-art { will-change: transform; }

  /* --- primary button sheen on hover --- */
  .btn-dark { position: relative; overflow: hidden; }
  .btn-dark::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 65%; height: 100%;
    background: linear-gradient(100deg,
      transparent, rgba(255, 255, 255, .30), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  .btn-dark:hover::before { animation: sheen .7s ease; }
  @keyframes sheen { to { left: 135%; } }
}

/* --- hover micro-interactions (safe под reduced-motion: базовое
       правило в app.css снимает transition, останется мгновенным) --- */
.cav { transition: transform .22s ease; }

.mc-row { transition: border-color .15s, box-shadow .22s ease, transform .22s ease; }
.mc-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(30, 58, 79, .10);
  border-color: var(--line-2);
}
.mc-row:hover .cav { transform: scale(1.07); }

.hx-strip > div { transition: transform .22s ease; }
.hx-strip > div:hover { transform: translateY(-2px); }

/* чуть «живее» нажатие на основных кнопках */
.btn-dark:active, .btn-white:active { transform: translateY(1px) scale(.99); }

/* «Coming soon» в блоке контракта — приглушённый текст, не ссылка */
.hx-ca .addr.soon, .foot-ca .addr.soon { color: var(--muted); cursor: default; text-decoration: none; }

/* новый логотип Peak — вырезан (прозрачный фон). Как у Stoa:
   лого слева в рейле, текст «peak» в шапке справа от него. */
.peak-mark { display: block; flex: none; width: auto; height: auto; }

/* лого в левом рейле, крупнее */
.rail-logo { display: grid; place-items: center; width: var(--rail); height: auto; border-radius: 0; margin-bottom: 6px; }
.rail-logo .peak-mark { height: 58px; }

/* в шапке на десктопе — только слово peak, картинку прячем */
.top-logo { gap: 8px; }
.top-logo .peak-mark { display: none; }

/* десктоп: «peak» рядом с логотипом в рейле — чуть правее и ниже */
@media (min-width: 761px) {
  .top-logo { margin-left: -18px; transform: translateY(5px); }
}

/* футер — маленькое лого + слово */
.foot-brand .peak-mark { height: 22px; }

/* на мобиле рейла нет → показываем лого в шапке */
@media (max-width: 760px) {
  .top-logo .peak-mark { display: block; height: 30px; }
}

/* ===== hero art → горы (вписаны за текст, фон просвечивает) ===== */
/* multiply: белый фон картинки исчезает, остаётся только рисунок гор.
   Позиционируем по низу-справа, текст (.hx-copy z-index:1) остаётся сверху. */
.hx-art {
  right: -40px;
  left: auto;
  top: auto;
  bottom: 0;
  width: 1120px;
  max-width: none;
  opacity: .92;
}
@media (max-width: 980px) {
  .hx-art {
    width: 680px;
    right: -150px;
    top: auto;
    bottom: 0;
    opacity: .3;
  }
}
@media (max-width: 760px) {
  .hx-art { width: 560px; right: -170px; opacity: .2; }
}