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

body {
  @apply font-mono text-gray-100 p-8 transition-colors duration-700;
  background: linear-gradient(270deg, #1e1b2c, #554379, #7c54a5);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}

/* background gradient */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* header */
header {
  @apply text-center mb-12 relative z-10;
}

header h1 {
  @apply font-extrabold;
  font-size: 4rem;
  background: linear-gradient(to right, #ff6ec7, #c08fff, #7f5af0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGlow 3s ease-in-out infinite alternate;
}

header p {
  @apply text-gray-200 text-lg opacity-90;
}

/* sections */
section {
  @apply relative z-10 max-w-3xl mx-auto mb-12 transition-all duration-700 ease-out;
}

section.opacity-0 { @apply opacity-0 translate-y-6; }
section.opacity-100 { @apply opacity-100 translate-y-0; }

section h2 {
  @apply text-3xl font-semibold mb-4 pb-2 text-center;
  border-bottom: 2px solid #c08fff;
  animation: textGlow 3s ease-in-out infinite alternate;
}

section p {
  @apply text-gray-200 leading-relaxed;
}

ul li {
  @apply p-4 rounded-xl transform transition-all duration-500 ease-in-out;
  z-index: 1;
  background: linear-gradient(135deg, rgba(192,143,255,0.1), rgba(255,110,199,0.1));
}

ul li:hover {
  @apply scale-105;
}

ul li a {
  @apply inline-block mt-1 underline font-semibold;
  color: #ff6ec7;
  text-shadow: 0 0 4px #ff6ec7, 0 0 8px #c08fff, 0 0 12px #7f5af0;
  transition: all 0.3s ease-in-out;
}

ul li a:hover {
  color: #ff8bff;
  text-shadow: 0 0 8px #ff8bff, 0 0 16px #c08fff, 0 0 24px #7f5af0;
  @apply animate-pulse;
}


@keyframes textGlow {
  0% { text-shadow: 0 0 3px #ff98ff, 0 0 6px #c08fff, 0 0 12px #7f5af0; }
  100% { text-shadow: 0 0 5px #ff98ff, 0 0 10px #c08fff, 0 0 20px #7f5af0; }
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.164) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: sparkleMove 30s linear infinite;
  z-index: 0;
}

@keyframes sparkleMove {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

.uwuface-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.uwuface-face {
  position: absolute;
  top: -10%;
  color: #ff9fd6;
  font-family: monospace;
  font-size: 2rem;
  opacity: 0.3;
  animation: fall linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 182, 230, 0.5));
  transform: rotate(var(--rot));
}

@keyframes fall {
  from {
    transform: translateY(-10vh) rotate(var(--rot));
  }
  to {
    transform: translateY(110vh) rotate(var(--rot));
  }
}

/* Basket */
.basket {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem; /* bigger emoji */
  z-index: 1000;
  text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff1493;
  pointer-events: none;
}

.counter {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  font-weight: bold;
  color: #ff69b4;
  text-shadow: 0 0 10px #ff69b4, 0 0 20px #ff1493;
  z-index: 1000;
}