/* ---------------------------------------------------------------
   Keyframes — replacing the motion/react animations
   --------------------------------------------------------------- */

@keyframes float-up {
  0% {
    transform: translateY(110vh);
    opacity: 0;
  }
  10% {
    opacity: var(--opacity);
  }
  85% {
    opacity: var(--opacity);
  }
  100% {
    transform: translateY(-15vh);
    opacity: 0;
  }
}

@keyframes beat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

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

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

/* A restrained double-beat with a long rest between — the glass heart should
   feel alive, not bouncy. */
@keyframes cursor-beat {
  0%,
  60%,
  100% {
    transform: scale(1);
  }
  68% {
    transform: scale(1.1);
  }
  76% {
    transform: scale(0.985);
  }
  84% {
    transform: scale(1.05);
  }
  92% {
    transform: scale(0.995);
  }
}

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

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

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Polaroids keep their pinned-on angle, so the entrance has to carry it too. */
@keyframes pop-in-rotated {
  from {
    opacity: 0;
    transform: rotate(var(--rot)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: rotate(var(--rot)) scale(1);
  }
}

@keyframes polaroid-in {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
  }
}

/* Page (stage) transitions — mirrors the AnimatePresence variants */
@keyframes page-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes page-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.06);
  }
}

.page.is-entering {
  animation: page-in 0.5s var(--ease-out-expo) both;
}

.page.is-leaving {
  animation: page-out 0.5s var(--ease-out-expo) both;
}

/* Notebook card entrance (initial y:24, opacity 0) */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notebook {
  animation: card-in 0.6s ease-out backwards;
}

/* Lock */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-12px);
  }
  40% {
    transform: translateX(12px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
}

@keyframes shake-sm {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

@keyframes book-open {
  from {
    transform: rotateY(0) translateX(0);
    opacity: 1;
  }
  to {
    transform: rotateY(-120deg) translateX(-60px);
    opacity: 0;
  }
}

@keyframes padlock-swing {
  0%,
  63%,
  100% {
    transform: translate(30%, -28%) rotate(0deg);
  }
  67% {
    transform: translate(30%, -28%) rotate(-6deg);
  }
  72% {
    transform: translate(30%, -28%) rotate(6deg);
  }
  78% {
    transform: translate(30%, -28%) rotate(-4deg);
  }
  84% {
    transform: translate(30%, -28%) rotate(4deg);
  }
  90% {
    transform: translate(30%, -28%) rotate(-2deg);
  }
  95% {
    transform: translate(30%, -28%) rotate(2deg);
  }
}

@keyframes padlock-swing-fast {
  0%,
  100% {
    transform: translate(30%, -28%) rotate(0deg);
  }
  15% {
    transform: translate(30%, -28%) rotate(-14deg);
  }
  30% {
    transform: translate(30%, -28%) rotate(14deg);
  }
  45% {
    transform: translate(30%, -28%) rotate(-10deg);
  }
  60% {
    transform: translate(30%, -28%) rotate(10deg);
  }
  75% {
    transform: translate(30%, -28%) rotate(-6deg);
  }
  88% {
    transform: translate(30%, -28%) rotate(6deg);
  }
}

@keyframes padlock-drop {
  from {
    transform: translate(30%, -28%) rotate(0deg);
  }
  to {
    transform: translate(30%, -28%) rotate(-20deg);
  }
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.55);
    opacity: 0;
  }
}

@keyframes keypad-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes keypad-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

/* Music player — liquid morphing border radius */
@keyframes liquid-panel {
  0%,
  100% {
    border-radius: 28px 28px 28px 28px / 28px 28px 28px 28px;
  }
  25% {
    border-radius: 34px 22px 30px 24px / 24px 32px 20px 34px;
  }
  50% {
    border-radius: 22px 34px 24px 30px / 30px 20px 36px 22px;
  }
  75% {
    border-radius: 30px 26px 22px 34px / 22px 34px 28px 24px;
  }
}

@keyframes liquid-mini {
  0%,
  100% {
    border-radius: 18px 18px 18px 18px / 18px 18px 18px 18px;
  }
  33% {
    border-radius: 22px 14px 20px 16px / 16px 22px 12px 24px;
  }
  66% {
    border-radius: 14px 22px 16px 20px / 20px 12px 24px 14px;
  }
}

@keyframes eq-bounce {
  0%,
  100% {
    height: 3px;
  }
  50% {
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-heart,
  .beat,
  .beat--wobble,
  .yes__badge,
  .lock__heart,
  .lock__padlock,
  .lock__pulse,
  .eq.is-active span,
  .music__mini,
  .music__panel,
  .glass-heart {
    animation: none !important;
  }
}