/* Subtle text fade */
.fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp .6s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #slides { transition: none !important; }
  .fade-up { animation: none; opacity: 1; transform: none; }
}

/* Ensure text inside slides wraps normally (override track's nowrap) */
#slides section { white-space: normal; }

/* Improve word wrapping and hyphenation for long words on small screens */
h1, h2, h3, h4, h5, h6, p { overflow-wrap: anywhere; hyphens: auto; }

/* Keep onboarding controls visible above slides and inside safe areas */
.onboarding-controls {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); /* ~bottom-4 plus safe area */
  z-index: 10; /* above slide content */
}

.tab-btn { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.tab-active { animation: tabGlow 1.8s ease-in-out infinite alternate; }
@keyframes tabGlow { from { box-shadow: 0 0 0 rgba(0,0,0,0); } to { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); } }

/* Hide scrollbar for horizontal tab list while keeping scrollability */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* One Dream Initiative Specific Styles */
.onedream-hero-gradient {
  background: linear-gradient(135deg, #004AAD 0%, #0066cc 100%);
}

.onedream-progress-fill {
  width: 0%; /* Start at 0% for dynamic animation */
  background: linear-gradient(90deg, #004AAD, #0066cc);
  position: relative;
  overflow: hidden;
  transition: width 2s ease-out;
}

.onedream-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: onedreamShine 2s infinite;
}

@keyframes onedreamShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.onedream-hero-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
  opacity: 0.3;
}

/* Mobile-First Responsive Design for One Dream Initiative */
@media (max-width: 640px) {
  /* Container adjustments */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Interactive section responsive adjustments */
  #interactive-section {
    padding: 3rem 1rem !important;
  }
  
  /* Mobile-friendly button adjustments */
  button {
    min-height: 44px; /* Touch target size */
    font-size: 0.9rem;
  }
  
  /* Card spacing adjustments */
  .space-y-4 > * + * {
    margin-top: 0.75rem !important;
  }
  
  /* Leaderboard participant cards */
  .participant-card {
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
  }
  
  /* Avatar sizing for mobile */
  .avatar-mobile {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Stage badge adjustments */
  .stage-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Progress bar mobile adjustments */
  .progress-section {
    padding: 1rem !important;
  }
  
  /* Text scaling for readability */
  .text-responsive {
    line-height: 1.4 !important;
  }
  
  /* Content-aware tab styling for mobile devices */
  .tab-btn {
    height: 32px !important; /* Reduced height for better mobile experience */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    font-size: 0.875rem !important; /* Consistent text size */
    min-width: fit-content !important; /* Auto-size based on content */
    padding-left: 0.75rem !important; /* Consistent left margin */
    padding-right: 0.75rem !important; /* Consistent right margin */
    margin: 0 !important; /* Reset any default margins */
  }
  
  /* Tab container adjustments - focus on consistent spacing */
  #tabsRow {
    gap: 0.5rem !important; /* Consistent space between tabs */
    padding: 0.5rem 0.25rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra small devices */
  #interactive-section {
    padding: 2rem 0.75rem !important;
  }
  
  /* Content-aware tab styling for very small screens */
  .tab-btn {
    height: 30px !important; /* Reduced height for small screens */
    font-size: 0.8rem !important; /* Readable text size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    min-width: fit-content !important; /* Auto-size based on content */
    padding-left: 0.6rem !important; /* Consistent left margin for small screens */
    padding-right: 0.6rem !important; /* Consistent right margin for small screens */
    margin: 0 !important; /* Reset any default margins */
  }
  
  /* Consistent spacing for very small screens */
  #tabsRow {
    gap: 0.375rem !important; /* Slightly tighter spacing */
  }
  
  /* Smaller buttons on very small screens */
  button:not(.tab-btn) {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem;
  }
  
  /* Compact participant cards */
  .participant-card {
    padding: 0.5rem !important;
  }
  
  /* Smaller avatars */
  .avatar-mobile {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 0.75rem !important;
  }
}

/* Tablet and larger responsive adjustments */
@media (min-width: 768px) {
  .grid-responsive {
    gap: 1rem !important;
  }
  
  /* Better spacing for larger screens */
  .participant-card {
    padding: 1rem !important;
  }
}

/* Ensure touch targets are accessible */
@media (hover: none) and (pointer: coarse) {
  button, 
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .border-gray-200 {
    border-color: #000 !important;
  }
  
  .text-gray-600 {
    color: #000 !important;
  }
  
  .bg-gradient-to-r {
    background: #000 !important;
    color: #fff !important;
  }
}

/* Cross-Browser Compatibility & Engine-Specific Optimizations */

/* Webkit-based browsers (Safari, iOS Safari, Chrome, Edge, Opera, Brave, Vivaldi) */
@supports (-webkit-appearance: none) {
  button {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* iOS Safari specific optimizations */
  @supports (-webkit-touch-callout: none) {
    .onedream-progress-fill {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    
    /* Fix iOS viewport zoom issues */
    input, select, textarea {
      font-size: 16px !important;
    }
  }
}

/* Firefox (Gecko engine) optimizations */
@-moz-document url-prefix() {
  .onedream-progress-fill {
    -moz-transition: width 2s ease-out;
    transition: width 2s ease-out;
  }
  
  button {
    -moz-appearance: none;
    appearance: none;
  }
}

/* Microsoft Edge Legacy (EdgeHTML) fallbacks */
@supports (-ms-ime-align: auto) {
  .onedream-progress-fill {
    -ms-transition: width 2s ease-out;
    transition: width 2s ease-out;
  }
}

/* Internet Explorer fallbacks (for legacy support) */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .onedream-progress-fill {
    background: #FFD700; /* Solid fallback */
  }
  
  .grid {
    display: block; /* IE doesn't support CSS Grid */
  }
  
  .grid > * {
    margin-bottom: 1rem;
  }
}

/* Opera specific optimizations */
@supports (-o-appearance: none) {
  button {
    -o-appearance: none;
    appearance: none;
  }
}

/* Browser-specific performance optimizations */

/* Chrome/Blink optimizations */
@supports (transform-style: preserve-3d) {
  .participant-card {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* Safari-specific smooth scrolling */
@supports (-webkit-overflow-scrolling: touch) {
  .scrollable {
    -webkit-overflow-scrolling: touch;
  }
}

/* Privacy browsers (Tor, Brave, etc.) - Reduce animations for performance */
@media (prefers-reduced-motion: reduce) {
  .onedream-progress-fill,
  .participant-card,
  button {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile browsers (UC Browser, Samsung Internet, etc.) */
@media (pointer: coarse) {
  /* Larger touch targets for mobile browsers */
  button, .clickable {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
  }
  
  /* Optimize for data-saving browsers */
  .bg-gradient-to-r {
    background: #FFD700; /* Fallback for limited CSS support */
  }
}

/* Text-based browsers fallback */
@media (max-width: 1px) {
  /* This targets text browsers like Lynx */
  .onedream-progress-fill::after,
  .onedream-hero-pattern::before {
    display: none;
  }
  
  button {
    border: 2px solid #000;
    background: #fff;
    color: #000;
  }
}