/* ============================================
   PARALLAX EFFECTS
   ============================================ */

/* Parallax Container */
.parallax-container {
  position: relative;
  overflow: hidden;
}

/* Parallax Background Layer */
.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 120%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Hero Section with Parallax */
.hero-parallax {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-parallax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.85) 100%
  );
  z-index: 1;
}

body.light-mode .hero-parallax::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: var(--spacing-xl);
}

.hero-content h1,
.hero-content p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.light-mode .hero-content h1,
body.light-mode .hero-content p {
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
}

/* Subtle Scroll-Based Movement */
.parallax-slow {
  will-change: transform;
}

.parallax-medium {
  will-change: transform;
}

.parallax-fast {
  will-change: transform;
}

/* Background Gradient Overlay */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--bg-primary) 100%
  );
  pointer-events: none;
}

body.light-mode .gradient-overlay {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

/* Section Divider with Parallax */
.section-divider {
  position: relative;
  height: 300px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.section-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 10, 10, 0.6);
}

body.light-mode .section-divider::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Disable Parallax on Mobile */
@media (max-width: 768px) {
  .parallax-bg {
    position: relative;
    top: 0;
    height: 100%;
    transform: none !important;
  }

  .section-divider {
    background-attachment: scroll;
  }

  .hero-parallax {
    min-height: 80vh;
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg,
  .parallax-slow,
  .parallax-medium,
  .parallax-fast {
    transform: none !important;
    will-change: auto;
  }

  .section-divider {
    background-attachment: scroll;
  }
}