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

/* ===== Global Overflow Prevention ===== */
html, body {
  overflow-x: hidden;
}

/* ===== Design Tokens ===== */
:root {
  --color-bg: #151b23;
  --color-surface: #1c2330;
  --color-primary: #238636;
  --color-text-primary: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-border: #30363d;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --navbar-height: 64px;
  --max-content-width: 1280px;
  --reveal-duration: 600ms;
  --reveal-distance: 20px;
}

/* ===== Focus Visible Styles (Keyboard Navigation) ===== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Keyframe Animations ===== */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ===== Float Animation Utility ===== */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* ===== Scroll Reveal Utilities ===== */

/* When JS adds .reveal-init to body, hide .reveal elements until observed */
.reveal-init .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 20px));
}

/* Revealed state: visible and in place */
.reveal-init .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--reveal-duration, 600ms) ease var(--reveal-delay, 0ms),
              transform var(--reveal-duration, 600ms) ease var(--reveal-delay, 0ms);
}

/* ===== Feature Card Hover (pointer devices only) ===== */
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    box-shadow: 0 4px 20px rgba(35, 134, 54, 0.3);
    transform: translateY(-2px);
  }
}

/* ===== Carousel Scrollbar Hide ===== */
#carousel-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#carousel-container::-webkit-scrollbar {
  display: none;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ===== Construction Mode Progress Bar Animation ===== */
@keyframes pulse-bar {
  0% { width: 20%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 20%; margin-left: 80%; }
}

.animate-pulse-bar {
  animation: pulse-bar 2s ease-in-out infinite;
}