/* ============================================
   PAGE ANIMATIONS — Framer-quality
   Blur-in, spring easing, scale, stagger
   ============================================ */

/* ---- Keyframes ---- */

@keyframes hero-blur-up {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes hero-blur-right {
  from {
    opacity: 0;
    transform: translateX(36px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ---- Hero entrance (fires on load, staggered) ---- */

.hero-left .profile-name {
  animation: hero-blur-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0ms;
}

.hero-left .hero-subline-row {
  animation: hero-blur-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 70ms;
}

.hero-left .hero-main-paragraph {
  animation: hero-blur-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 140ms;
}

.hero-left .hero-secondary-line {
  animation: hero-blur-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 210ms;
}

.hero-left .live-badge-container {
  animation: hero-blur-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 300ms;
}

/* Hero image — slides in from the right */
.hero-image-container {
  animation: hero-blur-right 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 50ms;
}

/* ---- Scroll reveal base classes ---- */

/* Standard: fade + rise + blur (titles, subtitles, text blocks) */
.sr-up {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-up.sr-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Card: rise + scale + blur (reward cards, project cards) */
.sr-card {
  opacity: 0;
  transform: translateY(36px) scale(0.94);
  filter: blur(10px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-card.sr-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* Fade: opacity + subtle rise (wide/heavy elements like carousel) */
.sr-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-fade.sr-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Page entrance — shared keyframes ---- */

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- index.html — above-fold stagger ---- */

.landing-nav {
  animation: enter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0ms both;
}

.landing-name {
  animation: enter-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.landing-role {
  animation: enter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 135ms both;
}

.landing-desc {
  animation: enter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.landing-socials {
  animation: enter-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

.email-shortcut-hint {
  animation: enter-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 258ms both;
}

.lph-marquee-section {
  animation: enter-fade 0.8s ease 200ms both;
}

/* ---- resume.html stagger ---- */

.download-button {
  animation: enter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.resume-content {
  animation: enter-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 175ms both;
}

/* ---- knowledge-graph.html stagger ---- */

.title-card {
  animation: enter-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 130ms both;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-left .profile-name,
  .hero-left .hero-subline-row,
  .hero-left .hero-main-paragraph,
  .hero-left .hero-secondary-line,
  .hero-left .live-badge-container,
  .hero-image-container {
    animation: none !important;
  }

  .sr-up,
  .sr-card,
  .sr-fade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .landing-nav,
  .landing-name,
  .landing-role,
  .landing-desc,
  .landing-socials,
  .email-shortcut-hint,
  .lph-marquee-section,
  .resume-page-nav,
  .resume-page-download,
  .resume-page-content,
  .kg-page-nav,
  .kg-page-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}