/* Mouvement : ouverture cinématique, transitions d'écrans, squelettes, apparitions, confettis.
   Deux garde-fous en bas du fichier : « mouvement réduit » (prefers-reduced-motion ou classe .reduit) et « mode léger » (.leger). */

/* ————— ouverture ————— */
.ouverture {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(90% 60% at 50% 45%, #0e1640 0%, #05060e 70%);
  perspective: 800px;
}
.demarrage body { overflow: hidden; }
.ouv-poussiere i {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #bcd3ff; box-shadow: 0 0 10px 2px rgba(110, 160, 255, 0.8);
  opacity: 0; animation: poussiere 2.2s var(--ressort) var(--d) both;
}
@keyframes poussiere {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((50vw - var(--x)) * 0.9), calc((50vh - var(--y)) * 0.9)) scale(1.2); }
}
.ouv-scene { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; animation: flotte 3s ease-in-out infinite; }
.ouv-logo { overflow: visible; filter: drop-shadow(0 0 26px rgba(77, 141, 255, 0.55)); }
.ouv-logo .face { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ouv-logo .f-haut { animation: face-haut 0.9s var(--ressort) 0.55s both; }
.ouv-logo .f-gauche { animation: face-gauche 0.9s var(--ressort) 0.75s both; }
.ouv-logo .f-droite { animation: face-droite 0.9s var(--ressort) 0.95s both; }
@keyframes face-haut { from { opacity: 0; transform: translateY(-46px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes face-gauche { from { opacity: 0; transform: translate(-46px, 26px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes face-droite { from { opacity: 0; transform: translate(46px, 26px) scale(0.6); } to { opacity: 1; transform: none; } }
.ouv-logo .arete { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards, lueur 1.6s ease-in-out 1.3s infinite alternate; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes lueur { from { stroke-opacity: 0.9; } to { stroke-opacity: 0.35; } }
@keyframes flotte { 50% { transform: translateY(-6px) rotateX(8deg) rotateY(-10deg); } }
.ouv-onde { position: absolute; inset: -30px; border-radius: 50%; border: 1px solid rgba(62, 230, 255, 0.6); opacity: 0; animation: onde-ouv 1.6s var(--ressort) 1.35s both; }
@keyframes onde-ouv { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: scale(2.4); } }
.ouv-marque { margin: 0; font: 800 clamp(2rem, 10vw, 2.8rem)/1 var(--police-titre); text-transform: uppercase; letter-spacing: 0.06em; display: flex; gap: 0.3em; overflow: hidden; padding: 4px 2px; }
.ouv-marque span { display: inline-block; animation: mot 0.8s var(--ressort) both; }
.ouv-marque span:nth-child(1) { animation-delay: 1.05s; }
.ouv-marque span:nth-child(2) { animation-delay: 1.17s; }
.ouv-marque span:nth-child(3) { animation-delay: 1.29s; }
.ouv-marque .ia { background: linear-gradient(120deg, var(--cyan), var(--violet-clair) 60%, var(--or)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes mot { from { transform: translateY(110%) rotateX(-60deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ouv-jauge { width: 140px; height: 2px; border-radius: 2px; background: rgba(127, 176, 255, 0.15); overflow: hidden; }
.ouv-jauge span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--or)); transform-origin: left; animation: jauge 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
@keyframes jauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* sortie : le logo plonge vers l'écran, le voile s'ouvre en cercle */
.ouverture.fin { pointer-events: none; animation: voile 0.85s cubic-bezier(0.7, 0, 0.2, 1) both; }
.ouverture.fin .ouv-scene { animation: plonge 0.8s cubic-bezier(0.7, 0, 0.2, 1) both; }
.ouverture.fin .ouv-marque, .ouverture.fin .ouv-jauge { animation: s-efface 0.35s ease both; }
@keyframes voile { 0% { clip-path: circle(150% at 50% 45%); } 100% { clip-path: circle(0% at 50% 45%); } }
@keyframes plonge { to { transform: scale(5) translateZ(200px); opacity: 0; } }
@keyframes s-efface { to { opacity: 0; transform: translateY(-10px); } }
.demarrage .barre, .demarrage .vue { opacity: 0; }

/* l'accueil se construit derrière le voile */
.entree-app .barre { animation: monte 0.8s var(--ressort) 0.2s both; }
.entree-app .vue .entete > * { animation: monte 0.9s var(--ressort) both; }
.entree-app .vue .entete > :nth-child(2) { animation-delay: 0.08s; }
.entree-app .vue .entete > :nth-child(3) { animation-delay: 0.16s; }
.entree-app .scene { animation: apparait-scene 1.4s var(--ressort) 0.1s both; }
.entree-app .tuiles > * { animation: tuile-vol 0.95s var(--ressort) both; animation-delay: calc(0.25s + var(--i, 0) * 70ms); }
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes apparait-scene { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes tuile-vol { from { opacity: 0; transform: translateY(40px) rotateX(-35deg) scale(0.94); } to { opacity: 1; transform: none; } }

/* ————— transitions d'écrans (View Transitions API) ————— */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(barre) { animation: none; }
::view-transition-old(vue) { animation: vt-sortie 0.32s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(vue) { animation: vt-entree 0.6s var(--ressort) both; }
html[data-sens="retour"]::view-transition-old(vue) { animation-name: vt-sortie-retour; }
html[data-sens="retour"]::view-transition-new(vue) { animation-name: vt-entree-retour; }
html[data-sens="maj"]::view-transition-old(vue) { animation: s-efface-simple 0.18s ease both; }
html[data-sens="maj"]::view-transition-new(vue) { animation: s-apparait-simple 0.32s ease both; }
::view-transition-group(morph) { animation-duration: 0.55s; animation-timing-function: var(--ressort); }
::view-transition-old(morph), ::view-transition-new(morph) { animation-duration: 0.45s; height: 100%; object-fit: cover; }
@keyframes vt-sortie { to { opacity: 0; transform: scale(0.93) translateY(-8px); filter: brightness(0.6); } }
@keyframes vt-entree { from { opacity: 0; transform: scale(1.05) translateY(26px); } }
@keyframes vt-sortie-retour { to { opacity: 0; transform: scale(1.05) translateY(20px); } }
@keyframes vt-entree-retour { from { opacity: 0; transform: scale(0.94) translateY(-10px); filter: brightness(0.6); } }
@keyframes s-efface-simple { to { opacity: 0; } }
@keyframes s-apparait-simple { from { opacity: 0; } }

/* repli sans View Transitions */
.vue.sortie-avant, .vue.sortie-retour { animation: s-efface-simple 0.13s ease both; }
.vue.sortie-maj { animation: s-efface-simple 0.06s ease both; }
.vue.entree-avant { animation: vt-entree 0.55s var(--ressort) both; }
.vue.entree-retour { animation: vt-entree-retour 0.55s var(--ressort) both; }
.vue.entree-maj { animation: s-apparait-simple 0.3s ease both; }

/* ————— cascades et apparitions ————— */
[data-cascade] > * { animation: monte 0.7s var(--ressort) both; animation-delay: calc(0.08s + var(--i, 0) * 55ms); }
[data-revele] { opacity: 0; transform: translateY(26px) scale(0.98); transition: opacity 0.7s var(--ressort), transform 0.8s var(--ressort); }
[data-revele].vu { opacity: 1; transform: none; }

/* ————— squelettes ————— */
.squelette { display: grid; gap: 12px; padding-top: 8px; }
.sq-barre, .sq-carte, .sq-anneau, .sq-plan { position: relative; overflow: hidden; background: rgba(40, 52, 100, 0.35); border-radius: 10px; }
.sq-barre { display: block; }
.sq-carte { border-radius: var(--rayon); padding: 18px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--filet); background: rgba(22, 28, 56, 0.45); }
.sq-carte .sq-barre { background: rgba(70, 90, 160, 0.3); }
.sq-anneau { width: 120px; height: 120px; border-radius: 50%; margin: 8px auto; }
.sq-plan { height: 180px; border-radius: var(--rayon); }
.sq-barre::after, .sq-carte::after, .sq-anneau::after, .sq-plan::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(150, 180, 255, 0.16) 45%, rgba(62, 230, 255, 0.12) 55%, transparent 80%);
  animation: reflet-sq 1.3s ease-in-out infinite;
}
@keyframes reflet-sq { to { transform: translateX(100%); } }

/* ————— confettis ————— */
.confettis { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }

/* ————— MOUVEMENT RÉDUIT : tout reste lisible, rien ne bouge (ou presque) ————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .ouverture { display: none; }
  .demarrage .barre, .demarrage .vue { opacity: 1; }
  [data-revele] { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.reduit *, .reduit *::before, .reduit *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
.reduit .ouverture { display: none; }
.reduit [data-revele] { opacity: 1; transform: none; }
.reduit .aurore { animation: none; }

/* ————— MODE LÉGER : appareils faibles, batterie faible, économie de données ————— */
.leger { --flou: none; }
.leger .carte, .leger .tuile, .leger .lecon, .leger .quiz, .leger .filtres, .leger .bouton.secondaire { -webkit-backdrop-filter: none; backdrop-filter: none; background: #121834; }
.leger .grain, .leger .aurore.a3 { display: none; }
.leger .aurore { animation: none; }
.leger .titre-neon { animation: none; }
.leger [data-cascade] > * { animation-duration: 0.35s; animation-delay: 0s; }
.leger [data-revele] { transition-duration: 0.3s; }
.leger ::view-transition-new(vue) { animation-duration: 0.3s; }
.leger ::view-transition-old(vue) { animation-duration: 0.18s; }
.leger .ouv-poussiere { display: none; }

/* filet de sécurité : si le JavaScript ne démarre pas, l'ouverture s'efface seule après 8 s */
.ouverture:not(.fin) { animation: securite-ouv 0.4s ease 8s forwards; }
.demarrage .vue, .demarrage .barre { animation: securite-vue 0.4s ease 8s forwards; }
@keyframes securite-ouv { to { opacity: 0; visibility: hidden; } }
@keyframes securite-vue { to { opacity: 1; } }
.leger .barre { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 6, 14, 0.96); }