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

:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(232, 184, 75, 0.16), transparent 30%),
    linear-gradient(180deg, #0a0a0a 0%, #111111 48%, #0a0a0a 100%);
  color: white;
}

* {
  box-sizing: border-box;
}

.announcement-track {
  display: flex;
  width: max-content;
  gap: 4rem;
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(232,184,75,0.12) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 2.2s linear infinite;
}

.scan-line {
  position: absolute;
  left: 50%;
  width: 56%;
  height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.95), transparent);
  box-shadow: 0 0 24px rgba(232, 184, 75, 0.75);
  animation: scanVertical 2.2s ease-in-out infinite;
}

.scan-pulse {
  animation: scanPulse 1.6s ease-in-out infinite;
}

@keyframes scanVertical {
  0% {
    top: 16%;
    opacity: 0.15;
  }
  50% {
    top: 78%;
    opacity: 1;
  }
  100% {
    top: 16%;
    opacity: 0.15;
  }
}

@keyframes scanPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(232, 184, 75, 0.15);
    opacity: 0.72;
  }
  50% {
    box-shadow: 0 0 28px rgba(232, 184, 75, 0.3);
    opacity: 1;
  }
}