/* ==========================================================================
   Animations — rebonds, scintillements, pétales
   ========================================================================== */

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}

@keyframes tail-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-9deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes hop {
  0%, 100%   { transform: translateY(0) scale(1, 1); }
  25%        { transform: translateY(-16px) scale(0.96, 1.05); }
  50%        { transform: translateY(0) scale(1.06, 0.94); }
  70%        { transform: translateY(-6px) scale(1, 1); }
}

@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.75) rotate(0deg); }
  50%      { opacity: 1;  transform: scale(1.15) rotate(22deg); }
}

@keyframes float-zzz {
  0%   { opacity: 0; transform: translate(0, 0) scale(.7); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(10px, -22px) scale(1.15); }
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: var(--sh-md), 0 0 0 0 rgba(255, 143, 168, 0.55); }
  50%      { box-shadow: var(--sh-md), 0 0 0 12px rgba(255, 143, 168, 0); }
}

/* Inclinaison lente et asymétrique : la pose « réfléchit » plutôt qu'elle ne
   s'agite. L'amplitude reste sous 4° pour rester lisible à 96 px. */
@keyframes tilt {
  0%, 100% { rotate: 0deg; }
  35%      { rotate: -3.5deg; }
  70%      { rotate: 1.5deg; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes petal-fall {
  0%   { opacity: 0;   transform: translate3d(0, -8vh, 0) rotate(0deg); }
  10%  { opacity: .75; }
  90%  { opacity: .55; }
  100% { opacity: 0;   transform: translate3d(var(--drift, 40px), 108vh, 0) rotate(420deg); }
}

/* Le tampon arrive comme un vrai coup de tampon : il tombe de haut, tourne un
   peu et rebondit une fois. C'est la seule récompense du quiz — elle a le
   droit de se faire remarquer. */
@keyframes stamp-pop {
  0%   { opacity: 0; transform: scale(2.1) rotate(-18deg); }
  55%  { opacity: 1; transform: scale(.9) rotate(4deg); }
  75%  { transform: scale(1.05) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes confetti-fall {
  0%   { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0turn); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift, 0), 106vh, 0) rotate(var(--spin, 1turn)); }
}

/* --- Application --------------------------------------------------------- */

/* Ces deux règles n'agissent que sur le SVG de repli — une image n'a ni yeux
   ni queue à animer séparément. */
.mascot .eye-open   { animation: blink 5.5s infinite; transform-origin: center; transform-box: fill-box; }
.mascot .tail       { animation: tail-sway 3.2s ease-in-out infinite; transform-origin: 96px 92px; }

/* La vie du personnage se joue désormais sur le bloc entier. Chaque état a
   son propre souffle : le sommeil respire plus lentement que la joie. */
.mascot             { animation: bob 3.6s ease-in-out infinite; }
.mascot.is-sleepy   { animation: bob 5.4s ease-in-out infinite; }
.mascot.is-thinking { animation: bob 3.6s ease-in-out infinite, tilt 4.8s ease-in-out infinite; }
.mascot.is-happy    { animation: hop .9s cubic-bezier(.34,1.56,.64,1), bob 3.6s ease-in-out .9s infinite; }
.mascot.is-celebrate{ animation: hop 1.1s cubic-bezier(.34,1.56,.64,1) infinite; }

/* Entrée de vue */
.view { animation: fade-up .34s cubic-bezier(.22,1,.36,1) both; }
.view > * { animation: fade-up .4s cubic-bezier(.22,1,.36,1) both; }
.view > *:nth-child(2) { animation-delay: .04s; }
.view > *:nth-child(3) { animation-delay: .08s; }
.view > *:nth-child(4) { animation-delay: .12s; }
.view > *:nth-child(5) { animation-delay: .16s; }

/* --- Pétales de sakura en fond ------------------------------------------ */
.petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: 0;
  width: 13px; height: 13px;
  background: var(--sakura);
  border-radius: 76% 24% 68% 32% / 42% 58% 42% 58%;
  animation: petal-fall linear infinite;
}

/* --- Respect des préférences d'accessibilité ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .petals { display: none; }
}

/* La carte se refuse en secouant la tête. `translate` plutôt que
   `transform` : la propriété reste libre pour le `fade-up` d'entrée. */
@keyframes porte-secousse {
  10%, 90%      { translate: -2px 0; }
  20%, 80%      { translate:  4px 0; }
  30%, 50%, 70% { translate: -7px 0; }
  40%, 60%      { translate:  7px 0; }
}