@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #111827;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Font family utilities with Chinese support */
.font-inter {
  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.font-domine {
  font-family: var(--font-noto-serif-sc), var(--font-domine), Georgia, "Noto Serif", serif;
}

.font-jetbrains {
  font-family: var(--font-jetbrains), "Courier New", monospace;
}

/* Calculator card wiggle animation */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  35% { transform: rotate(4.5deg); }
  55% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2deg); }
  90% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}

.calculator-card-container {
  cursor: pointer;
}

.calculator-card-container:hover {
  animation: wiggle 2.5s ease-in-out infinite;
}

/* Menu animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-slide-down {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

@keyframes fadeOutFast {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

.animate-fade-out-fast {
  animation: fadeOutFast 0.3s ease-out forwards;
}

/* Shatter transition animation - 3D effect */
@keyframes shatter {
  0%, 20% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx), var(--ty), -200px)
               rotateX(var(--rx))
               rotateY(var(--ry))
               scale(var(--s));
    opacity: 0;
  }
}

.shatter-fragment {
  animation: shatter 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: var(--delay);
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.glass-shard {
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  /* 确保在动画开始时完全不透明 */
  background-color: rgba(255, 255, 255, 1) !important;
}

/* Fade out animation for background mask */
@keyframes fadeOut {
  0%, 30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

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