/* ── Transition Overlay ─────────────────────── */
#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  overflow: hidden;
}

.transition-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.transition-grid-cell {
  background: var(--clr-bg);
  transform: scaleY(0);
  transform-origin: bottom;
}

.transition-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 800;
  color:var(--main-color);
  letter-spacing: -0.02em;
  opacity: 0;
  white-space: nowrap;
}

/* ── Section Enter/Exit ─────────────────────── */
.section {
  transition: opacity 0.01s; /* JS handles full animation */
}

/* Scan line effect */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
.scanline {
  position: fixed;
  left: 0; right: 0;
  height: 1px;
  background:var(--main-color);
  opacity: 0.05;
  z-index: var(--z-overlay);
  pointer-events: none;
  animation: scanline 4s linear infinite;
}

/* Glitch effect on nav links */
@keyframes glitch {
  0%   { clip-path: inset(0 0 95% 0); transform: translate(-2px, 0); }
  20%  { clip-path: inset(80% 0 0 0);  transform: translate(2px, 0); }
  40%  { clip-path: inset(40% 0 50% 0); transform: translate(-1px, 0); }
  60%  { clip-path: inset(20% 0 70% 0); transform: translate(0, 0); }
  80%  { clip-path: inset(60% 0 30% 0); transform: translate(1px, 0); }
  100% { clip-path: inset(0 0 95% 0);   transform: translate(0, 0); }
}
.glitch-active {
  animation: glitch 0.3s steps(2) forwards;
}

/* CRT flicker */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: var(--z-loader + 1);
}