/* RiZe V31 — focused checkpoint system, ported from the codex-soty "sector engine"
   (rizesector-soty-codex-parallel-2026-07-28). Route rail, HUD telemetry and
   two in-journey story acts, re-scoped onto the dark-city cinematic. Overlay
   only: every element is driven by the same scroll progress as the 3D world. */

.flight-sticky {
  --ink: #f1f1ed;
  --void: #050505;
  --muted: #8f8f8a;
  --dim: #4c4c48;
  --line: rgba(241, 241, 237, 0.14);
  --line-strong: rgba(241, 241, 237, 0.32);
  --header-h: 64px;
}

/* ---------------------------------------------------------- HUD telemetry */
.engine-status {
  position: absolute; z-index: 20; left: 28px; right: 28px; bottom: 27px;
  display: flex; justify-content: space-between;
  font: 500 9px/1 "Geist Mono", monospace; letter-spacing: 0.12em;
  color: var(--muted); pointer-events: none;
}
.engine-status span:last-child { display: flex; align-items: center; gap: 8px; }
.engine-status i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 8px var(--ink);
}

.engine-progress {
  position: absolute; z-index: 25; top: calc(var(--header-h) + 18px); left: 28px;
  width: 1px; height: 92px; background: var(--line); pointer-events: none;
}
.engine-progress i {
  display: block; width: 1px; height: 100%;
  background: var(--ink); transform-origin: top; transform: scaleY(0);
}
.engine-progress span {
  position: absolute; top: calc(100% + 10px); left: -4px;
  font: 500 8px/1 "Geist Mono", monospace; letter-spacing: 0.06em;
  color: var(--muted); writing-mode: vertical-rl;
}

/* ---------------------------------------------------------- route rail */
.engine-route {
  position: absolute; z-index: 25; right: 27px; top: 50%; margin: 0; padding: 0;
  list-style: none; transform: translateY(-50%); display: grid; gap: 13px;
  pointer-events: none;
}
.engine-route li {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  color: var(--dim); font: 500 8px/1 "Geist Mono", monospace;
  letter-spacing: 0.1em; transition: color 0.25s ease;
}
.engine-route li::after {
  content: ""; width: 25px; height: 1px; background: currentColor;
  transform: scaleX(0.32); transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.engine-route b {
  font-weight: 500; opacity: 0; transform: translateX(5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.engine-route li.is-active { color: var(--ink); }
.engine-route li.is-active::after { transform: scaleX(1); }
.engine-route li.is-active b { opacity: 1; transform: none; }

/* ---------------------------------------------------------- acts */
.engine-act {
  position: absolute; z-index: 5; inset: 0;
  padding: calc(var(--header-h) + 44px) clamp(28px, 6vw, 96px) 58px;
  opacity: var(--chapter-opacity, 0);
  visibility: hidden; pointer-events: none;
  transform: translate3d(0, var(--chapter-shift, 26px), 0);
  transition: visibility 0s linear 0.2s;
  will-change: opacity, transform;
}
.engine-act.is-active { visibility: visible; transition-delay: 0s; }
.engine-act.is-active a { pointer-events: auto; }

.act-kicker {
  display: flex; align-items: center; gap: 16px; margin: 0;
  color: var(--muted); font: 600 9px/1 "Geist Mono", monospace; letter-spacing: 0.13em;
}
.act-kicker span + span { display: flex; align-items: center; gap: 16px; }
.act-kicker span + span::before { content: ""; width: 31px; height: 1px; background: var(--line-strong); }

.engine-act h2 {
  margin: 0; font-family: Syne, Arial, sans-serif; font-weight: 800;
  line-height: 0.83; letter-spacing: -0.038em;
  font-size: clamp(44px, 6.8vw, 108px); color: var(--ink);
  margin-top: 16px; text-shadow: 0 2px 26px rgba(5, 5, 5, 0.55);
}
.engine-act em {
  font-style: normal; color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 237, 0.72);
}
.act-intro {
  margin: 26px 0 0; max-width: 470px; color: #c1c1bd;
  font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65;
  text-shadow: 0 1px 14px rgba(5, 5, 5, 0.7);
}
.act-number {
  position: absolute; right: 7vw; top: 13vh; color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 237, 0.14);
  font: 700 clamp(150px, 22vw, 360px)/0.7 Syne, Arial, sans-serif;
  letter-spacing: -0.04em; pointer-events: none;
}

/* entry: kicker + dateline only — the Syne wordmark lives inside the chamber */
.engine-act--entry .act-kicker {
  position: absolute; top: calc(var(--header-h) + 8vh); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
}
.entry-footer {
  position: absolute; left: clamp(28px, 6vw, 96px); right: clamp(28px, 6vw, 96px);
  bottom: 9vh; display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.entry-footer p { max-width: 330px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.entry-footer span { font: 500 12px/1 "Geist Mono", monospace; letter-spacing: 0.12em; color: var(--ink); }

/* origin: copy left, data column right */
.engine-act--origin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 32vw); align-items: center; gap: 8vw; }
.origin-data { align-self: end; margin: 0 0 6vh; border-top: 1px solid var(--line); }
.origin-data div {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.origin-data dt { font: 500 9px/1 "Geist Mono", monospace; letter-spacing: 0.12em; color: var(--muted); }
.origin-data dd { margin: 0; font: 600 clamp(17px, 1.9vw, 26px)/1 Syne, Arial, sans-serif; color: var(--ink); }

/* shared link band (application / supply CTAs) */
.act-link {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  width: min(430px, 74vw); padding: 17px 0; margin-top: 34px;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.8), rgba(5, 5, 5, 0.18));
  color: inherit; text-decoration: none;
}
.act-link span { grid-column: 1; font: 500 9px/1 "Geist Mono", monospace; letter-spacing: 0.12em; color: var(--muted); }
.act-link strong { grid-column: 1; font: 650 clamp(16px, 1.6vw, 24px)/1.1 Syne, Arial, sans-serif; color: var(--ink); }
.act-link b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; color: var(--ink); }

/* return act keeps social links inline */
.engine-act--return nav { display: grid; gap: 12px; margin-top: 30px; }
.engine-act--return nav a {
  display: flex; justify-content: space-between; align-items: center;
  width: min(360px, 70vw); padding: 13px 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 600 11px/1 "Geist Mono", monospace; letter-spacing: 0.12em;
}

@media (max-width: 820px) {
  .engine-route { display: none; }
  .engine-progress { display: none; }
  .engine-act--origin { display: block; }
  .origin-data { margin-top: 26px; }
  .act-number { font-size: clamp(110px, 34vw, 200px); top: 9vh; }
  .engine-act h2 { font-size: clamp(36px, 9.4vw, 64px); }
}

/* V31 checkpoint media: one opaque editorial card, not type floating over the
   city. The hard edge and pale product wells echo the scene's monochrome signal
   language while leaving the right half of the flight visible. */
.engine-act--checkpoint {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.checkpoint-panel {
  position: relative;
  width: min(570px, calc(100vw - 120px));
  padding: clamp(24px, 3vw, 40px);
  background: rgba(5, 6, 7, 0.96);
  border: 1px solid rgba(241, 241, 237, 0.34);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.checkpoint-panel::after {
  content: ""; position: absolute; width: 30px; height: 30px; right: -1px; top: -1px;
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.checkpoint-panel h2 { font-size: clamp(42px, 5.4vw, 82px); margin-top: 18px; }
.act-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.act-products img {
  width: 100%; min-width: 0; aspect-ratio: 1; height: auto; object-fit: contain;
  padding: 9px; background: #d8d8d2;
  filter: grayscale(1) contrast(1.08);
}
.checkpoint-panel .act-link { width: 100%; margin-top: 22px; background: none; }
.engine-act--video { align-items: flex-end; }
.engine-act--video .checkpoint-panel {
  width: min(520px, calc(100vw - 120px));
  background: rgba(5, 6, 7, 0.93);
}
.engine-act--video .checkpoint-panel h2 {
  font-size: clamp(38px, 4.2vw, 58px);
}
.act-video { display: block; margin-top: 24px; width: 100%; color: var(--ink); text-decoration: none; }
.act-video img {
  width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; display: block;
  border: 1px solid var(--line-strong);
  filter: grayscale(1) contrast(1.12) brightness(0.86);
}
.act-video span {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  font: 600 10px/1 "Geist Mono", monospace; letter-spacing: 0.12em;
}

/* Finale act: the SOTY reference's disciplined left-copy/right-process split. */
.engine-act--join { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); align-items: center; gap: 6vw; }
.join-copy { align-self: center; max-width: 660px; }
.engine-act--join h2 { color: #0a0a0a; text-shadow: none; }
.engine-act--join em { -webkit-text-stroke: 1.4px rgba(10, 10, 10, 0.66); }
.engine-act--join .act-kicker { color: #3c3f42; }
.engine-act--join .act-kicker span + span::before { background: rgba(10, 10, 10, 0.4); }
.engine-act--join .act-intro { color: #303336; text-shadow: none; }
.join-steps {
  align-self: center; display: grid; margin: 0;
  background: rgba(8, 9, 10, 0.96); border: 1px solid rgba(10, 10, 10, 0.64);
  box-shadow: 0 22px 60px rgba(10, 10, 10, 0.18);
}
.join-steps div {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; padding: 17px 22px;
  border-bottom: 1px solid rgba(241, 241, 237, 0.12);
}
.join-steps div:last-child { border-bottom: 0; }
.join-steps b { grid-row: 1 / 3; align-self: start; color: #6d7277; font: 500 10px/1.4 "Geist Mono", monospace; }
.join-steps strong { color: #f1f1ed; font: 700 12px/1.3 "Geist Mono", monospace; letter-spacing: 0.1em; }
.join-steps span { color: #b9bcbe; font-size: 12.5px; line-height: 1.5; margin-top: 4px; }
@media (max-width: 820px) {
  .engine-act--checkpoint { padding-left: 18px; padding-right: 18px; }
  .checkpoint-panel { width: 100%; padding: 22px; }
  .engine-act--video .checkpoint-panel { width: 100%; }
  .checkpoint-panel h2 { font-size: clamp(38px, 13vw, 56px); }
  .act-products { gap: 8px; }
  .engine-act--join { display: block; }
  .engine-act--join h2 { font-size: clamp(40px, 12vw, 58px); }
  .join-steps { margin-top: 24px; }
}