/* ============================================================
   ANIMATIONS.CSS — Keyframes & animation classes
   ============================================================ */

/* ── Glitch Effect ───────────────────────────────────────────── */
.glitch {
  position: relative;
  display: inline-block;
  animation: glitch-main 4s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.glitch::before {
  color: #00AAFF;
  animation: glitch-before 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch::after {
  color: #FF3366;
  animation: glitch-after 4s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-main {
  0%, 90%, 100% { transform: translate(0); }
  91%            { transform: translate(-2px, 1px); }
  92%            { transform: translate(2px, -1px); }
  93%            { transform: translate(-1px, 2px); }
  94%            { transform: translate(0); }
  95%            { transform: translate(3px, 0); }
  96%            { transform: translate(0); }
}

@keyframes glitch-before {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  89%           { transform: translate(-3px, 0); opacity: 0.8; }
  90%           { transform: translate(3px, -1px); opacity: 0.8; }
  91%           { transform: translate(0); opacity: 0; }
  92%           { transform: translate(-4px, 1px); opacity: 0.7; }
  93%           { transform: translate(0); opacity: 0; }
  95%           { transform: translate(2px, 0); opacity: 0.6; }
  96%           { transform: translate(0); opacity: 0; }
}

@keyframes glitch-after {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  89%           { transform: translate(3px, 0); opacity: 0.7; }
  90%           { transform: translate(-2px, 1px); opacity: 0.7; }
  91%           { transform: translate(0); opacity: 0; }
  93%           { transform: translate(4px, -1px); opacity: 0.6; }
  94%           { transform: translate(0); opacity: 0; }
  96%           { transform: translate(-3px, 0); opacity: 0.5; }
  97%           { transform: translate(0); opacity: 0; }
}

/* Intro glitch — fires once on load */
.glitch-intro {
  animation: glitch-intro-anim 1.4s ease forwards, glitch-main 4s 1.5s infinite;
}

@keyframes glitch-intro-anim {
  0%  { opacity: 0; transform: translate(0); filter: blur(8px); }
  10% { opacity: 0.3; transform: translate(-6px, 0); filter: blur(4px); }
  20% { opacity: 0.1; transform: translate(6px, -2px); filter: blur(6px); }
  30% { opacity: 0.6; transform: translate(-4px, 1px); filter: blur(2px); }
  40% { opacity: 0.2; transform: translate(4px, 0); filter: blur(4px); }
  55% { opacity: 0.8; transform: translate(-2px, 0); filter: blur(1px); }
  65% { opacity: 0.5; transform: translate(2px, -1px); filter: blur(0); }
  75% { opacity: 0.9; transform: translate(-1px, 0); }
  85% { opacity: 0.7; transform: translate(1px, 0); }
  100%{ opacity: 1;   transform: translate(0); }
}

/* ── Fade-up for subtitle, CTA ───────────────────────────────── */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease forwards;
}

.fade-up-1 { animation-delay: 0.9s; }
.fade-up-2 { animation-delay: 1.2s; }
.fade-up-3 { animation-delay: 1.5s; }
.fade-up-4 { animation-delay: 1.8s; }

/* ── Cursor blink ────────────────────────────────────────────── */
.cursor-blink {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #00AAFF;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 1px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Floating animation ───────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

.float {
  animation: float 5s ease-in-out infinite;
}

/* ── Pulse glow ──────────────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 170, 255, 0.2); }
  50%       { box-shadow: 0 0 35px rgba(0, 170, 255, 0.5), 0 0 60px rgba(0, 170, 255, 0.15); }
}

.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ── Skill bar animation ─────────────────────────────────────── */
.skill-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill, 999px);
  background: linear-gradient(90deg, #0077CC, #00AAFF, #33CCFF);
  width: 0%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.skill-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* ── Scan line overlay (subtle, for the hero) ────────────────── */
@keyframes scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 1;
  animation: scanlines 8s linear infinite;
}

/* ── Spinning border ─────────────────────────────────────────── */
@keyframes spin-border {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Number counter ──────────────────────────────────────────── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Tag pop-in ──────────────────────────────────────────────── */
@keyframes tagPopIn {
  0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
  80%  { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.tag-animate {
  animation: tagPopIn 0.4s ease forwards;
  opacity: 0;
}

/* ── Underline draw ──────────────────────────────────────────── */
.underline-draw {
  position: relative;
  display: inline-block;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00AAFF, #33CCFF);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.underline-draw.visible::after,
.underline-draw:hover::after {
  width: 100%;
}

/* ── Stagger children ────────────────────────────────────────── */
.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.3s; }

/* ── Glow line ───────────────────────────────────────────────── */
@keyframes glowLine {
  0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
  50%       { opacity: 1;   transform: scaleX(1); }
}

.glow-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00AAFF, transparent);
  animation: glowLine 3s ease-in-out infinite;
}