/* === Hero Background Fade In === */
@keyframes heroImageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === Hero Breathing Glow === */
@keyframes breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.08;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.15;
  }
}

.hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-teal) 0%, transparent 70%);
  animation: breathe var(--duration-breath) var(--ease-in-out) infinite;
  pointer-events: none;
}

/* === Hero Fade In === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content {
  animation: fadeIn var(--duration-slow) var(--ease-out) both;
}

.hero__tagline {
  animation: fadeIn var(--duration-slow) var(--ease-out) 200ms both;
}

.hero__cta {
  animation: fadeIn var(--duration-slow) var(--ease-out) 400ms both;
}

/* === Scroll Reveal === */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

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

/* Staggered children */
.reveal-stagger > .reveal {
  transition-delay: calc(var(--reveal-index, 0) * 100ms);
}

/* === Scroll Indicator === */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1;
  animation: scrollPulse 3s var(--ease-in-out) infinite;
}

.scroll-indicator__line {
  width: 1px;
  height: 24px;
  background: var(--color-text-light);
  margin: 0 auto var(--space-2);
}

.scroll-indicator__text {
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* === Hover Effects === */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-out);
}

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

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  .section--hero::before,
  .hero__glow,
  .scroll-indicator {
    animation: none;
    opacity: 1;
  }
  .hero__content,
  .hero__tagline,
  .hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}