/* ==========================================================================
   Global motion system
   Subtle, reusable animations across the site.
   ========================================================================== */

:root {
  --cap-motion-duration-fast: 180ms;
  --cap-motion-duration-base: 420ms;
  --cap-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cap-motion-duration-card: 520ms;
}

/* Activated by JS only, to avoid hidden content without script. */
body.cap-motion-ready .cap-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}

body.cap-motion-ready .cap-reveal.is-visible {
  animation: cap-reveal-up var(--cap-motion-duration-base) var(--cap-motion-ease) forwards;
  animation-delay: var(--cap-reveal-delay, 0ms);
}

body.cap-motion-ready .cap-reveal.cap-reveal-card.is-visible {
  animation: cap-reveal-card var(--cap-motion-duration-card) var(--cap-motion-ease) forwards;
  animation-delay: var(--cap-reveal-delay, 0ms);
}

@keyframes cap-reveal-up {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cap-reveal-card {
  from {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Micro-interactions (kept intentionally subtle). */
a,
button,
.btn,
[role='button'],
input[type='submit'],
input[type='button'] {
  transition:
    transform var(--cap-motion-duration-fast) ease,
    box-shadow var(--cap-motion-duration-fast) ease,
    background-color var(--cap-motion-duration-fast) ease,
    color var(--cap-motion-duration-fast) ease,
    border-color var(--cap-motion-duration-fast) ease;
}

.btn:hover,
.btn:focus-visible,
button:hover,
button:focus-visible,
[role='button']:hover,
[role='button']:focus-visible,
input[type='submit']:hover,
input[type='submit']:focus-visible,
input[type='button']:hover,
input[type='button']:focus-visible {
  transform: translate3d(0, -1px, 0);
}

/* Generic lift for card-like containers. */
.card,
[class*='card'],
.cap-hover-lift {
  transition:
    transform var(--cap-motion-duration-fast) ease,
    box-shadow var(--cap-motion-duration-fast) ease;
}

.card:hover,
[class*='card']:hover,
.cap-hover-lift:hover {
  transform: translate3d(0, -2px, 0);
}

/* Front-page cards: slightly stronger but still discreet. */
.cap-qsn__card,
.cap-lsv__dark-card,
.cap-ncc__card,
.cap-exp__card,
.cap-na__card,
.cap-outils__card,
.cap-outils__hardware-card,
.cap-datamada__card,
.cap-contact__item {
  transition:
    transform var(--cap-motion-duration-fast) ease,
    box-shadow var(--cap-motion-duration-fast) ease;
}

.cap-qsn__card:hover,
.cap-lsv__dark-card:hover,
.cap-ncc__card:hover,
.cap-exp__card:hover,
.cap-na__card:hover,
.cap-outils__card:hover,
.cap-outils__hardware-card:hover,
.cap-datamada__card:hover,
.cap-contact__item:hover {
  transform: translate3d(0, -3px, 0) !important;
  box-shadow: 0 8px 20px rgba(0, 29, 41, 0.12) !important;
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.cap-motion-ready .cap-reveal,
  body.cap-motion-ready .cap-reveal.is-visible,
  a,
  button,
  .btn,
  [role='button'],
  input[type='submit'],
  input[type='button'],
  .card,
  [class*='card'],
  .cap-hover-lift {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}