/* motion.css — restrained, premium motion layer.
   Loaded after style.css. Does not alter layout, colors or HTML.
   All "mo-*" classes are added only by app.js; without JS or without
   IntersectionObserver support, every element below stays fully visible
   because hidden states are scoped under body.mo-ready. */

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */
.mo-reveal {
  opacity: 1;
  transform: none;
}

body.mo-ready .mo-reveal {
  transition: opacity .7s cubic-bezier(.16, .84, .44, 1),
              transform .7s cubic-bezier(.16, .84, .44, 1);
  transition-delay: var(--mo-d, 0ms);

}

body.mo-ready .mo-reveal.mo-hidden {
  opacity: 0;
  transform: translateY(28px);
}

body.mo-ready .mo-reveal.mo-visible {
  opacity: 1;
  transform: none;
}

/* Subtle stagger for grouped items (e.g. .visual-grid > .visual-card,
   .steps > article) as a graceful fallback if JS could not set --mo-d. */
body.mo-ready .visual-grid > .visual-card:nth-child(2),
body.mo-ready .product-grid > .product-card:nth-child(2),
body.mo-ready .steps > article:nth-child(2) { transition-delay: 70ms; }
body.mo-ready .visual-grid > .visual-card:nth-child(3),
body.mo-ready .product-grid > .product-card:nth-child(3),
body.mo-ready .steps > article:nth-child(3) { transition-delay: 140ms; }
body.mo-ready .visual-grid > .visual-card:nth-child(4),
body.mo-ready .steps > article:nth-child(4) { transition-delay: 210ms; }
body.mo-ready .visual-grid > .visual-card:nth-child(5) { transition-delay: 280ms; }
body.mo-ready .visual-grid > .visual-card:nth-child(6) { transition-delay: 350ms; }

/* ---------- Hero entrance (pure CSS, no JS dependency) ---------- */
@keyframes mo-hero-image-in {
  from { opacity: 0; transform: scale(1.045); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mo-hero-content-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-image {
  animation: mo-hero-image-in 1.3s cubic-bezier(.16, .84, .44, 1) both;
}

.hero-content {
  animation: mo-hero-content-in .9s cubic-bezier(.16, .84, .44, 1) .2s both;
}

/* ---------- Hover microinteractions (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .service {
    transition: background-color .35s ease, transform .35s ease;
  }
  .service:hover {
    background-color: #eef1e7;
    color: #303d2c;
  }

  .visual-card img,
  .product-card img {
    transition: transform .6s cubic-bezier(.16, .84, .44, 1);
  }
  .visual-card:hover img,
  .product-card:hover img {
    transform: scale(1.045);
  }

  .button {
    transition: transform .25s ease, background-color .25s ease;
  }

  .text-link,
  .under-link {
    transition: border-color .25s ease, color .25s ease;
  }
  .text-link:hover,
  .under-link:hover {
    border-color: var(--orange);
  }

  .contact-links a {
    transition: transform .3s ease;
  }
  .contact-links a:hover {
    transform: translateX(6px);
  }

  .header nav a {
    transition: color .2s ease;
  }
}

/* ---------- Reduced motion: hard-disable everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .hero-content {
    animation: none !important;
  }

  body.mo-ready .mo-reveal,
  body.mo-ready .mo-reveal.mo-hidden,
  body.mo-ready .mo-reveal.mo-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .service,
  .visual-card img,
  .product-card img,
  .button,
  .text-link,
  .under-link,
  .contact-links a,
  .header nav a {
    transition: none !important;
    transform: none !important;
  }
}