/* Custom styles for FundedYouth.org */

/* Tailwind base configuration via CDN - custom additions below */

:root {
  --primary-orange: #f97316;
  --primary-blue: #3b82f6;
  --dark-navy: #1e293b;
  --accent-yellow: #fbbf24;
}

/* Custom font imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

/* Hero section with animated text */
.hero-gradient {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

/* Typing animation for hero */
.typing-text {
  display: inline-block;
  overflow: hidden;
  border-right: 3px solid var(--accent-yellow);
  white-space: nowrap;
  animation: typing 3s steps(40, end) infinite, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  0%, 100% { width: 0; }
  50%, 90% { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent-yellow); }
}

/* Sponsor carousel */
.sponsor-track {
  display: flex;
  animation: scroll 20s linear infinite;
}

.sponsor-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card hover effects - shadcn inspired */
.card-hover {
  transition: all 0.2s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}

/* Button styles - shadcn inspired */
.btn-primary {
  @apply bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 inline-flex items-center gap-2;
}

.btn-secondary {
  @apply bg-white hover:bg-gray-50 text-gray-900 font-medium py-2 px-4 rounded-lg border border-gray-200 transition-all duration-200;
}

/* Navigation active state */
.nav-link {
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-blue);
}

/* Info card blue header */
.info-card-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* Hide scrollbar for sponsor carousel */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Social icon hover effects */
.social-icon {
  transition: transform 0.2s ease-in-out;
}

.social-icon:hover {
  transform: scale(1.1);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Star icon for volunteer benefits */
.star-icon {
  color: #f97316;
}

/* Game card gradient */
.game-card-bg {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

/* Live feed placeholder */
.live-feed-overlay {
  background: rgba(0, 0, 0, 0.7);
}