/* ============================================================
   Portfolio Animation & Stagger Reveal System
   ============================================================ */

/* Stagger Reveal: Premium Apple / Vercel blur-in and upward slide */
.stagger-group {
  overflow-anchor: none;
}

.stagger-item {
  opacity: 0;
  transform: translateY(var(--reveal-translate, 22px));
  filter: blur(var(--reveal-blur, 12px));
  animation: staggerReveal var(--reveal-duration, 0.7s) var(--reveal-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
  animation-delay: calc(var(--reveal-base, 0.15s) + var(--index, 0) * var(--stagger-step, 120ms));
  will-change: opacity, transform, filter;
  overflow-anchor: none;
}

@keyframes staggerReveal {
  0% {
    opacity: 0;
    filter: blur(var(--reveal-blur, 12px));
    transform: translateY(var(--reveal-translate, 22px));
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px);
  }
}

/* Page Fade-In */
.fade-in {
  animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Page Exit Transition */
body.page-exiting {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}

/* ============================================================
   Micro-Animations & Interactive Hover Effects
   ============================================================ */

/* Smooth Card Hover Lift */
.project-block,
.featured-experience,
.experience-company-card,
.project-archive-card {
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.32s ease, border-color 0.2s ease;
}

.project-block:hover,
.project-archive-card:hover {
  transform: translateY(-4px);
}

.project-visual img,
.card-preview-thumb img {
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.project-block:hover .project-visual img,
.project-archive-card:hover .card-preview-thumb img {
  transform: scale(1.035);
}

/* Book Hover Tilt with 3D Depth */
.book-cover-link,
.book-item {
  perspective: 800px;
}

.book-cover-link img,
.book-card img {
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease;
  will-change: transform, box-shadow;
}

.book-cover-link:hover img,
.book-card:hover img {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .book-cover-link:hover img,
[data-theme="dark"] .book-card:hover img {
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.45);
}

/* Interactive Text Links */
.text-link {
  position: relative;
  transition: opacity 0.18s ease, color 0.18s ease;
}

.text-link:hover {
  opacity: 0.75;
}

/* Global Smooth Theme Transition */
body,
.page,
.narrow-section,
.navbar-nav-container,
.navbar-icon-container,
.page-header-container,
.featured-experience-header,
.experience-company-card {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

/* Pulse Glow for Live Status Badges */
.status-chip-active {
  animation: pulseGlow 2.8s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .stagger-item,
  .fade-in,
  .navbar-nav-container,
  .navbar-icon-container,
  .project-block,
  .project-archive-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}