@import url('variables.css');
/* Contrat de mouvement conservé dans la préversion v52.
   Les keyframes décoratifs n'animent que transform et opacity.
   Aucun état, chrono, son ni règle de jeu n'est piloté par CSS. */

#resume-last-mode {
  display: block;
  inline-size: min(100% - 2rem, 34rem);
  min-block-size: var(--touch-target, 48px);
  margin: 0 auto 1rem;
}
#resume-last-mode[hidden] { display: none; }

:where(button, input[type="button"], input[type="submit"], input[type="reset"], a[href], select, summary, [role="button"], .file-label) {
  min-block-size: var(--touch-target, 48px) !important;
}

:where(button, a, input, select, textarea, summary, [role="button"], .file-label, .mode-card, .universe, .primary, .secondary, .text-button, .appui-button, .cs50-button, .cs50-back, .settings-trigger, .settings-close, .settings-done, .settings-theme-option, .settings-motion-row, .responses button, .taboo-buttons button, .edition34-transition-card) {
  transition-property: transform, opacity !important;
  transition-duration: 250ms !important;
  transition-timing-function: ease-out !important;
}
#home .mode-card,
#home .mode-grid46 > .mode-card:not(:disabled),
#home .special-mode-grid48 > .mode-card:not(:disabled) {
  transition-property: transform, opacity !important;
  transition-duration: 250ms !important;
  transition-timing-function: ease-out !important;
}

@keyframes motion51-screen-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
:where(.panel, .gm-enter, .settings-dialog, .appui-dialog, .appui-picker, .edition34-transition-card) {
  animation: motion51-screen-enter 250ms ease-out both !important;
}

:where(button, a, [role="button"], .mode-card, .universe, .primary, .secondary, .text-button):disabled,
:where(button, a, [role="button"], .mode-card, .universe, .primary, .secondary, .text-button)[aria-disabled="true"] {
  transition: none !important;
}

/* Cercle Secret : atmosphère rétablie avec des changements sans reflow. */
#cercle-secret50-screen #cercle-secret50-root .cs50-shell {
  animation: motion51-screen-enter 250ms ease-out both !important;
}
#cercle-secret50-screen #cercle-secret50-root .cs50-shell::before {
  animation: motion52-shell-drift 26s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}
#cercle-secret50-screen #cercle-secret50-root .cs50-shell::after {
  animation: motion52-shell-particles 8s ease-in-out infinite alternate !important;
}
#cercle-secret50-screen #cercle-secret50-root .cs50-stage-lights {
  animation: motion52-shell-glow 6s ease-in-out infinite alternate !important;
}
#cercle-secret50-screen #cercle-secret50-root .cs50-sigil {
  animation: motion52-sigil-breathe 5s ease-in-out infinite !important;
  will-change: transform, opacity;
}
#cercle-secret50-screen #cercle-secret50-root .cs50-private-card,
#cercle-secret50-screen #cercle-secret50-root .secret-card {
  animation: motion52-secret-card 420ms ease-out both !important;
}

@keyframes motion52-shell-drift {
  from { opacity: .28; transform: translate3d(-.4%, -.2%, 0) rotate(-7deg) scale(1); }
  to { opacity: .52; transform: translate3d(.4%, .2%, 0) rotate(-4deg) scale(1.025); }
}
@keyframes motion52-shell-particles {
  from { opacity: .10; transform: translateY(0); }
  to { opacity: .22; transform: translateY(-5px); }
}
@keyframes motion52-shell-glow {
  from { opacity: .32; }
  to { opacity: .82; }
}
@keyframes motion52-sigil-breathe {
  0%, 100% { opacity: .82; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.035); }
}
@keyframes motion52-secret-card {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Décompte : l'orbite se lit dans le mouvement du chiffre, sans animer le cercle. */
:is(.tu-countdown-number, #taboo-countdown .countdown-number, #classic36-countdown-number, #duel36-countdown) {
  transform-origin: center;
  animation: motion52-countdown-orbit 1s cubic-bezier(.2, .7, .25, 1) infinite !important;
  will-change: transform, opacity;
}
@keyframes motion52-countdown-orbit {
  0% { opacity: .68; transform: rotate(-2deg) scale(.94); }
  48% { opacity: 1; transform: rotate(1deg) scale(1.035); }
  100% { opacity: .9; transform: rotate(0) scale(1); }
}

/* Célébration discrète : échelle et opacité seulement. */
:where(.celebration-mark, .cs50-celebration-mark) {
  transform-origin: center;
  animation: motion52-celebrate 520ms cubic-bezier(.2, .7, .25, 1) both;
}
@keyframes motion52-celebrate {
  0% { opacity: .35; transform: scale(.82); }
  72% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* Le chiffre du chrono passe au rouge à 10 s; seul le nombre pulse doucement à 5 s. */
.timer-number { display:inline-block; transform-origin:center; font-variant-numeric:tabular-nums; }
:where(.timer-row strong .timer-number.urgent, #timesup .tu-remote-timer .timer-number.urgent, .classic36-play-head strong .timer-number.urgent, #covered26 .amc26-clock.is-urgent b, .identities48-clock-value.urgent, #cercle-secret50-root .cs50-timer-wrap strong.urgent) {
  color: #b42318 !important;
}
:where(.timer-row strong .timer-number.critical-shake, #timesup .tu-remote-timer .timer-number.critical-shake, .classic36-play-head strong .timer-number.critical-shake, #covered26 .amc26-clock.is-shaking b, .identities48-clock-value.critical-shake, #cercle-secret50-root .cs50-timer-wrap strong.critical-shake) {
  transform-origin: center;
  animation: motion52-urgency-pulse 900ms ease-in-out infinite !important;
  will-change: transform, opacity;
}
@keyframes motion52-urgency-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.055); }
}

/* Les cartes d'attente ne tournent pas en boucle; décor du loader conservé statique. */
:where(.edition34-transition-ticket, .edition34-transition-rail::after) {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}