/* ==========================================================================
   MECAS Techsolutions - Motion
   --------------------------------------------------------------------------
   Deliberately restrained. The design shows no animation, so nothing here
   invents movement for its own sake: sections settle in once as they arrive,
   and interactive things acknowledge the pointer. Nothing loops, nothing
   bounces, nothing slides in from the side.

   Two hard rules:

   1. Content is visible unless JavaScript has confirmed it can reveal it
      again. The hidden state keys off `.reveal-ready` on the root element,
      which main.js sets only once the observer is running and then clears on
      a failsafe timer. A script that never loads leaves every section on
      screen.
   2. Everything here is disabled under prefers-reduced-motion.

   Loaded after components.css and before the page layer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Children of a revealed group come in just behind it, so a row of cards
   settles left to right rather than all at once. */
.reveal-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 460ms var(--ease),
    transform 460ms var(--ease);
}

.reveal-ready [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 70ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 140ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 210ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 280ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 350ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: 420ms; }
.reveal-ready [data-reveal-group].is-revealed > *:nth-child(8) { transition-delay: 490ms; }

/* --------------------------------------------------------------------------
   2. Imagery
   --------------------------------------------------------------------------
   A slow, small scale on hover. The frame clips, so the image grows inside a
   fixed box and the layout never moves.
   -------------------------------------------------------------------------- */

.content-row__media,
.service-row__media,
.card__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.content-row__media img,
.service-row__media img,
.card__media img {
  transition: transform 620ms var(--ease);
  will-change: transform;
}

.content-row:hover .content-row__media img,
.service-row:hover .service-row__media img,
.card:hover .card__media img {
  transform: scale(1.035);
}

/* --------------------------------------------------------------------------
   3. Icon badges
   -------------------------------------------------------------------------- */

.icon-badge {
  transition:
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.content-row:hover .icon-badge,
.service-row:hover .icon-badge {
  transform: translateY(-2px);
}

.service-row:hover .icon-badge { background-color: var(--blue-100); }

/* Technology Areas: the badge lifts, the card behind the row deepens its
   shadow, and the cut-out drifts up a touch. The images there are loose on
   white rather than framed, so they move instead of scaling inside a box. */
.tech-area .icon-badge { transition: transform var(--duration) var(--ease); }
.tech-area:hover .icon-badge { transform: translateY(-3px); }
.tech-area:hover::before { box-shadow: var(--shadow-card); }

.tech-area__media img { transition: transform 620ms var(--ease); }

/* Industries: the badge rises off the image base and the image drifts up. */
.industry-card__badge,
.industry-card__media picture { transition: transform var(--duration) var(--ease); }
.industry-card:hover .industry-card__badge { transform: translateY(-4px); }
.industry-card:hover .industry-card__media picture { transform: translateY(-4px); }

/* About: value discs lift; defining images drift up in their frames. */
.about-value__icon,
.about-define__media img { transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.about-value:hover .about-value__icon { transform: translateY(-4px); background-color: var(--blue-100); }
.about-define:hover .about-define__media img { transform: translateY(-4px); }
.tech-area:hover .tech-area__media img { transform: translateY(-6px); }

/* --------------------------------------------------------------------------
   4. Home feature strip
   -------------------------------------------------------------------------- */

.feature-strip__item {
  transition: background-color var(--duration) var(--ease);
}

.home-features__card .feature-strip__item:hover {
  background-color: var(--surface-alt);
}

.home-features__icon {
  transition: transform var(--duration) var(--ease);
}

.home-features__card .feature-strip__item:hover .home-features__icon {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card {
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   6. Links and buttons
   --------------------------------------------------------------------------
   The trailing arrow already shifts on hover, in components.css. These add the
   quieter cues around it.
   -------------------------------------------------------------------------- */

.btn { will-change: auto; }

.site-nav__link::after,
.site-footer__list a,
.site-footer__legal a {
  transition: color var(--duration-fast) var(--ease);
}

/* Nav items grow a rule from the centre on hover, matching the active marker
   without pretending to be it. */
.site-nav__link:not([aria-current="page"]) {
  position: relative;
}

.site-nav__link:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  top: calc(100% + 12px);
  height: 4px;
  background-color: var(--color-accent);
  opacity: 0;
  transition:
    left var(--duration) var(--ease),
    right var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.site-nav__link:not([aria-current="page"]):hover::after,
.site-nav__link:not([aria-current="page"]):focus-visible::after {
  left: -5px;
  right: -5px;
  opacity: 1;
}

.site-footer__social a {
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.site-footer__social a:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   7. Reduced motion
   --------------------------------------------------------------------------
   Everything above collapses to plain state changes. Reveal targets are shown
   outright rather than animated in.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal].is-revealed,
  .reveal-ready [data-reveal-group] > *,
  .reveal-ready [data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .content-row__media img,
  .service-row__media img,
  .card__media img,
  .tech-area__media img,
  .tech-area::before,
  .industry-card__badge,
  .industry-card__media picture,
  .about-value__icon,
  .about-define__media img,
  .icon-badge,
  .home-features__icon,
  .card,
  .site-footer__social a,
  .site-nav__link:not([aria-current="page"])::after {
    transition: none;
  }

  .content-row:hover .content-row__media img,
  .service-row:hover .service-row__media img,
  .card:hover .card__media img,
  .content-row:hover .icon-badge,
  .service-row:hover .icon-badge,
  .tech-area:hover .icon-badge,
  .tech-area:hover .tech-area__media img,
  .industry-card:hover .industry-card__badge,
  .about-value:hover .about-value__icon,
  .about-define:hover .about-define__media img,
  .industry-card:hover .industry-card__media picture,
  .home-features__card .feature-strip__item:hover .home-features__icon,
  .card:hover,
  .site-footer__social a:hover {
    transform: none;
  }
}