/* =============================================
   Keyframe Animations
============================================= */

/* Hero fade-up items */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating image */
@keyframes floatY {
  0%, 100% { transform: translateY(-50%) translateY(0px); }
  50%       { transform: translateY(-50%) translateY(-20px); }
}

/* Spinning ring */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scroll dot */
@keyframes scrollDot {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 0; transform: translateX(-50%) translateY(14px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(0, 229, 255, 0.6), 0 0 80px rgba(0, 229, 255, 0.2); }
}

/* Reveal from bottom (scroll trigger) */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reveal from left */
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reveal from right */
@keyframes revealRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Line expand */
@keyframes lineExpand {
  from { width: 0; }
  to   { width: 60px; }
}

/* =============================================
   Hero: initial animations (CSS only)
============================================= */
.fade-up {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}
.fade-up.delay-1 { animation-delay: 0.2s; }
.fade-up.delay-2 { animation-delay: 0.4s; }
.fade-up.delay-3 { animation-delay: 0.6s; }

/* =============================================
   Scroll Reveal
============================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.delay-1 { transition-delay: 0.15s; }
.reveal.delay-2 { transition-delay: 0.30s; }
.reveal.delay-3 { transition-delay: 0.45s; }

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   Profile photo glow pulse
============================================= */
.about__img {
  animation: glowPulse 3s ease-in-out infinite;
}

/* =============================================
   Section line animation
============================================= */
.section__line {
  animation: lineExpand 0.8s ease forwards;
  animation-play-state: paused;
}
.section__header.visible .section__line {
  animation-play-state: running;
}

/* =============================================
   Card hover shimmer
============================================= */
.card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0, 229, 255, 0.06) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease;
}
.card:hover::after { left: 120%; }

/* =============================================
   Hero visual float (already in style.css keyframe,
   apply animation class here for specificity)
============================================= */
.hero__network-img {
  animation: glowPulse 4s ease-in-out infinite;
}