/* # Animations discrètes, sans dépendance et sans masquer le contenu sans JS.
   Une seule apparition par élément ; les mouvements ne se relancent pas
   à chaque aller-retour dans la page. */

/* # 01 — États JS : is-pending prépare seulement les éléments hors écran.
   is-visible lance le fondu ; main.js retire ensuite is-pending pour libérer les survols. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-pending {
    opacity: 0;
    translate: 0 22px;
  }

  .reveal.is-pending.is-visible {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
      translate 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
  }

  .service-grid > .reveal:nth-child(3n + 2) {
    --reveal-delay: 90ms;
  }
  .service-grid > .reveal:nth-child(3n + 3) {
    --reveal-delay: 180ms;
  }
  .process .steps > .reveal:nth-child(2) {
    --reveal-delay: 130ms;
  }
  .process .steps > .reveal:nth-child(3) {
    --reveal-delay: 260ms;
  }
  .about-copy,
  .form-card {
    --reveal-delay: 100ms;
  }

  /* # 02 — Accueil : entrée unique ; un focus clavier annule immédiatement l'attente. */
  .motion-ready .hero-copy > * {
    animation: welcome-fade 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .motion-ready .hero-copy > .eyebrow {
    animation-delay: 50ms;
  }
  .motion-ready .hero-copy > h1 {
    animation-delay: 100ms;
  }
  .motion-ready .hero-description {
    animation-delay: 160ms;
  }
  .motion-ready .hero-actions {
    animation-delay: 220ms;
  }
  .motion-ready .hero-location {
    animation-delay: 270ms;
  }
  .motion-ready .hero-visual {
    animation: welcome-fade 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 140ms both;
  }
  .motion-ready .hero-copy:focus-within > * {
    animation: none;
  }

  /* # 03 — Fil des étapes : is-traced est ajouté par l'observateur de visibilité. */
  .motion-ready .process .steps::before {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 180ms;
  }
  .motion-ready .process .steps.is-traced::before {
    transform: scaleY(1);
  }

  /* # 04 — Décor du panneau : un seul mouvement, puis immobilité. */
  .motion-ready .process.is-entered::before {
    animation: halo-arrival 1.4s ease-out both;
  }
  .motion-ready .process.is-entered::after {
    transform-origin: left center;
    animation: accent-arrival 0.8s ease-out both;
  }

  .process .step-number,
  .process .step-heading .icon,
  .process .location-icon {
    transition:
      transform 0.28s ease,
      background-color 0.28s ease,
      color 0.28s ease,
      border-color 0.28s ease;
  }
  .button .icon {
    transition: transform 0.22s ease;
  }

  /* # 05 — Survols limités aux pointeurs précis : pas d'état collant sur écran tactile. */
  @media (hover: hover) and (pointer: fine) {
    .process .steps li:hover .step-number {
      transform: scale(1.07);
      background-color: var(--teal);
      color: var(--navy);
      border-color: var(--teal);
    }
    .process .steps li:hover .step-heading .icon {
      transform: translateY(-2px) rotate(-5deg);
    }
    .process .intervention-marker:hover .location-icon {
      transform: translateY(-3px);
    }
    .button:hover:not(:disabled) .icon {
      transform: translateX(3px);
    }
  }

  @media (min-width: 681px) and (max-width: 900px) {
    .service-grid > .reveal {
      --reveal-delay: 0ms;
    }
    .service-grid > .reveal:nth-child(even) {
      --reveal-delay: 90ms;
    }
  }

  @media (max-width: 680px) {
    .reveal.is-pending {
      translate: 0 14px;
    }
    .reveal.is-pending.is-visible {
      translate: 0 0;
    }
    .service-grid > .reveal {
      --reveal-delay: 0ms;
    }
    .process .steps > .reveal:nth-child(2) {
      --reveal-delay: 70ms;
    }
    .process .steps > .reveal:nth-child(3) {
      --reveal-delay: 140ms;
    }
  }
}

/* # 06 — Transformations sans incidence sur le flux de la page */
@keyframes welcome-fade {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes halo-arrival {
  from {
    opacity: 0.25;
    transform: translate(-12px, 12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes accent-arrival {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* # 07 — Visibilité garantie quand l'utilisateur réduit les mouvements */
@media (prefers-reduced-motion: reduce) {
  .reveal.is-pending {
    opacity: 1;
    translate: none;
  }
  .process .steps::before {
    transform: none;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal.is-pending {
    opacity: 1;
    translate: none;
  }
}