/* ============================================
   BarEasy Landing V2 — Animations
   ============================================ */

/* ---- Word-by-word reveal ---- */
.word-reveal {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: word-clip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.06s + 0.2s);
}

@keyframes word-clip {
  to { clip-path: inset(0 0 0 0); }
}

/* ---- Fade-in-up (IntersectionObserver driven) ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered children */
.reveal-stagger > .reveal {
  transition-delay: calc(var(--i, 0) * 0.08s);
}

/* ---- Scroll-driven section entrance (native) ---- */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  @keyframes scroll-fade-up {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ---- Glow pulse ---- */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.98); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

/* ---- Live dot pulse ---- */
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.5); }
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  animation: dot-pulse 2s ease-in-out infinite;
}

/* ---- Marquee ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Counter number bounce ---- */
@keyframes number-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.92); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---- Rotating border gradient ---- */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-border {
  to { --angle: 360deg; }
}

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

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .word-reveal {
    animation: none;
    clip-path: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .live-dot {
    animation: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}