/* Édition 55 — Accueil percutant · Jeu fluide · Thème enrichi · Chargement perçu.
   Ce fichier n'introduit aucune règle de jeu, chrono, son ni état applicatif.
   Il complète motion51.css sans le remplacer : les règles reduced-motion existantes
   restent prioritaires. Charger après edition54.css dans le <head>. */

/* ═══════════════════════════════════════════════════════════════════
   A — ACCUEIL PERCUTANT
   Entrée progressive des cartes de mode, hero enrichi, étincelles.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero : sous-titre avec un léger retard pour un effet de cascade */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #home .hero h1 {
    animation: ed55-fade-up 480ms cubic-bezier(.22,.68,0,1.2) both;
  }
  html:not([data-motion="reduce"]) #home .hero > p {
    animation: ed55-fade-up 480ms cubic-bezier(.22,.68,0,1.2) 90ms both;
  }
  html:not([data-motion="reduce"]) #home .card-scene {
    animation: ed55-fade-up 520ms cubic-bezier(.22,.68,0,1.2) 160ms both;
  }
  /* Les étincelles pulsent doucement en plus du flottement existant */
  html:not([data-motion="reduce"]) #home .spark {
    animation: ed55-spark-glow 2.8s ease-in-out infinite alternate;
  }
  html:not([data-motion="reduce"]) #home .s2 {
    animation-delay: -1.4s;
  }
}

@keyframes ed55-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ed55-spark-glow {
  from { opacity: .55; transform: scale(.88); }
  to   { opacity: 1;   transform: scale(1.12); }
}

/* Entrée en cascade des cartes de mode : chaque carte apparaît 40 ms après la précédente */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(1) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 220ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(2) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 260ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(3) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 300ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(4) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 340ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(5) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 380ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(6) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 420ms both; }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:nth-child(7) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 460ms both; }
  html:not([data-motion="reduce"]) #home .special-mode-grid48 > .mode-card:nth-child(1) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 140ms both; }
  html:not([data-motion="reduce"]) #home .special-mode-grid48 > .mode-card:nth-child(2) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 180ms both; }
  html:not([data-motion="reduce"]) #home .special-mode-grid48 > .mode-card:nth-child(3) { animation: ed55-card-in 380ms cubic-bezier(.22,.68,0,1.15) 220ms both; }
}

@keyframes ed55-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Retour tactile enrichi sur les cartes de mode : légère montée au survol */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:not(:disabled):hover,
  html:not([data-motion="reduce"]) #home .special-mode-grid48 > .mode-card:not(:disabled):hover {
    transform: translateY(-3px) !important;
  }
  html:not([data-motion="reduce"]) #home .mode-grid46 > .mode-card:not(:disabled):active,
  html:not([data-motion="reduce"]) #home .special-mode-grid48 > .mode-card:not(:disabled):active {
    transform: translateY(1px) scale(.985) !important;
    transition-duration: 80ms !important;
  }
}

/* Section-title : ligne séparatrice animée à l'entrée */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #home .section-title {
    animation: ed55-fade-up 360ms ease-out 180ms both;
  }
  html:not([data-motion="reduce"]) #home .special-mode-heading48 {
    animation: ed55-fade-up 360ms ease-out 80ms both;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   B — EXPÉRIENCE DE JEU FLUIDE
   Transitions de tour, cartes, bilan, panneau de score.
   ═══════════════════════════════════════════════════════════════════ */

/* Carte-mot : entrée avec légère rotation de dépliage */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .word-card {
    animation: ed55-word-reveal 420ms cubic-bezier(.18,.8,.28,1) both;
  }
}
@keyframes ed55-word-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.96) rotate(-1.5deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Boutons de réponse (Trouvé/Passé) : retour plus vif à l'activation */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .responses button:active {
    transform: scale(.91) !important;
    transition-duration: 70ms !important;
  }
}

/* Score-item : entrée douce au premier affichage */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .score-item {
    animation: ed55-score-in 340ms cubic-bezier(.22,.68,0,1.15) both;
  }
  html:not([data-motion="reduce"]) .score-item.active {
    animation: ed55-score-active 280ms cubic-bezier(.22,.68,0,1.2) both;
  }
}
@keyframes ed55-score-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ed55-score-active {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Panneau setup (joueurs / univers / catégorie) : glissement latéral depuis la droite */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #setup.panel,
  html:not([data-motion="reduce"]) #mode-players46.panel {
    animation: ed55-slide-in 340ms cubic-bezier(.22,.68,0,1.1) both;
  }
}
@keyframes ed55-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Célébration : confetti léger autour du trophée/emoji (décor uniquement) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .celebration-mark {
    animation: ed55-celebrate 600ms cubic-bezier(.18,.8,.28,1) both !important;
  }
}
@keyframes ed55-celebrate {
  0%   { opacity: 0; transform: scale(.4) rotate(-25deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(4deg); }
  80%  { transform: scale(.96) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Toast : glissement depuis le bas plutôt qu'apparition sèche */
.toast {
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.22,.68,0,1.2) !important;
}
.toast.visible {
  transform: translate(-50%, 0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   C — THÈME VISUEL ENRICHI
   Finitions crème, sombre, verre et brutal.
   ═══════════════════════════════════════════════════════════════════ */

/* Crème — dégradé subtil sur le fond pour donner de la profondeur */
html:not([data-appearance]),
html[data-appearance="cream"] {
  background: linear-gradient(160deg, #f9f6ec 0%, #f0ede0 100%);
}

/* Crème — topbar : légère ombre de séparation plus nette */
html:not([data-appearance]) .topbar,
html[data-appearance="cream"] .topbar {
  box-shadow: 0 1px 0 #d4d9ca, 0 4px 16px rgba(23, 78, 60, .04);
  border-bottom: none;
}

/* Crème — cartes de mode : surbrillance douce à la frontière supérieure */
html:not([data-appearance]) #home .mode-grid46 > .mode-card,
html[data-appearance="cream"] #home .mode-grid46 > .mode-card {
  box-shadow: 6px 6px 0 #111, inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* Sombre sculpté — lueur d'ambiance verte très légère derrière le hero */
@media (prefers-reduced-motion: no-preference) {
  html[data-appearance="dark"] #home .hero::before {
    content: "";
    position: absolute;
    inset: -60px 0;
    background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(0, 77, 64, .22) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
  }
}
html[data-appearance="dark"] #home .hero {
  position: relative;
}

/* Sombre sculpté — mode-card : lueur interne verte à l'état actif/sélectionné */
html[data-appearance="dark"] #home .mode-grid46 > .mode-card:focus-visible {
  box-shadow: var(--shadow-inset), 0 0 0 3px #81c784 !important;
}

/* Verre — fond corps avec légère saturation supplémentaire */
html[data-appearance="glass"] body {
  background: linear-gradient(140deg, #0a3f6e 0%, #0f57b0 48%, #1e1d80 100%) !important;
  background-attachment: fixed !important;
}

/* Verre — hero : halo lumineux discret */
html[data-appearance="glass"] #home .hero h1 {
  text-shadow: 0 2px 24px rgba(169, 245, 216, .18);
}

/* Brutal — couleur d'accentuation plus vive pour les éléments secondaires */
html[data-appearance="brutal"] #home .section-title h2 {
  border-bottom: 3px solid #111;
  padding-bottom: 4px;
}

/* Brutal — fond amélioré avec grain subtil */
html[data-appearance="brutal"] body {
  background: radial-gradient(ellipse at 88% 4%, #ffe471 0%, transparent 30%),
              radial-gradient(ellipse at 6% 96%, #b8ffb8 0%, transparent 24%),
              #fff8dc !important;
}

/* Tous thèmes — lien de la marque (logo) : animation douce au survol */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .brand img {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  html:not([data-motion="reduce"]) .brand:hover img {
    transform: rotate(-4deg) scale(1.07);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   E — CHARGEMENT PERÇU
   Splash enrichi, barre de progression visible, entrée plus nette.
   ═══════════════════════════════════════════════════════════════════ */

/* Splash : icône avec légère pulsation pendant le chargement */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #startup-splash51:not(.is-ready) img {
    animation: ed55-splash-icon 1.8s ease-in-out infinite;
  }
}
@keyframes ed55-splash-icon {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%       { transform: scale(1.06) rotate(-3deg); opacity: .88; }
}

/* Barre de progression : arrondie, plus haute et avec couleur d'accent */
#startup-progress51 {
  height: 6px !important;
  min-height: 6px !important;
  border-radius: 99px;
  overflow: hidden;
  accent-color: #174e3c;
}

/* Sortie du splash : fondu plus rapide et net */
#startup-splash51.is-ready {
  opacity: 0 !important;
  transform: scale(1.012);
  transition: opacity 220ms ease-in, transform 220ms ease-in !important;
}

/* Carte du splash : légère ombre portée pour donner de la profondeur */
#startup-splash51 .startup-card51 {
  box-shadow: 0 12px 40px rgba(23, 78, 60, .12), 0 2px 8px rgba(23, 78, 60, .08);
}

/* Entrée de l'appli après le splash : apparition globale douce */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .app {
    animation: ed55-app-reveal 360ms ease-out both;
  }
}
@keyframes ed55-app-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Topbar : entrée légèrement décalée pour un effet de rideau */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .topbar {
    animation: ed55-topbar-in 400ms ease-out both;
  }
}
@keyframes ed55-topbar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Réduction de mouvement : toutes les nouvelles animations désactivées proprement */
@media (prefers-reduced-motion: reduce) {
  #home .hero h1,
  #home .hero > p,
  #home .card-scene,
  #home .spark,
  #home .section-title,
  #home .special-mode-heading48,
  #home .mode-grid46 > .mode-card,
  #home .special-mode-grid48 > .mode-card,
  .word-card,
  .score-item,
  #setup.panel,
  #mode-players46.panel,
  .celebration-mark,
  .topbar,
  .app,
  #startup-splash51 img {
    animation: none !important;
  }
  #startup-splash51.is-ready {
    transition: opacity 1ms linear !important;
    transform: none !important;
  }
}
html[data-motion="reduce"] #home .hero h1,
html[data-motion="reduce"] #home .hero > p,
html[data-motion="reduce"] #home .card-scene,
html[data-motion="reduce"] #home .spark,
html[data-motion="reduce"] #home .section-title,
html[data-motion="reduce"] #home .special-mode-heading48,
html[data-motion="reduce"] #home .mode-grid46 > .mode-card,
html[data-motion="reduce"] #home .special-mode-grid48 > .mode-card,
html[data-motion="reduce"] .word-card,
html[data-motion="reduce"] .score-item,
html[data-motion="reduce"] #setup.panel,
html[data-motion="reduce"] #mode-players46.panel,
html[data-motion="reduce"] .celebration-mark,
html[data-motion="reduce"] .topbar,
html[data-motion="reduce"] .app,
html[data-motion="reduce"] #startup-splash51 img {
  animation: none !important;
}
html[data-motion="reduce"] #startup-splash51.is-ready {
  transition: opacity 1ms linear !important;
  transform: none !important;
}