/* ============================================================
   TRANSITIONS — EVA-01 Neon Monolith
   Page transitions for SPA-like navigation
   ============================================================ */

/* === PAGE TRANSITION WRAPPER === */

#page-content {
  transition: opacity 250ms ease, transform 250ms ease;
}

/* Outgoing page */
#page-content.page-leaving {
  opacity: 0;
  transform: translateY(8px);
}

/* Incoming page starts invisible */
#page-content.page-entering {
  opacity: 0;
  transform: translateY(-8px);
}

/* Active — visible */
#page-content.page-active {
  opacity: 1;
  transform: translateY(0);
}

/* === SCROLL REVEAL === */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

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

/* Staggered reveals */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 450ms ease,
    transform 450ms ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay:  50ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 190ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 260ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 330ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 470ms; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(n+8) { transition-delay: 540ms; opacity: 1; transform: none; }

/* === LOADING INDICATOR === */

.page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-secondary) 0%,
    var(--color-secondary-dim) 100%
  );
  z-index: 1000;
  transition: width 200ms ease;
  box-shadow: 0 0 8px rgba(65, 187, 66, 0.5);
  pointer-events: none;
}

.page-loading-bar.is-loading {
  width: 70%;
  transition: width 800ms ease;
}

.page-loading-bar.is-complete {
  width: 100%;
  transition: width 200ms ease;
}

.page-loading-bar.is-hidden {
  opacity: 0;
  transition: opacity 300ms ease 200ms;
}

/* === HOVER LINK UNDERLINE === */

.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-secondary);
  transition: width var(--transition-normal);
}

.hover-underline:hover::after {
  width: 100%;
}

/* === REDUCED MOTION OVERRIDE === */

@media (prefers-reduced-motion: reduce) {
  #page-content,
  .reveal,
  .reveal-stagger > *,
  .page-loading-bar {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}