/* melody.css - My Melody compañera con inicio interactivo, caminata y contador */

.melody-companion {
  position: fixed;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 12px 24px rgba(255, 100, 130, 0.35));
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              top 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              left 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.2s ease;
  pointer-events: auto !important;
  will-change: transform, top, left;
}

/* Estado 1: En la pantalla de bienvenida (Grande, centrada y lista para presionar) */
.melody-companion.in-intro {
  width: 135px;
  height: 155px;
  animation: introPulseFloat 3s infinite ease-in-out;
}

@keyframes introPulseFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 14px 28px rgba(255, 82, 119, 0.45)); }
  50% { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 20px 36px rgba(255, 82, 119, 0.55)); }
}

/* Estado 2: Durante la lectura (Tamaño compañero al lado del texto) */
.melody-companion.in-reading {
  width: 86px;
  height: 104px;
}

.melody-companion.in-reading.mode-3d {
  width: 96px;
  height: 114px;
}

.melody-companion:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 16px 32px rgba(255, 90, 130, 0.5));
}

.melody-companion:active {
  transform: scale(0.94);
}

/* Animación de caminata al desplazarse entre párrafos */
.melody-companion.walking {
  animation: melodyWalkStep 0.26s infinite alternate ease-in-out;
}

@keyframes melodyWalkStep {
  0% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(0deg) translateY(-8px); }
  100% { transform: rotate(5deg) translateY(0); }
}

/* Salto de alegría al hacer clic */
.melody-companion.bouncing {
  animation: melodyJumpJoy 0.65s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes melodyJumpJoy {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(4px) scale(1.15, 0.85); }
  50% { transform: translateY(-28px) scale(0.9, 1.2) rotate(-8deg); }
  75% { transform: translateY(-4px) scale(1.05, 0.95) rotate(4deg); }
}

/* SVG Parts */
.melody-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Orejas bamboleantes */
.ear-left {
  transform-origin: 28px 40px;
  animation: earSwayLeft 3s infinite ease-in-out;
}

.ear-right {
  transform-origin: 62px 40px;
  animation: earSwayRight 3s infinite ease-in-out 0.4s;
}

@keyframes earSwayLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
}

@keyframes earSwayRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

/* Manita que saluda */
.arm-wave {
  transform-origin: 68px 80px;
  animation: waveArm 1.6s infinite ease-in-out;
}

@keyframes waveArm {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-35deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(-30deg); }
}

/* Ojos parpadeantes */
.melody-eye {
  transform-origin: center;
  animation: eyeBlink 3.8s infinite;
}

@keyframes eyeBlink {
  0%, 95%, 100% { transform: scaleY(1); }
  97.5% { transform: scaleY(0.1); }
}

/* Bocadillo de diálogo */
.melody-bubble {
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.9);
  background: #ffffff;
  color: #ff5277;
  padding: 8px 15px;
  border-radius: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(255, 90, 130, 0.25);
  border: 2px solid #ffd6df;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: none;
  z-index: 10000;
}

.melody-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.melody-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Partículas flotantes */
.floating-particle {
  position: fixed;
  pointer-events: none;
  font-size: 20px;
  font-weight: 700;
  z-index: 99999;
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: particleFloat 1.8s forwards cubic-bezier(0.12, 0.8, 0.25, 1);
  filter: drop-shadow(0 4px 10px rgba(255, 120, 150, 0.35));
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translateY(-15px) scale(1.2) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-95px) scale(0.95) rotate(-12deg);
  }
}

/* En móviles / pantallas angostas */
@media (max-width: 768px) {
  .melody-companion.in-reading {
    width: 72px;
    height: 88px;
  }
  .melody-companion.in-reading.mode-3d {
    width: 82px;
    height: 98px;
  }
  .melody-bubble {
    font-size: 12px;
    padding: 6px 12px;
  }
}