/* ================================================================
   ANIMATIONS — RepForge AI
   Keyframes and animation utilities
================================================================ */

/* ---- Hero line stagger ---- */
.hero__headline .line {
  opacity: 0;
  transform: translateY(30px);
  animation: line-in var(--t-xslow) var(--ease-out) forwards;
}

.hero__headline .line--1 { animation-delay: 200ms; }
.hero__headline .line--2 { animation-delay: 350ms; }
.hero__headline .line--3 { animation-delay: 500ms; }

@keyframes line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Hero sub / actions / proof fade in ---- */
.hero__badge,
.hero__sub,
.hero__actions,
.hero__proof {
  opacity: 0;
  animation: fade-up 700ms var(--ease-out) forwards;
}

.hero__badge   { animation-delay: 700ms; }
.hero__sub     { animation-delay: 800ms; }
.hero__actions { animation-delay: 900ms; }
.hero__proof   { animation-delay: 1000ms; }

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

/* ---- Glow pulse on forge text ---- */
.glow-text {
  animation: glow-breathe 4s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { text-shadow: 0 0 40px rgba(255, 69, 0, 0.6), 0 0 80px rgba(255, 69, 0, 0.2); }
  50%       { text-shadow: 0 0 60px rgba(255, 69, 0, 0.9), 0 0 120px rgba(255, 69, 0, 0.4); }
}

/* ---- Shimmer on featured card ---- */
.pricing-card--featured::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 69, 0, 0.04) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: card-shimmer 8s linear infinite;
}

@keyframes card-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Scan line on mock screens ---- */
.mock-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--forge), transparent);
  animation: scan-line 3s linear infinite;
  pointer-events: none;
}

@keyframes scan-line {
  from { top: 0; opacity: 0.6; }
  80%  { opacity: 0.3; }
  to   { top: 100%; opacity: 0; }
}

.mock-screen {
  position: relative;
  overflow: hidden;
}

/* ---- Floating animation for muscle map ---- */
.muscle-map {
  animation: float 6s ease-in-out infinite;
}

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

/* ---- Forge btn icon spring ---- */
.btn .btn__icon {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover .btn__icon {
  transform: translateX(4px);
}

/* ---- Step card icon hover spin ---- */
.step-card:hover .step-card__icon svg {
  animation: icon-spin 0.6s var(--ease-out);
}

@keyframes icon-spin {
  from { transform: rotate(-15deg) scale(0.9); }
  to   { transform: rotate(0deg) scale(1); }
}

/* ---- Testi card hover lift ---- */
.testi-card {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-base);
}

.testi-card:hover {
  transform: translateY(-4px);
}

.testi-card--featured:hover {
  transform: translateY(-6px);
}