/* The doorway. Two ways into the estate: the living map, or the curated gallery.
   Everything here is scoped under .nbsplash. The overlay is built by splash.js at
   runtime, so if that script fails this file paints nothing and the suite is
   untouched underneath. That is deliberate: the front door must never be a gate. */

.nbsplash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  gap: clamp(18px, 4vh, 44px);
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: #05070d;
  color: #e8eef6;
  font-family: Quicksand, ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  opacity: 0;
  animation: nb-in .5s cubic-bezier(.22,.9,.3,1) forwards;
}
.nbsplash[data-leaving="1"] { animation: nb-out .62s cubic-bezier(.6,0,.2,1) forwards; }

@keyframes nb-in  { to { opacity: 1 } }
@keyframes nb-out { to { opacity: 0; transform: scale(1.06) } }

/* the drifting synapse field */
.nbsplash canvas.nb-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: .55;
}
.nbsplash .nb-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(5,7,13,.72) 78%, #05070d 100%);
}

/* ---- crown: the reactor mark ---------------------------------------- */
.nb-crown { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; text-align: center; }
.nb-ring { width: clamp(86px, 13vh, 128px); height: clamp(86px, 13vh, 128px); display: block; }
.nb-ring circle { fill: none; stroke-linecap: round; transform-origin: 60px 60px; }
.nb-ring .t  { stroke: rgba(94,234,212,.13); stroke-width: 1 }
.nb-ring .d  { stroke: url(#nbg); stroke-width: 2.2; stroke-dasharray: 320; stroke-dashoffset: 320;
               animation: nb-draw 1.5s cubic-bezier(.3,.8,.3,1) .12s forwards }
.nb-ring .a  { stroke: rgba(94,234,212,.5); stroke-width: 1.2; stroke-dasharray: 22 300;
               animation: nb-spin 5.5s linear infinite }
.nb-ring .b  { stroke: rgba(167,139,250,.45); stroke-width: 1; stroke-dasharray: 12 260;
               animation: nb-spin 8s linear reverse infinite }
.nb-ring .c  { fill: #5eead4; stroke: none; animation: nb-pulse 2.6s ease-in-out infinite }

@keyframes nb-draw  { to { stroke-dashoffset: 0 } }
@keyframes nb-spin  { to { transform: rotate(360deg) } }
@keyframes nb-pulse { 0%,100% { opacity:.5; r:2.5 } 50% { opacity:1; r:4 } }

.nb-word {
  margin: 0; font-size: clamp(20px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: .42em; text-indent: .42em; line-height: 1;
  animation: nb-rise .7s cubic-bezier(.22,.9,.3,1) .3s both;
}
.nb-sub {
  margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .3em; color: #5eead4; opacity: .8;
  animation: nb-rise .7s cubic-bezier(.22,.9,.3,1) .42s both;
}
@keyframes nb-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ---- the two doors --------------------------------------------------- */
.nb-doors {
  position: relative; z-index: 2; width: min(940px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 22px);
}
.nb-door {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: end; gap: 8px; min-height: clamp(210px, 32vh, 290px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  color: inherit; text-decoration: none; text-align: left; cursor: pointer;
  font: inherit;
  transition: transform .4s cubic-bezier(.22,.9,.3,1), border-color .3s ease, box-shadow .4s ease;
  animation: nb-rise .8s cubic-bezier(.22,.9,.3,1) both;
}
.nb-door:nth-child(1) { animation-delay: .54s }
.nb-door:nth-child(2) { animation-delay: .66s }

.nb-door::before { /* the accent wash that wakes on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(120% 90% at 20% 110%, var(--nb-accent), transparent 62%);
  transition: opacity .45s ease;
}
.nb-door:hover, .nb-door:focus-visible { transform: translateY(-6px); border-color: var(--nb-line); }
.nb-door:hover::before, .nb-door:focus-visible::before { opacity: .3 }
.nb-door:focus-visible { outline: 2px solid var(--nb-line); outline-offset: 3px }
.nb-door:active { transform: translateY(-2px) scale(.995) }

.nb-door canvas.nb-prev { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .5;
  transition: opacity .45s ease }
.nb-door:hover canvas.nb-prev, .nb-door:focus-visible canvas.nb-prev { opacity: .95 }

.nb-kick {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .26em; color: var(--nb-line); opacity: .95;
}
.nb-name { margin: 0; font-size: clamp(21px, 2.7vw, 29px); font-weight: 700; letter-spacing: .012em; line-height: 1.08 }
.nb-copy { margin: 0; font-size: 13.5px; line-height: 1.5; color: #9fb0c4; max-width: 42ch }
.nb-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .2em; color: var(--nb-line);
}
.nb-go span { transition: transform .35s cubic-bezier(.22,.9,.3,1) }
.nb-door:hover .nb-go span, .nb-door:focus-visible .nb-go span { transform: translateX(6px) }

/* ---- foot ------------------------------------------------------------ */
.nb-foot {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px;
  animation: nb-rise .8s cubic-bezier(.22,.9,.3,1) .82s both;
}
.nb-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .16em; color: #5d6b7d;
}
.nb-stats b { color: #cfe0ee; font-weight: 500 }
.nb-skip {
  background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .22em; color: #64748b; transition: color .25s ease, background .25s ease;
}
.nb-skip:hover { color: #cfe0ee; background: rgba(255,255,255,.05) }
.nb-skip:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; color: #cfe0ee }

/* ---- narrow ---------------------------------------------------------- */
@media (max-width: 720px) {
  .nbsplash { grid-template-rows: auto auto auto; align-content: center; gap: 20px }
  .nb-doors { grid-template-columns: 1fr; gap: 11px; width: 100% }
  .nb-door { min-height: 0; grid-auto-flow: row; padding: 15px 16px; border-radius: 15px; gap: 5px }
  .nb-door .nb-copy { font-size: 12.5px; max-width: none }
  .nb-word { font-size: 19px; letter-spacing: .3em; text-indent: .3em }
  .nb-ring { width: 66px; height: 66px }
}
@media (max-height: 620px) and (min-width: 721px) {
  .nb-door { min-height: 170px }
}

/* Reduced motion: keep both doors and every word, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .nbsplash, .nbsplash[data-leaving="1"], .nb-word, .nb-sub, .nb-door, .nb-foot { animation: none !important; opacity: 1 }
  .nb-ring .d { stroke-dashoffset: 0 }
  .nb-ring .a, .nb-ring .b, .nb-ring .c { animation: none }
  .nb-door, .nb-go span { transition: none }
  .nb-door:hover, .nb-door:focus-visible { transform: none }
  .nbsplash canvas.nb-field { display: none }
}

/* The permanent way across, in the suite's own topbar. */
.neurontab {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; margin-right: 12px; padding: 7px 13px;
  border: 1px solid rgba(94,234,212,.28); border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .18em; color: #5eead4; text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.neurontab::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.neurontab:hover { background: rgba(94,234,212,.12); color: #b7f5e8; border-color: rgba(94,234,212,.55) }
.neurontab:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px }
@media (max-width: 560px) { .neurontab { font-size: 8.5px; padding: 6px 10px; margin-right: 8px; letter-spacing: .12em } }
@media (prefers-reduced-motion: reduce) { .neurontab { transition: none } }

/* --- overflow containment. At 430px the door copy was pushing the grid wider
   than the viewport and the cards ran off the right edge. Grid children need an
   explicit min-width:0 or they refuse to shrink below their content. --- */
.nbsplash { max-width: 100vw; overflow-x: hidden; }
.nb-doors { min-width: 0; max-width: 100%; }
.nb-door  { min-width: 0; max-width: 100%; }
.nb-copy, .nb-name, .nb-kick { min-width: 0; overflow-wrap: anywhere; }

/* --- safety net. The entrance animation uses fill-mode both, which means the
   doors sit at opacity 0 during their delay. If the animation never runs for any
   reason, that would hide the only two controls on the page. splash.js adds
   .nb-ready once the entrance should have finished, so content can never be
   permanently hidden by decoration. Normally this is a no-op. --- */
.nbsplash.nb-ready .nb-door,
.nbsplash.nb-ready .nb-foot,
.nbsplash.nb-ready .nb-word,
.nbsplash.nb-ready .nb-sub { opacity: 1; transform: none; animation: none; }

/* The real cause of the mobile overflow: .nbsplash declared grid-template-rows
   but never columns, so the implicit column sized to the max-content of its
   widest child. One long sentence in .nb-copy therefore set the width of the
   whole overlay. Pin the column to the container and everything shrinks to fit. */
.nbsplash { grid-template-columns: minmax(0, 1fr); }

/* Three doors now, so the row needs to breathe and then stack on a phone. */
@media (min-width: 981px){ .nb-doors { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) and (min-width: 721px){ .nb-doors { grid-template-columns: repeat(3, 1fr); gap: 10px } .nb-door { padding: 15px 15px; min-height: 200px } .nb-name { font-size: 20px } .nb-copy { font-size: 12px } }
.nb-door:nth-child(3) { animation-delay: .78s }

/* Warp: the leave animation used when we are navigating to another page rather
   than dismissing to the suite. Opacity is deliberately held at 1 the whole way,
   because the moment this goes translucent the suite shows through underneath and
   the handoff reads as a flash. It only scales and dims toward the ground colour,
   so the last frame here matches the first frame of the page being opened. */
.nbsplash[data-leaving="warp"]{
  animation: nb-warp .5s cubic-bezier(.5,0,.75,0) forwards;
  pointer-events:none;
}
@keyframes nb-warp{
  0%   { opacity:1; transform:scale(1) }
  100% { opacity:1; transform:scale(1.9); filter:brightness(.35) }
}
.nbsplash[data-leaving="warp"] .nb-doors,
.nbsplash[data-leaving="warp"] .nb-foot{ opacity:0; transition:opacity .18s ease }
@media (prefers-reduced-motion:reduce){
  .nbsplash[data-leaving="warp"]{ animation:none }
}