/* ============================================================
   Sysverge Solutions / Demo 001
   Palette + type inherited from Sysverge 4.0 production tokens.
   ============================================================ */

:root {
  --void:      #04050d;
  --raise:     #0a0c1a;
  --ink:       #e9ebf3;
  --muted:     #828a9d;
  --muted-2:   #aab0c4;
  --line:      rgba(255, 255, 255, 0.10);
  --volt:      #1d3bff;
  --volt-soft: #6d7fff;
  --flare:     #cfe0ff;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --gut: clamp(20px, 5vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--void); }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--volt-soft);
  outline-offset: 4px;
}

/* ---------- shared type atoms ---------- */

.eyebrow,
.mono-label,
.panel__idx,
.cue__label,
.readout,
.boot__meta {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow__sep,
.mono-label__sep { color: var(--volt); padding: 0 0.4em; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  /* sized for the longest line ("You imagine.") at 320px, not for a short word */
  font-size: clamp(2.5rem, 10.6vw, 8.75rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
}

/* ============ BOOT ============ */

#boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  /* deliberately transparent: the assembling ribbon IS the loading animation,
     so the overlay carries only the readout. The scene is black at assemble 0. */
  background: transparent;
  pointer-events: none;
  display: grid;
  place-items: end center;
  padding: 0 var(--gut) clamp(40px, 12vh, 120px);
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

#boot[data-done="1"] { opacity: 0; pointer-events: none; }

.boot__inner { width: min(520px, 100%); }

.boot__rule {
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.boot__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--volt);
  box-shadow: 0 0 12px var(--volt);
}

.boot__meta {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
}

.boot__pct { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============ STAGE ============ */

#stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* the attribute must beat the ID selector, or the panel paints over a working scene */
#fallback[hidden] { display: none; }

#fallback {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: grid;
  place-content: center;
  gap: 24px;
  justify-items: center;
  text-align: center;
  padding: var(--gut);
  background: var(--void);
  max-width: 46ch;
  margin: 0 auto;
  color: var(--muted-2);
  line-height: 1.6;
}

#fallback a { color: var(--volt-soft); }

/* ============ HERO ============ */
/* All hero content sits IN FRONT of the canvas (z-index 3 vs the stage's 2).
   .hero is the scroll track; .hero__pin is what actually sticks. The extra
   height above one viewport is the distance the zoom plays out over before
   the pin releases.

   .hero must NOT have overflow: hidden. Any ancestor with a clipping overflow
   silently kills position: sticky on its descendant. The clip belongs on the
   pin itself, which still contains the zoom because the type lives inside it. */

.hero {
  position: relative;
  z-index: 3;
  height: 210vh;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback first: svh is dropped on older engines */
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gut);
}

/* held back while the ribbon assembles, so the boot has the stage to itself */
.hero__type,
.hero .cue { transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1); }
body[data-booting] .hero__type,
body[data-booting] .hero .cue { opacity: 0; }

/* the zoom scales the whole type block toward the viewer as it releases */
.hero__type {
  transform-origin: 22% 50%;
  will-change: transform, opacity;
}

/* no max-width here: the display face sets its own measure via the line breaks */
.hero__type { max-width: none; }

.hero .eyebrow { margin-bottom: clamp(20px, 4vh, 40px); }

.hero .lede {
  margin-top: clamp(22px, 4vh, 38px);
  max-width: 34ch;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  color: var(--muted-2);
}

.cue {
  position: absolute;
  left: var(--gut);
  bottom: clamp(24px, 6vh, 56px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.cue__line {
  display: block;
  width: clamp(48px, 8vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, var(--volt), transparent);
}

/* ============ SCRUB ============ */

.scrub {
  position: relative;
  z-index: 3;
  height: 320vh;
}

.scrub__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gut) clamp(40px, 10vh, 96px);
  pointer-events: none;
}

.scrub__caption { max-width: 44ch; }

.scrub .mono-label { margin-bottom: 18px; }

.statement {
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 4vw, 48px);
  margin-top: clamp(28px, 5vh, 52px);
  letter-spacing: 0.16em;
}

.readout__row { display: flex; gap: 10px; }
.readout__row b { font-weight: 500; color: var(--muted); }
.readout__row i {
  font-style: normal;
  color: var(--volt-soft);
  font-variant-numeric: tabular-nums;
}

/* ============ SERVICES ============ */

.services {
  position: relative;
  z-index: 3;
  height: 460vh;
}

.services__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;      /* prevents any page level horizontal scroll */
  display: flex;
  align-items: center;
}

.services__track {
  display: flex;
  gap: clamp(20px, 4vw, 64px);
  padding-inline: var(--gut);
  will-change: transform;
}

.panel {
  flex: 0 0 auto;
  width: min(78vw, 460px);
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 2.4vw, 32px);
  padding-block: clamp(20px, 4vh, 36px);
}

.panel--intro { width: min(86vw, 560px); border-left: 0; padding-left: 0; }

.panel__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-top: 18px;
}

.panel__note { margin-top: 28px; color: var(--volt-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; }

.panel__idx { color: var(--volt); margin-bottom: clamp(14px, 3vh, 26px); }

.panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.panel__body {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 38ch;
}

/* ============ SIGN OFF ============ */

.signoff {
  position: relative;
  z-index: 3;
  min-height: 100vh;   /* fallback first: svh is dropped on older engines,
                          which collapses the section and drops the cue onto the copy */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vh, 28px);
  text-align: center;
  padding: var(--gut);
}

.signoff__mark { width: clamp(52px, 7vw, 76px); height: auto; }

.signoff__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5.5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.signoff__line { color: var(--muted); font-size: 0.95rem; }

.signoff__link {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--volt-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 127, 255, 0.35);
  padding-bottom: 4px;
  margin-top: 10px;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .signoff__link:hover { color: var(--flare); border-color: var(--flare); }
}

/* ============ MOTION TOGGLE ============ */

.motion {
  position: fixed;
  right: var(--gut);
  bottom: clamp(20px, 5vh, 48px);
  z-index: 6;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(10, 12, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.motion__state { color: var(--volt-soft); }

@media (hover: hover) and (pointer: fine) {
  .motion:hover { border-color: var(--volt-soft); color: var(--ink); }
}

/* ============ REDUCED MOTION ============ */
/* Gentler, not zero. The field still renders and still responds to the
   pointer, because that is direct manipulation, not autonomous movement.
   What goes is the boot, the drift, and the scroll driven transforms. */

html[data-motion="reduced"] #boot { display: none; }

/* unpin the hero: no zoom to play out, so the track collapses to one screen */
html[data-motion="reduced"] .hero { height: auto; }
html[data-motion="reduced"] .hero__pin {
  position: static;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
}

html[data-motion="reduced"] .scrub { height: auto; }
html[data-motion="reduced"] .scrub__pin { position: static; height: auto; padding-top: 22vh; }

html[data-motion="reduced"] .services { height: auto; }
html[data-motion="reduced"] .services__pin {
  position: static; height: auto; overflow: visible; padding-block: 12vh;
}
html[data-motion="reduced"] .services__track {
  flex-direction: column;
  transform: none !important;
  gap: clamp(40px, 8vh, 88px);
}
html[data-motion="reduced"] .panel,
html[data-motion="reduced"] .panel--intro { width: 100%; max-width: 52ch; }

html[data-motion="reduced"] .signoff__link,
html[data-motion="reduced"] .motion { transition: none; }

/* Pre-JS fallback only. Once JS sets data-motion, the rules above take over. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) #boot { display: none; }
  html:not([data-motion]) .hero__type { opacity: 1; }
}