/* ============================================================
   MOLVERN LABS — The Architect's Reveal
   Page Transition Animation System
   
   3-layer choreographed transition:
     Layer 1 — Blueprint grid + Mouse Spotlight (draws from center)
     Layer 2 — Navy panels (staggered wipe, contextual direction)
     Layer 3 — ML monogram node + Wordmark + Blueprint Loader
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  will-change: transform;
}

/* ── Layer 1: Blueprint Grid & Spotlight ───────────────────── */

.pt-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.28) 0px,
      rgba(59, 130, 246, 0.28) 1px,
      transparent 1px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(59, 130, 246, 0.28) 0px,
      rgba(59, 130, 246, 0.28) 1px,
      transparent 1px,
      transparent 80px
    );
  background-position: center center;
  clip-path: inset(50% 50% 50% 50%);
  will-change: clip-path, opacity;
  z-index: 1;
}

.pt-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    500px circle at var(--pt-mouse-x, 50%) var(--pt-mouse-y, 50%),
    rgba(59, 130, 246, 0.22),
    transparent 70%
  );
  transition: opacity 0.4s ease;
  will-change: background;
  z-index: 2;
}

/* ── Layer 2: Wipe Panels ─────────────────────────────────── */

.pt-panels {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
  overflow: hidden;
}

.pt-panel {
  flex: 1 0 calc(20% + 2px);
  margin-right: -2px;
  background: var(--color-navy-deep, #0c141f);
  outline: 1px solid var(--color-navy-deep, #0c141f);
  transform: scaleY(0);
  transform-origin: bottom center;
  will-change: transform;
}

.pt-panel:last-child {
  margin-right: 0;
}

/* ── Layer 3: Monogram Node & Wordmark ────────────────────── */

.pt-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.pt-node__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  z-index: 4;
}

.pt-node__mark {
  width: 56px;
  height: 56px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
  will-change: transform, filter;
}

.pt-node__wordmark {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white);
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

.pt-node__wordmark-labs {
  font-weight: 400;
  color: var(--color-gray-400);
}

/* Blueprint active loader line */
.pt-node__loader {
  width: 140px;
  height: 2px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  margin-top: 0.125rem;
}

.pt-node__loader-bar {
  width: 45%;
  height: 100%;
  border-radius: 9999px;
  box-shadow: 0 0 10px var(--color-blue, #3b82f6);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  will-change: transform;
}

/* ── Forward Sweep (Left → Right) ─────────────────────────── */
.page-transition[data-direction="forward"] .pt-node__loader-bar,
.page-transition:not([data-direction]) .pt-node__loader-bar {
  background: linear-gradient(90deg, transparent, var(--color-blue, #3b82f6), #60a5fa, transparent);
}

.pt--leaving[data-direction="forward"] .pt-node__loader-bar,
.pt--leaving:not([data-direction]) .pt-node__loader-bar {
  animation: ptLoaderScanForward 1.4s cubic-bezier(0.4, 0, 0.2, 1) 500ms infinite;
}

html.pt-pre-enter:not(.pt-pre-enter-backward) .pt-node__loader-bar {
  animation: ptLoaderScanForward 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

/* ── Backward Sweep (Right → Left) ────────────────────────── */
.page-transition[data-direction="backward"] .pt-node__loader-bar {
  background: linear-gradient(90deg, transparent, #60a5fa, var(--color-blue, #3b82f6), transparent);
}

.pt--leaving[data-direction="backward"] .pt-node__loader-bar {
  animation: ptLoaderScanBackward 1.4s cubic-bezier(0.4, 0, 0.2, 1) 500ms infinite;
}

html.pt-pre-enter-backward .pt-node__loader-bar {
  animation: ptLoaderScanBackward 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

.pt-node__ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid rgba(59, 130, 246, 0.35);
  opacity: 0;
}


/* ══════════════════════════════════════════════════════════════
   LEAVING STATE — Panels cover the viewport
   ══════════════════════════════════════════════════════════════ */

/* Grid draws from center */
.pt--leaving .pt-grid {
  animation: ptGridIn 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pt--leaving .pt-glow {
  opacity: 1;
}

@keyframes ptGridIn {
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

/* Panels scale up to cover viewport */
.pt--leaving .pt-panel {
  animation: ptPanelCover 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ptPanelCover {
  to {
    transform: scaleY(1);
  }
}

/* Stagger: Forward (left → right) */
.pt--leaving[data-direction="forward"] .pt-panel:nth-child(1) { animation-delay: 60ms; }
.pt--leaving[data-direction="forward"] .pt-panel:nth-child(2) { animation-delay: 160ms; }
.pt--leaving[data-direction="forward"] .pt-panel:nth-child(3) { animation-delay: 260ms; }
.pt--leaving[data-direction="forward"] .pt-panel:nth-child(4) { animation-delay: 360ms; }
.pt--leaving[data-direction="forward"] .pt-panel:nth-child(5) { animation-delay: 460ms; }

/* Stagger: Backward (right → left) */
.pt--leaving[data-direction="backward"] .pt-panel:nth-child(1) { animation-delay: 460ms; }
.pt--leaving[data-direction="backward"] .pt-panel:nth-child(2) { animation-delay: 360ms; }
.pt--leaving[data-direction="backward"] .pt-panel:nth-child(3) { animation-delay: 260ms; }
.pt--leaving[data-direction="backward"] .pt-panel:nth-child(4) { animation-delay: 160ms; }
.pt--leaving[data-direction="backward"] .pt-panel:nth-child(5) { animation-delay: 60ms; }

/* Monogram flashes in */
.pt--leaving .pt-node {
  animation: ptNodeIn 300ms cubic-bezier(0.16, 1, 0.3, 1) 500ms forwards;
}

@keyframes ptNodeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Ring expands outward */
.pt--leaving .pt-node__ring {
  animation: ptRingPulse 400ms cubic-bezier(0.16, 1, 0.3, 1) 550ms forwards;
}

@keyframes ptRingPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* Continuous breathing pulse while waiting for page load */
.pt--leaving .pt-node__mark,
html.pt-pre-enter .pt-node__mark {
  animation: ptMarkBreathe 2.4s ease-in-out infinite alternate 800ms;
}

@keyframes ptMarkBreathe {
  0% {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 22px rgba(59, 130, 246, 0.85));
    transform: scale(1.06);
  }
}


/* ══════════════════════════════════════════════════════════════
   COVERED STATE — Panels fully covering viewport (no animation)
   Applied instantly on new page load to prevent content flash.
   ══════════════════════════════════════════════════════════════ */

/* Inline script on <html> sets this class before first paint */
html.pt-pre-enter .page-transition {
  pointer-events: all;
}

html.pt-pre-enter .pt-grid {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
}

html.pt-pre-enter .pt-glow {
  opacity: 1;
}

html.pt-pre-enter .pt-panel {
  transform: scaleY(1);
}

html.pt-pre-enter .pt-node {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


/* ══════════════════════════════════════════════════════════════
   ENTERING STATE — Panels uncover, revealing new page
   ══════════════════════════════════════════════════════════════ */

/* Monogram fades out first */
.pt--entering .pt-node {
  animation: ptNodeOut 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ptNodeOut {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
}

/* Panels retract upward (transform-origin switches to top) */
.pt--entering .pt-panel {
  transform: scaleY(1);
  transform-origin: top center;
  animation: ptPanelUncover 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ptPanelUncover {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

/* Stagger: Forward (left → right uncover) */
.pt--entering[data-direction="forward"] .pt-panel:nth-child(1) { animation-delay: 60ms; }
.pt--entering[data-direction="forward"] .pt-panel:nth-child(2) { animation-delay: 160ms; }
.pt--entering[data-direction="forward"] .pt-panel:nth-child(3) { animation-delay: 260ms; }
.pt--entering[data-direction="forward"] .pt-panel:nth-child(4) { animation-delay: 360ms; }
.pt--entering[data-direction="forward"] .pt-panel:nth-child(5) { animation-delay: 460ms; }

/* Stagger: Backward (right → left uncover) */
.pt--entering[data-direction="backward"] .pt-panel:nth-child(1) { animation-delay: 460ms; }
.pt--entering[data-direction="backward"] .pt-panel:nth-child(2) { animation-delay: 360ms; }
.pt--entering[data-direction="backward"] .pt-panel:nth-child(3) { animation-delay: 260ms; }
.pt--entering[data-direction="backward"] .pt-panel:nth-child(4) { animation-delay: 160ms; }
.pt--entering[data-direction="backward"] .pt-panel:nth-child(5) { animation-delay: 60ms; }

/* Grid fades out with a slight delay (lingers like a drafting table) */
.pt--entering .pt-grid {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
  animation: ptGridOut 350ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}

.pt--entering .pt-glow {
  animation: ptGridOut 350ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards;
}

@keyframes ptGridOut {
  to {
    opacity: 0;
  }
}

/* Page content entrance (applied to body) */
body.pt-content-enter {
  animation: ptContentEnter 450ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

@keyframes ptContentEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — Respect accessibility preference
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none !important;
  }

  html.pt-pre-enter .page-transition {
    display: none !important;
  }

  body.pt-content-enter {
    animation: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   LIGHT THEME ADJUSTMENTS
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] .pt-panel {
  background: var(--color-navy-deep, #f8fafc);
  outline: 1px solid var(--color-navy-deep, #f8fafc);
}

[data-theme="light"] .pt-grid {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(37, 99, 235, 0.22) 0px,
      rgba(37, 99, 235, 0.22) 1px,
      transparent 1px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(37, 99, 235, 0.22) 0px,
      rgba(37, 99, 235, 0.22) 1px,
      transparent 1px,
      transparent 80px
    );
  background-position: center center;
}

[data-theme="light"] .pt-node__wordmark {
  color: var(--color-navy, #1a1f36);
  text-shadow: 0 0 16px rgba(37, 99, 235, 0.25);
}

[data-theme="light"] .pt-node__wordmark-labs {
  color: var(--color-gray-500, #4b5563);
}