/* =========================================================================
   motion.css — анимации и кинематографичная полировка «Не дома».
   Всё на чистом CSS (проект без сборки и без зависимостей).
   Easing expo.out cubic-bezier(.16,1,.3,1) — как в дизайн-системе Modern Dark.
   Каждое движение выключается при prefers-reduced-motion.
   ========================================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .28s;
}

/* --- Ambient light blobs: медленный дрейф светящихся пятен --- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.ambient .blob-1 {
  width: 42vw; height: 42vw;
  left: -8vw; top: -6vw;
  background: radial-gradient(circle, rgba(45, 111, 169, .55), transparent 65%);
  animation: drift-1 26s var(--ease-in-out) infinite;
}
.ambient .blob-2 {
  width: 34vw; height: 34vw;
  right: -6vw; top: 8vw;
  background: radial-gradient(circle, rgba(240, 208, 138, .30), transparent 62%);
  animation: drift-2 32s var(--ease-in-out) infinite;
}
.ambient .blob-3 {
  width: 38vw; height: 38vw;
  left: 40vw; top: 58vh;
  background: radial-gradient(circle, rgba(23, 77, 135, .45), transparent 66%);
  animation: drift-3 38s var(--ease-in-out) infinite;
}

@keyframes drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, 7vh, 0) scale(1.16); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -6vh, 0) scale(1.1); }
}

/* --- Прогресс-бар прокрутки --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 40;
  background: linear-gradient(90deg, var(--gold), var(--gold2), #dfe9ff);
  box-shadow: 0 0 18px rgba(240, 208, 138, .5);
}

/* --- Шапка: уплотняется при скролле --- */
.nav {
  transition: padding .35s var(--ease-out), background .35s var(--ease-out),
              box-shadow .35s var(--ease-out), transform .45s var(--ease-out);
}
.nav.is-scrolled {
  padding-top: 9px;
  padding-bottom: 9px;
  background: rgba(3, 11, 25, .88);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* --- Reveal со стаггером (индекс задаёт reveal.js через --i) --- */
.reveal {
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* --- Вход hero: последовательное появление --- */
.hero-enter > * {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-in .9s var(--ease-out) forwards;
}
.hero-enter > *:nth-child(1) { animation-delay: .10s; }
.hero-enter > *:nth-child(2) { animation-delay: .20s; }
.hero-enter > *:nth-child(3) { animation-delay: .30s; }
.hero-enter > *:nth-child(4) { animation-delay: .40s; }
.hero-enter > *:nth-child(5) { animation-delay: .50s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* Фотостек hero — мягкое всплытие с лёгким поворотом */
.visual-stack .photo-card,
.visual-stack .card-note {
  opacity: 0;
  animation: card-float-in 1s var(--ease-out) forwards;
}
.visual-stack .card-main  { animation-delay: .45s; }
.visual-stack .card-side  { animation-delay: .60s; }
.visual-stack .card-small { animation-delay: .72s; }
.visual-stack .card-note  { animation-delay: .84s; }

@keyframes card-float-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Непрерывное лёгкое парение карточки-заметки */
.card-note { animation: floaty 7s ease-in-out .84s infinite; }
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* --- Press / hover микро-взаимодействия --- */
.btn:active { transform: translateY(0) scale(.97); }
.offer-card, .month-card, .mosaic-card, .stat {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.offer-card:hover, .month-card:hover, .mosaic-card:not(.photo):hover {
  transform: translateY(-6px);
  border-color: rgba(240, 208, 138, .35);
}
.pill:active, .chip:active { transform: scale(.96); }

/* Подсветка активной ссылки навигации */
.nav-links a { position: relative; transition: color .2s var(--ease-out); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--gold2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

/* Стрелка в mini-link уезжает при наведении на карточку */
.mini-link .arrow { transition: transform var(--dur) var(--ease-out); }
.offer-card:hover .mini-link .arrow { transform: translateX(4px); }

/* Смена отфильтрованных карточек */
.offer-card.is-filtering { opacity: 0; transform: scale(.96); }

/* --- Уважение к настройке уменьшенного движения --- */
@media (prefers-reduced-motion: reduce) {
  .ambient span,
  .card-note,
  .hero-enter > *,
  .visual-stack .photo-card,
  .visual-stack .card-note { animation: none; }
  .hero-enter > *,
  .visual-stack .photo-card,
  .visual-stack .card-note { opacity: 1; transform: none; }
  .scroll-progress { display: none; }
  .offer-card:hover, .month-card:hover, .mosaic-card:hover { transform: none; }
}