shakethefrog/app/globals.css

@import "tailwindcss";

/* Override the dark variant to use class-based dark mode instead of media query */
@custom-variant dark (&:where(.dark, .dark *));

html, body {
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Light mode styles */
body {
  background-color: rgb(240, 253, 244);
  color: rgb(15, 23, 42);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles */
:is(.dark body) {
  background-color: rgb(15, 23, 42);
  color: rgb(248, 250, 252);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-5deg); }
  75% { transform: translateX(5px) rotate(5deg); }
}

.animate-shake {
  animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both 4;
}

@keyframes float-heart {
  to {
    transform: translate(
      calc(var(--start-x) + (70vw * cos(var(--angle)))),
      calc(var(--start-y) + (70vh * sin(var(--angle))))
    ) scale(var(--scale));
    opacity: 0;
  }
}

.animate-float-heart {
  animation: float-heart calc(2s * var(--speed)) ease-out forwards;
}

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

.animate-fade-out {
  animation: fade-out 2s ease-out forwards;
}

@keyframes float {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-out forwards;
}