/* =========================================================
   FREDI — "Contained ember" mascot layout + the celebrate flourish.
   The SVG (injected by js/fredi-character.js) carries its own resting
   motion as native SMIL — bob, morph, breathing core, blink, contact
   shadow, halo pulse — so there are no CSS keyframes for it here.
   data-state on the .fredi root swaps the facial expression (in JS) and
   toggles the confetti burst below. prefers-reduced-motion → held still
   (the JS pauses the SMIL; the confetti is hidden here).
   ========================================================= */

.fredi{
  --fredi-scale:1;
  position:relative;
  width:400px; height:400px;
  transform:scale(var(--fredi-scale));
  transform-origin:center;
}
.fredi__stage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.fredi-svg{ width:100%; height:100%; display:block; overflow:visible; }

/* ---- confetti (built by the mount, shown only when celebrating) -------- */
.fredi__confetti{ position:absolute; inset:0; pointer-events:none; overflow:visible; display:none; z-index:2; }
.fredi[data-state="celebrating"] .fredi__confetti{ display:block; }
.fredi__conf{ position:absolute; top:6%; opacity:0; animation:frediConf 1.8s ease-in forwards; }
@keyframes frediConf{
  0%{ opacity:0; transform:translateY(0) rotate(0) }
  12%{ opacity:1 }
  100%{ opacity:0; transform:translateY(320px) rotate(300deg) }
}

/* ---- respect reduced motion: no confetti (SMIL is paused in JS) -------- */
@media (prefers-reduced-motion: reduce){
  .fredi__conf{ animation:none !important; }
  .fredi__confetti{ display:none !important; }
}