/**
 * Critical Inline CSS - Extracted from index.html
 * Contains styles that were previously inline in <style> tags
 * This improves maintainability and allows proper caching
 */

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

* {
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  .video-background,
  .video-overlay,
  .hero,
  .content-wrapper,
  section {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ensure feature items don't cause overflow */
  .feature-title h3 {
    font-size: 5rem;
  }

  /* Force navbar to top on mobile - override all other styles */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
  }
}

/* Alliance font - use local if installed, otherwise fallback is in font-family stack */

/* Page Transition Styles */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Initial Page Load Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply initial animations */
body {
  /* Black background at top to prevent white flash */
  background-image: linear-gradient(
    to bottom,
    #1a1a1a 0px,
    #1a1a1a 48px,
    transparent 48px
  );
}

.hero-content {
  opacity: 1;
  transform: translateY(0);
}

.navbar {
  /* Ensure smooth transition for position changes */
  transition: top 0.3s ease, background-color 0.3s ease;
}

/* Notification Bar Styles */
.notification-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 0.9rem 1.25rem;
  padding-bottom: 0.95rem;
  text-align: center;
  z-index: 1001;
  font-family: 'Alliance No 2', 'Alliance No. 2', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  transition: transform 0.3s ease;
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Hide notification bar on mobile */
@media (max-width: 767.98px) {
  .notification-bar {
    display: none;
  }

  .navbar {
    top: 1rem;
  }

  .hero {
    margin-top: 0;
  }
}

.notification-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1a1a1a;
  z-index: -1;
}

.notification-bar.hidden,
.notification-dismissed .notification-bar {
  transform: translateY(-100%);
  visibility: hidden;
  opacity: 0;
}

.notification-bar-content {
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-left: 8.75rem;
}

.notification-bar a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.notification-bar a:hover {
  opacity: 0.8;
}

.notification-bar .close-btn {
  position: absolute;
  right: 8.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.notification-bar .close-btn:hover {
  opacity: 1;
}

/* Default state - notification bar is visible */
.navbar {
  top: calc(2.9375rem + 1rem);
  will-change: auto;
  transition: top 0.3s ease;
}

.hero {
  margin-top: 2.9375rem;
  will-change: auto;
}

/* When notification is dismissed, adjust positions */
.notification-dismissed .navbar {
  top: 1rem;
}

.notification-dismissed .hero {
  margin-top: 0;
}

/* Carousel transition effects */
.carousel-slide {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Fallback styling for failed image loads */
.slide-image.image-error {
  position: relative;
}

.slide-image.image-error::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.3;
}

.carousel-slide .slide-link {
  display: block;
}

/* Fade animations for sections */
.platforms,
.recognition {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.platforms.visible,
.recognition.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Platform cards stagger animation */
.platform-card {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.platform-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.platform-card:nth-child(1) { transition-delay: 0.1s; }
.platform-card:nth-child(2) { transition-delay: 0.2s; }
.platform-card:nth-child(3) { transition-delay: 0.3s; }
.platform-card:nth-child(4) { transition-delay: 0.4s; }

/* Page exit animations */
body.page-exit {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* Critical CSS for image loading performance */
img {
  content-visibility: auto;
}

/* Ensure carousel images maintain aspect ratio */
.slide-image {
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
  transition: opacity 0.3s ease;
}

/* Loading state for images */
.slide-image:not(.image-loaded) {
  opacity: 0.8;
}

.slide-image.image-loaded {
  opacity: 1;
}

/* Prevent layout shift for hero image */
.video-background img {
  width: 100%;
  height: auto;
  display: block;
}