/* ============================================
   BESTAIMARKETINGTOOLS — Animation System
   Purposeful motion for better UX
   ============================================ */

/* -- Timing variables -- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-entrance: 600ms;
}

/* ── 1. SCROLL REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-entrance) var(--ease-out-quart),
              transform var(--dur-entrance) var(--ease-out-quart);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity var(--dur-entrance) var(--ease-out-quart),
              transform var(--dur-entrance) var(--ease-out-quart);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--dur-entrance) var(--ease-out-quart),
              transform var(--dur-entrance) var(--ease-out-quart);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ── 2. CARD HOVER EFFECTS ── */
.r-card,
.n-card,
.seo-card,
.post-card,
.cat-card {
  transition: transform var(--dur-normal) var(--ease-out-quart),
              box-shadow var(--dur-normal) var(--ease-out-quart),
              border-color var(--dur-normal) var(--ease-out-quart);
}
.r-card:hover,
.n-card:hover,
.seo-card:hover,
.post-card:hover,
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(193, 125, 31, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
  border-color: rgba(193, 125, 31, 0.35);
}

/* Score badge pulse on card hover */
.r-card:hover .r-score {
  animation: score-pop 0.3s var(--ease-out-quart);
}
@keyframes score-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Featured review glow */
.reviews-featured {
  transition: box-shadow var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-normal) var(--ease-out-quart);
}
.reviews-featured:hover {
  box-shadow: 0 8px 48px rgba(193, 125, 31, 0.18), 0 0 0 1px rgba(193, 125, 31, 0.2);
  transform: translateY(-2px);
}

/* ── 3. NAVIGATION ── */
.marky-nav,
.bamty-nav {
  transition: background var(--dur-normal) var(--ease-in-out),
              box-shadow var(--dur-normal) var(--ease-in-out);
}
.nav-scrolled {
  background: rgba(250, 248, 245, 0.95) !important;
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08);
}

.nav-link {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #C17D1F;
  border-radius: 1px;
  transition: width var(--dur-normal) var(--ease-out-quart),
              left var(--dur-normal) var(--ease-out-quart);
}
.nav-link:hover::after,
.nav-link.nav-active::after {
  width: 100%;
  left: 0;
}

/* Nav CTA button */
.nav-cta {
  transition: transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast);
  position: relative;
  overflow: hidden;
}
.nav-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(193, 125, 31, 0.35);
}
.nav-cta:active {
  transform: translateY(0) scale(0.98);
}

/* ── 4. BUTTONS & CTAs ── */
.btn-primary,
.seo-cta-btn,
.feat-cta,
.send-btn,
.prompt-btn,
[class*="cta"] a,
a[class*="cta"] {
  transition: transform var(--dur-fast) var(--ease-out-quart),
              box-shadow var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast),
              border-color var(--dur-fast);
}
.btn-primary:hover,
.seo-cta-btn:hover,
.feat-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(193, 125, 31, 0.3);
}
.btn-primary:active,
.seo-cta-btn:active,
.feat-cta:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(193, 125, 31, 0.2);
}

/* Prompt buttons shimmer */
.prompt-btn {
  position: relative;
  overflow: hidden;
}
.prompt-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(193, 125, 31, 0.08), transparent);
  transition: left 0.4s var(--ease-out-quart);
}
.prompt-btn:hover::before {
  left: 100%;
}

/* Send button rotate arrow on hover */
.send-btn:hover svg {
  transform: translateX(2px);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

/* ── 5. STATS COUNTER ANIMATION ── */
.stat-num,
.hero__proof-number,
.proof-num {
  transition: transform var(--dur-normal) var(--ease-out-quart);
}
.stat:hover .stat-num,
.hero__proof-stat:hover .hero__proof-number {
  transform: scale(1.08);
}

/* ── 6. CHAT WIDGET ── */
.chat-box {
  transition: box-shadow var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-quart);
}
.chat-box:hover {
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 48px rgba(193, 125, 31, 0.15);
}

/* Message bubble entrance */
.msg-bubble {
  animation: msg-in 0.5s var(--ease-out-quart) both;
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Chat input focus glow */
.chat-input {
  transition: border-color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.chat-input:focus {
  border-color: rgba(193, 125, 31, 0.5);
  box-shadow: 0 0 0 3px rgba(193, 125, 31, 0.1);
}

/* Online dot enhanced pulse */
.online-dot {
  animation: online-pulse 2s ease-in-out infinite;
}
@keyframes online-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* ── 7. SCORE SUMMARY BOX (on review pages) ── */
@keyframes score-ring {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
[style*="border-radius:50%"][style*="display:flex"][style*="align-items:center"][style*="justify-content:center"][style*="color:#fff"] {
  animation: score-ring 0.6s var(--ease-out-quart) 0.2s both;
}

/* ── 8. TABLE OF CONTENTS ── */
.bamty-toc {
  transition: box-shadow var(--dur-normal) var(--ease-out-quart);
}
.bamty-toc:hover {
  box-shadow: 0 4px 24px rgba(193, 125, 31, 0.08);
}
.bamty-toc a {
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out-quart) !important;
}
.bamty-toc a:hover {
  color: #C17D1F !important;
  padding-left: 4px;
}

/* ── 9. SMOOTH SCROLL ── */
html {
  scroll-behavior: smooth;
}

/* ── 10. SCROLL PROGRESS BAR ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #C17D1F, #E8A845);
  z-index: 9999;
  transition: width 50ms linear;
  border-radius: 0 2px 2px 0;
}

/* ── 11. LINK HOVER EFFECTS ── */
.r-cta,
.sec-link,
.footer-col a,
a[style*="color:#C17D1F"] {
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out-quart) !important;
}
.r-cta:hover,
.sec-link:hover {
  transform: translateX(3px);
}

/* ── 12. IMAGE/THUMBNAIL HOVER ── */
.post-card__thumb,
.auto-thumb {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.post-card__thumb img,
.auto-thumb {
  transition: transform var(--dur-slow) var(--ease-out-quart);
}
.post-card:hover .post-card__thumb img,
.post-card:hover .auto-thumb {
  transform: scale(1.04);
}

/* ── 13. FOOTER LINKS ── */
.footer-col a,
.marky-footer a {
  transition: color var(--dur-fast), transform var(--dur-fast) !important;
}
.footer-col a:hover,
.marky-footer a:hover {
  transform: translateX(2px);
}

/* ── 14. HERO GRADIENT TEXT SHIMMER ── */
@keyframes grad-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad {
  background-size: 200% auto;
  animation: grad-shimmer 4s ease-in-out infinite;
}

/* ── 15. TAG/BADGE EFFECTS ── */
.n-tag,
.feat-badge,
.r-cat,
.post-card__category {
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast);
}
.r-card:hover .r-cat,
.n-card:hover .n-tag {
  transform: translateY(-1px);
}

/* ── 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;
  }
  .reveal, .reveal-left, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-progress { display: none; }
}

/* ── MOBILE ADJUSTMENTS ── */
@media (max-width: 768px) {
  .r-card:hover,
  .n-card:hover,
  .seo-card:hover {
    transform: none;
    box-shadow: none;
  }
  .reveal { transform: translateY(16px); }
}