/* ══════════════════════════════════════════════
   AHMAD SHAD — ANIMATIONS CSS
   ══════════════════════════════════════════════ */

/* ── REVEAL ANIMATIONS ── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Staggered delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ── HERO TEXT ANIMATION ── */
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title .line-inner {
  display: block;
  transform: translateY(100%);
  animation: lineReveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.hero-title .line:nth-child(1) .line-inner { animation-delay: 0.3s; }
.hero-title .line:nth-child(2) .line-inner { animation-delay: 0.5s; }
.hero-title .line:nth-child(3) .line-inner { animation-delay: 0.7s; }

@keyframes lineReveal {
  to { transform: translateY(0); }
}

/* ── PAGE TRANSITION ── */
body { animation: pageIn 0.5s ease forwards; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ── PULSE RING ── */
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── GRADIENT SHIFT ── */
.gradient-text {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── SHIMMER EFFECT ── */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { to { left: 200%; } }

/* ── TYPEWRITER ── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--accent);
  white-space: nowrap;
  animation: typing 2s steps(30) forwards, blink 0.7s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { from,to { border-color: transparent; } 50% { border-color: var(--accent); } }

/* ── PARTICLE DOTS ── */
.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleDrift linear infinite;
  pointer-events: none;
}
@keyframes particleDrift {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

/* ── GLOW PULSE ── */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px rgba(255,255,255,0.16); }
  50% { box-shadow: 0 0 60px rgba(255,255,255,0.28); }
}

/* ── FLOAT ANIMATION ── */
.float {
  animation: floatAnim 3s ease-in-out infinite;
}
@keyframes floatAnim {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── SPIN SLOW ── */
.spin-slow {
  animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ── FADE IN SCALE ── */
.fade-scale {
  animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ── SLIDE IN STAGGER ── */
@keyframes slideInStagger {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── COUNTER SPIN ── */
@keyframes counterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── HERO BADGE PULSE ── */
.hero-badge {
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 0 6px rgba(255,255,255,0.08); }
}

/* ── SERVICE CARD HOVER SHINE ── */
.service-card {
  background-image: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
}

/* ── TIMELINE DOT RIPPLE ── */
.timeline-dot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: dotRipple 2s ease-in-out infinite;
}
.timeline-item:hover .timeline-dot::before { animation-play-state: running; }
@keyframes dotRipple {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* ── SKILL BAR SHIMMER ── */
.skill-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: skillShimmer 2s ease-in-out infinite 1.5s;
}
.skill-fill { position: relative; }
@keyframes skillShimmer { to { left: 200%; } }

/* ── LOGO MARK ANIMATION ── */
.nav-logo { transition: all 0.3s; }
.nav-logo:hover { letter-spacing: -0.06em; }

/* ── BUTTON RIPPLE ── */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── LOADING DOTS ── */
.loading-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 2px;
  animation: loadingDot 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadingDot { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }

/* ── CANVAS PARTICLES ── */
canvas { display: block; }