/* ============================================
   Scroll Reveal
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
}

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

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo),
              transform var(--duration-reveal) var(--ease-out-expo);
}

.reveal-stagger.visible > *:nth-child(1)  { transition-delay:   0ms; }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 100ms; }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 260ms; }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 340ms; }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 460ms; }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 520ms; }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 570ms; }
.reveal-stagger.visible > *:nth-child(10) { transition-delay: 620ms; }
.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Parallax
   ============================================ */
.parallax {
  will-change: transform;
}

/* ============================================
   Fade in on load
   ============================================ */
.fade-in-load {
  animation: fade-slide-up var(--duration-reveal) var(--ease-out-expo) both;
}

.fade-in-load-delay-1 { animation-delay: 200ms; }
.fade-in-load-delay-2 { animation-delay: 450ms; }
.fade-in-load-delay-3 { animation-delay: 700ms; }
.fade-in-load-delay-4 { animation-delay: 950ms; }

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Hover glow
   ============================================ */
.hover-glow {
  transition: box-shadow var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out-expo);
}

.hover-glow:hover {
  box-shadow: 0 0 0 1px var(--accent-gold), 0 8px 24px rgba(191, 140, 60, 0.15);
  transform: scale(1.02);
}

/* ============================================
   Card hover — stronger lift + gold shadow
   ============================================ */
.card {
  transition: transform var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) ease,
              box-shadow 300ms ease !important;
}

.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-gold) !important;
}

/* ============================================
   Smooth transitions
   ============================================ */
.transition-colors {
  transition: color var(--duration-fast) ease,
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.transition-opacity {
  transition: opacity var(--duration-fast) ease;
}

.transition-transform {
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

/* ============================================
   Section heading slide-in (applied in JS)
   ============================================ */
@keyframes heading-slide {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.heading-animate {
  animation: heading-slide 700ms var(--ease-out-expo) both;
}

/* ============================================
   Gold line grow
   ============================================ */
@keyframes line-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

.line-grow {
  animation: line-grow 600ms var(--ease-out-expo) 300ms both;
}

/* ============================================
   Pulse (used by timeline dots)
   ============================================ */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191, 140, 60, 0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(191, 140, 60, 0); }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .fade-in-load,
  .heading-animate,
  .line-grow {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}