/* ══════════════════════════════════════════
   ANIMATIONS — appended to styles.css
══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,255,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(0,0,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,255,0); }
}
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes barGrow {
  from { width: 0; }
}

/* ── Scroll-reveal base state ── */
.sr {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
}
.sr.sr-left  { transform: translateX(-40px); }
.sr.sr-right { transform: translateX(40px);  }
.sr.sr-scale { transform: scale(.88);        }
.sr.sr-pop   { transform: scale(.6);         }
.sr.visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger delays */
.sr-d1  { transition-delay: .05s; }
.sr-d2  { transition-delay: .12s; }
.sr-d3  { transition-delay: .20s; }
.sr-d4  { transition-delay: .28s; }
.sr-d5  { transition-delay: .36s; }
.sr-d6  { transition-delay: .44s; }

/* ── Navbar entrance ── */
.navbar-custom {
  animation: navSlideDown .6s cubic-bezier(.22,1,.36,1) both;
}

/* ── Hero gradient animation ── */
.hero-section,
.page-hero {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ── Code card float ── */
.code-card {
  animation: floatY 5s ease-in-out infinite;
}

/* ── CTA section shimmer button ── */
.cta-section button {
  position: relative;
  overflow: hidden;
}
.cta-section button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 70%);
  background-size: 200% 100%;
  animation: shimmer 2.4s infinite;
}

/* ── Feature card hover lift ── */
.feature-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* ── Feat icon bounce on card hover ── */
.feature-card:hover .feat-icon {
  animation: popIn .4s cubic-bezier(.22,1,.36,1) both;
}

/* ── Plan card hover lift ── */
.plan-mini, .pricing-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan-mini:hover, .pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,255,.13);
}

/* ── FAQ card hover ── */
.faq-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

/* ── Endpoint card hover ── */
.endpoint-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.endpoint-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* ── Core card hover ── */
.core-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.core-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* ── Step circle pulse ── */
.step-circle {
  animation: pulse-ring 2.5s ease-out infinite;
}

/* ── Button hover lift (hero + plan buttons) ── */
.btn-hero-filled,
.btn-hero-outline,
.btn-plan,
.btn-plan-filled,
.btn-signup {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-hero-filled:hover,
.btn-plan-filled:hover,
.btn-signup:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,255,.35);
  filter: brightness(1.08);
}
.btn-hero-outline:hover,
.btn-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,255,.18);
}

/* ── Nav link hover underline slide ── */
.nav-link-item {
  position: relative;
}
.nav-link-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;
  height: 2px;
  background: blue;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-link-item:hover::after,
.nav-link-item.active-page::after {
  transform: scaleX(1);
}

/* ── Footer link hover ── */
.footer-lnk {
  transition: color .18s ease, padding-left .18s ease;
}
.footer-lnk:hover {
  padding-left: 6px;
}

/* ── Lang selector / badge hover ── */
.badge-blue, .badge-green, .badge-yellow {
  transition: transform .18s ease;
}
.badge-blue:hover, .badge-green:hover, .badge-yellow:hover {
  transform: scale(1.08);
}

/* ── SDK tab active indicator ── */
.sdk-tab {
  transition: background .2s ease, color .2s ease, transform .18s ease;
}
.sdk-tab:hover { transform: translateY(-1px); }
.sdk-tab.active { transform: none; }

/* ── SDK step body slide open ── */
.sdk-step-body {
  overflow: hidden;
  animation: none;
}
.sdk-step.open .sdk-step-body {
  animation: fadeInDown .28s ease both;
}

/* ── About image hover ── */
.about-img {
  transition: transform .4s ease, box-shadow .4s ease;
}
.about-img:hover {
  transform: scale(1.02);
  box-shadow: 0 24px 56px rgba(0,0,0,.18);
}

/* ── Enterprise card shimmer border ── */
.enterprise-card {
  position: relative;
  overflow: hidden;
}
.enterprise-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 3px;
  background: linear-gradient(90deg, transparent, blue, transparent);
  animation: shimmer 3s infinite linear;
}

/* ── Current plan info pulse ── */
.current-plan-info {
  animation: pulse-ring 3s ease-out infinite;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .sr { opacity: 1; transform: none; }
}