/* ==========================================================================
   NADIR — Title Sequence presentation layer
   Full-bleed cinematic curtain that hands off to the page.
   ========================================================================== */

.nx-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #060606;
  contain: strict;
  transform: scale(1);
  opacity: 1;
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 760ms ease;
}

.nx-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Lens vignette + faint scanline texture sits above the canvas. */
.nx-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 78% 62% at 50% 48%,
      transparent 38%,
      rgba(0, 0, 0, 0.42) 78%,
      rgba(0, 0, 0, 0.82) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.014) 0 1px,
      transparent 1px 3px
    );
}

/* —— Caption —— */
.nx-caption {
  position: absolute;
  bottom: clamp(4.5rem, 16vh, 9.5rem);
  left: 50%;
  width: min(90vw, 44rem);
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  text-align: center;
  pointer-events: none;
}

.nx-caption-line {
  margin: 0;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nx-caption-sub {
  margin: 0.55rem 0 0;
  color: #86868b;
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* —— Skip —— */
.nx-skip {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  color: rgba(246, 242, 236, 0.62);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background 200ms ease;
}

.nx-skip:hover,
.nx-skip:focus-visible {
  color: #fff;
  border-color: rgba(255, 154, 111, 0.5);
  background: rgba(255, 101, 52, 0.14);
  outline: none;
}

/* —— Progress —— */
.nx-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.nx-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7e2240, #ff6534 62%, #ffcda8);
  transform: scaleX(0);
  transform-origin: left center;
}

/* —— Curtain states —— */
.nx-intro.nx-lifting {
  transform: scale(1.014);
}

.nx-intro.nx-done {
  opacity: 0;
  transform: scale(1.075);
  filter: blur(14px);
  pointer-events: none;
}

/* —— Page handoff —— */
html.nx-intro-active,
html.nx-intro-active body {
  overflow: hidden;
}

html.nx-intro-active .site-shell {
  opacity: 0;
}

/* Painted early, but not from the start. The overlay is fully opaque, so the
   shell can be rasterised under cover; doing it once the mark has resolved —
   when the animation has slack — keeps the homepage's first paint out of the
   busy opening, the click, and the reveal alike. */
html.nx-intro-active.nx-prepaint .site-shell {
  opacity: 1;
}

/* The shell snaps to visible rather than animating: it is the full document,
   and animating opacity or transform across it promotes ~9000px of page into
   one compositor layer, which costs several dropped frames exactly during the
   reveal. The overlay is viewport sized, so it carries the crossfade, and the
   rise motion is applied only to what is actually on screen. */
html.nx-intro-complete .site-shell {
  opacity: 1;
}

html.nx-intro-complete .site-header,
html.nx-intro-complete .ap-hero > *,
html.nx-intro-complete .ap-stage {
  animation: nx-site-rise 1120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.nx-intro-complete .ap-hero > * {
  animation-delay: 90ms;
}

html.nx-intro-complete .ap-stage {
  animation-delay: 180ms;
}

@keyframes nx-site-rise {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The header mark catches up with the wordmark as the curtain lifts. */
html.nx-intro-complete .site-header .brand-mark {
  animation: nx-mark-land 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nx-mark-land {
  from {
    opacity: 0;
    transform: scale(2.4) translateY(10px);
    filter: brightness(1.7);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-intro {
    display: none;
  }

  html.nx-intro-complete .site-header,
  html.nx-intro-complete .ap-hero > *,
  html.nx-intro-complete .ap-stage,
  html.nx-intro-complete .site-header .brand-mark {
    animation: none;
  }
}