/* ==========================================
   StrainCorr — Animations & Transitions
   ========================================== */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Fade In Up (staggered for grids) ── */
.stagger-grid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-grid.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-grid.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.stagger-grid.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.19s; }
.stagger-grid.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.26s; }
.stagger-grid.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.33s; }
.stagger-grid.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.40s; }

/* ── Counter animation ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-value.counted { animation: countUp 0.6s ease forwards; }

/* ── Floating cards ── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
.hero-float-card.card-tl { animation: float-slow   4s ease-in-out infinite; }
.hero-float-card.card-br { animation: float-slower 5s ease-in-out infinite; animation-delay: 0.8s; }

/* ── Shimmer loading skeleton ── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-section) 25%,
    var(--border) 50%,
    var(--bg-section) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.8s infinite;
  border-radius: 4px;
}

/* ── Page transition ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
main { animation: pageIn 0.45s ease forwards; }

/* ── Pulse dot (hero badge) ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.4); }
}
.hero-badge .dot { animation: pulse 2.2s ease-in-out infinite; }

/* ── Gradient text animation ── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary), #2E80C8, var(--accent));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* ── Navbar scroll shrink ── */
.navbar { transition: height 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }

/* ── Button ripple ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  inset: 50%;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}
.btn:active::after {
  inset: -50%;
  transform: scale(1);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* ── Carousel auto-scroll ── */
@keyframes slide-hint {
  0%   { transform: translateX(0); }
  8%   { transform: translateX(-16px); }
  16%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* ── Tag hover ── */
.tag { transition: all 0.2s ease; }
.tag:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Image zoom on card hover ── */
.feature-block-img { overflow: hidden; }
.feature-block-img img { transition: transform 0.4s ease; }
.feature-block:hover .feature-block-img img { transform: scale(1.02); }

/* ── Scroll indicator (hero) ── */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(8px); opacity: 1; }
}
.scroll-hint {
  display: inline-block;
  animation: bounce-down 2s ease-in-out infinite;
  font-size: 20px;
  color: var(--text-secondary);
}

/* ── Mobile menu animation ── */
.mobile-menu-inner {
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.navbar-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Pricing card focus ── */
.pricing-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }

/* ── Docs nav active indicator ── */
.docs-nav-item {
  position: relative;
  transition: color 0.2s, background 0.2s, border-left-color 0.2s;
}