/* ═══════════════════════════════════════════════════════════
   Dexmarine — Scroll Animations
   ═══════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal Classes ──────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--delay, 0s);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* ─── Hero Title Split Animation ─────────────────────────── */
.hero-title-line1,
.hero-title-line2 {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: heroReveal 0.8s ease forwards;
}

.hero-title-line1 {
  animation-delay: 0.3s;
}

.hero-title-line2 {
  animation-delay: 0.6s;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Hero Subtitle and CTAs ─────────────────────────────── */
.hero-eyebrow,
.hero-sub,
.hero-ctas {
  opacity: 0;
  transform: translateY(30px);
  animation: heroReveal 0.6s ease forwards;
}

.hero-eyebrow { animation-delay: 0.9s; }
.hero-sub { animation-delay: 1.1s; }
.hero-ctas { animation-delay: 1.3s; }

/* ─── Scroll Hint ─────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ─── Trust Items Fade In ────────────────────────────────── */
.trust-item {
  opacity: 0;
  transform: translateY(10px);
  animation: heroReveal 0.5s ease forwards;
}

.trust-item:nth-child(1) { animation-delay: 1.5s; }
.trust-item:nth-child(2) { animation-delay: 1.6s; }
.trust-item:nth-child(3) { animation-delay: 1.7s; }
.trust-item:nth-child(4) { animation-delay: 1.8s; }

/* ─── Hero Particles ─────────────────────────────────────── */
@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
  }
}

@media (max-width: 768px) {
  .hero-title-line1,
  .hero-title-line2 {
    animation-duration: 0.6s;
  }
}