/* ============================================================
   animations.css — Keyframes + scroll-reveal classes
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.33%); }
}

@keyframes shimmer {
  0%  { opacity: 0; }
  50% { opacity: 1; }
  100%{ opacity: 0; }
}

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

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

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

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

@keyframes underlineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes heroScale {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* ── Hero entrance animations ────────────────────────────────── */
.animate-hero-title {
  animation: fadeInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}

.animate-hero-sub {
  animation: fadeInRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.5s;
}

.animate-hero-cta {
  animation: fadeInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.8s;
}

/* ── Scroll-reveal start states (CSS sets hidden, GSAP animates to visible) ── */
[data-anim="from-left"]        { opacity: 0; transform: translateX(-100px); }
[data-anim="from-right"]       { opacity: 0; transform: translateX(100px); }
[data-anim="from-left-rotate"] { opacity: 0; transform: translateX(-100px) rotate(-3deg); }
[data-anim="from-right-rotate"]{ opacity: 0; transform: translateX(100px) rotate(3deg); }
[data-anim="scale-bounce"]     { opacity: 0; transform: scale(0.8); }

/* ── Page transition ─────────────────────────────────────────── */
.page-enter {
  animation: fadeIn 0.4s ease both;
}

/* ── Decorative floating elements ────────────────────────────── */
.float-1 { animation: float 5s ease-in-out infinite; }
.float-2 { animation: float 5s ease-in-out infinite; animation-delay: 1.5s; }
.float-3 { animation: float 5s ease-in-out infinite; animation-delay: 3s; }

/* ── Reduced motion accessibility ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .animate-hero-title,
  .animate-hero-sub,
  .animate-hero-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
  .float-1, .float-2, .float-3 { animation: none; }
}

/* ── Live dot indicator ──────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Underline link ─────────────────────────────────────────── */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.link-underline:hover::after { width: 100%; }

/* ── Loading spinner ─────────────────────────────────────────── */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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