/* Pack motion TPI Tech (ne pas modifier par client).
   Coupé par prefers-reduced-motion et en retirant data-motion de <html>.
   Règles : .claude/skills/tpitech-motion/ */
@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* Le bandeau de démonstration reste fixe pendant la transition */
  [data-motion] .demo-bar { view-transition-name: tp-demo; }
  [data-motion]::view-transition-group(tp-demo),
  [data-motion]::view-transition-new(tp-demo) { animation: none; }
  [data-motion]::view-transition-old(tp-demo) { display: none; }

  /* A. Entrée du hero, une fois (texte seulement, jamais l'image) */
  [data-motion] .hero-text > * { animation: tp-rise .38s cubic-bezier(.2, .7, .2, 1) both; }
  [data-motion] .hero-text > :nth-child(2) { animation-delay: 70ms; }
  [data-motion] .hero-text > :nth-child(3) { animation-delay: 140ms; }
  [data-motion] .hero-text > :nth-child(n+4) { animation-delay: 210ms; }

  /* B. Pastille « Ouvert maintenant » */
  [data-motion] .open-status[data-open="true"]::before { animation: tp-pulse 2s ease-in-out infinite; }

  /* C. Retour aux gestes */
  [data-motion] .btn { transition: background-color .15s, color .15s, transform .15s ease-out; }
  [data-motion] .btn:active { transform: scale(.97); }
  [data-motion] [data-form-status]:not(:empty),
  [data-motion] .toast { animation: tp-fade .25s ease-out; }

  /* D. Ombre de l'en-tête au défilement */
  @supports (animation-timeline: scroll()) {
    [data-motion] .site-header {
      animation: tp-shadow linear both;
      animation-timeline: scroll();
      animation-range: 0 80px;
    }
  }

  @keyframes tp-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes tp-fade { from { opacity: 0; } }
  @keyframes tp-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); } }
  @keyframes tp-shadow { to { box-shadow: 0 6px 20px rgb(0 0 0 / .08); } }
}