/* ============================================================
   CODE BY MARCO — animations.css
   ============================================================ */

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes float-code {
  from { transform:translateY(105vh); opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  to   { transform:translateY(-120px) rotate(2deg); opacity:0; }
}

@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.55; transform:scale(1.35); }
}

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

@keyframes fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes slide-left {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes slide-right {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes glow-pulse {
  0%,100% { box-shadow:0 4px 15px rgba(0,217,255,.2); }
  50%     { box-shadow:0 8px 35px rgba(0,217,255,.45),0 0 70px rgba(0,217,255,.1); }
}

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

@keyframes spin-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

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

@keyframes border-flow {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* ─── Hero entrance animations ───────────────────────────── */
.hero-badge    { animation:fade-in-up .55s ease .15s both; }
.hero-title    { animation:fade-in-up .65s ease .3s  both; }
.hero-subtitle { animation:fade-in-up .65s ease .45s both; }
.hero-actions  { animation:fade-in-up .65s ease .6s  both; }
.hero-stats    { animation:fade-in-up .65s ease .75s both; }

/* ─── Feature card icon float on hover ───────────────────── */
.feature-card:hover .feature-icon { animation:float-y 1.4s ease-in-out infinite; }

/* ─── Primary button glow pulse ──────────────────────────── */
.btn-primary { animation:glow-pulse 3.5s ease-in-out infinite; }

/* ─── Typing cursor blink ────────────────────────────────── */
@keyframes cursor-blink {
  0%,100% { border-right-color:var(--cyan); }
  50%     { border-right-color:transparent; }
}

/* ─── Service card border flow (featured) ────────────────── */
.service-card.featured {
  background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,
             linear-gradient(135deg,rgba(0,217,255,.5),rgba(0,153,255,.2),rgba(0,217,255,.5)) border-box;
}

/* ─── Tag hover shimmer ──────────────────────────────────── */
.tag:hover {
  background:linear-gradient(90deg,rgba(0,217,255,.08),rgba(0,217,255,.18),rgba(0,217,255,.08));
  background-size:200% auto;
  animation:shimmer 1.5s linear infinite;
}