noecosystem-design 0.1.0

package/packages/ui/src/cinematic/cinematic.css

@@ -0,0 +1,2020 @@
+/* NOE cinematic system — ported from NOEcosystem-Frontend-Light-Dark/app/globals.css + home-cinematic.css
+   Uses design-tokens variables (--noe-continuous-canvas, --mint, etc.) which now map to semantic tokens. */
+
+:root {
+  --hero-progress: 0;
+  --experiment-progress: 0;
+  --kinetic-scroll: 0;
+  --noe-stage-gutter: clamp(1.25rem, 5vw, 4rem);
+}
+
+/* Hero — base (from globals.css) scoped for cinematic usage */
+.hero {
+  position: relative;
+  min-height: 100svh;
+  padding: 0 4.5vw 3rem;
+  color: var(--white, var(--noe-paper-bright));
+  background:
+    radial-gradient(circle at 76% 36%, rgba(29, 191, 152, 0.1), transparent 22%),
+    var(--ink, var(--noe-continuous-canvas));
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.hero-layout {
+  width: 100%;
+  min-height: 100svh;
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
+  align-items: center;
+  gap: 5vw;
+  padding: 7vh 0 5vh;
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 2;
+}
+
+.eyebrow,
+.section-kicker {
+  margin: 0 0 1.5rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+.eyebrow {
+  color: var(--mint);
+}
+
+.hero h1 {
+  max-width: 920px;
+  margin: 0;
+  font-size: clamp(3.7rem, 7.25vw, 8.8rem);
+  line-height: 0.88;
+  letter-spacing: -0.075em;
+  font-weight: 750;
+}
+.hero h1 span {
+  display: block;
+}
+.outline-text {
+  color: transparent;
+  -webkit-text-stroke: clamp(1px, 0.09vw, 2px) rgba(247, 247, 242, 0.7);
+}
+.hero-intro {
+  max-width: 660px;
+  margin: 2.4rem 0 0;
+  color: #aab9c8;
+  font-size: clamp(1rem, 1.35vw, 1.32rem);
+  line-height: 1.65;
+}
+
+.build-stage {
+  position: relative;
+  width: min(100%, 620px);
+  aspect-ratio: 1 / 1.08;
+  justify-self: end;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(255, 255, 255, 0.012);
+  overflow: hidden;
+}
+.build-stage-ecosystem {
+  isolation: isolate;
+  background:
+    radial-gradient(circle at 50% 49%, rgba(29, 191, 152, 0.1), transparent 43%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(255, 255, 255, 0.012);
+}
+.ecosystem-sphere {
+  position: absolute;
+  inset: 11% 2.5% 9%;
+  z-index: 1;
+  overflow: hidden;
+}
+.ecosystem-sphere::before,
+.ecosystem-sphere::after {
+  content: "";
+  position: absolute;
+  inset: 7% 10%;
+  z-index: -1;
+  border: 1px solid rgba(152, 232, 207, 0.08);
+  border-radius: 50%;
+  pointer-events: none;
+}
+.ecosystem-sphere::before {
+  transform: rotate(-18deg) scaleY(0.38);
+}
+.ecosystem-sphere::after {
+  transform: rotate(58deg) scaleY(0.3);
+}
+.ecosystem-sphere canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+  touch-action: pan-y;
+  user-select: none;
+}
+.ecosystem-sphere canvas:active {
+  cursor: grabbing;
+}
+.ecosystem-sphere canvas:focus-visible {
+  outline: 2px solid var(--mint);
+  outline-offset: -5px;
+  border-radius: 50%;
+}
+.ecosystem-sphere-detail {
+  position: absolute;
+  left: 1.25rem;
+  bottom: 1.1rem;
+  max-width: min(44%, 220px);
+  padding-left: 0.55rem;
+  display: grid;
+  gap: 0.12rem;
+  border-left: 1px solid rgba(152, 232, 207, 0.34);
+  opacity: 0.68;
+  pointer-events: none;
+  animation: nodeDetailIn 220ms ease-out both;
+}
+.ecosystem-sphere-detail span,
+.ecosystem-sphere-detail strong {
+  font-family: var(--font-sf-pro, var(--noe-font-family-sans));
+  text-transform: uppercase;
+}
+.ecosystem-sphere-detail span {
+  color: rgba(249, 250, 251, 0.92);
+  font-size: 0.64rem;
+  font-weight: 720;
+  letter-spacing: 0.07em;
+}
+.ecosystem-sphere-detail strong {
+  color: rgba(152, 232, 207, 0.64);
+  font-size: 0.44rem;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  line-height: 1.35;
+}
+
+/* —————————————————————————————————————————————— */
+/* Cinematic overrides (home-cinematic.css) — scoped to .kinetic-ready */
+/* —————————————————————————————————————————————— */
+.public-skip-link {
+  position: fixed;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 120;
+  padding: 0.7rem 0.9rem;
+  color: var(--noe-graphite);
+  background: var(--mint);
+  font-size: 0.72rem;
+  font-weight: 800;
+  transform: translateY(-180%);
+  transition: transform 160ms ease;
+}
+.public-skip-link:focus {
+  transform: translateY(0);
+}
+.public-system-bar {
+  position: fixed;
+  inset: 0 0 auto;
+  z-index: 80;
+  min-height: 64px;
+  padding: 0 var(--noe-stage-gutter);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: clamp(1rem, 3vw, 3rem);
+  color: var(--noe-paper-bright);
+  border-bottom: 1px solid var(--noe-canvas-line);
+  background: rgba(37, 36, 35, 0.88);
+  backdrop-filter: blur(16px);
+}
+.public-system-brand {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.public-system-brand img {
+  width: clamp(132px, 12vw, 174px);
+  height: auto;
+  filter: brightness(0) invert(1);
+}
+.public-system-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.7rem;
+}
+.public-system-actions button {
+  min-height: 48px;
+  padding: 0 1.1rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--noe-paper-bright);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-size: clamp(1.2rem, 1.65vw, 1.75rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 0.9;
+  cursor: pointer;
+  transition: color 160ms ease;
+}
+.public-system-actions button:hover,
+.public-system-actions button:focus-visible {
+  color: var(--mint);
+}
+.public-system-actions button span {
+  color: var(--mint);
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.public-system-actions button:hover span,
+.public-system-actions button:focus-visible span {
+  transform: translate3d(0.1em, -0.1em, 0);
+}
+#public-content {
+  position: absolute;
+  top: 0;
+}
+main.kinetic-ready {
+  color: var(--noe-canvas-copy);
+  background: var(--noe-continuous-canvas);
+}
+main.kinetic-ready :is(#idea, #principles, #progress, #contact) {
+  scroll-margin-top: 64px;
+}
+html:has(body main.kinetic-ready),
+body:has(> main.kinetic-ready) {
+  background-color: var(--noe-continuous-canvas);
+}
+html:has(body main.kinetic-ready) {
+  overscroll-behavior-y: none;
+}
+main.kinetic-ready .hero {
+  height: 108svh;
+  min-height: 100svh;
+  overflow: clip;
+  padding: 0 var(--noe-stage-gutter);
+  background: var(--noe-continuous-canvas);
+}
+main.kinetic-ready .hero-layout {
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  min-height: 0;
+  grid-template-columns: minmax(320px, 0.76fr) minmax(520px, 1.24fr);
+  gap: 1vw;
+  align-items: center;
+}
+main.kinetic-ready .hero-copy {
+  position: relative;
+  z-index: 8;
+  align-self: center;
+  padding-block: 5vh 7vh;
+  opacity: clamp(0.38, calc(1 - var(--hero-progress) * 0.62), 1);
+  transform: translate3d(
+    calc(var(--hero-progress) * -28px),
+    calc(-2vh - var(--hero-progress) * 1.5vh),
+    0
+  );
+  transition: opacity 80ms linear;
+}
+main.kinetic-ready .eyebrow {
+  margin-bottom: 1.25rem;
+  color: var(--mint);
+  font-size: 0.66rem;
+}
+main.kinetic-ready .hero h1 {
+  max-width: 620px;
+  font-size: clamp(3.7rem, 5vw, 6.25rem);
+  line-height: 0.88;
+  letter-spacing: -0.07em;
+}
+main.kinetic-ready .hero h1 .outline-text {
+  color: var(--noe-paper-bright);
+  -webkit-text-stroke: 0;
+}
+main.kinetic-ready .hero h1 .kinetic-title-line:nth-child(2) {
+  color: #9c9a97;
+}
+main.kinetic-ready
+  .hero
+  h1
+  .kinetic-title-line:first-child
+  .kinetic-word:last-child
+  .kinetic-letter:last-child {
+  color: var(--noe-coral);
+}
+main.kinetic-ready
+  .hero
+  h1
+  .kinetic-title-line:nth-child(2)
+  .kinetic-word:last-child
+  .kinetic-letter:last-child {
+  color: var(--mint);
+}
+main.kinetic-ready .hero h1 .kinetic-word {
+  display: inline-block;
+  white-space: nowrap;
+}
+main.kinetic-ready .hero-intro {
+  max-width: 510px;
+  margin-top: 1.7rem;
+  color: #bdbab6;
+  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
+}
+.hero-signals {
+  max-width: 520px;
+  margin: 2rem 0 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--noe-canvas-line);
+  border-bottom: 1px solid var(--noe-canvas-line);
+}
+.hero-signals > div {
+  --signal-accent: var(--mint);
+  position: relative;
+  min-height: 60px;
+  padding: 0.8rem 0.8rem 0.75rem 0;
+  display: grid;
+  align-content: center;
+  gap: 0.3rem;
+  border-right: 1px solid var(--noe-canvas-line);
+  opacity: 0.38;
+  transform: translateY(4px);
+  transition:
+    opacity 260ms ease,
+    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hero-signals > div::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    118deg,
+    color-mix(in srgb, var(--signal-accent) 10%, transparent),
+    transparent 72%
+  );
+  opacity: 0;
+  transition: opacity 260ms ease;
+}
+.hero-signals > div + div {
+  padding-left: 0.8rem;
+}
+.hero-signals > div:last-child {
+  border-right: 0;
+}
+.hero-signals > div:nth-child(1) {
+  --signal-accent: var(--noe-coral);
+}
+.hero-signals > div:nth-child(2) {
+  --signal-accent: var(--noe-cyan);
+}
+.hero-signals > div:nth-child(3) {
+  --signal-accent: var(--mint);
+}
+.hero-signals > div::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--signal-accent);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hero-signals dt {
+  color: var(--signal-accent);
+  font-size: 0.48rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+.hero-signals dd {
+  margin: 0;
+  color: #c9c5c1;
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+main.kinetic-ready .hero[data-hero-phase="0"] .hero-signals > div:nth-child(1),
+main.kinetic-ready .hero[data-hero-phase="1"] .hero-signals > div:nth-child(2),
+main.kinetic-ready .hero[data-hero-phase="2"] .hero-signals > div:nth-child(3) {
+  opacity: 1;
+  transform: none;
+}
+main.kinetic-ready .hero[data-hero-phase="0"] .hero-signals > div:nth-child(1)::after,
+main.kinetic-ready .hero[data-hero-phase="1"] .hero-signals > div:nth-child(2)::after,
+main.kinetic-ready .hero[data-hero-phase="2"] .hero-signals > div:nth-child(3)::after {
+  transform: scaleX(1);
+}
+main.kinetic-ready .hero[data-hero-phase="0"] .hero-signals > div:nth-child(1)::before,
+main.kinetic-ready .hero[data-hero-phase="1"] .hero-signals > div:nth-child(2)::before,
+main.kinetic-ready .hero[data-hero-phase="2"] .hero-signals > div:nth-child(3)::before {
+  opacity: 1;
+}
+main.kinetic-ready .noe-reactor {
+  width: min(58vw, 760px, 74svh);
+  aspect-ratio: 1;
+  justify-self: center;
+  transform: translateX(calc(2vw - var(--hero-progress) * 3vw))
+    scale(calc(1 + var(--hero-progress) * 0.06));
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  isolation: isolate;
+}
+main.kinetic-ready
+  .hero[data-hero-motion="paused"]
+  :is(.noe-reactor-aura, .noe-reactor-ring, .noe-reactor-arcs i) {
+  animation-play-state: paused;
+}
+main.kinetic-ready .noe-reactor .ecosystem-sphere {
+  inset: 13%;
+  z-index: 4;
+  border-radius: 50%;
+  overflow: visible;
+}
+main.kinetic-ready .noe-reactor .ecosystem-sphere::before,
+main.kinetic-ready .noe-reactor .ecosystem-sphere::after {
+  inset: 2%;
+  border-color: rgba(246, 244, 242, 0.08);
+}
+.noe-reactor-aura {
+  position: absolute;
+  inset: 12%;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, rgba(152, 232, 207, 0.12), transparent 58%),
+    conic-gradient(
+      from 20deg,
+      rgba(255, 91, 87, 0.1),
+      transparent 15%,
+      rgba(255, 184, 74, 0.08),
+      transparent 38%,
+      rgba(85, 214, 255, 0.1),
+      transparent 64%,
+      rgba(116, 120, 255, 0.09),
+      transparent 82%
+    );
+  filter: blur(24px);
+  animation: noeAuraBreathe 5s ease-in-out infinite;
+}
+.noe-reactor-ring {
+  position: absolute;
+  border: 1px solid rgba(246, 244, 242, 0.17);
+  border-radius: 50%;
+  pointer-events: none;
+}
+.noe-reactor-ring::before,
+.noe-reactor-ring::after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 22px currentColor;
+}
+.noe-reactor-ring.ring-outer {
+  inset: 3%;
+  color: var(--noe-coral);
+  border-style: dashed;
+  animation: noeReactorSpin 38s linear infinite;
+}
+.noe-reactor-ring.ring-outer::before {
+  top: 18%;
+  left: 7%;
+}
+.noe-reactor-ring.ring-outer::after {
+  right: 13%;
+  bottom: 11%;
+  color: var(--noe-amber);
+}
+.noe-reactor-ring.ring-mid {
+  inset: 8%;
+  color: var(--noe-cyan);
+  border-color: rgba(85, 214, 255, 0.22);
+  animation: noeReactorSpin 26s linear infinite reverse;
+}
+.noe-reactor-ring.ring-mid::before {
+  top: 8%;
+  right: 29%;
+}
+.noe-reactor-ring.ring-mid::after {
+  left: 4%;
+  bottom: 31%;
+  color: var(--mint);
+}
+.noe-reactor-ring.ring-inner {
+  inset: 16%;
+  color: var(--mint);
+  border-color: rgba(152, 232, 207, 0.22);
+  border-style: dotted;
+  animation: noeReactorSpin 18s linear infinite;
+}
+.noe-reactor-ring.ring-inner::before {
+  left: 13%;
+  bottom: 14%;
+}
+.noe-reactor-ring.ring-inner::after {
+  top: 10%;
+  right: 14%;
+  color: var(--noe-violet);
+}
+.noe-reactor-arcs,
+.noe-reactor-arcs i {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+}
+.noe-reactor-arcs {
+  inset: 1.5%;
+  background: repeating-conic-gradient(
+    from -0.25deg,
+    rgba(246, 244, 242, 0.24) 0 0.5deg,
+    transparent 0.5deg 3deg
+  );
+  -webkit-mask: radial-gradient(transparent 68.2%, #000 68.5% 69%, transparent 69.4%);
+  mask: radial-gradient(transparent 68.2%, #000 68.5% 69%, transparent 69.4%);
+  opacity: 0.72;
+}
+.noe-reactor-arcs i {
+  inset: 6%;
+  border: 3px solid transparent;
+  transform: rotate(calc(var(--arc-turn, 0) * 1deg));
+}
+.noe-reactor-arcs i:nth-child(1) {
+  --arc-turn: 12;
+  border-top-color: var(--noe-coral);
+}
+.noe-reactor-arcs i:nth-child(2) {
+  --arc-turn: 104;
+  border-right-color: var(--noe-amber);
+  inset: 10%;
+}
+.noe-reactor-arcs i:nth-child(3) {
+  --arc-turn: 188;
+  border-bottom-color: var(--noe-cyan);
+  inset: 14%;
+}
+.noe-reactor-arcs i:nth-child(4) {
+  --arc-turn: 276;
+  border-left-color: var(--mint);
+  inset: 18%;
+}
+
+/* Kinetic timeline */
+.kinetic-timeline {
+  position: fixed;
+  right: clamp(11.5rem, 14vw, 13rem);
+  bottom: 1.35rem;
+  z-index: 190;
+  width: min(252px, calc(100vw - 20rem));
+  height: 40px;
+  padding: 0.32rem 0.55rem;
+  display: grid;
+  grid-template-columns: 68px 1fr;
+  grid-template-rows: 1fr 3px;
+  align-items: center;
+  gap: 0 0.55rem;
+  color: #e2dfdb;
+  border: 1px solid rgba(246, 244, 242, 0.13);
+  border-radius: 9px;
+  background: linear-gradient(125deg, rgba(48, 47, 46, 0.94), rgba(37, 36, 35, 0.86));
+  box-shadow:
+    0 18px 42px rgba(0, 0, 0, 0.24),
+    inset 0 1px rgba(246, 244, 242, 0.04);
+  backdrop-filter: blur(14px) saturate(0.8);
+}
+.kinetic-timeline::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  bottom: 9px;
+  left: -1px;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--timeline-accent);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--timeline-accent) 45%, transparent);
+}
+.kinetic-timeline-readout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  font-size: 0.46rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.kinetic-timeline-readout span {
+  color: var(--timeline-accent);
+  font-variant-numeric: tabular-nums;
+}
+.kinetic-timeline-readout strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kinetic-timeline nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  height: 20px;
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(246, 244, 242, 0.16) 0 1px,
+    transparent 1px calc(100% / 24)
+  );
+}
+.kinetic-timeline nav::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  left: calc(var(--kinetic-scroll) * 100%);
+  width: 2px;
+  border-radius: 2px;
+  background: var(--timeline-accent);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--timeline-accent) 55%, transparent);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+.kinetic-timeline a {
+  position: relative;
+  flex: 1;
+  height: 20px;
+  display: grid;
+  place-items: center;
+}
+.kinetic-timeline a > i {
+  width: 1px;
+  height: 8px;
+  background: rgba(246, 244, 242, 0.34);
+  transition:
+    height 220ms ease,
+    width 220ms ease,
+    background 220ms ease;
+}
+.kinetic-timeline a:nth-child(2n) > i {
+  height: 13px;
+}
+.kinetic-timeline a.is-active > i {
+  width: 3px;
+  height: 18px;
+  background: var(--timeline-accent);
+}
+.kinetic-timeline a > em {
+  position: absolute;
+  bottom: calc(100% + 9px);
+  left: 50%;
+  padding: 0.35rem 0.5rem;
+  color: var(--noe-paper-bright);
+  background: var(--noe-graphite-raised);
+  border-radius: 4px;
+  opacity: 0;
+  transform: translate(-50%, 5px);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+  pointer-events: none;
+  font-size: 0.45rem;
+  font-style: normal;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.kinetic-timeline a:hover > em,
+.kinetic-timeline a:focus-visible > em {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+.kinetic-timeline-progress {
+  grid-column: 1 / -1;
+  height: 2px;
+  overflow: hidden;
+  background: rgba(246, 244, 242, 0.1);
+}
+.kinetic-timeline-progress i {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--noe-coral),
+    var(--noe-amber),
+    var(--mint),
+    var(--noe-cyan)
+  );
+  transform: scaleX(var(--kinetic-scroll));
+  transform-origin: left;
+}
+.kinetic-signal {
+  display: none;
+}
+
+/* System anatomy */
+.system-anatomy {
+  --anatomy-progress: 0;
+  --anatomy-accent: var(--noe-coral);
+  position: relative;
+  height: 152svh;
+  color: var(--noe-canvas-copy);
+  background: var(--noe-continuous-canvas);
+}
+.system-anatomy[data-anatomy-chapter="1"] {
+  --anatomy-accent: var(--noe-cyan);
+}
+.system-anatomy[data-anatomy-chapter="2"] {
+  --anatomy-accent: var(--mint);
+}
+.anatomy-sticky {
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  overflow: hidden;
+  background: var(--noe-continuous-canvas);
+}
+.anatomy-header,
+.anatomy-footer {
+  position: absolute;
+  z-index: 8;
+  right: var(--noe-stage-gutter);
+  left: var(--noe-stage-gutter);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(246, 244, 242, 0.5);
+  font-size: 0.58rem;
+  font-weight: 750;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.anatomy-header {
+  top: 2rem;
+}
+.anatomy-header > div {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.anatomy-header > div:first-child span:first-child {
+  color: var(--noe-coral);
+}
+.anatomy-header i {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--noe-coral);
+  box-shadow: 0 0 0 5px rgba(255, 91, 87, 0.1);
+}
+.anatomy-copy {
+  position: absolute;
+  z-index: 5;
+  top: 44%;
+  left: var(--noe-stage-gutter);
+  width: min(38vw, 500px);
+  transform: translateY(-50%);
+}
+.anatomy-copy > img {
+  width: clamp(160px, 16vw, 230px);
+  display: block;
+  margin-bottom: 2.5rem;
+  filter: brightness(0) invert(1);
+}
+.anatomy-copy > p {
+  margin: 0 0 1rem;
+  color: var(--mint);
+  font-size: 0.64rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.anatomy-copy > h2 {
+  margin: 0;
+  color: var(--noe-canvas-copy);
+  font-size: clamp(2.6rem, 4.4vw, 5rem);
+  line-height: 0.92;
+  letter-spacing: -0.065em;
+}
+.anatomy-chapters {
+  position: relative;
+  height: 150px;
+  margin-top: 2rem;
+  overflow: hidden;
+}
+.anatomy-chapters article {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transform: translateY(24px);
+  transition:
+    opacity 300ms ease,
+    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.anatomy-chapters article.is-active {
+  opacity: 1;
+  transform: none;
+}
+.anatomy-chapters article > span {
+  color: var(--anatomy-accent);
+  font-size: 0.57rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.anatomy-chapters h3 {
+  margin: 0.65rem 0 0.45rem;
+  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
+}
+.anatomy-chapters p {
+  max-width: 460px;
+  margin: 0;
+  color: var(--noe-canvas-muted);
+  font-size: 0.93rem;
+  line-height: 1.55;
+}
+.anatomy-machine {
+  position: absolute;
+  top: 50%;
+  right: clamp(-3rem, 1vw, 1rem);
+  width: min(59vw, 820px);
+  aspect-ratio: 1.12;
+  transform: translateY(-50%) rotate(calc((var(--anatomy-progress) - 0.5) * 5deg));
+  transform-origin: center;
+}
+.machine-halo {
+  position: absolute;
+  inset: 12%;
+  border: 1px solid rgba(246, 244, 242, 0.16);
+  border-radius: 50%;
+  transform: rotate(calc(var(--anatomy-progress) * 150deg));
+}
+.machine-halo::before {
+  content: "";
+  position: absolute;
+  top: 12%;
+  left: 8%;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--anatomy-accent);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--anatomy-accent) 55%, transparent);
+}
+.machine-halo.halo-two {
+  inset: 23%;
+  border-style: dashed;
+  transform: rotate(calc(var(--anatomy-progress) * -230deg));
+}
+.machine-halo.halo-two::before {
+  top: auto;
+  left: auto;
+  right: -5px;
+  bottom: 45%;
+  background: var(--teal);
+}
+.machine-layer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 46%;
+  height: 19%;
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  color: var(--noe-canvas-copy);
+  border: 1px solid rgba(246, 244, 242, 0.28);
+  background: rgba(48, 47, 46, 0.94);
+  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
+  transform-origin: center;
+  transition:
+    border-color 200ms ease,
+    opacity 240ms ease;
+}
+.system-anatomy[data-anatomy-chapter="0"] .machine-layer,
+.system-anatomy[data-anatomy-chapter="1"] .machine-layer,
+.system-anatomy[data-anatomy-chapter="2"] .machine-layer {
+  opacity: 0.26;
+}
+.system-anatomy[data-anatomy-chapter="0"] .layer-foundation,
+.system-anatomy[data-anatomy-chapter="1"] .layer-connection,
+.system-anatomy[data-anatomy-chapter="2"] .layer-experience {
+  z-index: 3;
+  opacity: 1;
+  border-color: var(--anatomy-accent);
+}
+.machine-layer span {
+  font-size: 0.63rem;
+  font-weight: 850;
+  letter-spacing: 0.1em;
+}
+.machine-layer i {
+  color: var(--noe-coral);
+  font-size: 0.58rem;
+  font-style: normal;
+}
+.layer-foundation {
+  transform: translate(-50%, calc(-50% - var(--anatomy-progress) * 170px))
+    rotate(calc(var(--anatomy-progress) * -9deg));
+}
+.layer-connection {
+  border-color: rgba(29, 191, 152, 0.65);
+  transform: translate(-50%, -50%) rotate(calc(var(--anatomy-progress) * 3deg));
+}
+.layer-experience {
+  transform: translate(-50%, calc(-50% + var(--anatomy-progress) * 170px))
+    rotate(calc(var(--anatomy-progress) * 11deg));
+}
+.machine-core {
+  position: absolute;
+  z-index: 4;
+  top: 50%;
+  left: 50%;
+  width: 14%;
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--mint);
+  box-shadow: 0 0 0 calc(var(--anatomy-progress) * 28px) rgba(152, 232, 207, 0.08);
+  transform: translate(-50%, -50%) rotate(calc(var(--anatomy-progress) * 270deg));
+}
+.machine-core img {
+  width: 62%;
+}
+.machine-leader {
+  position: absolute;
+  height: 1px;
+  background: rgba(246, 244, 242, 0.3);
+  opacity: calc(0.15 + var(--anatomy-progress));
+  transform: scaleX(var(--anatomy-progress));
+}
+.machine-leader::after {
+  content: "";
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--anatomy-accent);
+}
+.machine-leader span {
+  position: absolute;
+  bottom: 8px;
+  font-size: 0.5rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  white-space: nowrap;
+}
+.leader-a {
+  top: 24%;
+  left: 4%;
+  width: 31%;
+  transform-origin: right;
+}
+.leader-b {
+  top: 50%;
+  right: 2%;
+  width: 29%;
+  transform-origin: left;
+}
+.leader-c {
+  bottom: 23%;
+  left: 6%;
+  width: 34%;
+  transform-origin: right;
+}
+.leader-b::after {
+  right: auto;
+  left: -3px;
+  background: var(--teal);
+}
+.machine-packet {
+  position: absolute;
+  z-index: 5;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  color: var(--anatomy-accent);
+  background: var(--anatomy-accent);
+  box-shadow: 0 0 15px currentColor;
+}
+.machine-packet.packet-one {
+  top: 50%;
+  left: 50%;
+  transform: translate(
+    calc(-50% + var(--anatomy-progress) * 210px),
+    calc(-50% - var(--anatomy-progress) * 138px)
+  );
+}
+.machine-packet.packet-two {
+  top: 50%;
+  left: 50%;
+  color: var(--teal);
+  background: var(--teal);
+  transform: translate(
+    calc(-50% - var(--anatomy-progress) * 185px),
+    calc(-50% + var(--anatomy-progress) * 132px)
+  );
+}
+.anatomy-ruler {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  color: rgba(246, 244, 242, 0.22);
+}
+.anatomy-ruler i {
+  width: 1px;
+  height: 8px;
+  background: currentColor;
+}
+.anatomy-ruler i:nth-child(4n) {
+  height: 15px;
+}
+.ruler-top {
+  top: 2%;
+  left: 10%;
+  right: 10%;
+  align-items: flex-start;
+}
+.ruler-side {
+  top: 12%;
+  right: 3%;
+  bottom: 12%;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.ruler-side i {
+  width: 8px;
+  height: 1px;
+}
+.ruler-side i:nth-child(4n) {
+  width: 15px;
+  height: 1px;
+}
+.anatomy-footer {
+  bottom: 1.6rem;
+}
+.anatomy-progress {
+  width: min(32vw, 360px);
+  height: 2px;
+  background: rgba(246, 244, 242, 0.13);
+}
+.anatomy-progress i {
+  display: block;
+  width: calc(var(--anatomy-step) * 33.333%);
+  height: 100%;
+  background: linear-gradient(90deg, var(--anatomy-accent), var(--mint));
+  transition:
+    width 300ms ease,
+    background 300ms ease;
+}
+
+/* Experiments */
+.noe-experiments {
+  position: relative;
+  z-index: 4;
+  overflow: clip;
+  color: var(--noe-paper-bright);
+  background: var(--noe-continuous-canvas);
+}
+.noe-experiment-stage {
+  position: sticky;
+  top: 0;
+  z-index: 0;
+  height: 100svh;
+  margin-bottom: -100svh;
+  overflow: hidden;
+  background: var(--noe-continuous-canvas);
+}
+.noe-stage-header,
+.noe-stage-footer {
+  position: absolute;
+  z-index: 8;
+  right: var(--noe-stage-gutter);
+  left: var(--noe-stage-gutter);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #a6a19c;
+  font-size: 0.55rem;
+  font-weight: 750;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.noe-stage-header {
+  top: 2rem;
+}
+.noe-stage-footer {
+  bottom: 1.6rem;
+}
+.noe-stage-footer > div {
+  display: flex;
+  gap: 0.32rem;
+}
+.noe-stage-footer i {
+  width: 18px;
+  height: 2px;
+  background: #55514e;
+  transition:
+    width 260ms ease,
+    background 260ms ease;
+}
+.noe-stage-footer i.is-active {
+  width: 46px;
+  background: var(--mint);
+}
+.noe-scene {
+  --scene-presence: 0;
+  --scene-shift: 1;
+  position: absolute;
+  z-index: 3;
+  top: 10%;
+  right: 4%;
+  bottom: 10%;
+  left: 43%;
+  opacity: var(--scene-presence);
+  transform: translate3d(0, calc(var(--scene-shift) * -28px), 0)
+    scale(calc(0.955 + var(--scene-presence) * 0.045));
+  transition: none;
+  pointer-events: none;
+}
+.noe-scene.is-active {
+  --scene-presence: 1;
+  --scene-shift: 0;
+  pointer-events: auto;
+}
+.noe-scene:not(.is-active) * {
+  animation-play-state: paused !important;
+}
+.noe-scene-caption {
+  position: absolute;
+  right: 8rem;
+  bottom: 0;
+  color: #aaa5a0;
+  font-size: 0.5rem;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.noe-scene:not(.is-active) .noe-scene-caption {
+  opacity: 0;
+}
+.noe-experiment-panels {
+  position: relative;
+  z-index: 4;
+}
+.noe-experiment-panel {
+  min-height: 48svh;
+  padding: 56px var(--noe-stage-gutter) 2.1rem;
+  display: grid;
+  grid-template-columns: minmax(300px, 38%) 1fr;
+  align-items: center;
+}
+.noe-experiment-copy {
+  width: min(100%, 470px);
+  padding-right: 2rem;
+}
+.noe-experiment-meta {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.4rem;
+  color: #a6a19c;
+  font-size: 0.58rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.noe-experiment-meta span:first-child {
+  color: var(--noe-coral);
+}
+.noe-experiment-panel:nth-child(2) .noe-experiment-meta span:first-child {
+  color: var(--noe-cyan);
+}
+.noe-experiment-panel:nth-child(3) .noe-experiment-meta span:first-child {
+  color: var(--mint);
+}
+.noe-experiment-copy h2 {
+  margin: 0;
+  font-size: clamp(3rem, 4.25vw, 5.3rem);
+  line-height: 0.88;
+  letter-spacing: -0.065em;
+  overflow: hidden;
+}
+.noe-experiment-copy h2 span {
+  display: block;
+  opacity: 0.22;
+  transform: translateY(0.55em);
+  transition:
+    opacity 360ms ease,
+    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: calc(var(--line-index) * 70ms);
+}
+.noe-experiment-panel.is-active .noe-experiment-copy h2 span {
+  opacity: 1;
+  transform: none;
+}
+.noe-experiment-copy > p {
+  max-width: 430px;
+  margin: 1.5rem 0 0;
+  color: #a9a49f;
+  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
+  line-height: 1.6;
+}
+.noe-experiment-rule {
+  width: min(100%, 360px);
+  height: 1px;
+  margin-top: 2.2rem;
+  background: #464340;
+  overflow: hidden;
+}
+.noe-experiment-rule i {
+  display: block;
+  width: 38%;
+  height: 100%;
+  background: var(--noe-coral);
+  animation: noeRuleScan 3.2s ease-in-out infinite;
+}
+.noe-experiment-panel:nth-child(2) .noe-experiment-rule i {
+  background: var(--noe-cyan);
+  animation-delay: 0.2s;
+}
+.noe-experiment-panel:nth-child(3) .noe-experiment-rule i {
+  background: var(--mint);
+  animation-delay: 0.4s;
+}
+.noe-dot-field {
+  position: absolute;
+  inset: 8%;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  place-items: center;
+  transform: perspective(900px) rotateX(57deg) rotateZ(-18deg) scale(0.9);
+}
+.noe-dot-field i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #68635f;
+  animation: noeDotWave 2.8s ease-in-out infinite;
+  animation-delay: calc(var(--dot-index) * 18ms);
+}
+.noe-foundation-block {
+  position: absolute;
+  min-width: 120px;
+  padding: 0.75rem 1rem;
+  border: 1px solid currentColor;
+  color: var(--noe-coral);
+  background: rgba(37, 36, 35, 0.9);
+  font-size: 0.55rem;
+  font-weight: 850;
+  letter-spacing: 0.12em;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+  animation: noeBlockFloat 4s ease-in-out infinite;
+}
+.noe-foundation-block.block-a {
+  top: 27%;
+  left: 17%;
+}
+.noe-foundation-block.block-b {
+  top: 51%;
+  right: 18%;
+  color: var(--noe-amber);
+  animation-delay: -1.3s;
+}
+.noe-foundation-block.block-c {
+  left: 35%;
+  bottom: 18%;
+  color: var(--mint);
+  animation-delay: -2.2s;
+}
+.noe-scene-network svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.noe-scene-network path {
+  fill: none;
+  stroke: rgba(85, 214, 255, 0.3);
+  stroke-width: 1.25;
+  stroke-dasharray: 7 9;
+  animation: noePathFlow 3s linear infinite;
+}
+.noe-network-nodes circle {
+  fill: var(--noe-graphite);
+  stroke: var(--noe-cyan);
+  stroke-width: 2;
+}
+.noe-network-nodes circle.is-core {
+  fill: rgba(85, 214, 255, 0.1);
+  stroke-width: 3;
+}
+.noe-network-core {
+  position: absolute;
+  top: 50%;
+  left: 49.7%;
+  width: 70px;
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--noe-cyan);
+  border-radius: 50%;
+  background: var(--noe-cyan);
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 0 18px rgba(85, 214, 255, 0.05);
+}
+.noe-network-core img {
+  width: 56%;
+}
+.noe-packet {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--noe-cyan);
+  box-shadow: 0 0 18px var(--noe-cyan);
+  offset-rotate: 0deg;
+  animation: noePacketTravel 4s linear infinite;
+}
+.packet-a {
+  offset-path: path("M 85 410 C 180 90 410 120 670 270");
+  animation-delay: -0.5s;
+}
+.packet-b {
+  offset-path: path("M 90 205 C 260 500 430 520 665 352");
+  animation-delay: -2s;
+}
+.packet-c {
+  offset-path: path("M 205 105 C 270 220 480 395 570 520");
+  animation-delay: -3.25s;
+  background: var(--mint);
+}
+.noe-network-label {
+  position: absolute;
+  padding: 0.42rem 0.55rem;
+  border: 1px solid rgba(85, 214, 255, 0.38);
+  color: var(--noe-cyan);
+  font-size: 0.5rem;
+  letter-spacing: 0.1em;
+}
+.noe-network-label.label-a {
+  top: 18%;
+  right: 5%;
+}
+.noe-network-label.label-b {
+  bottom: 16%;
+  left: 8%;
+  color: var(--mint);
+  border-color: rgba(152, 232, 207, 0.38);
+}
+.noe-human-orbits {
+  position: absolute;
+  inset: 5%;
+  display: grid;
+  place-items: center;
+}
+.noe-human-orbits i {
+  position: absolute;
+  width: min(78%, 590px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(152, 232, 207, 0.18);
+  border-radius: 50%;
+  animation: noeHumanPulse 3.6s ease-in-out infinite;
+}
+.noe-human-orbits i:nth-child(2) {
+  width: 60%;
+  animation-delay: -0.6s;
+}
+.noe-human-orbits i:nth-child(3) {
+  width: 42%;
+  animation-delay: -1.2s;
+}
+.noe-human-orbits i:nth-child(4) {
+  width: 24%;
+  animation-delay: -1.8s;
+}
+.noe-human-orb {
+  --orb-x: 0px;
+  --orb-y: 0px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: clamp(108px, 12vw, 154px);
+  aspect-ratio: 1;
+  border: 0;
+  border-radius: 50%;
+  color: var(--noe-graphite);
+  background: var(--mint);
+  box-shadow:
+    0 0 0 18px rgba(152, 232, 207, 0.055),
+    0 30px 70px rgba(0, 0, 0, 0.35);
+  transform: translate(calc(-50% + var(--orb-x)), calc(-50% + var(--orb-y)));
+  transition:
+    transform 700ms cubic-bezier(0.18, 1.5, 0.32, 1),
+    box-shadow 180ms ease;
+  cursor: grab;
+  touch-action: pan-y;
+  font: 800 0.72rem var(--font-sf-pro, var(--noe-font-family-sans));
+  letter-spacing: 0.14em;
+}
+.noe-human-orb:active {
+  cursor: grabbing;
+  transition: none;
+  box-shadow:
+    0 0 0 26px rgba(152, 232, 207, 0.08),
+    0 36px 80px rgba(0, 0, 0, 0.42);
+}
+.noe-human-orb::before,
+.noe-human-orb::after {
+  content: "";
+  position: absolute;
+  inset: -34%;
+  border: 1px dashed rgba(152, 232, 207, 0.55);
+  border-radius: 50%;
+  animation: noeReactorSpin 14s linear infinite;
+}
+.noe-human-orb::after {
+  inset: -13%;
+  border-style: solid;
+  animation-direction: reverse;
+  animation-duration: 9s;
+}
+.noe-human-readout {
+  position: absolute;
+  right: 7%;
+  bottom: 15%;
+  display: grid;
+  gap: 0.35rem;
+  text-align: right;
+  font-size: 0.5rem;
+  letter-spacing: 0.12em;
+}
+.noe-human-readout span {
+  color: #aaa5a0;
+}
+.noe-human-readout strong {
+  color: var(--mint);
+}
+
+/* Progress */
+main.kinetic-ready .progress {
+  position: relative;
+  z-index: 5;
+  min-height: 50svh;
+  gap: clamp(2.5rem, 6vw, 6rem);
+  padding-block: clamp(3.25rem, 4.25vw, 4.5rem);
+  align-content: center;
+  color: var(--noe-canvas-copy);
+  background:
+    radial-gradient(circle at 74% 46%, rgba(152, 232, 207, 0.045), transparent 30%),
+    var(--noe-continuous-canvas);
+}
+main.kinetic-ready .progress-copy .section-kicker {
+  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
+}
+main.kinetic-ready .progress-copy .section-kicker,
+main.kinetic-ready .progress .section-index span:first-child {
+  color: var(--mint);
+}
+main.kinetic-ready .progress-copy > p:last-child {
+  color: var(--noe-canvas-muted);
+}
+main.kinetic-ready .assembly-list {
+  border-color: var(--noe-canvas-line);
+}
+main.kinetic-ready .assembly-row {
+  min-height: 88px;
+  padding: 1rem 0.9rem 1rem 0;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  border-color: var(--noe-canvas-line);
+  transition:
+    background 220ms ease,
+    padding 320ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+main.kinetic-ready .assembly-row-copy {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+}
+main.kinetic-ready .assembly-row-copy > span {
+  color: var(--noe-canvas-copy);
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.012em;
+}
+main.kinetic-ready .assembly-row-copy > small {
+  color: var(--noe-canvas-muted);
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+main.kinetic-ready .assembly-row::before {
+  content: attr(data-step);
+  color: #716d69;
+  font-size: 0.52rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  transition: color 220ms ease;
+}
+main.kinetic-ready .assembly-row:hover {
+  padding-left: 0.75rem;
+  background: linear-gradient(90deg, rgba(152, 232, 207, 0.055), transparent 62%);
+}
+main.kinetic-ready .assembly-row:hover::before {
+  color: var(--mint);
+}
+main.kinetic-ready .status-word {
+  color: var(--mint);
+}
+main.kinetic-ready .status-word.muted {
+  color: #aaa5a0;
+}
+main.kinetic-ready footer#contact {
+  position: relative;
+  z-index: 6;
+  background: var(--noe-continuous-canvas);
+  padding-top: 2rem;
+}
+
+@keyframes noeReactorSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes noeAuraBreathe {
+  0%,
+  100% {
+    opacity: 0.62;
+    transform: scale(0.96);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+}
+@keyframes noeRuleScan {
+  0%,
+  100% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(270%);
+  }
+}
+@keyframes noeDotWave {
+  0%,
+  70%,
+  100% {
+    transform: scale(0.65);
+    background: #68635f;
+  }
+  35% {
+    transform: scale(2.4);
+    background: var(--noe-coral);
+    box-shadow: 0 0 14px rgba(255, 91, 87, 0.65);
+  }
+}
+@keyframes noeBlockFloat {
+  0%,
+  100% {
+    transform: translateY(-8px) rotate(-1deg);
+  }
+  50% {
+    transform: translateY(9px) rotate(1deg);
+  }
+}
+@keyframes noePathFlow {
+  to {
+    stroke-dashoffset: -32;
+  }
+}
+@keyframes noePacketTravel {
+  to {
+    offset-distance: 100%;
+  }
+}
+@keyframes noeHumanPulse {
+  0%,
+  100% {
+    opacity: 0.28;
+    transform: scale(0.96);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.03);
+  }
+}
+@keyframes nodeDetailIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.68;
+  }
+}
+
+@media (max-width: 1050px) {
+  main.kinetic-ready .hero-layout {
+    grid-template-columns: minmax(280px, 0.8fr) minmax(480px, 1.2fr);
+  }
+  main.kinetic-ready .noe-reactor {
+    width: min(62vw, 680px, 74svh);
+    transform: translateX(3vw);
+  }
+  main.kinetic-ready .hero h1 {
+    font-size: clamp(3.4rem, 5.4vw, 5rem);
+  }
+  .anatomy-copy {
+    width: 42vw;
+  }
+  .anatomy-machine {
+    right: -7rem;
+    width: 64vw;
+  }
+  .noe-scene {
+    left: 40%;
+    right: 1%;
+  }
+  .kinetic-timeline {
+    right: 11.5rem;
+    width: 236px;
+  }
+}
+@media (max-width: 900px) and (min-width: 761px) {
+  main.kinetic-ready .hero {
+    height: auto;
+    min-height: 100svh;
+  }
+  main.kinetic-ready .hero-layout {
+    position: relative;
+    height: auto;
+    min-height: 100svh;
+    padding: 4rem 0 5rem;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  main.kinetic-ready .hero-copy {
+    max-width: 700px;
+    padding: 0;
+    opacity: 1;
+    transform: none;
+  }
+  main.kinetic-ready .noe-reactor {
+    width: min(72vw, 620px);
+    transform: none;
+  }
+  .system-anatomy {
+    height: 145svh;
+  }
+  .anatomy-copy {
+    width: 45vw;
+  }
+  .anatomy-machine {
+    right: -10rem;
+    width: 70vw;
+  }
+  .noe-experiment-panel {
+    min-height: 56svh;
+    grid-template-columns: minmax(280px, 44%) 1fr;
+  }
+  .noe-scene {
+    left: 44%;
+  }
+}
+@media (max-width: 760px) {
+  :root {
+    --noe-stage-gutter: 1.1rem;
+  }
+  main.kinetic-ready .hero {
+    height: auto;
+    min-height: 100svh;
+    padding: 0 1.1rem 1.2rem;
+  }
+  main.kinetic-ready .hero-layout {
+    position: relative;
+    top: auto;
+    height: auto;
+    min-height: 100svh;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 2.2rem 0 6rem;
+  }
+  main.kinetic-ready .hero-copy {
+    order: 1;
+    width: 100%;
+    padding: 0 0 1rem;
+    opacity: 1;
+    transform: none;
+  }
+  main.kinetic-ready .hero h1 {
+    font-size: clamp(2.9rem, 13vw, 4.45rem);
+  }
+  main.kinetic-ready .hero-intro {
+    margin-top: 1.25rem;
+    font-size: 0.93rem;
+  }
+  .hero-signals {
+    margin-top: 1.35rem;
+  }
+  .hero-signals > div {
+    min-height: 58px;
+    padding: 0.65rem 0.45rem 0.65rem 0;
+  }
+  .hero-signals > div + div {
+    padding-left: 0.45rem;
+  }
+  .hero-signals dd {
+    font-size: 0.49rem;
+    letter-spacing: 0.045em;
+  }
+  main.kinetic-ready .noe-reactor {
+    order: 2;
+    width: min(84vw, 430px);
+    margin-top: 0.4rem;
+    transform: none;
+  }
+  main.kinetic-ready .noe-reactor .ecosystem-sphere-detail {
+    left: 50%;
+    bottom: -4.5%;
+    width: min(82%, 240px);
+    max-width: none;
+    padding: 0 0 0 0.5rem;
+    justify-items: start;
+    border-left: 1px solid rgba(152, 232, 207, 0.3);
+    border-top: 0;
+    background: transparent;
+    transform: translateX(-50%);
+  }
+  .kinetic-signal {
+    display: none;
+  }
+  .kinetic-timeline {
+    display: none;
+  }
+  .system-anatomy {
+    height: 132svh;
+  }
+  .anatomy-sticky {
+    min-height: 100svh;
+    overflow: hidden;
+  }
+  .anatomy-header {
+    top: 1.2rem;
+  }
+  .anatomy-header > div:last-child {
+    display: none;
+  }
+  .anatomy-copy {
+    top: 5rem;
+    left: 1.1rem;
+    width: calc(100% - 2.2rem);
+    transform: none;
+  }
+  .anatomy-copy > img {
+    width: 145px;
+    margin-bottom: 1.25rem;
+  }
+  .anatomy-copy > h2 {
+    max-width: 390px;
+    font-size: clamp(2.2rem, 10vw, 3.5rem);
+  }
+  .anatomy-chapters {
+    height: 120px;
+    margin-top: 1.25rem;
+  }
+  .anatomy-chapters p {
+    font-size: 0.82rem;
+  }
+  .anatomy-machine {
+    top: auto;
+    right: -4%;
+    bottom: 3.7rem;
+    width: min(106vw, 620px);
+    transform: rotate(calc((var(--anatomy-progress) - 0.5) * 5deg));
+  }
+  .anatomy-footer {
+    bottom: 1rem;
+  }
+  .anatomy-footer > span:first-child {
+    display: none;
+  }
+  .anatomy-progress {
+    width: 65vw;
+  }
+  .noe-experiment-stage {
+    top: 0;
+    height: 42svh;
+    margin-bottom: -42svh;
+  }
+  .noe-stage-header {
+    top: 0.75rem;
+  }
+  .noe-stage-header span:first-child {
+    display: none;
+  }
+  .noe-stage-footer {
+    bottom: 0.7rem;
+  }
+  .noe-scene {
+    top: 12%;
+    right: 0;
+    bottom: 10%;
+    left: 0;
+    transform: translate3d(0, calc(var(--scene-shift) * -18px), 0)
+      scale(calc(0.9 + var(--scene-presence) * 0.02));
+  }
+  .noe-experiment-panel {
+    min-height: 54svh;
+    padding: calc(42svh + 1rem) 1.1rem 2.1rem;
+    display: block;
+  }
+  .noe-experiment-panel:last-child {
+    padding-bottom: 4.5rem;
+  }
+  .noe-experiment-copy {
+    width: 100%;
+    padding: 0;
+  }
+  .noe-experiment-copy h2 {
+    font-size: clamp(2.5rem, 12vw, 4rem);
+  }
+  .noe-experiment-copy > p {
+    font-size: 0.9rem;
+  }
+  .noe-dot-field {
+    inset: 6%;
+  }
+  .noe-foundation-block {
+    min-width: 88px;
+    padding: 0.5rem;
+    font-size: 0.43rem;
+  }
+  .noe-network-core {
+    width: 54px;
+  }
+  .noe-human-orb {
+    width: 100px;
+  }
+  .noe-scene-caption {
+    display: none;
+  }
+  main.kinetic-ready .progress {
+    padding-bottom: 4.75rem;
+  }
+  main.kinetic-ready .assembly-row {
+    min-height: 78px;
+    grid-template-columns: 28px minmax(0, 1fr);
+    padding-right: 0;
+  }
+  main.kinetic-ready .assembly-row .status-word {
+    grid-column: 2;
+    margin-top: 0.35rem;
+    justify-self: start;
+  }
+  main.kinetic-ready .assembly-row:hover {
+    padding-left: 0;
+    background: transparent;
+  }
+  main.kinetic-ready footer#contact {
+    padding-bottom: 4.5rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .noe-reactor-aura,
+  .noe-reactor-ring,
+  .noe-reactor-arcs i,
+  .noe-dot-field i,
+  .noe-foundation-block,
+  .noe-scene-network path,
+  .noe-packet,
+  .noe-human-orbits i,
+  .noe-human-orb::before,
+  .noe-human-orb::after,
+  .noe-experiment-rule i {
+    animation: none !important;
+  }
+  .system-anatomy {
+    height: auto;
+  }
+  main.kinetic-ready .hero {
+    height: auto;
+    min-height: 100svh;
+  }
+  main.kinetic-ready .hero-layout {
+    position: relative;
+    height: auto;
+    min-height: 100svh;
+  }
+  main.kinetic-ready .hero-copy {
+    opacity: 1;
+    transform: none;
+  }
+  main.kinetic-ready .noe-reactor {
+    transform: none;
+  }
+  .hero-signals > div {
+    opacity: 1;
+    transform: none;
+  }
+  .hero-signals > div::after {
+    transform: scaleX(1);
+  }
+  .hero-signals > div::before {
+    opacity: 0.5;
+  }
+  .kinetic-timeline-progress i {
+    transform: none;
+  }
+  .anatomy-sticky {
+    position: relative;
+    height: auto;
+    min-height: 100svh;
+    overflow: visible;
+    padding-block: 5rem;
+  }
+  .anatomy-copy {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: min(620px, calc(100% - 2.2rem));
+    margin-left: var(--noe-stage-gutter);
+    transform: none;
+  }
+  .anatomy-chapters {
+    height: auto;
+    display: grid;
+    gap: 1.25rem;
+    overflow: visible;
+  }
+  .anatomy-chapters article {
+    position: relative;
+    opacity: 1;
+    transform: none;
+  }
+  .anatomy-machine {
+    opacity: 0.24;
+  }
+  .noe-experiment-stage {
+    display: none;
+    position: relative;
+    height: auto;
+    margin: 0;
+  }
+  .noe-scene {
+    transition: none;
+  }
+  .noe-experiment-panel {
+    min-height: 0;
+    padding-block: 4rem;
+  }
+  .noe-experiment-copy h2 span {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+  .noe-human-orb {
+    transition: none;
+  }
+}
+
+/* Light theme cinematic remapping — mirrors home-cinematic.css light block */
+html[data-theme="light"] .public-system-bar,
+html[data-theme="light"] main.kinetic-ready {
+  --mint: #0b6f6b;
+  --teal: #0b6f6b;
+}
+html[data-theme="light"] .public-system-bar {
+  color: var(--noe-canvas-copy);
+  background: rgba(243, 240, 234, 0.9);
+  box-shadow: 0 10px 34px rgba(23, 25, 24, 0.04);
+}
+html[data-theme="light"] .public-system-brand img,
+html[data-theme="light"] .anatomy-copy > img,
+html[data-theme="light"] .brand-logo-footer {
+  filter: none;
+}
+html[data-theme="light"] .noe-reactor-ring,
+html[data-theme="light"] .machine-halo,
+html[data-theme="light"] .machine-layer {
+  border-color: rgba(23, 25, 24, 0.2);
+}
+html[data-theme="light"] .machine-layer {
+  color: var(--noe-canvas-copy);
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 20px 70px rgba(23, 25, 24, 0.1);
+}