/* ASCAI Design System - CSS Variables */
:root {
  --ascai-green: #007A5E;
  --ascai-red: #CE1126;
  --ascai-yellow: #FCD116;
}

/* Utility Classes */
.btn-primary {
  background-color: var(--ascai-green);
  color: white;
}

.btn-primary:hover {
  background-color: #005a45;
}

.btn-secondary {
  background-color: var(--ascai-red);
  color: white;
}

.btn-secondary:hover {
  background-color: #a00e1e;
}

/* Hero Section Styles */
.hero-section {
  background-image: url('https://images.unsplash.com/photo-1552832230-c0197dd311b5?auto=format&fit=crop&q=100&w=1920');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Fallback gradient if image fails to load */
  background-color: #007A5E;
}

/* Navbar Styles */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--ascai-green), var(--ascai-green));
  transition: all 0.3s ease;
}

.nav-link:hover::after {
  width: 60%;
  transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
  color: var(--ascai-green);
  background-color: rgba(0, 122, 94, 0.05);
}

.nav-link.active::after {
  width: 60%;
  transform: translateX(-50%) scaleX(1);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Navbar backdrop blur enhancement */
.site-navbar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Gallery Styles */
.gallery-image {
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.05);
}

/* Smooth image loading */
.gallery-image img {
  transition: opacity 0.3s ease;
}

.gallery-image img[loading="lazy"] {
  opacity: 0;
}

.gallery-image img[loading="lazy"].loaded {
  opacity: 1;
}

/* Video card hover effects */
.video-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-card:hover {
  transform: translateY(-8px);
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content {
  animation: modalFadeIn 0.3s ease-out;
}

/* Image grid masonry effect */
.gallery-grid {
  display: grid;
  gap: 1rem;
}

/* Loading skeleton for images */
.image-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}