/* ============================================
   theme-motion.css — Wave 4 (Motion polish)
   Loaded AFTER style.css. Adds Emil Kowalski motion principles
   without touching legacy class definitions.
   - Press feedback (scale 0.97 on :active)
   - Hover gates (only on hover-capable devices)
   - Stagger entrance for grid items
   - Reduced motion safety net
   ============================================ */

/* ============================================
   0. NEVER UNDERLINE BUTTON-LIKE LINKS
   The global `a:hover { text-decoration: underline }` rule (style.css line ~471)
   was bleeding into Accueil/Contact and the mobile menu items. Buttons should
   never carry the link underline — they have their own visual affordance.
   ============================================ */
a.nav__link,
a.nav__link:hover,
a.nav__link--cta,
a.nav__link--cta:hover,
a.btn,
a.btn:hover,
a.project-hero__btn,
a.project-hero__btn:hover,
a.project-card__link,
a.project-card__link:hover,
a.service-card__link,
a.service-card__link:hover,
.nav__sublink,
.nav__sublink:hover {
  text-decoration: none;
}

/* ============================================
   1. UNIVERSAL :active PRESS FEEDBACK
   Tous les éléments interactifs ont un retour tactile subtil.
   ============================================ */
button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:not(:disabled):active,
.nav__link--cta:active,
.project-hero__btn:active,
.feature-card:active,
.service-card:active,
.project-card:active {
  transform: scale(0.97);
}

/* Transition de retour rapide quand on relâche */
button,
.btn,
[role="button"],
.nav__link--cta,
.project-hero__btn,
.feature-card,
.service-card,
.project-card {
  transition: transform var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              background-color var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              border-color var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              box-shadow var(--duration-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              color var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ============================================
   2. FOCUS-VISIBLE — accessibilité clavier
   Outline 2px sur tous les éléments interactifs au focus clavier (pas mouse).
   ============================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-primary, #0496B5);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* ============================================
   3. STAGGER ENTRANCE — entrées en cascade
   Les grids (services, projects, features) entrent avec un délai progressif.
   Limité aux ~12 premiers items pour éviter le « slow feel » sur les grandes listes.
   ============================================ */
@keyframes stagger-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.services__grid > *,
.projects__grid > *,
.project-features__grid > *,
.feature-card,
.service-card,
.project-card {
  animation: stagger-fade-in var(--duration-slower, 500ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) backwards;
}

.services__grid > *:nth-child(1),
.projects__grid > *:nth-child(1),
.project-features__grid > *:nth-child(1) { animation-delay: 0ms; }
.services__grid > *:nth-child(2),
.projects__grid > *:nth-child(2),
.project-features__grid > *:nth-child(2) { animation-delay: 50ms; }
.services__grid > *:nth-child(3),
.projects__grid > *:nth-child(3),
.project-features__grid > *:nth-child(3) { animation-delay: 100ms; }
.services__grid > *:nth-child(4),
.projects__grid > *:nth-child(4),
.project-features__grid > *:nth-child(4) { animation-delay: 150ms; }
.services__grid > *:nth-child(5),
.projects__grid > *:nth-child(5),
.project-features__grid > *:nth-child(5) { animation-delay: 200ms; }
.services__grid > *:nth-child(6),
.projects__grid > *:nth-child(6),
.project-features__grid > *:nth-child(6) { animation-delay: 250ms; }
.services__grid > *:nth-child(7),
.projects__grid > *:nth-child(7),
.project-features__grid > *:nth-child(7) { animation-delay: 300ms; }
.services__grid > *:nth-child(8),
.projects__grid > *:nth-child(8),
.project-features__grid > *:nth-child(8) { animation-delay: 350ms; }
/* Au-delà de 8 items, pas de delay supplémentaire (Emil : ne pas allonger l'attente) */
.services__grid > *:nth-child(n+9),
.projects__grid > *:nth-child(n+9),
.project-features__grid > *:nth-child(n+9) { animation-delay: 400ms; }

/* ============================================
   4. NAV CHEVRON ROTATE — easing Emil
   Le chevron des sub-menus tourne avec une courbe propre.
   ============================================ */
.nav__chevron {
  transition: transform var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ============================================
   5. SUBMENU ENTER — refined timing
   On override les transitions du submenu CSS pour les rendre plus snappy.
   ============================================ */
.nav__submenu {
  transition: opacity var(--duration-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              visibility var(--duration-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--duration-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) !important;
  transform-origin: top center;
}

.nav__sublink {
  transition: background-color var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.nav__sublink:active {
  transform: scale(0.98);
}

/* ============================================
   6. LINK UNDERLINE ANIMATION
   Soulignement subtle qui glisse au hover (Emil/editorial style).
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  .footer a,
  a.link,
  .footer__link,
  .text-link {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--duration-base, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                color var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .footer a:hover,
  a.link:hover,
  .footer__link:hover,
  .text-link:hover {
    text-decoration-color: currentColor;
  }
}

/* ============================================
   7. SCROLL SMOOTH (anchors)
   Garantit le smooth scroll partout (déjà sur html mais on force).
   ============================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 76px);
}

/* ============================================
   8. TOUCH DEVICE GUARDS
   On enlève les hover effects qui simuleraient un :hover persistant après tap.
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .feature-card:hover,
  .service-card:hover,
  .project-card:hover,
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* ============================================
   9. REDUCED MOTION — Emil principle
   Garde les fades (utiles) mais coupe les mouvements (motion sickness).
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .services__grid > *,
  .projects__grid > *,
  .project-features__grid > *,
  .feature-card,
  .service-card,
  .project-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* Fades restent OK */
  .nav__submenu {
    transition: opacity 0.15s linear !important;
  }
}

/* ============================================
   10. NAV TOGGLE BUTTONS — mobile fallback styling
   The desktop styles for .nav__link--toggle live inside @media (min-width: 769px),
   so on mobile (<769px) the <button> elements fall back to browser defaults
   (Arial, gray bg, outset border). This block provides editorial styling
   that matches the rest of the mobile menu in any viewport.
   ============================================ */
.nav__link--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--fw-medium, 500);
  letter-spacing: var(--tracking-tight, -0.02em);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__link--toggle:hover {
  background: var(--surface-hover);
  border-color: var(--border-color-subtle);
}

.nav__link--toggle[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--accent-primary);
}

.nav__link--toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* On desktop the desktop @media block above takes precedence — these
   utilities only matter where that block doesn't apply (mobile + edge cases). */

/* ============================================
   11. SKIP-TO-CONTENT LINK STYLING
   Affichage du « skip to main content » au focus clavier.
   ============================================ */
.skip-link,
a[href="#main"]:first-child {
  position: absolute;
  top: -100px;
  left: var(--space-4, 16px);
  z-index: var(--z-skip, 900);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--accent-primary, #0496B5);
  color: var(--text-inverted, #FAFCFE);
  font-family: var(--font-body);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  transition: top var(--duration-fast, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.skip-link:focus,
a[href="#main"]:first-child:focus {
  top: var(--space-4, 16px);
  outline: 2px solid var(--accent-primary, #0496B5);
  outline-offset: 2px;
}

/* ============================================
   12. HERO CHOREOGRAPHY
   Orchestration de l'entrée du hero au load.
   Active uniquement si <body.js-ready> — JS ajoute la classe dès DOMContentLoaded.
   Easings modernes ease-out-quart (pas de bounce/elastic).
   ============================================ */
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Variables easing locales — surcharge si le design system n'en a pas */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

.js-ready .hero__badge,
.js-ready .hero__title,
.js-ready .hero__subtitle,
.js-ready .hero__cta,
.js-ready .hero__stats {
  opacity: 0;
  animation: hero-rise 700ms var(--ease-out-quart) forwards;
}

.js-ready .hero__badge   { animation-delay: 0ms;   }
.js-ready .hero__title   { animation-delay: 100ms; }
.js-ready .hero__subtitle{ animation-delay: 250ms; }
.js-ready .hero__cta     { animation-delay: 400ms; animation-name: hero-zoom-in; animation-duration: 550ms; }
.js-ready .hero__stats   { animation-delay: 550ms; }

/* Le hero__scroll conserve son `animation: bounce 2s infinite` défini dans
   style.css. On lui applique juste un fade-in initial via transition
   (opacity) pour ne pas écraser son animation native. */
.js-ready .hero__scroll {
  opacity: 0;
  animation: bounce 2s infinite 900ms,
             hero-scroll-fade 600ms var(--ease-out-quart) 900ms forwards;
}

@keyframes hero-scroll-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Gradient shift subtil sur le titre — ne joue qu'au-dessus de tablette */
@media (min-width: 768px) and (hover: hover) {
  .hero__title-gradient {
    background-size: 200% 100%;
    animation: hero-gradient-drift 8s ease-in-out infinite alternate;
  }

  @keyframes hero-gradient-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
  }
}

/* ============================================
   13. REVEAL VARIANTS
   Déclinaisons de .animate-on-scroll pour varier la direction.
   Le JS (ScrollAnimations) ajoute .visible via IntersectionObserver.
   ============================================ */
.animate-on-scroll--left {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
  transition: opacity 600ms var(--ease-out-quart),
              transform 600ms var(--ease-out-quart);
}
.animate-on-scroll--left.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.animate-on-scroll--right {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  transition: opacity 600ms var(--ease-out-quart),
              transform 600ms var(--ease-out-quart);
}
.animate-on-scroll--right.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.animate-on-scroll--scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 550ms var(--ease-out-quart),
              transform 550ms var(--ease-out-quart);
}
.animate-on-scroll--scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Override du .animate-on-scroll baseline pour un easing plus moderne */
.animate-on-scroll {
  transition: opacity 550ms var(--ease-out-expo),
              transform 550ms var(--ease-out-expo) !important;
}

/* ============================================
   14. FORM FEEDBACK
   Shake on error, pulse on success.
   ============================================ */
@keyframes form-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15%      { transform: translate3d(-6px, 0, 0); }
  30%      { transform: translate3d(5px, 0, 0); }
  45%      { transform: translate3d(-4px, 0, 0); }
  60%      { transform: translate3d(3px, 0, 0); }
  75%      { transform: translate3d(-2px, 0, 0); }
}

.form--shake {
  animation: form-shake 500ms var(--ease-out-quart);
}

@keyframes form-success-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(4, 150, 181, 0.35); }
  50%  { box-shadow: 0 0 0 12px rgba(4, 150, 181, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 150, 181, 0); }
}

.form--success {
  animation: form-success-pulse 800ms var(--ease-out-quart);
}

/* Input focus glow subtile */
.form-group input.input:focus,
.form-group textarea.input:focus,
.form-group select.input:focus {
  transition: border-color 200ms var(--ease-out-quart),
              box-shadow 200ms var(--ease-out-quart);
  box-shadow: 0 0 0 3px rgba(4, 150, 181, 0.18);
}

/* Error state border */
.form-group.has-error input.input,
.form-group.has-error textarea.input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ============================================
   15. SCROLL PROGRESS BAR
   Fine barre en haut de page. Animée via CSS var `--scroll-progress`
   mise à jour par le JS (ScrollProgress module).
   ============================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 1001;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--gradient-accent, linear-gradient(90deg, #00D4FF, #0496B5));
  transform-origin: 0 0;
  transform: scaleX(var(--scroll-progress, 0));
  transition: transform 80ms linear;
  will-change: transform;
}

/* ============================================
   16. CTA MAGNETIC SUBTLE
   Léger translate du bouton CTA primaire au hover (desktop only).
   Le JS applique --mouse-x / --mouse-y au survol.
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  .btn--primary.btn--magnetic {
    transition: transform 240ms var(--ease-out-quart),
                box-shadow 240ms var(--ease-out-quart);
  }
  .btn--primary.btn--magnetic:hover {
    transform: translate3d(var(--mouse-x, 0), var(--mouse-y, 0), 0) scale(1.02);
  }
}

/* ============================================
   17. AUDITOR CHAT ENTRANCE
   Les bulles de message du chat auditor entrent en douceur.
   ============================================ */
@keyframes chat-message-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.chat-messages .message {
  animation: chat-message-enter 380ms var(--ease-out-quart) both;
}

.fetch-context-card {
  animation: chat-message-enter 480ms var(--ease-out-quart) both;
  animation-delay: 80ms;
}

/* ============================================
   18. SECTION HEADERS — subtle reveal underline
   Les h2 de section gagnent un filet sous le titre au scroll.
   ============================================ */
.section__header .section__title {
  position: relative;
  display: inline-block;
}

.section__header .section__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--gradient-accent, linear-gradient(90deg, #00D4FF, #0496B5));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 600ms var(--ease-out-expo) 200ms;
}

.animate-on-scroll.visible .section__title::after,
section.animate-on-scroll.visible .section__title::after {
  width: 48px;
}

/* ============================================
   19. LOGO HOVER — subtle lift
   ============================================ */
@media (hover: hover) and (pointer: fine) {
  .nav__logo {
    transition: transform 240ms var(--ease-out-quart);
  }
  .nav__logo:hover {
    transform: translate3d(0, -1px, 0);
  }
}

/* ============================================
   20. REDUCED MOTION — extension de la section 9
   On neutralise les ajouts 12-19 pour les users sensibles.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .js-ready .hero__badge,
  .js-ready .hero__title,
  .js-ready .hero__subtitle,
  .js-ready .hero__cta,
  .js-ready .hero__stats,
  .js-ready .hero__scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__scroll {
    animation: none !important;
  }

  .hero__title-gradient {
    animation: none !important;
  }

  .animate-on-scroll--left,
  .animate-on-scroll--right,
  .animate-on-scroll--scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-progress__bar {
    transition: none !important;
  }

  .chat-messages .message,
  .fetch-context-card {
    animation: none !important;
  }

  .section__header .section__title::after {
    transition: none !important;
    width: 48px;
  }
}