/* =========================================
   GOOGLE FONT IMPORTS
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&family=Outfit:wght@200;300;400;500&display=swap');


/* =========================================
   GLOBAL
========================================= */

:root {
  --np-white: #f7f8fa;
  --np-text: #111318;

  --np-fade: rgba(17, 19, 24, 0.42);

  --np-blue: #8ca6c7;
  --np-purple: #b9addf;

  /* soft periwinkle display text (e.g. "we build realities") */
  --np-text-soft: #9197b8;

  /* accents */
  --np-accent-1: #e3d9f5;
  --np-accent-2: #e4e4f6;
  --np-accent-3: #d8d4f6;

  --np-gradient:
    linear-gradient(
      90deg,
      #8ca6c7 0%,
      #b9addf 100%
    );
}

body {
  background: var(--np-white);
  color: var(--np-text);
  font-family: 'Inter', sans-serif;
}



/* =========================================
   MAIN HERO / LOGO
   NEATPOLYGONS
========================================= */

.np-logo {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(42px, 7vw, 120px);
  font-weight: 500;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  line-height: 0.9;

  color: rgba(17, 19, 24, 0.9);
}


/* faded letters */
.np-logo .fade {
  opacity: 0.42;
}


/* subtle highlighted letters */
.np-logo .accent {
  background: var(--np-gradient);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0.95;
}



/* =========================================
   SMALL UI TEXT
   WE BUILD REALITIES...
========================================= */

.np-ui-label {
  font-family: 'Inter', sans-serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.34em;
  text-transform: uppercase;

  color: rgba(17, 19, 24, 0.55);
}



/* =========================================
   SECTION HEADINGS
   EXPERIENTIAL WORLDS
========================================= */

.np-heading {
  font-family: 'Manrope', sans-serif;

  font-size: clamp(28px, 4vw, 64px);
  font-weight: 400;

  letter-spacing: 0.08em;
  line-height: 1;

  color: rgba(17, 19, 24, 0.92);
}



/* =========================================
   COMING SOON
========================================= */

.np-coming-soon {
  font-family: 'Outfit', sans-serif;

  font-size: 13px;
  font-weight: 300;

  letter-spacing: 0.42em;
  text-transform: uppercase;

  color: rgba(17, 19, 24, 0.42);
}



/* =========================================
   NORMAL BODY TEXT
========================================= */

.np-body {
  font-family: 'Inter', sans-serif;

  font-size: 16px;
  font-weight: 400;

  line-height: 1.7;

  color: rgba(17, 19, 24, 0.72);
}



/* =========================================
   ETHEREAL GRADIENT TEXT
========================================= */

.np-gradient-text {
  background: var(--np-gradient);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* =========================================
   GLASS PANEL
========================================= */

.np-glass {
  background: rgba(255, 255, 255, 0.42);

  backdrop-filter: blur(24px);

  border: 1px solid rgba(255,255,255,0.45);

  box-shadow:
    0 10px 40px rgba(120,120,160,0.08);
}



/* =========================================
   ETHEREAL BACKGROUND
========================================= */

.np-ethereal-bg {
  background:
    radial-gradient(
      circle at top left,
      rgba(140,166,199,0.12),
      transparent 30%
    ),

    radial-gradient(
      circle at top right,
      rgba(185,173,223,0.12),
      transparent 35%
    ),

    linear-gradient(
      to bottom,
      #ffffff,
      #f5f7fb
    );
}



/* =========================================
   STAGING SITE — LAYOUT
   (reuses the neatpolygons fonts + palette above)
========================================= */

.stg-page {
  position: relative;
  /* solid fallback that shows through behind the clouds backdrop (and if the
     image fails to load) */
  background: var(--np-white);
}

/* clouds backdrop — sits behind the citadel and 3D canvas. Fits the viewport
   width, keeps its natural aspect (so it runs taller than the screen) and is
   anchored to the top; the scroll-keyframe engine drives opacity + vertical
   position (animations.json -> clouds.opacity / x / y). */
.stg-clouds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: -2;        /* behind .stg-citadel (z-index -1) and #bg-canvas (0) */
  pointer-events: none;
  transform-origin: top center;
}

/* mouse glitch lens — full-viewport overlay above everything. The radial mask
   (centred on the cursor via --mx/--my) limits the backdrop-filter to a soft
   circle around the pointer. JS sets display/filter/--mx/--my; hidden by default. */
.stg-fx-lens {
  position: fixed;
  inset: 0;
  z-index: 50;            /* above content (1) + topbar (10), below the dev GUI */
  pointer-events: none;
  display: none;
  --mx: 50%;
  --my: 50%;
  --r: 180px;
  -webkit-mask: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 28%, rgba(0,0,0,0.35) 65%, transparent 100%);
          mask: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 28%, rgba(0,0,0,0.35) 65%, transparent 100%);
}

/* cursor-replacement dot — a real element, so style it with proper CSS here.
   JS sets left/top (pointer position), width/height (dotSize) and display. */
.stg-cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);   /* centre on the pointer */
  pointer-events: none;
  z-index: 65;                         /* above the shard canvas (60) */
  display: none;
  background: radial-gradient(circle closest-side,
    #8b5cf6 0%,
    rgba(139, 92, 246, 0.9) 32%,
    rgba(139, 92, 246, 0.35) 68%,
    rgba(139, 92, 246, 0) 100%);
}

/* hide the OS cursor everywhere while the dot is active */
.stg-hide-cursor,
.stg-hide-cursor * { cursor: none !important; }

.stg-page *,
.stg-page *::before,
.stg-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* non-selectable: no text-selection highlight or I-beam cursor */
  -webkit-user-select: none;
  user-select: none;
}

.stg-page a { text-decoration: none; color: inherit; }
.stg-page ul { list-style: none; }

.stg-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* full-screen Three.js background canvas, behind all content */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
}


/* top banner bar — logo left, buttons right */
.stg-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 6px clamp(20px, 5vw, 64px);

  background: rgba(247, 248, 250, 0.55);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--np-accent-3);
}

.stg-logo { display: inline-flex; align-items: center; }

/* 3D glass logos (logo3d.js renders a GLB into each canvas) */
.stg-logo3d { display: block; }

/* topbar mark — the glass "N" */
.stg-logo .stg-logo3d {
  width: 80px;
  height: 80px;
}

.stg-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}

.stg-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(17, 19, 24, 0.55);
  transition: color 0.18s ease;
}

.stg-nav a:hover { color: var(--np-text); }


/* hero fills the viewport; title is centered */
.stg-hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* top-left headline, just under the banner */
.stg-headline {
  position: absolute;
  top: clamp(124px, 19vh, 200px);
  left: clamp(28px, 9vw, 165px);

  font-family: 'Manrope', sans-serif;
  font-size: clamp(13px, 1.2vw, 28px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--np-text-soft);
}

/* centered title image + tagline */
.stg-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 0 24px;
}

/* hero lockup: the glass "N" stacked above the glass wordmark */
.stg-title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 22px);
}

/* single canvas holding the stacked N + wordmark lockup */
.stg-hero-lockup {
  width: clamp(280px, 60vw, 820px);
  height: clamp(240px, 30vw, 460px);
}

.stg-title {
  --stg-title-fill: #5f3a92;
  --stg-title-mask: url('/static/logo.svg') center / contain no-repeat;

  position: relative;
  width: clamp(260px, 56vw, 860px);
  aspect-ratio: 2345.67 / 1596.39;
  display: block;
  background: var(--stg-title-fill);
  -webkit-mask: var(--stg-title-mask);
          mask: var(--stg-title-mask);
}

.stg-title::before,
.stg-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--stg-title-mask);
          mask: var(--stg-title-mask);
}

.stg-title::before {
  background:
    linear-gradient(145deg, rgba(20, 11, 38, 0.28), transparent 32%),
    radial-gradient(circle at 68% 64%, rgba(255, 255, 255, 0.1), transparent 30%);
  mix-blend-mode: multiply;
}

.stg-title::after {
  background: var(--stg-title-fill);
  filter: url(#stg-title-inset);
}

/* citadel — large faint mark sitting in the very back, behind the 3D canvas */
.stg-citadel {
  position: fixed;
  right: 0;
  top: 26%;
  width: clamp(40px, 22vw, 520px);
  opacity: 0.3;
  z-index: -1;        /* behind #bg-canvas (z-index 0) */
  pointer-events: none;
  /* anchored to the right edge: scroll-keyframe scale grows leftward from the
     right of the screen rather than ballooning out from the element's centre */
  transform-origin: right center;
}

.stg-citadel img {
  width: 100%;
  height: auto;
  display: block;
  animation: stg-float 6s ease-in-out infinite;
}

@keyframes stg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.stg-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 1.05vw, 19px);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(17, 19, 24, 0.5);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.stg-tagline .dot { color: var(--np-purple); }


/* "coming soon" with a soft gradient rule on each side */
.stg-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;

  margin-top: clamp(40px, 9vh, 110px);

  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.34em;
}

.stg-coming-soon .stg-line {
  height: 2px;
  width: clamp(80px, 14vw, 220px);
  background: linear-gradient(90deg, transparent, var(--np-purple));
}

.stg-coming-soon .stg-line:last-child {
  background: linear-gradient(90deg, var(--np-purple), transparent);
}


/* scroll cue at the bottom of the hero — fades out as the intro plays */
.stg-scroll-cue {
  position: absolute;
  bottom: clamp(20px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(17, 19, 24, 0.4);
  opacity: 0.7; /* JS overrides this to fade the cue out as you scroll */

  animation: stg-cue-bob 2.4s ease-in-out infinite;
}

/* only animate transform — opacity is driven by JS during the intro */
@keyframes stg-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 5px); }
}


/* placeholder sections below the pinned hero */
.stg-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 8vh 24px;
}

/* portal embedded in a section's flow (section-portal.js renders into it).
   aspect-ratio matches the mask art (382x957) so the canvas frames it tightly. */
.stg-portal {
  display: block;
  height: 72vh;
  aspect-ratio: 382 / 957;
  max-width: 86vw;
  margin: 0 auto;
}

/* A portal sits BEHIND the 3D model: the bg-canvas (#bg-canvas, z-index 0) clears
   transparent, so the model geometry occludes the portal where they overlap while the
   portal shows through everywhere else. The portal can't escape its section's stacking
   context on its own (.stg-section is position:relative z-index:1), so we drop the whole
   portal-bearing section below the bg-canvas instead. */
.stg-section:has(.stg-portal) {
  z-index: -1;
}

.stg-section__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(17, 19, 24, 0.4);
}

.stg-section__title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(28px, 4vw, 64px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--np-text-soft);
}

.stg-section__hint {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(17, 19, 24, 0.42);
  max-width: 42ch;
}


@media (max-width: 680px) {
  .stg-hero {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 200px;
    gap: 12vh;
  }
  .stg-headline {
    position: static;
    width: 100%;
    text-align: center;
  }
}