/* NYANGA BEAUTY — mouvement.
   Chaque animation a un rôle dans le parcours (émotion, orientation, réponse, statut).
   On n'anime que transform, opacity et visibility. */

:root {
  --motion-fast: 140ms;     /* appui, bascule */
  --motion-base: 220ms;     /* apparition d'un élément d'interface */
  --motion-page: 350ms;     /* transition entre pages */
  --motion-slow: 600ms;     /* validation (coche) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-emphasis: cubic-bezier(.72, 0, .18, 1);
}

/* ——— Orientation : transitions entre pages ——— */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-base); }
/* La photo d'une pro (carte, talent) devient l'en-tête de sa fiche. */
::view-transition-group(*) { animation-duration: var(--motion-page); animation-timing-function: var(--ease-in-out); }

/* ——— Émotion : la photo arrive en trois mèches qui se tressent ———
   Une fois par session ; jamais en mode léger ni avec « réduire les animations ».
   La recherche reste utilisable pendant toute l'animation. */
@media (prefers-reduced-motion: no-preference) {
  /* Arrivée : le titre et la recherche montent doucement, une fois par session */
  html:not(.lite):not(.hero-seen) .cine .kicker,
  html:not(.lite):not(.hero-seen) .cine h1,
  html:not(.lite):not(.hero-seen) .cine .lede,
  html:not(.lite):not(.hero-seen) .cine .search { animation: title-in .9s var(--ease-out) both; }
  html:not(.lite):not(.hero-seen) .cine h1 { animation-delay: .12s; }
  html:not(.lite):not(.hero-seen) .cine .lede { animation-delay: .24s; }
  html:not(.lite):not(.hero-seen) .cine .search { animation-delay: .36s; }
  html:not(.lite):not(.hero-seen) .cine-word { animation: word-in 1.6s var(--ease-emphasis) backwards; }
  html:not(.lite):not(.hero-seen) .cine-a { animation: zoom-in 2.4s var(--ease-out) backwards; }
  @keyframes word-in { from { transform: translateY(70%); opacity: 0; } }
  @keyframes zoom-in { from { transform: scale(1.3); } }
  @keyframes title-in { from { opacity: 0; transform: translateY(14px); } }
}

/* ——— Réponse : appui sur un bouton ——— */
.btn, .pill, .day, .slot { transition: transform var(--motion-fast) var(--ease-out), background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out; }
.btn:active, .pill:active, .day:active, .slot:active { transform: scale(.97); }

/* ——— Statut : message après une action ——— */
.flash { animation: flash-in var(--motion-base) var(--ease-out) both; display: flex; gap: 12px; align-items: center; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
.flash-check { width: 30px; height: 30px; flex: none; }
.flash-check circle, .flash-check path { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.flash-check circle { animation: draw var(--motion-slow) var(--ease-out) .1s forwards; }
.flash-check path { animation: draw 380ms var(--ease-out) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ——— Statut : champ en erreur (3 oscillations, ±4 px) ——— */
.shake { animation: shake 300ms ease-in-out; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.field-error input, .field-error select, .field-error textarea, .field-error.slot-grid { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }

/* ——— Statut : chargement des résultats (silhouettes à la forme des cartes) ——— */
.skeleton { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
.skeleton li { display: grid; gap: 10px; }
.skeleton .sk-media { aspect-ratio: 4 / 5; border-radius: 999px 999px 8px 8px; }
.skeleton .sk-line { height: 14px; border-radius: 4px; width: 70%; }
.skeleton .sk-line + .sk-line { width: 45%; }
.skeleton .sk-media, .skeleton .sk-line { background: linear-gradient(90deg, var(--line) 0%, var(--lait) 50%, var(--line) 100%) 0 0 / 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (min-width: 640px) { .skeleton { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 22px; } }

/* ——— Réponse : résultats qui arrivent en cascade (8 premiers seulement) ——— */
.stagger-in > li { animation: rise 260ms var(--ease-out) both; }
.stagger-in > li:nth-child(2) { animation-delay: 40ms; }
.stagger-in > li:nth-child(3) { animation-delay: 80ms; }
.stagger-in > li:nth-child(4) { animation-delay: 120ms; }
.stagger-in > li:nth-child(5) { animation-delay: 160ms; }
.stagger-in > li:nth-child(6) { animation-delay: 200ms; }
.stagger-in > li:nth-child(7) { animation-delay: 240ms; }
.stagger-in > li:nth-child(8) { animation-delay: 280ms; }
.stagger-in > li:nth-child(n+9) { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ——— Réponse : créneaux du jour choisi ——— */
.slot-grid.is-fresh .slot { animation: rise 200ms var(--ease-out) both; }
.recap.is-updated { animation: recap 260ms var(--ease-out); }
@keyframes recap { from { opacity: .3; } }

/* ——— Statut : localisation en cours (le point du viseur pulse) ——— */
.near-btn.is-busy svg { animation: locate 1.1s ease-in-out infinite; }
@keyframes locate { 50% { transform: scale(.82); opacity: .55; } }

/* ——— Orientation : barre « Réserver » mobile ——— */
.sticky-book { transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) ease-out; }
.sticky-book.is-hidden { transform: translateY(120%); opacity: 0; }

/* ——— Mode léger et mouvements réduits ——— */
html.lite *, html.lite *::before, html.lite *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .btn:active, .pill:active, .day:active, .slot:active { transform: none; }
  .flash-check circle, .flash-check path { stroke-dashoffset: 0; }
}