/* DevOps-style deploy / rollout page transitions */

body.is-portfolio-nav-active .legacy-wrapper .main,
body.is-portfolio-nav-active.case-study .main,
body.is-portfolio-nav-active .profile-wrap {
  opacity: 0.2;
  transform: translateY(-6px) scale(0.99);
  filter: blur(3px);
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

.portfolio-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.portfolio-nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.portfolio-nav-overlay.is-finishing {
  opacity: 0;
  pointer-events: none;
}

.portfolio-nav-overlay__scan {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 24, 0.94), rgba(7, 18, 40, 0.96)),
    repeating-linear-gradient(
      180deg,
      rgba(118, 196, 255, 0.06) 0,
      rgba(118, 196, 255, 0.06) 1px,
      transparent 1px,
      transparent 5px
    );
}

.portfolio-nav-overlay__panels {
  position: absolute;
  inset: 0;
  display: flex;
}

.portfolio-nav-overlay__panel {
  flex: 1;
  background: linear-gradient(165deg, #071428 0%, #0b2248 48%, #071428 100%);
  border: 1px solid rgba(96, 188, 255, 0.22);
  box-shadow: inset 0 0 40px rgba(58, 148, 255, 0.12);
  transition: transform 0.58s cubic-bezier(0.22, 0.72, 0.18, 1);
}

.portfolio-nav-overlay__panel--left {
  border-right-color: rgba(46, 220, 193, 0.35);
}

.portfolio-nav-overlay__panel--right {
  border-left-color: rgba(46, 220, 193, 0.35);
}

/* Deploy exit: doors close toward center */
.portfolio-nav-overlay.is-deploy-exit.is-active .portfolio-nav-overlay__panel--left {
  animation: panelCloseLeft 0.58s cubic-bezier(0.22, 0.72, 0.18, 1) forwards;
}

.portfolio-nav-overlay.is-deploy-exit.is-active .portfolio-nav-overlay__panel--right {
  animation: panelCloseRight 0.58s cubic-bezier(0.22, 0.72, 0.18, 1) forwards;
}

@keyframes panelCloseLeft {
  from {
    transform: translateX(-102%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes panelCloseRight {
  from {
    transform: translateX(102%);
  }
  to {
    transform: translateX(0);
  }
}

/* Deploy enter: doors open from center */
.portfolio-nav-overlay.is-deploy-enter.is-active .portfolio-nav-overlay__panel--left {
  animation: panelOpenLeft 0.62s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

.portfolio-nav-overlay.is-deploy-enter.is-active .portfolio-nav-overlay__panel--right {
  animation: panelOpenRight 0.62s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

@keyframes panelOpenLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-102%);
  }
}

@keyframes panelOpenRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(102%);
  }
}

/* Rollout exit: vertical shutter up */
.portfolio-nav-overlay.is-rollout-exit.is-active .portfolio-nav-overlay__panel--left,
.portfolio-nav-overlay.is-rollout-exit.is-active .portfolio-nav-overlay__panel--right {
  animation: rolloutShutterUp 0.56s cubic-bezier(0.24, 0.7, 0.2, 1) forwards;
}

@keyframes rolloutShutterUp {
  from {
    transform: translateY(102%);
  }
  to {
    transform: translateY(0);
  }
}

/* Rollout enter: shutter drops away */
.portfolio-nav-overlay.is-rollout-enter.is-active .portfolio-nav-overlay__panel--left,
.portfolio-nav-overlay.is-rollout-enter.is-active .portfolio-nav-overlay__panel--right {
  animation: rolloutShutterDown 0.62s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

@keyframes rolloutShutterDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-102%);
  }
}

.portfolio-nav-overlay__hud {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(92vw, 480px);
  padding: 1rem 1.1rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(123, 196, 255, 0.42);
  background: rgba(7, 15, 34, 0.88);
  box-shadow:
    0 0 0 1px rgba(64, 205, 255, 0.08) inset,
    0 18px 42px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(58, 148, 255, 0.28);
  text-align: center;
  z-index: 2;
}

.portfolio-nav-overlay__stage {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5eead4;
  font-weight: 600;
}

.portfolio-nav-overlay__label {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8ecff;
  font-weight: 500;
}

.portfolio-nav-overlay__bar {
  margin-top: 0.75rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(123, 196, 255, 0.15);
  overflow: hidden;
}

.portfolio-nav-overlay__bar span {
  display: block;
  height: 100%;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2edcc1, #3a8cff, #2edcc1);
  animation: navBarPulse 0.9s ease-in-out infinite;
}

@keyframes navBarPulse {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

/* Cold load: HUD scale-in + doors open (homepage hard refresh) */
.portfolio-nav-overlay.is-coldload-enter.is-active .portfolio-nav-overlay__panel--left {
  animation: panelOpenLeft 0.62s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

.portfolio-nav-overlay.is-coldload-enter.is-active .portfolio-nav-overlay__panel--right {
  animation: panelOpenRight 0.62s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

.portfolio-nav-overlay.is-coldload-enter.is-active .portfolio-nav-overlay__hud {
  animation: coldloadHudIn 0.55s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

@keyframes coldloadHudIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-nav-overlay,
  .portfolio-nav-overlay__panel,
  .portfolio-nav-overlay__bar span {
    animation: none !important;
    transition: none !important;
  }

  body.is-portfolio-nav-active .legacy-wrapper .main,
  body.is-portfolio-nav-active.case-study .main {
    opacity: 1;
    transform: none;
    filter: none;
  }
}