/* ============================================================
 * Magic Motion Preview — componente standalone riusabile
 * (home.html, dashboard.html, eventualmente altre superfici).
 *
 * Subset minimale del CSS di layouts/pages/movimento-magico.html
 * con prefisso .mmp-* per evitare collisioni con le classi proprie
 * della pagina /movimento-magico (.stage, .stage-char, .mv-*, …).
 *
 * Vedi wiki/modules/magic-motion.md → sezione "Preview component".
 * ============================================================ */

/* ----- Stage ----- */
.mmp-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #1B1530; /* fallback se il JS non gira */
}

/* ----- Character + bubble ----- */
.mmp-char {
  position: relative;
  animation: mmp-char-float 4s ease-in-out infinite;
}
.mmp-glow {
  position: absolute;
  inset: -30%;
  z-index: -1;
  animation: mmp-glow-pulse 3s ease-in-out infinite;
  filter: blur(8px);
}
.mmp-bubble {
  width: 130px; height: 130px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow:
    0 18px 40px -12px rgba(0,0,0,.45),
    inset 0 -10px 30px rgba(0,0,0,.15),
    inset 0 10px 30px rgba(255,255,255,.3);
  border: 3px solid rgba(255,255,255,.7);
  transition: background .4s ease;
}
@media (min-width: 1024px) {
  .mmp-bubble { width: 150px; height: 150px; }
}
.mmp-icon {
  width: 56px; height: 56px;
  color: #fff;
}
@media (min-width: 1024px) {
  .mmp-icon { width: 64px; height: 64px; }
}

/* ----- Movement keyframes (cartoon principles) ----- */
@keyframes mmp-char-float {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%     { transform: translateY(-14px) rotate(2deg) scale(1.02); }
}
@keyframes mmp-char-dance {
  0%   { transform: rotate(-10deg) translateY(0)   scale(1, 1); }
  20%  { transform: rotate(8deg)   translateY(-3px) scale(1.04, .96); }
  40%  { transform: rotate(-8deg)  translateY(-1px) scale(.98, 1.02); }
  60%  { transform: rotate(12deg)  translateY(-6px) scale(1.06, .94); }
  80%  { transform: rotate(-4deg)  translateY(-3px) scale(.99, 1.01); }
  100% { transform: rotate(-10deg) translateY(0)   scale(1, 1); }
}
@keyframes mmp-char-jump {
  0%   { transform: translateY(0)    scale(1, 1); }
  15%  { transform: translateY(3px)  scale(1.15, .85); }
  30%  { transform: translateY(-20px) scale(.9, 1.15); }
  50%  { transform: translateY(-48px) scale(.92, 1.1) rotate(-2deg); }
  65%  { transform: translateY(-48px) scale(.92, 1.1) rotate(2deg); }
  82%  { transform: translateY(3px)  scale(1.2, .78); }
  93%  { transform: translateY(-4px) scale(.98, 1.02); }
  100% { transform: translateY(0)    scale(1, 1); }
}
@keyframes mmp-char-fly {
  0%   { transform: translate(-100px, 0)    rotate(-12deg); }
  15%  { transform: translate(-60px, -18px) rotate(-6deg); }
  30%  { transform: translate(-15px,  0)    rotate(0deg); }
  45%  { transform: translate(40px,  -18px) rotate(8deg); }
  55%  { transform: translate(100px,  -5px) rotate(12deg); }
  70%  { transform: translate(40px,  -18px) rotate(6deg); }
  85%  { transform: translate(-15px,  -5px) rotate(-6deg); }
  100% { transform: translate(-100px, 0)    rotate(-12deg); }
}
@keyframes mmp-char-wave {
  0%   { transform: rotate(-6deg) translateY(0); }
  20%  { transform: rotate(4deg)  translateY(-4px); }
  35%  { transform: rotate(12deg) translateY(-2px); }
  50%  { transform: rotate(6deg)  translateY(-5px); }
  65%  { transform: rotate(14deg) translateY(-2px); }
  80%  { transform: rotate(4deg)  translateY(-3px); }
  100% { transform: rotate(-6deg) translateY(0); }
}
@keyframes mmp-char-discover {
  0%   { transform: translate(0, 0)                                                  scale(1)  rotate(0deg); }
  15%  { transform: translate(0, 0)                                                  scale(1)  rotate(-10deg); }
  30%  { transform: translate(0, 0)                                                  scale(1)  rotate(10deg); }
  45%  { transform: translate(0, 3px)                                                scale(.95) rotate(0deg); }
  65%  { transform: translate(calc(var(--mmp-tx, 80px) * .5), calc(var(--mmp-ty, -90px) * .5)) scale(.75) rotate(8deg); }
  80%  { transform: translate(var(--mmp-tx, 80px), var(--mmp-ty, -90px))             scale(.45) rotate(-6deg); }
  88%  { transform: translate(var(--mmp-tx, 80px), var(--mmp-ty, -90px))             scale(.45) rotate(-6deg); }
  100% { transform: translate(0, 0)                                                  scale(1)  rotate(0deg); }
}
@keyframes mmp-char-crazy {
  0%   { transform: translate(0, 0)         rotate(0deg)    scale(1); }
  8%   { transform: translate(-70px, -30px) rotate(-180deg) scale(.85); }
  16%  { transform: translate(60px, -60px)  rotate(90deg)   scale(1.1); }
  24%  { transform: translate(-40px, 30px)  rotate(-270deg) scale(.9); }
  32%  { transform: translate(80px, 15px)   rotate(180deg)  scale(1.05); }
  40%  { transform: translate(30px, -80px)  rotate(45deg)   scale(.95); }
  48%  { transform: translate(-80px, -15px) rotate(360deg)  scale(1.1); }
  56%  { transform: translate(0, -90px)     rotate(180deg)  scale(.8); }
  64%  { transform: translate(95px, -25px)  rotate(-90deg)  scale(1.15); }
  72%  { transform: translate(-60px, 40px)  rotate(270deg)  scale(.9); }
  80%  { transform: translate(45px, -60px)  rotate(-180deg) scale(1.05); }
  88%  { transform: translate(-30px, 8px)   rotate(45deg)   scale(.95); }
  100% { transform: translate(0, 0)         rotate(0deg)    scale(1); }
}
@keyframes mmp-char-path {
  0%   { transform: translate(-100px, 50px)  rotate(-6deg); }
  14%  { transform: translate(-60px, -30px)  rotate(10deg); }
  28%  { transform: translate(-20px, 35px)   rotate(-8deg); }
  42%  { transform: translate(25px,  -40px)  rotate(12deg); }
  56%  { transform: translate(70px,  30px)   rotate(-10deg); }
  70%  { transform: translate(95px,  -35px)  rotate(10deg); }
  85%  { transform: translate(100px, 15px)   rotate(-4deg); }
  100% { transform: translate(100px, -15px)  rotate(6deg); }
}

/* Movement variants (snappy easing on squash, ease-in-out on fluid) */
.mmp-mv-dance              { animation: mmp-char-dance    1.6s cubic-bezier(.5,.0,.3,1) infinite; }
.mmp-mv-jump               { animation: mmp-char-jump     1.4s cubic-bezier(.45,0,.35,1) infinite; }
.mmp-mv-fly                { animation: mmp-char-fly      6s   ease-in-out infinite; }
.mmp-mv-wave               { animation: mmp-char-wave     2s   ease-in-out infinite; transform-origin: 50% 85%; }
.mmp-mv-discover-star      { animation: mmp-char-discover 3.5s cubic-bezier(.4,.0,.3,1) infinite; }
.mmp-mv-be-crazy           { animation: mmp-char-crazy    5s   ease-in-out infinite; }
.mmp-mv-follow-magic-path  { animation: mmp-char-path     5s   ease-in-out infinite alternate; }

/* ----- Effects keyframes ----- */
@keyframes mmp-twinkle     { 0%,100% { opacity: .25; transform: scale(.8);} 50% { opacity: 1; transform: scale(1.15);} }
@keyframes mmp-float-up    { 0% { transform: translateY(20px) rotate(0); opacity: 0;} 30% { opacity: 1;} 100% { transform: translateY(-40px) rotate(20deg); opacity: 0;} }
@keyframes mmp-bubble-rise { 0% { transform: translateY(0) translateX(0); opacity: 0;} 15% { opacity: .85;} 100% { transform: translateY(-140%) translateX(20px); opacity: 0;} }
@keyframes mmp-confetti    { 0% { transform: translateY(0) rotate(0); opacity: 0;} 10% { opacity: 1;} 100% { transform: translateY(120vh) rotate(720deg); opacity: 1;} }
@keyframes mmp-cloud-drift { 0% { transform: translateX(0);} 100% { transform: translateX(150vw);} }
@keyframes mmp-glow-pulse  { 0%,100% { opacity: .4; transform: scale(.95);} 50% { opacity: .85; transform: scale(1.15);} }
@keyframes mmp-rainbow-arc { 0%,100% { transform: translateY(0) scaleX(1);} 50% { transform: translateY(-6px) scaleX(1.04);} }

/* Rainbow */
.mmp-rainbow {
  width: 75%; height: 35%;
  border-radius: 999px 999px 0 0;
  border-top: 12px solid #f87171;
  box-shadow:
    inset 0 14px 0 0 #fb923c,
    inset 0 28px 0 0 #fde047,
    inset 0 42px 0 0 #4ade80,
    inset 0 56px 0 0 #38bdf8,
    inset 0 70px 0 0 #a78bfa;
  animation: mmp-rainbow-arc 4s ease-in-out infinite;
  transform-origin: bottom center;
  opacity: .85;
}