/* Анімації (специфікація в docs/08) — тільки transform/opacity */

/* Натиснута клавіша: кольоровий шар (::before) + легке просідання */
.key {
  transition: transform 0.12s var(--spring);
}
.key::before {
  transition: opacity 0.12s ease-out;
}
.key.pressed {
  transform: scale(0.985) translateY(2px);
}
.key.pressed::before {
  opacity: 0.55;
  transition-duration: 0.04s;
}
.key.black.pressed::before {
  opacity: 0.7;
}

/* Ціль у режимі «граю сам»: пульс кольору ноти + промінь угору */
.key.guide::before {
  animation: guide-pulse 1s ease-in-out infinite;
}
.key.guide::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: -40px;
  height: 40px;
  border-radius: var(--r-pill) var(--r-pill) 0 0;
  background: linear-gradient(to top, var(--note-color, var(--key-glow)), transparent);
  opacity: 0.7;
  pointer-events: none;
}

@keyframes guide-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.65;
  }
}

/* Кнопка ▶ під час завантаження: кільце крутиться */
#start-btn.loading {
  pointer-events: none;
}
#start-btn.loading .ring {
  animation: spin-ring 1s linear infinite;
}

@keyframes spin-ring {
  to {
    transform: rotate(360deg);
  }
}

/* Дінь */
.mascot .din {
  transform-origin: 50% 100%;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.02) scaleX(1.01);
  }
}

.mascot.bounce .din {
  animation: bounce 0.4s var(--spring);
}

@keyframes bounce {
  0% {
    transform: scaleY(0.88) scaleX(1.07);
  }
  45% {
    transform: translateY(-20%) scaleY(1.06);
  }
  100% {
    transform: none;
  }
}

.mascot.spin .din {
  animation: spin 0.8s var(--spring);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mascot.lean-l .din {
  transform: rotate(-6deg);
  transition: transform 0.18s var(--spring);
}
.mascot.lean-r .din {
  transform: rotate(6deg);
  transition: transform 0.18s var(--spring);
}

/* «граю сам»: нахил у бік цілі (--look-x від −1 до 1, mascot.look) */
.mascot.listen .din {
  transform: rotate(calc(var(--look-x, -0.6) * 7deg));
  transition: transform 0.3s ease;
}
.mascot.sleep .din {
  animation: sleep-sway 4s ease-in-out infinite;
}

@keyframes sleep-sway {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(4px) rotate(-2deg);
  }
}

.din .din-sprout {
  transition: transform 0.25s var(--spring);
}
.din .din-sprout.flash {
  transform: rotate(-10deg) scale(1.12);
}

/* Листочок-вказівник */
#guide-leaf {
  animation: leaf-hop 0.7s ease-in-out infinite;
}

@keyframes leaf-hop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Хмари: рух лише transform (не left) */
.cloud.c1 {
  animation: drift 110s linear infinite;
}
.cloud.c2 {
  animation: drift 160s linear infinite;
  animation-delay: -70s;
}

@keyframes drift {
  from {
    transform: translateX(-30vw);
  }
  to {
    transform: translateX(110vw);
  }
}

/* Світлячки у нічному режимі */
.firefly {
  animation: firefly 3.2s ease-in-out infinite;
}
.firefly:nth-child(2) {
  animation-delay: -0.7s;
}
.firefly:nth-child(3) {
  animation-delay: -1.4s;
  animation-duration: 4s;
}
.firefly:nth-child(4) {
  animation-delay: -2.1s;
}
.firefly:nth-child(5) {
  animation-delay: -2.8s;
  animation-duration: 3.6s;
}
.firefly:nth-child(6) {
  animation-delay: -1s;
}

@keyframes firefly {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
}

/* Частинки: сплеск від клавіші */
.particle.fly {
  animation: particle-fly 0.62s ease-out forwards;
}

@keyframes particle-fly {
  from {
    transform: translate(0, 0) scale(0.6);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--rot));
    opacity: 0;
  }
}

/* Частинки: святковий дощ */
.particle.fall {
  animation: particle-fall var(--dur, 2s) ease-in forwards;
}

@keyframes particle-fall {
  from {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), 105vh) rotate(var(--rot));
    opacity: 0.4;
  }
}

/* Частинки: «z» уві сні — повільно вгору */
.particle.drift-up {
  animation: particle-drift 2.4s ease-out forwards;
}

@keyframes particle-drift {
  from {
    transform: translate(0, 0) scale(0.7);
    opacity: 0.9;
  }
  to {
    transform: translate(var(--dx), -70px) scale(1.3);
    opacity: 0;
  }
}

/* Оверлеї та плашки: поява і плавне закриття (ui.hideAnimated → .closing) */
.overlay,
#nowplaying,
#learn-hud,
#strip {
  animation: rise-in 0.28s var(--spring);
}

@keyframes rise-in {
  from {
    transform: translateY(8%);
    opacity: 0;
  }
}
#nowplaying,
#learn-hud {
  animation-name: pop-in;
}

@keyframes pop-in {
  from {
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}
.closing {
  animation: fade-out 0.22s ease-in forwards !important;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* Індикатор гучності */
#vol-ind {
  animation: vol-pop 1.4s ease-out forwards;
}

@keyframes vol-pop {
  0% {
    transform: translateX(-50%) scale(0.6);
    opacity: 0;
  }
  12% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0;
  }
}

/* Менше руху: лишаються лише зміни прозорості */
@media (prefers-reduced-motion: reduce) {
  .cloud,
  .mascot .din,
  .mascot.bounce .din,
  .mascot.spin .din,
  .mascot.sleep .din,
  #guide-leaf,
  #rotate-hint .arr,
  .firefly {
    animation: none;
  }
  .key,
  .btn,
  .card,
  .song-card,
  .mascot.listen .din,
  .mascot.lean-l .din,
  .mascot.lean-r .din {
    transition: none;
    transform: none;
  }
  .key.pressed {
    transform: none;
  }
  .key.guide::before {
    animation: none;
    opacity: 0.55;
  }
  .overlay,
  #nowplaying,
  #learn-hud,
  #strip {
    animation-name: fade-in;
  }
  .particle {
    display: none;
  }
  #vol-ind {
    animation-name: vol-fade;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes vol-fade {
  0% {
    opacity: 0;
  }
  12%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}