/* ==========================================
   MAJOR MYJAH — ANIMATIONS
   Nocturnal luxury atmosphere
   ========================================== */

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeIn 0.8s ease forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

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

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.section {
  opacity: 0;
  animation: sectionFadeIn 0.6s ease forwards;
}

.section:nth-child(1) { animation-delay: 0s; }
.section:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(3) { animation-delay: 0.2s; }
.section:nth-child(4) { animation-delay: 0.3s; }
.section:nth-child(5) { animation-delay: 0.4s; }
.section:nth-child(6) { animation-delay: 0.5s; }
.section:nth-child(7) { animation-delay: 0.6s; }

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

.meta-card::after,
.pillar-card::after,
.track-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-medium);
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(74, 155, 217, 0.06),
    transparent 40%
  );
}

.meta-card, .pillar-card, .track-card { position: relative; }

.meta-card:hover::after,
.pillar-card:hover::after,
.track-card:hover::after { opacity: 1; }

.status-dot { animation: pulse 3s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-glow { animation: ambientGlow 8s ease-in-out infinite; }

@keyframes ambientGlow {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateY(-50%) scale(1.1); }
}

.status-fill { animation: fillBar 1.5s ease-out 0.5s both; }
@keyframes fillBar { from { width: 0%; } }

.tag { transition: all 0.2s ease; }
.tag:hover { transform: translateY(-1px); }

.motif-card {
  opacity: 0;
  animation: motifIn 0.4s ease forwards;
}

.motif-card:nth-child(1) { animation-delay: 0.02s; }
.motif-card:nth-child(2) { animation-delay: 0.04s; }
.motif-card:nth-child(3) { animation-delay: 0.06s; }
.motif-card:nth-child(4) { animation-delay: 0.08s; }
.motif-card:nth-child(5) { animation-delay: 0.10s; }
.motif-card:nth-child(6) { animation-delay: 0.12s; }
.motif-card:nth-child(7) { animation-delay: 0.14s; }
.motif-card:nth-child(8) { animation-delay: 0.16s; }
.motif-card:nth-child(9) { animation-delay: 0.18s; }
.motif-card:nth-child(10) { animation-delay: 0.20s; }
.motif-card:nth-child(11) { animation-delay: 0.22s; }
.motif-card:nth-child(12) { animation-delay: 0.24s; }

@keyframes motifIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pillar-card {
  opacity: 0;
  animation: pillarIn 0.5s ease forwards;
}

.pillar-card:nth-child(1) { animation-delay: 0.05s; }
.pillar-card:nth-child(2) { animation-delay: 0.1s; }
.pillar-card:nth-child(3) { animation-delay: 0.15s; }
.pillar-card:nth-child(4) { animation-delay: 0.2s; }
.pillar-card:nth-child(5) { animation-delay: 0.25s; }
.pillar-card:nth-child(6) { animation-delay: 0.3s; }

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

.timeline-item {
  opacity: 0;
  animation: timelineIn 0.5s ease forwards;
}

.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes timelineIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.main-content { scroll-behavior: smooth; }

.nav-link { position: relative; }

.nav-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent-blue);
  transform: translateY(-50%);
  transition: height var(--transition-medium);
  border-radius: 1px;
}

.nav-link:hover::after { height: 60%; }
.nav-link.active::after { height: 0; }

.search-input {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input:focus { box-shadow: 0 0 0 3px rgba(74, 155, 217, 0.08); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
  z-index: 90;
}

.sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-glow { animation: none; opacity: 0.6; }
  .status-dot { animation: none; opacity: 1; }
}