/* ==============================
   SCROLL REVEAL ANIMATIONS
   ============================== */

/* Base state — hidden before reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Revealed state */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* Service cards stagger */
.services__grid .reveal:nth-child(1) { transition-delay: 0s; }
.services__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.services__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.services__grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.services__grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.services__grid .reveal:nth-child(6) { transition-delay: 0.4s; }

/* Cert cards stagger */
.cert__grid .reveal:nth-child(1) { transition-delay: 0s; }
.cert__grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.cert__grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.cert__grid .reveal:nth-child(4) { transition-delay: 0.3s; }

/* Timeline items — slide from sides */
.timeline__item--left.reveal {
  transform: translateX(-30px);
}

.timeline__item--right.reveal {
  transform: translateX(30px);
}

.timeline__item--left.reveal.visible,
.timeline__item--right.reveal.visible {
  transform: translateX(0);
}

/* Highlight cards — scale up */
.highlight-card.reveal {
  transform: translateY(20px) scale(0.95);
}

.highlight-card.reveal.visible {
  transform: translateY(0) scale(1);
}

/* Skill bars fill animation */
.skill-bar__fill.animate {
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tags reveal */
.skills__tags .tag {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.skills__column.visible .tag {
  opacity: 1;
  transform: scale(1);
}

.skills__column.visible .tag:nth-child(1) { transition-delay: 0.05s; }
.skills__column.visible .tag:nth-child(2) { transition-delay: 0.1s; }
.skills__column.visible .tag:nth-child(3) { transition-delay: 0.15s; }
.skills__column.visible .tag:nth-child(4) { transition-delay: 0.2s; }
.skills__column.visible .tag:nth-child(5) { transition-delay: 0.25s; }
.skills__column.visible .tag:nth-child(6) { transition-delay: 0.3s; }
.skills__column.visible .tag:nth-child(7) { transition-delay: 0.35s; }
.skills__column.visible .tag:nth-child(8) { transition-delay: 0.4s; }
.skills__column.visible .tag:nth-child(9) { transition-delay: 0.45s; }
.skills__column.visible .tag:nth-child(10) { transition-delay: 0.5s; }
.skills__column.visible .tag:nth-child(11) { transition-delay: 0.55s; }
.skills__column.visible .tag:nth-child(12) { transition-delay: 0.6s; }

/* ==============================
   PARALLAX LAYERS
   ============================== */
.parallax-bg {
  will-change: transform;
  pointer-events: none;
}

/* ==============================
   HERO ENTRANCE
   ============================== */
.hero__greeting,
.hero__name,
.hero__typewriter,
.hero__tagline,
.hero__cta,
.hero__image-wrapper {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.8s ease forwards;
}

.hero__greeting     { animation-delay: 0.2s; }
.hero__name         { animation-delay: 0.4s; }
.hero__typewriter   { animation-delay: 0.6s; }
.hero__tagline      { animation-delay: 0.8s; }
.hero__cta          { animation-delay: 1.0s; }
.hero__image-wrapper { animation-delay: 0.3s; transform: translateY(20px) scale(0.9); }

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

/* ==============================
   REDUCED MOTION
   ============================== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.visible {
    transform: none;
  }

  .timeline__item--left.reveal,
  .timeline__item--right.reveal {
    transform: none;
  }

  .highlight-card.reveal {
    transform: none;
  }

  .hero__greeting,
  .hero__name,
  .hero__typewriter,
  .hero__tagline,
  .hero__cta,
  .hero__image-wrapper {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .typewriter-cursor {
    animation: none;
  }

  .hero__scroll {
    animation: none;
  }

  .skills__tags .tag {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .skill-bar__fill {
    transition: none;
  }
}