/* NSQ.global experience */
:root {
  --cognac: #C27933;
  --parchment: #F0EDE8;
  --void: #191917;
  --text: #F0EDE8;
  --copy-band: 64%;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; min-height: 100%; background: #000;
  font-family: 'Josefin Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color: var(--parchment);
}
body.locked { overflow: hidden; height: 100%; }
body.explore-mode { overflow-y: auto; overflow-x: hidden; }

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  color: var(--parchment); background: #000; padding: 0.5rem 0.8rem;
}
.skip:focus { top: 1rem; }

#stage { position: fixed; inset: 0; background: #000; z-index: 0; }
#poster, #bg-video, #galaxy {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
#poster { object-fit: cover; object-position: center 54%; z-index: 0; opacity: 1; transition: opacity 0.9s ease; }
#poster.hide { opacity: 0; }
#bg-video { object-fit: cover; object-position: center 54%; z-index: 1; opacity: 0; transition: opacity 1s ease; }
#bg-video.ready { opacity: 1; }
#galaxy { z-index: 3; opacity: 0; transition: opacity 1.2s ease; }

#text-layer {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
}
.line, .identity {
  position: absolute; left: 50%;
  text-align: center; font-weight: 300;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.92),
    0 2px 22px rgba(0,0,0,0.88),
    0 0 18px rgba(0,0,0,0.7);
}
.line {
  top: var(--copy-band);
  transform: translate(-50%, -50%);
  max-width: min(86vw, 28rem);
  font-size: clamp(1.12rem, 3.3vw, 1.48rem);
  letter-spacing: 0.03em; line-height: 1.45;
  color: #F0EDE8; opacity: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 0.34em; row-gap: 0.12em;
}
body.arrival .line,
body.journey .line {
  top: var(--copy-band);
  transform: translate(-50%, -50%);
}
.line .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  will-change: transform, opacity;
}
.identity {
  top: auto; bottom: 11.5rem;
  transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(240, 237, 232, 0.62); opacity: 0;
}

#reveal {
  position: fixed; left: 50%; top: var(--copy-band); z-index: 25;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none; user-select: none;
}
#row {
  display: flex; align-items: baseline; justify-content: center;
  font-size: clamp(1.85rem, 6.4vw, 2.95rem);
  line-height: 1; font-weight: 400; white-space: nowrap;
  gap: 0.12em;
}
.unit { display: inline-flex; align-items: baseline; }
.letter {
  color: #F3D7B0;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 0 18px rgba(194,121,51,0.55),
    0 0 28px rgba(243,215,176,0.35);
}
.word {
  display: inline-block;
  color: #F7F3EC; font-size: 0.66em; letter-spacing: 0.03em;
  opacity: 0; white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transform: translateX(-0.12em);
  text-shadow: 0 1px 18px rgba(0,0,0,0.92), 0 0 16px rgba(0,0,0,0.55);
}
#global {
  color: #F0EDE8; font-size: 0.56em;
  letter-spacing: 0.04em;
  margin-left: 0.02em;
  white-space: nowrap; display: inline-block;
  text-shadow: 0 1px 16px rgba(0,0,0,0.9);
}

#menu {
  position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity 1.1s ease;
}
#menu.show { opacity: 1; pointer-events: auto; }
.menu-inner {
  position: relative; display: flex; gap: 2.4rem; align-items: center;
  padding: 0.4rem 1rem 0.85rem;
}
.menu-item {
  background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(240, 237, 232, 0.88); font-weight: 300; padding: 0.35rem 0.2rem;
  transition: color 0.35s ease;
}
.menu-item:hover, .menu-item.active, .menu-item:focus-visible { color: rgba(194, 121, 51, 0.98); }
.menu-line {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 4.5rem; height: 1px;
  background: linear-gradient(90deg, rgba(194,121,51,0) 0%, rgba(194,121,51,0.35) 16%, rgba(194,121,51,0.9) 50%, rgba(194,121,51,0.35) 84%, rgba(194,121,51,0) 100%);
}
#menu-desc {
  position: fixed; top: 3.9rem; left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: min(88vw, 28rem); text-align: center;
  font-size: 0.82rem; letter-spacing: 0.04em; line-height: 1.55;
  color: rgba(240, 237, 232, 0.78); opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease; font-weight: 300;
}
#menu-desc.show { opacity: 1; }

#entry {
  position: fixed; left: 50%; top: var(--copy-band); transform: translate(-50%, -50%);
  z-index: 35; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity 1.2s ease; width: min(90vw, 28rem);
}
#entry.show { opacity: 1; pointer-events: auto; }
#entry .prompt {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #F0EDE8; margin-bottom: 1.05rem; font-weight: 300;
  text-shadow: 0 1px 16px rgba(0,0,0,0.9);
}
#btn-experience {
  background: none; border: 1px solid rgba(194, 121, 51, 0.7);
  color: #F0EDE8; font-family: inherit; cursor: pointer;
  font-size: 0.84rem; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.9rem 2.1rem; font-weight: 300;
  transition: border-color 0.35s ease, color 0.35s ease, background 0.35s ease;
}
#btn-experience:hover, #btn-experience:focus-visible {
  border-color: rgba(194, 121, 51, 0.75);
  color: #F0EDE8;
  background: rgba(194, 121, 51, 0.08);
}
#explore-hint {
  display: block; margin: 1.35rem auto 0; background: none; border: none;
  font-family: inherit; font-size: 0.82rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: #F0EDE8;
  font-weight: 300; cursor: pointer; transition: color 0.35s ease;
  text-shadow: 0 1px 16px rgba(0,0,0,0.9);
}
#explore-hint:hover, #explore-hint:focus-visible { color: var(--cognac); }
#explore-hint .scroll-cue {
  display: block;
  width: 2.8rem; height: 1.15rem;
  margin: 0.7rem auto 0;
  background:
    linear-gradient(90deg, transparent, rgba(194,121,51,0.95), transparent) center 0 / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(194,121,51,0.95), transparent) center 1px / 1px 0.95rem no-repeat;
  opacity: 0.95;
}

#galaxy-ui {
  position: fixed; inset: 0; z-index: 36; pointer-events: none;
}
#galaxy-ui .invite {
  position: absolute; left: 50%; bottom: 5.6rem; transform: translateX(-50%);
  width: min(92vw, 28rem); text-align: center;
  font-size: clamp(1.12rem, 3vw, 1.42rem); font-weight: 300;
  letter-spacing: 0.06em; color: #F7F3EC;
  text-shadow: 0 2px 22px rgba(0,0,0,0.95), 0 0 18px rgba(0,0,0,0.7);
}
#galaxy-ui .center-id { display: none !important; }
#stars { position: absolute; inset: 0; pointer-events: none; }

.star {
  position: absolute;
  transform: translate(-50%, 0);
  pointer-events: auto; background: none; border: 0;
  font-family: inherit; cursor: pointer;
  padding: 1.15rem 0.35rem 0;
  margin-top: 0;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 300; color: #F7F3EC;
  min-width: 5.6rem; text-align: center;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 2px 18px rgba(0,0,0,0.95),
    0 0 14px rgba(0,0,0,0.8);
}
.star-core {
  position: absolute; left: 50%; top: 0;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow:
    0 0 4px 1px rgba(255, 250, 240, 1),
    0 0 14px 5px rgba(243, 215, 176, 0.95),
    0 0 28px 11px rgba(194, 121, 51, 0.75),
    0 0 56px 20px rgba(194, 121, 51, 0.32);
  pointer-events: none;
}
.star-core::before,
.star-core::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.star-core::before {
  width: 78px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,244,220,0.2) 18%, rgba(255,244,220,0.95) 50%, rgba(255,244,220,0.2) 82%, transparent 100%);
  box-shadow: 0 0 10px 1px rgba(194,121,51,0.45);
  opacity: 0.88;
}
.star-core::after {
  width: 2px; height: 42px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,244,220,0.75) 50%, transparent 100%);
  opacity: 0.7;
}
.star:hover, .star:focus-visible, .star.active { color: #F0EDE8; }
.star:hover .star-core,
.star:focus-visible .star-core,
.star.active .star-core {
  width: 9px; height: 9px;
  box-shadow:
    0 0 6px 2px rgba(255, 250, 240, 1),
    0 0 18px 7px rgba(243, 215, 176, 1),
    0 0 36px 14px rgba(194, 121, 51, 0.9),
    0 0 72px 26px rgba(194, 121, 51, 0.42);
}
.star:hover .star-core::before,
.star:focus-visible .star-core::before,
.star.active .star-core::before {
  width: 96px; opacity: 1;
}

#brand-card {
  pointer-events: auto;
  position: absolute; left: 50%; bottom: 8.6rem; transform: translateX(-50%);
  width: min(92vw, 26rem);
  padding: 1.15rem 1.2rem 1rem;
  background: rgba(10, 10, 9, 0.72);
  border: 1px solid rgba(194, 121, 51, 0.22);
  backdrop-filter: blur(10px);
  text-align: left;
}
#brand-card h2 {
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cognac); font-weight: 400; margin-bottom: 0.45rem;
}
#brand-card p {
  font-size: 0.82rem; line-height: 1.5; color: rgba(240, 237, 232, 0.86);
  font-weight: 300; margin-bottom: 0.85rem;
}
#brand-card a, #brand-close {
  font-family: inherit; font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(240, 237, 232, 0.72);
}
#brand-card a { margin-right: 1.1rem; text-decoration: none; }
#brand-card a:hover { color: var(--cognac); }
#brand-close { background: none; border: none; cursor: pointer; padding: 0; }
#brand-close:hover { color: var(--parchment); }

#scroll-track { width: 100%; height: 1100vh; pointer-events: none; }

#site-footer {
  position: fixed; bottom: 1.15rem; left: 50%; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240, 237, 232, 0.78); font-weight: 300;
  opacity: 0; transition: opacity 1.1s ease; pointer-events: none;
  max-width: 94vw; text-align: center;
}
#site-footer.show { opacity: 1; pointer-events: auto; }
#site-footer a { color: rgba(240, 237, 232, 0.86); text-decoration: none; }
#site-footer a:hover { color: var(--cognac); }
#site-footer .dot { opacity: 0.7; }

@media (max-width: 520px) {
  :root { --copy-band: 63%; }
  .menu-inner { gap: 1.45rem; }
  .line {
    font-size: clamp(1.18rem, 4.8vw, 1.42rem);
    color: #F0EDE8;
    max-width: 84vw;
  }
  .identity { bottom: 12.4rem; }
  #brand-card { bottom: 9.2rem; }
  .star { font-size: 0.66rem; min-width: 5rem; padding-top: 1.2rem; color: #F7F3EC; }
  .star-core { width: 8px; height: 8px; }
  .star-core::before { width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  #poster, #bg-video, #galaxy, #menu, #entry, #site-footer, #menu-desc, .line, .identity, .line .w, .word {
    transition: opacity 0.25s linear;
  }
}