/* ============================================================
   ANIMATIONS.CSS — Keyframes & scroll-reveal classes
   ============================================================ */

/* ---------- Page-load curtain ---------- */
#curtain {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9999;
  transform-origin: top;
  animation: curtainUp 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.1s forwards;
}

@keyframes curtainUp {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ---------- Hero entrance ---------- */
.hero-headline {
  opacity: 0;
  animation: fadeDown 1.5s ease-out 2.9s forwards;
}

.hero-sub {
  opacity: 0;
  animation: fadeUp 1.5s ease-out 3.3s forwards;
}

.hero-ctas {
  opacity: 0;
  animation: fadeUp 1.2s ease-out 3.7s forwards;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll-reveal base ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.from-left {
  transform: translateX(-32px);
}

.reveal.from-right {
  transform: translateX(32px);
}

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

/* ---------- Floating nav indicator ---------- */
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Card hover lift ---------- */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  border-color: var(--accent);
}

/* ---------- Pill hover ---------- */
.skill-pill {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.skill-pill:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}

/* ---------- CTA button animations ---------- */
.btn-primary {
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 142, 247, 0.35);
}

.btn-ghost {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- Nav link underline animation ---------- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}