/* ============================================
   TEAPEAK — Animations & Scroll Reveal
   ============================================ */

/* ---- Scroll reveal base ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero parallax (progressive enhancement) ---- */
@supports (animation-timeline: scroll()) {
  .hero__bg {
    animation: parallaxBg linear;
    animation-timeline: scroll();
    animation-range: 0vh 100vh;
  }

  @keyframes parallaxBg {
    from { transform: translateY(0); }
    to   { transform: translateY(15%); }
  }
}

/* ---- Hero content entrance ---- */
.hero__content {
  animation: heroIn 1s var(--ease-out) 0.2s both;
}

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

.hero__eyebrow {
  animation: heroIn 1s var(--ease-out) 0.3s both;
}

.hero__ctas {
  animation: heroIn 1s var(--ease-out) 0.6s both;
}

/* ---- Card hover micro-interaction ---- */
.card {
  will-change: transform;
}

/* ---- Navbar transition ---- */
.navbar {
  will-change: background, padding;
}

/* ---- Button press effect ---- */
.btn:active {
  transform: translateY(0) scale(0.97);
}

/* ---- Focus ring animation ---- */
:focus-visible {
  transition: outline-offset 0.15s ease;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__content,
  .hero__eyebrow,
  .hero__ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }
}