/* ==========================================================================
   NOMU — Motion
   Entrance animations. Only transform and opacity move.
   Everything stays visible if JavaScript fails (states start under .js only)
   and travel is removed for people who ask for reduced motion.
   Hover effects live next to the parts they belong to (sections.css).
   ========================================================================== */

/* ---- Reveal on scroll (js/main.js adds .is-in) -------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* the service cards keep their own hover lift once they are in */
.js .offer-card.is-in { transition: opacity 900ms var(--ease-out), transform 600ms var(--ease-out); }
.js .offer-card.is-in:hover,
.js .offer-card.is-in:focus-visible { transform: translateY(-8px); }

/* ---- Hero headline: each line rises out of a mask ----------------------- */

.js .hero__line {
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.js .hero__line-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1200ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js.is-loaded .hero__line-inner { transform: none; }

/* the violet dot lands last, with a small bounce */
.js .hero__line--bold .dot {
  display: inline-block;
  transform: scale(0);
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms;
}
.js.is-loaded .hero__line--bold .dot { transform: none; }

/* ---- Service cards: the little pictures settle in after the card -------- */

/* uses translate/scale (not transform) so the hover tilts still work */
.js .offer-card .offer-card__visual > * {
  opacity: 0;
  translate: 0 14px;
  scale: 0.94;
  transition: opacity 800ms var(--ease-out) 250ms, translate 800ms var(--ease-out) 250ms,
              scale 800ms var(--ease-out) 250ms, transform 600ms var(--ease-out);
}
.js .offer-card.is-in .offer-card__visual > * { opacity: 1; translate: 0 0; scale: 1; }

/* ---- Reduced motion: keep content, drop travel -------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal],
  .js .hero__line-inner,
  .js .hero__line--bold .dot { opacity: 1; transform: none; }
  .js .offer-card .offer-card__visual > * { opacity: 1; translate: 0 0; scale: 1; }
}