/* Motion enhances visible content; nothing is hidden while waiting for JavaScript. */
:root {
  --motion-rise: 10px;
  --motion-duration: 480ms;
  --motion-stagger: 45ms;
  --motion-zoom: 1.025;
}
.hero { overflow: hidden; }
.service-hero > figure { overflow: hidden; }

@media (min-width: 1000px) {
  :root {
    --motion-rise: 18px;
    --motion-duration: 650ms;
    --motion-stagger: 70ms;
    --motion-zoom: 1.045;
  }
}

@keyframes lamaison-enter {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lamaison-hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(var(--motion-zoom)); }
}
@keyframes lamaison-scroll-enter {
  from { opacity: 0; transform: var(--scroll-reveal-from); }
  to { opacity: 1; transform: none; }
}

#services > .section-top,
.process-heading, .process-step { --scroll-reveal-from: translateY(36px); }
#services .product-card { --scroll-reveal-from: scale(.92); }

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .motion-enter {
    animation: lamaison-enter var(--motion-duration) cubic-bezier(.2,.65,.3,1) both;
    animation-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
  }
  .motion-enabled .motion-enter:focus-within { animation: none; }
  /* Only working JavaScript enables the waiting state; links reveal on focus. */
  .motion-enabled :is(#services, #how-it-works) .motion-pending:not(:focus-within) {
    opacity: 0;
    transform: var(--scroll-reveal-from);
  }
  .motion-enabled :is(#services, #how-it-works) .motion-enter {
    animation: lamaison-scroll-enter 850ms cubic-bezier(.22,1,.36,1) both;
    animation-delay: calc(var(--motion-order, 0) * 100ms);
  }
  .motion-enabled :is(#services, #how-it-works) .motion-enter:focus-within { animation: none; }
  .motion-enabled .hero-background,
  .motion-enabled .service-hero > figure > img {
    animation: lamaison-hero-zoom 22s ease-out both;
    animation-play-state: paused;
    transform-origin: center;
  }
  .motion-enabled .hero.is-motion-active > .hero-background,
  .motion-enabled .service-hero.is-motion-active > figure > img {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-enter,
  .hero-background,
  .service-hero > figure > img {
    animation: none !important;
    transform: none !important;
  }
}