/* Light motion: load fade + snappy hover. No layout, color or type changes. */
:root {
  --reveal-duration: 0.42s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-title: 0.04s;
  --reveal-sub: 0.08s;
  --reveal-btn: 0.12s;
}

.js-motion .header,
.js-motion .header .brand,
.js-motion .header .nav,
.js-motion .header .header__cta,
.js-motion .header .burger {
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}

.js-motion .header .nav { transition-delay: var(--reveal-sub); }
.js-motion .header .header__cta,
.js-motion .header .burger { transition-delay: var(--reveal-btn); }

.js-motion body:not(.page-loaded) .header .brand,
.js-motion body:not(.page-loaded) .header .nav,
.js-motion body:not(.page-loaded) .header .header__cta,
.js-motion body:not(.page-loaded) .header .burger {
  opacity: 0;
  transform: translateY(12px);
}

.js-motion body:not(.page-loaded) .hint,
.js-motion body:not(.page-loaded) .dots {
  opacity: 0;
}

.js-motion .btn,
.js-motion .icon-btn,
.js-motion .header__cta,
.js-motion .cal__nav button {
  transition: transform 0.15s var(--reveal-ease), box-shadow 0.15s var(--reveal-ease), background 0.15s ease;
}

.js-motion .feat,
.js-motion .about-bar,
.js-motion .review {
  transition: transform 0.18s var(--reveal-ease), box-shadow 0.18s var(--reveal-ease);
}

.js-motion .about-bar__ico,
.js-motion .review__ava {
  transition: transform 0.18s var(--reveal-ease);
}

@media (hover: hover) and (pointer: fine) {
  .js-motion .btn:hover,
  .js-motion .icon-btn:hover,
  .js-motion .header__cta:hover,
  .js-motion .cal__nav button:hover {
    transform: translateY(-1px) scale(1.02);
  }

  .js-motion .btn--dark:hover,
  .js-motion .header__cta:hover {
    box-shadow: 0 12px 24px rgba(28, 36, 36, .2);
  }

  .js-motion .feat:hover,
  .js-motion .about-bar:hover,
  .js-motion .review:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(28, 36, 36, .12);
  }

  .js-motion .about-bar:hover .about-bar__ico,
  .js-motion .review:hover .review__ava {
    transform: scale(1.04);
  }
}

@media (hover: none) {
  .btn:hover,
  .js-motion .btn:hover,
  .js-motion .icon-btn:hover,
  .js-motion .feat:hover,
  .js-motion .about-bar:hover,
  .js-motion .review:hover,
  .theme-btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .header .brand,
  .js-motion .header .nav,
  .js-motion .header .header__cta,
  .js-motion .header .burger,
  .js-motion .hint,
  .js-motion .dots,
  .js-motion .btn,
  .js-motion .icon-btn,
  .js-motion .feat,
  .js-motion .about-bar,
  .js-motion .review {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}