/*
  motion.css — анимации сайта, разбитые по уровням data-motion (см. motion.js).

  off      — никаких keyframe-анимаций, никакого parallax/scroll-listener.
             Только мгновенные (или почти) transition на hover/focus — это
             не "анимация" в смысле нагрузки, а просто плавность отклика на клик.
  reduced  — простые fade/opacity-переходы. Никаких transform на больших слоях,
             никакого continuous motion (то что крутится/двигается само по себе).
  full     — весь набор: hero entrance, парящие блобы, чуть более выразительные
             hover-эффекты.

  Важно: на всех трёх уровнях сайт должен быть полностью рабочим и читаемым.
  Разница — только в "богатстве" motion, не в контенте или доступности.
*/

/* ============================================================
   HERO ENTRANCE — один orchestrated moment при загрузке.
   Дешёвый: один keyframe, opacity+translate, максимум на 3 элементах.
   Показываем на full и reduced, отключаем полностью на off.
   ============================================================ */

.hero-fade-item {
  opacity: 0;
}

html[data-motion="full"] .hero-fade-item,
html[data-motion="reduced"] .hero-fade-item {
  animation: heroFadeUp 0.7s ease forwards;
}

html[data-motion="full"] .hero-fade-item[data-delay="1"],
html[data-motion="reduced"] .hero-fade-item[data-delay="1"] {
  animation-delay: 0.1s;
}
html[data-motion="full"] .hero-fade-item[data-delay="2"],
html[data-motion="reduced"] .hero-fade-item[data-delay="2"] {
  animation-delay: 0.2s;
}
html[data-motion="full"] .hero-fade-item[data-delay="3"],
html[data-motion="reduced"] .hero-fade-item[data-delay="3"] {
  animation-delay: 0.3s;
}

html[data-motion="off"] .hero-fade-item {
  opacity: 1; /* без анимации — просто сразу видно, ничего не едет */
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* full получает чуть более заметный сдвиг, reduced — почти незаметный */
html[data-motion="reduced"] .hero-fade-item {
  animation-name: heroFadeUpSubtle;
}
@keyframes heroFadeUpSubtle {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   ПАРЯЩИЕ МЕДУЗЫ / GLOW-FIELD — continuous motion, самое дорогое.
   Только на full. На reduced/off — статичные медузы без движения.
   Пульсация (opacity) + лёгкий дрейф (transform).
   ============================================================ */

html[data-motion="full"] .glow-field img:nth-child(1) {
  animation: jellyfishPulse1 6s ease-in-out infinite, jellyfishDrift1 20s ease-in-out infinite alternate;
}

html[data-motion="full"] .glow-field img:nth-child(2) {
  animation: jellyfishPulse2 7s ease-in-out infinite, jellyfishDrift2 22s ease-in-out infinite alternate;
}

@keyframes jellyfishPulse1 {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.7; }
}

@keyframes jellyfishPulse2 {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.65; }
}

@keyframes jellyfishDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -2%) scale(1.08); }
}

@keyframes jellyfishDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2%, 3%) scale(1.06); }
}

/* reduced и off: медузы остаются как статичная декорация */


/* ============================================================
   HOVER / FOCUS — присутствуют на всех уровнях, это не "лишний motion",
   а обратная связь на действие пользователя. На off — делаем их
   мгновенными (без transition), чтобы вообще убрать любую анимацию,
   но результат (например подсветка кнопки) сохраняется.
   ============================================================ */

html[data-motion="off"] * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}

/* лёгкое увеличение карточек портфолио при hover — только full,
   на reduced/off карточка просто подсвечивается цветом (уже есть в базовом css) */
html[data-motion="full"] .photo-card {
  transition: transform 0.25s ease;
}
html[data-motion="full"] .photo-card:hover {
  transform: translateY(-3px);
}


/* ============================================================
   ЛАЙТБОКС OPEN/CLOSE — лёгкий fade, работает на full и reduced.
   На off — мгновенное появление, без прыжка контента.
   ============================================================ */

html[data-motion="full"] #lightbox:not(.hidden),
html[data-motion="reduced"] #lightbox:not(.hidden) {
  animation: lightboxFade 0.2s ease;
}

@keyframes lightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
   PKG-CARD HOVER (pricing.html) — подъём карточки только на full,
   на reduced/off остаётся только смена цвета рамки (уже в базовом css).
   ============================================================ */

html[data-motion="reduced"] .pkg-card:hover,
html[data-motion="off"] .pkg-card:hover {
  transform: none;
}