/* ==========================================================================
   Animations — Scroll Reveals, Parallax, Keyframes
   ========================================================================== */

/* --- Scroll Reveal Base --- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger delays via data attributes — handled by JS setting transition-delay */
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
.reveal[data-delay="500"] { transition-delay: 500ms; }
.reveal[data-delay="600"] { transition-delay: 600ms; }
.reveal[data-delay="700"] { transition-delay: 700ms; }
.reveal[data-delay="800"] { transition-delay: 800ms; }

/* Directional variants */
.reveal--left {
  transform: translateX(-30px);
}
.reveal--left.reveal--visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}
.reveal--right.reveal--visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}
.reveal--scale.reveal--visible {
  transform: scale(1);
}

/* --- Keyframes --- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(85, 200, 232, 0.2); }
  50% { box-shadow: 0 0 40px rgba(85, 200, 232, 0.4); }
}

/* --- Hero Content Section — scroll-triggered fade-in ---
   Text section lives BELOW the video. Fades in via IntersectionObserver. */

.hero-content-section__label,
.hero-content-section__title,
.hero-content-section__subtitle,
.hero-content-section__badge-rows,
.hero-content-section__actions {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

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

.hero-content-section.visible .hero-content-section__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.hero-content-section.visible .hero-content-section__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.hero-content-section.visible .hero-content-section__badge-rows {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.hero-content-section.visible .hero-content-section__actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* --- Button Idle Pulse (for download CTA) --- */

.btn--pulse {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* --- Parallax Layer (for JS transform) --- */

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

/* --- Hero Video Controls Icons --- */

.hero-video-btn .icon-unmuted,
.hero-video-btn .icon-paused {
  display: none;
}

.hero-video-btn .icon-muted,
.hero-video-btn .icon-playing {
  display: block;
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-content-section__label,
  .hero-content-section__title,
  .hero-content-section__subtitle,
  .hero-content-section__badge-rows,
  .hero-content-section__actions {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn--pulse {
    animation: none;
  }
  .parallax-bg {
    display: none;
  }
}