/* Neos intro. Timings in one place: the mark draws 0.1-1.0 s, fills 0.8-1.35 s, the words land by
   2.1 s, the seam opens at 2.5 s (neos-intro.js) and the panels have gone by 3.4 s. */
html.nx-playing { overflow: hidden; }
.nx {
  position: fixed; inset: 0; z-index: 10000; pointer-events: auto;
  --nx-gold: #c9a962; --nx-ease: cubic-bezier(.22, 1, .36, 1);
}
/* Nothing moves until neos-intro.js adds .nx-go (page scripts done, first frame painted). */
.nx:not(.nx-go):not(.nx-open) * { animation-play-state: paused !important; }
.nx-panel {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: radial-gradient(120% 90% at 50% 100%, #152238 0%, #0a1628 45%, #050b14 100%);
}
.nx-top { top: 0; }
.nx-bottom { bottom: 0; transform: scaleY(-1); }

/* Survey contours */
.nx-terrain { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-terrain path {
  fill: none; stroke: var(--nx-gold); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-opacity: .13; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: nx-draw 1.8s var(--nx-ease) calc(var(--c) * 45ms) forwards;
}

/* The mark and wordmark */
.nx-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3.2vh, 30px);
}
.nx-logo { width: auto; height: min(40vh, 300px, 60vw); overflow: visible; }
.nx-ribbon {
  fill: url(#nx-silver); fill-opacity: 0;
  stroke: var(--nx-gold); stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round;
  animation: nx-draw .9s cubic-bezier(.65, 0, .35, 1) .1s forwards, nx-fill .55s ease-out .85s forwards;
}
#nx-r2 { fill: url(#nx-silver-2); animation-delay: .25s, .95s; }
.nx-mark { opacity: 0; animation: nx-fade .7s ease-out .9s forwards; }
.nx-sheen { animation: nx-sheen .8s cubic-bezier(.45, 0, .2, 1) 1.15s forwards; }
.nx-letter { fill: #faf9f7; opacity: 0; transform-box: fill-box; }
.nx-word { animation: nx-rise .6s var(--nx-ease) calc(1.05s + var(--i) * 60ms) forwards; }
.nx-sub { animation: nx-track .7s var(--nx-ease) calc(1.3s + var(--i) * 25ms) forwards; }
.nx-tag {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font: 600 clamp(10px, 1.1vw, 12px)/1 'DM Sans', Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase;
  color: var(--nx-gold); opacity: 0; animation: nx-fade .6s ease-out 1.65s forwards;
}
.nx-tag span { display: block; width: 34px; height: 1px; background: var(--nx-gold); transform: scaleX(0); animation: nx-grow .7s var(--nx-ease) 1.55s forwards; }
.nx-tag span:first-child { transform-origin: right; }
.nx-tag span:last-child { transform-origin: left; }
/* Phones: the tagline drops its rules and may wrap to two centred lines. */
@media (max-width: 560px) {
  .nx-tag { max-width: calc(100vw - 48px); text-align: center; line-height: 1.7; letter-spacing: .2em; }
  .nx-tag span { display: none; }
}

.nx-skip {
  position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vh, 30px);
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: 500 11px/1 'DM Sans', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(250, 249, 247, .45); opacity: 0; animation: nx-fade .5s ease-out .6s forwards;
}
.nx-skip:hover { color: var(--nx-gold); }

/* The reveal: the mark steps back, a gold seam runs across, the panels part along it. */
.nx-seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--nx-gold) 18%, #dfc078 50%, var(--nx-gold) 82%, transparent);
  box-shadow: 0 0 14px rgba(223, 192, 120, .55);
}
.nx-open .nx-stage { animation: nx-recede .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.nx-open .nx-terrain, .nx-open .nx-skip { animation: nx-out .35s ease-in forwards; }
.nx-open .nx-seam { animation: nx-seam .9s cubic-bezier(.65, 0, .35, 1) .1s forwards; }
.nx-open .nx-top { animation: nx-up .85s cubic-bezier(.7, 0, .2, 1) .42s forwards; }
.nx-open .nx-bottom { animation: nx-down .85s cubic-bezier(.7, 0, .2, 1) .42s forwards; }
.nx-open { pointer-events: none; }

/* The hero waits under the panels, then settles in. */
html.nx-playing .site-header,
html.nx-playing .hero-copy-column > *,
html.nx-playing .connection-panel,
html.nx-playing .hero-caption { opacity: 0; }
/* will-change keeps the photo on its own layer from the start, so the reveal doesn't have to draw it mid-motion. */
html.nx-playing .hero-media { transform: scale(1.06); will-change: transform; }
html.nx-reveal .hero-media { transform: none; will-change: transform; transition: transform 1.8s var(--ease-settle, cubic-bezier(.22, 1, .36, 1)); }
html.nx-reveal .hero-copy-column > * { animation: nx-hero .9s var(--ease-settle, cubic-bezier(.22, 1, .36, 1)) both; }
html.nx-reveal .hero-copy-column > :nth-child(2) { animation-delay: .08s; }
html.nx-reveal .hero-copy-column > :nth-child(3) { animation-delay: .16s; }
html.nx-reveal .hero-copy-column > :nth-child(4) { animation-delay: .22s; }
html.nx-reveal .hero-copy-column > :nth-child(5) { animation-delay: .28s; }
html.nx-reveal .connection-panel { animation: nx-fade 1s ease-out .3s both; }
html.nx-reveal .site-header, html.nx-reveal .hero-caption { animation: nx-fade .8s ease-out .35s both; }

@keyframes nx-draw { to { stroke-dashoffset: 0; } }
@keyframes nx-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes nx-sheen { from { transform: skewX(-20deg) translateX(0); } to { transform: skewX(-20deg) translateX(1700px); } }
@keyframes nx-rise { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
@keyframes nx-track { from { opacity: 0; transform: translateX(calc(var(--o) * 22%)); } to { opacity: 1; transform: none; } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-grow { to { transform: scaleX(1); } }
@keyframes nx-out { to { opacity: 0; } }
@keyframes nx-recede { to { opacity: 0; transform: scale(.94); } }
@keyframes nx-seam { 0% { opacity: 1; transform: scaleX(0); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes nx-up { to { transform: translateY(-100%); } }
@keyframes nx-down { to { transform: translateY(100%) scaleY(-1); } }
@keyframes nx-hero { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }