/* =============================================
   ANIMATIONS.CSS — Futurizai
   Keyframes CSS e transitions
   ============================================= */

/* ─── HERO ENTRY (fallback sem GSAP) ─── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ─── LINE DRAW ─── */
@keyframes lineDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ─── SHIMMER (botão primário) ─── */
@keyframes shimmer {
  0%   { left: -60%; opacity: 0; }
  40%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ─── GLOW PULSE ─── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(156, 243, 92, 0); }
  50%      { box-shadow: 0 0 32px rgba(156, 243, 92, 0.12); }
}

/* ─── PARTICLE DRIFT ─── */
@keyframes particleDrift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(6px, -4px); }
  66%  { transform: translate(-4px, 6px); }
  100% { transform: translate(0, 0); }
}

/* ─── BORDER BREATH ─── */
@keyframes borderBreath {
  0%, 100% { border-color: var(--border); }
  50%      { border-color: rgba(156, 243, 92, 0.2); }
}

/* ─── MÉTODO LINE SVG ─── */
.method-line-svg {
  overflow: visible;
}

.method-line-path {
  stroke: var(--accent);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.2s var(--ease-spring);
}

.method-line-path.is-drawn {
  stroke-dashoffset: 0;
}

/* ─── ACCENT DOT (decorativo) ─── */
.accent-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: glowPulse 3s ease-in-out infinite;
}

/* ─── HOVER UNDERLINE LINK ─── */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-spring);
}

.hover-underline:hover::after {
  transform: scaleX(1);
}

/* ─── LOADING SHIMMER (para imagens) ─── */
@keyframes loadingShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
  background-size: 400px 100%;
  animation: loadingShimmer 1.5s ease-in-out infinite;
}