/* ================================================================
   ANIMATIONS.CSS — Scroll reveals, transitions, keyframes
   ================================================================ */

/* ── REVEAL ON SCROLL ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ── HERO ENTRANCE ── */
.hero-content > * {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.75s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-content > *:nth-child(4) { animation-delay: 0.46s; }
.hero-content > *:nth-child(5) { animation-delay: 0.6s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── BADGE ENTRANCE ── */
.tech-badge {
  opacity: 0;
  animation: badgeIn 0.6s cubic-bezier(.22,1,.36,1) forwards;
}
.badge-1 { animation-delay: 0.8s; }
.badge-2 { animation-delay: 1.0s; }
.badge-3 { animation-delay: 1.2s; }
.badge-4 { animation-delay: 1.4s; }
.badge-5 { animation-delay: 1.6s; }

@keyframes badgeIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ── NAV ENTRANCE ── */
nav {
  animation: navSlide 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes navSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── HOVER GLOW CARDS ── */
.skill-card,
.arch-card,
.project-card,
.learning-card,
.edu-card,
.timeline-item {
  position: relative;
}
.skill-card::before,
.arch-card::before,
.project-card::before,
.learning-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0,229,255,.04), transparent 40%);
}
.skill-card:hover::before,
.arch-card:hover::before,
.project-card:hover::before,
.learning-card:hover::before {
  opacity: 1;
}

/* ── PROGRESS BAR ANIMATION ── */
.progress-fill {
  width: 0 !important;
  transition: width 1.2s cubic-bezier(.22,1,.36,1) 0.3s;
}
.progress-fill.animated {
  width: var(--target-width) !important;
}

/* ── EYEBROW PULSE ── */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(0,229,255,0); }
  50%       { text-shadow: 0 0 16px rgba(0,229,255,.5); }
}
.hero-eyebrow { animation: glowPulse 3s ease-in-out infinite; }

/* ── SCROLL LINE ── */
@keyframes scrollBounce {
  0%,100% { transform: translateY(0);   opacity: 0; }
  30%     { opacity: 1; }
  70%     { opacity: 1; }
  100%    { transform: translateY(20px); opacity: 0; }
}
.scroll-line { animation: scrollBounce 2.2s ease-in-out infinite; }

/* ── STAT COUNTER ── */
.stat-num { transition: color 0.3s; }
.stat:hover .stat-num { color: var(--accent); }

/* ── SECTION LABEL LINE DRAW ── */
.section-label.visible::after {
  animation: lineGrow 0.6s ease forwards 0.2s;
}
@keyframes lineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 40px; opacity: 0.4; }
}

/* ── ARCH LAYER HOVER ── */
.arch-layer {
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.arch-layer:hover {
  transform: scaleX(1.02);
}

/* ── CONTACT LINK HOVER ── */
.contact-link {
  position: relative;
  overflow: hidden;
}
.contact-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.contact-link:hover::before { opacity: 1; }

/* ── TIMELINE LEFT BAR GROW ── */
.tl-accent {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.timeline-item.visible .tl-accent {
  transform: scaleY(1);
}

/* ── BLOB DRIFT ── */
.blob-1 { animation: blobDrift1 18s ease-in-out infinite alternate; }
.blob-2 { animation: blobDrift2 22s ease-in-out infinite alternate; }
.blob-3 { animation: blobDrift3 15s ease-in-out infinite alternate; }

@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-50px, -30px) scale(0.9); }
}
@keyframes blobDrift3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -60px) scale(1.15); }
}

/* ── TAG HOVER ── */
.tag {
  cursor: default;
  position: relative;
  overflow: hidden;
}
.tag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}