/* ns-inno.agur.md: the NSinno brand site, dark throughout. Colours are tokens.css names only; cobalt only as small marks (label markers, the
   email's underline, the focus ring; the lead crane comes from the mark file itself). Without the "motion" class (no
   JavaScript, or reduced motion) the page is a plain readable column. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/assets/fonts/plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface); }
body {
  margin: 0; color: var(--ink); background: transparent;
  font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; border-radius: var(--radius-sm); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; padding: 12px 16px; border-radius: var(--radius-lg);
  background: var(--action); color: var(--on-action); text-decoration: none; }
.skip:focus { top: 12px; }

/* the ground without the flock: a faint raised glow in the middle of the dark (main.js draws a dithered one in WebGL) */
.vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--surface-raised) 45%, var(--surface)) 0%, var(--surface) 75%);
}
.flock .vignette { display: none; }
.sky { display: none; }
.motion .sky { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 56px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.nav-inner { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: block; padding: 10px 0; }
.nav-brand img { height: 20px; width: auto; }
.nav-link { color: var(--ink-muted); text-decoration: none; font-size: 14px; letter-spacing: 0.01em; padding: 12px 2px; transition: color .3s; }
.nav-link:hover { color: var(--ink); }

/* ---------- type ---------- */
.label {
  margin: 0; font-family: var(--font-mono); font-size: var(--type-label-size); line-height: var(--type-label-line);
  font-weight: var(--type-label-weight); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
}
.label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 12px 1px 0; border-radius: 50%;
  background: var(--cobalt); vertical-align: middle; }
h1 {
  margin: 20px auto 22px; max-width: 15ch; font-size: clamp(44px, 6.6vw, 104px); line-height: 0.98;
  font-weight: 600; letter-spacing: -0.048em; text-wrap: balance;
}
.sub { margin: 0; color: var(--ink-muted); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -0.005em; }
.line {
  margin: 0; max-width: 17ch; text-align: center; font-size: clamp(34px, 5.6vw, 84px); line-height: 1.04;
  font-weight: 600; letter-spacing: -0.042em; text-wrap: balance;
}
/* a soft dark field behind the first line, which the flock wheels around; main.js fades it with the words (--field) */
.motion .scene-1 .line { position: relative; }
.motion .scene-1 .line::before { content: ""; position: absolute; inset: -30% -18%; z-index: -1; pointer-events: none;
  opacity: var(--field, 0);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--surface) 78%, transparent), transparent); }
/* the tagline under the last line, smaller and in the muted ink */
.tag { margin: 18px auto 0; max-width: 26ch; text-align: center; font-size: clamp(20px, 2.4vw, 36px); line-height: 1.2;
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink-muted); text-wrap: balance; }
.scene-mark .line { max-width: 24ch; }
/* words, once main.js has split the big lines: a cool light fall-off down each line */
[data-split] .w {
  display: inline-block;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 52%, color-mix(in srgb, var(--ink) 70%, var(--ash)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em; margin-bottom: -0.06em;
}
.tag .w { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink-muted); }

/* ---------- scenes: a plain column without motion ---------- */
main { position: relative; z-index: 1; }
.scene .sticky { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px 24px 48px; text-align: center; }
.scene-hero .sticky { padding-top: 140px; }
.hero-copy { width: min(1100px, 100%); text-align: center; }
.cue { display: none; }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 48px; }
.lockup .mark { width: min(40vh, 68vw, 380px); height: auto; aspect-ratio: 1; }
.lockup .word { width: min(22vh, 42vw, 200px); height: auto; }

/* ---------- scenes: pinned, with motion ---------- */
.motion .scene-hero { height: 170vh; }
.motion .scene-1 { height: 240vh; }
.motion .scene-2 { height: 270vh; }
.motion .scene-mark { height: 300vh; }
.motion .scene .sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; padding: 0 24px; overflow: hidden; }
.motion .hero-copy { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(1100px, calc(100% - 48px)); }
.motion .hero-copy .label, .motion .hero-copy .sub, .motion .line .w, .motion .tag .w, .motion .lockup .word,
.motion .contact > * { opacity: 0; will-change: opacity, transform, filter; }
.motion .lockup { margin-top: 6vh; }
.motion.flock .lockup .mark { opacity: 0; }

.motion .cue { display: block; position: absolute; left: 50%; bottom: 3.2vh; width: 1px; height: 44px; margin-left: -0.5px;
  background: color-mix(in srgb, var(--ash) 35%, transparent); overflow: hidden; opacity: 0; }
.motion .cue span { position: absolute; left: 0; top: -14px; width: 1px; height: 14px; background: var(--ink); animation: cue 2.4s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(62px); } }

/* the second line sits in the mouth of the skein, which opens to the right */
@media (min-aspect-ratio: 1/1) {
  .motion .scene-2 .sticky { align-items: flex-start; }
  .motion .scene-2 .line { position: absolute; left: 51vw; top: 50%; transform: translateY(-46%); max-width: 11ch; text-align: left; }
}
@media (max-aspect-ratio: 1/1) {
  .motion .scene-2 .line { position: absolute; left: 24px; right: 24px; bottom: 13vh; margin: 0 auto; }
  .motion .scene-1 .line { max-width: 12ch; }
}

/* ---------- contact and footer ---------- */
.contact { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 140px 24px; text-align: center; }
.email {
  margin: 26px 0 28px; font-size: clamp(46px, 10.5vw, 168px); line-height: 1; font-weight: 600; letter-spacing: -0.055em;
  color: var(--ink); text-decoration: none; padding: 0 0.04em 0.1em;
  background: linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 0% 3px no-repeat;
  transition: background-size .6s cubic-bezier(.2,.7,.2,1);
}
.email:hover, .email:focus-visible { background-size: 100% 3px; }
.foot {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px;
  padding: 36px 24px 52px; border-top: 1px solid var(--line); color: var(--ink-muted);
  font-size: var(--type-small-size); line-height: var(--type-small-line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.foot p { margin: 0; }
.foot img { height: 18px; width: auto; }
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; }
  .scene .sticky, .contact { padding-left: 16px; padding-right: 16px; }
  .motion .hero-copy { width: calc(100% - 32px); bottom: 13vh; }
  h1 { margin: 16px auto 18px; }
  .foot { flex-direction: column; gap: 8px; }
}

/* ---------- the 404 page (no script there, so nothing is hidden) ---------- */
.nf-mark { width: 72px; height: 72px; margin-bottom: 32px; }
.contact .line { margin: 0 auto 36px; }
.button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-lg);
  background: var(--action); color: var(--on-action); text-decoration: none; font-weight: 500; }
.button:hover { background: color-mix(in srgb, var(--action) 88%, var(--surface)); }