/* ============================================
   TRANSITIONS — JASON HANLON PORTFOLIO
   ============================================ */

/* --- PAGE TRANSITION CURTAIN --- */
.transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none;
  display: flex;
}

.curtain-panel {
  flex: 1;
  background: var(--bg-secondary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-in-out);
}

.curtain-panel:nth-child(1) { transition-delay: 0ms; }
.curtain-panel:nth-child(2) { transition-delay: 40ms; }
.curtain-panel:nth-child(3) { transition-delay: 80ms; }

/* entering — panels rise */
.transition-curtain.enter-active .curtain-panel {
  transform: scaleY(1);
  transform-origin: bottom;
}

/* leaving — panels retract upward */
.transition-curtain.leave-active .curtain-panel {
  transform: scaleY(0);
  transform-origin: top;
  transition-delay: 0ms !important;
}

/* --- VIEW TRANSITIONS (for supported browsers) --- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vtOldFade 350ms var(--ease-in-out) forwards;
}

::view-transition-new(root) {
  animation: vtNewFade 500ms var(--ease-out) 200ms both;
}

@keyframes vtOldFade {
  to { opacity: 0; transform: scale(0.98) translateY(-8px); }
}

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

/* --- ACTIVE LINK INDICATOR --- */
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a.active::after {
  width: 100%;
  background: var(--accent);
}

/* --- SMOOTH HASH NAVIGATION OFFSET --- */
:target {
  scroll-margin-top: 100px;
}


/* --- IMAGE REVEAL HOVER EFFECT --- */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.7s var(--ease-out);
}

.img-reveal.revealed::after {
  transform: scaleX(0);
}

/* --- STAGGERED GRID REVEAL --- */
.stagger-grid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.stagger-grid.revealed > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger-grid.revealed > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.stagger-grid.revealed > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger-grid.revealed > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-grid.revealed > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger-grid.revealed > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger-grid.revealed > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 480ms; }
.stagger-grid.revealed > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 560ms; }
.stagger-grid.revealed > *:nth-child(n+9) { opacity: 1; transform: none; transition-delay: 560ms; }