/*
  Home page (index.html): scroll-driven 3D, futuristic, in the site's own
  black and orange (Marc, 2026-10-16).

  Two layers, like the SIGNUM page:
   1. Plain rules: the page as stacked content. This is what a visitor gets
      with reduced motion, ?motion=calm or no JavaScript.
   2. html.motion-on rules: added by assets/signum-motion.js, which writes
      --p / --enter / --exit on each [data-scene], --k / --o on [data-k] /
      [data-o], --c on .rise3d and --v on [data-view]. See its header.

  The opening is a torquetum, the medieval instrument of stacked, tilted
  plates the company is named for: three plates (Design, Build, Run) start
  tilted on their own axes and swing into line as you scroll, then lock into
  the Torquetta mark.
*/

.home { --hdr: 71px; overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}
.home .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Shared scene frame ---- */

.home .scene { position: relative; }
.home .stage { position: relative; overflow: hidden; overflow: clip; padding: 96px 0; perspective: 1400px; }
.home .stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.home .visual { display: flex; justify-content: center; align-items: center; }
.home .scroll-cue { display: none; }

html.motion-on .home .scene.len-25 { height: 250vh; height: 250svh; }
html.motion-on .home .scene.len-3 { height: 300vh; height: 300svh; }
html.motion-on .home .scene .stage {
  position: sticky;
  top: var(--hdr);
  height: calc(100vh - var(--hdr));
  height: calc(100svh - var(--hdr));
  padding: 20px 0 28px;
  display: flex;
  align-items: center;
}
html.motion-on .home .scene .stage > .wrap {
  width: 100%;
  transform-origin: 50% 100%;
  transform:
    translateY(calc(var(--exit, 0) * -60px))
    translateZ(calc((1 - var(--enter, 1)) * -260px - var(--exit, 0) * 180px))
    rotateX(calc((1 - var(--enter, 1)) * 18deg - var(--exit, 0) * 14deg));
  opacity: calc(0.25 + var(--enter, 1) * 0.75 - var(--exit, 0) * 0.9);
  will-change: transform, opacity;
}
html.motion-on .home .scene [data-k] { --k: 0; }
html.motion-on .home .scene [data-o] { --o: 0; }

/* ---- The opening ---- */

.home-hero { background: var(--bg); }
.home-hero .stage { min-height: 640px; }
.home-hero .hero-copy { position: relative; z-index: 2; }
.home-hero h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); }

/* the floor: a lit grid running away to the horizon */
.home-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -8%;
  height: 62%;
  background-image:
    linear-gradient(rgba(255, 90, 31, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 31, 0.22) 1px, transparent 1px);
  background-size: 80px 80px;
  transform-origin: 50% 100%;
  transform: perspective(520px) rotateX(74deg);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  opacity: 0.55;
  pointer-events: none;
}
html.motion-on .home-floor { background-position: 0 calc(var(--p, 0) * 640px); }
.home-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  right: -18vmax;
  top: 50%;
  translate: 0 -50%;
  background: radial-gradient(closest-side, rgba(255, 90, 31, 0.16), transparent 70%);
  pointer-events: none;
}
html.motion-on .home-glow { opacity: calc(0.7 + var(--p, 0) * 0.6); }

.torq-visual { --ts: min(400px, 34vw); position: relative; perspective: 1100px; }
.torq-rig {
  transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(-18deg);
}
html.motion-on .home .torq-rig {
  transform:
    rotateX(calc(16deg - var(--p, 0) * 16deg - var(--my, 0) * 10deg))
    rotateY(calc(-18deg + var(--p, 0) * 18deg + var(--mx, 0) * 16deg));
}
.torq-stack {
  position: relative;
  width: var(--ts);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.plate {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.plate svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.45));
}
.pl-rim { fill: none; stroke: rgba(255, 90, 31, 0.4); stroke-width: 1; }
.pl-tick { fill: none; stroke: rgba(255, 90, 31, 0.55); stroke-width: 5; stroke-dasharray: 0.8 6.705; }
.pl-tick-major { fill: none; stroke: #ff5a1f; stroke-width: 10; stroke-dasharray: 1.4 43.63; }
.pl-hex { fill: rgba(255, 90, 31, 0.05); stroke: #ff5a1f; stroke-width: 2.2; stroke-linejoin: round; }
.pl-cross { stroke: rgba(255, 90, 31, 0.6); stroke-width: 1.2; }
.pl-ticks { transform-box: view-box; transform-origin: 100px 100px; animation: pl-spin 60s linear infinite; }
.pl-2 .pl-ticks { animation-direction: reverse; animation-duration: 45s; }
.pl-3 .pl-ticks { animation-duration: 80s; }
@keyframes pl-spin { to { transform: rotate(360deg); } }

.plate-label {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 14px;
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.plate-label b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.plate-label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 10px;
  margin-right: 4px;
  border-top: 1px solid rgba(255, 90, 31, 0.6);
}

/* the still picture (no motion): the plates sit tilted, the mark inside */
.pl-1 { transform: translateY(-14%) rotateX(62deg) rotateZ(20deg); }
.pl-2 { transform: rotateY(62deg) rotateX(12deg); }
.pl-3 { transform: translateY(14%) rotateX(-56deg) rotateY(24deg); }
.pl-2 .plate-label { left: auto; right: 100%; margin: 0 14px 0 0; }
.pl-2 .plate-label::before { right: auto; left: 100%; margin: 0 0 0 4px; }

.torq-core {
  /* flat, over the middle of the instrument, not inside its 3D stack:
     iPhone Safari drew it small in a corner there (Marc, 2026-10-16) */
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--ts) * 0.4);
  height: calc(var(--ts) * 0.4);
  margin: calc(var(--ts) * -0.2) 0 0 calc(var(--ts) * -0.2);
  filter: drop-shadow(0 0 24px rgba(255, 90, 31, 0.55));
  pointer-events: none;
}
.torq-core svg { width: 100%; height: 100%; }

/* with motion: --k on .torq-stack is 0 (tilted apart) to 1 (in line); the
   plates read it, the mark has its own --k and comes in last. Each plate's
   spin is a multiple of 60deg so the hexagons line up exactly. */
html.motion-on .home .pl-1 {
  transform:
    translateY(calc((1 - var(--k, 1)) * -26%))
    translateZ(calc((1 - var(--k, 1)) * 70px))
    rotateX(calc((1 - var(--k, 1)) * 64deg))
    rotateY(calc((1 - var(--k, 1)) * -16deg))
    rotateZ(calc((1 - var(--k, 1)) * 240deg));
}
html.motion-on .home .pl-2 {
  transform:
    translateZ(calc((1 - var(--k, 1)) * 10px))
    rotateY(calc((1 - var(--k, 1)) * 68deg))
    rotateX(calc((1 - var(--k, 1)) * 12deg))
    rotateZ(calc((1 - var(--k, 1)) * -180deg));
}
html.motion-on .home .pl-3 {
  transform:
    translateY(calc((1 - var(--k, 1)) * 26%))
    translateZ(calc((1 - var(--k, 1)) * -70px))
    rotateX(calc((1 - var(--k, 1)) * -58deg))
    rotateY(calc((1 - var(--k, 1)) * 26deg))
    rotateZ(calc((1 - var(--k, 1)) * 120deg));
}
html.motion-on .home .plate-label { opacity: calc(1 - var(--k, 1) * 1.4); }
html.motion-on .home .torq-core {
  opacity: var(--k, 1);
  transform: scale(calc(0.55 + var(--k, 1) * 0.45));
}
html.motion-on .home-hero .scroll-cue {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: calc(1 - var(--p, 0) * 6);
}
.home-hero .scroll-cue span { display: block; width: 1px; height: 36px; background: linear-gradient(transparent, var(--accent)); }

/* ---- How we operate ---- */

.home-ops { background: var(--bg-panel); }
.home-ops .beat { margin-top: 28px; }
.home-ops .beat h3 { margin-bottom: 10px; }
.home-ops .beat p { max-width: 520px; }
.home .ops-visual { display: none; }

html.motion-on .home .ops-visual { display: flex; flex-direction: column; gap: 40px; }
html.motion-on .home .beats { display: grid; perspective: 900px; }
html.motion-on .home .beat {
  grid-area: 1 / 1;
  margin-top: 12px;
  opacity: calc(var(--k, 1) - var(--o, 0));
  transform:
    translateY(calc((1 - var(--k, 1)) * 48px - var(--o, 0) * 48px))
    rotateX(calc((1 - var(--k, 1)) * -28deg + var(--o, 0) * 28deg));
  transform-origin: 50% 50% -60px;
}
.ops-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: min(360px, 30vw);
  aspect-ratio: 1;
}
.ops-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.4));
  transform: rotateX(calc(28deg - var(--p, 0) * 28deg)) rotateZ(calc(var(--p, 0) * 120deg));
}
.ops-num {
  grid-area: 1 / 1;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(3.5rem, 7vw, 6rem);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  text-shadow: 0 0 30px rgba(255, 90, 31, 0.35);
  opacity: calc(var(--k, 1) - var(--o, 0));
  transform: translateZ(0) scale(calc(0.7 + var(--k, 1) * 0.3 + var(--o, 0) * 0.5));
}
.ops-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: min(360px, 30vw);
}
.ops-rail::before,
.ops-fill {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--border-strong);
}
.ops-fill {
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--k, 1));
  box-shadow: 0 0 10px rgba(255, 90, 31, 0.6);
}
.ops-node {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-panel);
}
.ops-node.on,
html.motion-on .home .ops-node[data-k] {
  border-color: var(--accent);
  background: rgba(255, 90, 31, calc(var(--k, 1)));
  box-shadow: 0 0 calc(var(--k, 1) * 12px) rgba(255, 90, 31, 0.7);
}

/* ---- The fleet ---- */

.home-fleet { padding: 120px 0; }
html.motion-on .home .rise3d {
  opacity: calc(0.35 + var(--c, 1) * 0.65);
  transform-origin: 50% 100%;
  transform:
    perspective(1000px)
    translateY(calc((1 - var(--c, 1)) * 80px))
    rotateX(calc((1 - var(--c, 1)) * 42deg))
    rotateY(calc((1 - var(--c, 1)) * var(--ry, 0deg)));
}
/* the opening's instrument is a .rise3d only to arrive; it never tilts */
html.motion-on .home .torq-visual.rise3d { transform: translateY(calc((1 - var(--c, 1)) * 60px)); }

/* ---- Closing ---- */

.home-cta { position: relative; overflow: hidden; padding: 120px 0 140px; background: var(--bg-panel); }
.home-horizon {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -60%;
  height: 100%;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 90, 31, 0.6);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 90, 31, 0.16), transparent 60%);
  box-shadow: 0 -10px 60px rgba(255, 90, 31, 0.15);
  pointer-events: none;
}
.home-cta .wrap { position: relative; }

/* ---- Phones and tablets ----
   The opening is not pinned: words first, the instrument below them, and it
   lines up as it travels up the screen (--v on .torq-rig, which the plates
   and the mark read instead of the scene's --p). */
@media (max-width: 860px) {
  .home { --hdr: 77px; }
  html.motion-on .home-hero .scroll-cue { display: none; }
  .home .stage-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home-hero .stage { min-height: 0; padding: 56px 0 72px; }
  html.motion-on .home .scene.home-hero.len-25 { height: auto; --p: 0 !important; }
  html.motion-on .home .home-hero .stage { position: relative; top: auto; height: auto; padding: 56px 0 72px; display: block; }
  .torq-visual { --ts: min(300px, 62vw); }
  html.motion-on .home .home-hero .torq-stack { --k: clamp(0, calc(var(--v, 0) * 1.8), 1) !important; }
  html.motion-on .home .home-hero .torq-core { --k: clamp(0, calc((var(--v, 0) - 0.32) * 5), 1) !important; }
  html.motion-on .home .torq-rig { transform: rotateX(calc(16deg - var(--v, 0) * 30deg)) rotateY(calc(-18deg + var(--v, 0) * 36deg)); }
  .plate-label { font-size: 0.62rem; letter-spacing: 0.12em; }
  .home-glow { right: -40vmax; }

  /* a smaller dial on phones fills the space under the words */
  html.motion-on .home .ops-visual { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ops-dial { width: min(190px, 46vw); }
  .ops-num { font-size: 2.8rem; }
  .ops-rail { width: 100%; max-width: 360px; }
  .home-fleet, .home-cta { padding: 88px 0; }
}
@media (max-width: 600px) {
  .home .wrap { padding: 0 20px; }
  .torq-visual { --ts: min(260px, 58vw); }
  html.motion-on .home .scene .stage { padding: 12px 0 20px; }
  html.motion-on .home .home-ops h2 { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-ticks { animation: none; }
}

/* ======================================================================
   The journey (added 2026-10-16, Marc: "really want to feel as though the
   user is going on an interactive journey as they scroll").
   --g (0 to 1 down the whole page) and --mx / --my (the mouse) come from
   assets/home-journey.js. All of it is under html.motion-on.
   ====================================================================== */

.journey, .hud { display: none; }

/* A world behind every section: a floor running away under you and
   hexagon gates that fly toward you and past as you scroll. */
html.motion-on .journey {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: calc(50% + var(--mx, 0) * 6%) calc(45% + var(--my, 0) * 6%);
}
html.motion-on .home > section { position: relative; z-index: 1; }
html.motion-on .home .home-hero,
html.motion-on .home .home-path,
html.motion-on .home .home-fleet { background: transparent; }
html.motion-on .home .home-ops { background: rgba(19, 20, 24, 0.5); }
html.motion-on .home .home-cta { background: linear-gradient(180deg, transparent, var(--bg-panel) 45%); }
html.motion-on .home .home-floor { display: none; }

.journey-floor {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -12%;
  height: 66%;
  background-image:
    linear-gradient(rgba(255, 90, 31, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 31, 0.2) 1px, transparent 1px);
  background-size: 90px 90px;
  background-position: 0 calc(var(--g, 0) * 7200px);
  transform-origin: 50% 100%;
  transform: rotateX(76deg);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 80%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 80%);
  opacity: 0.5;
}
.jring {
  --z: calc(var(--g, 0) * 6000 - var(--i) * 700 - 400);
  position: absolute;
  left: 50%;
  top: 45%;
  width: 72vmin;
  height: 72vmin;
  margin: -36vmin 0 0 -36vmin;
  transform:
    translateZ(calc(var(--z) * 1px))
    rotateZ(calc(var(--i) * 17deg + var(--g, 0) * 90deg));
  /* fades in far away, out just before it reaches you */
  opacity: calc(min(clamp(0, (var(--z) + 3200) / 2600, 1), clamp(0, (820 - var(--z)) / 260, 1)) * 0.45);
}
.jring svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 90, 31, 0.6)); }
.jring polygon { fill: none; stroke: #ff5a1f; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.r0 { --i: 0; } .r1 { --i: 1; } .r2 { --i: 2; } .r3 { --i: 3; }
.r4 { --i: 4; } .r5 { --i: 5; } .r6 { --i: 6; } .r7 { --i: 7; }

/* The route map: where you are on the page, and a way to jump. */
html.motion-on .hud {
  display: flex;
  position: fixed;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  flex-direction: column;
  gap: 18px;
}
html.motion-on .hud::before,
html.motion-on .hud::after {
  content: "";
  position: absolute;
  right: 3.5px;
  top: 4px;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--border-strong);
}
html.motion-on .hud::after {
  background: var(--accent);
  height: calc((100% - 8px) * var(--g, 0));
  box-shadow: 0 0 8px rgba(255, 90, 31, 0.7);
}
.hud a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud i {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hud span { opacity: 0; translate: 6px 0; transition: opacity .3s ease, translate .3s ease; }
.hud a:hover span, .hud a:focus-visible span, .hud a.on span { opacity: 1; translate: 0 0; }
.hud a.on { color: var(--text); }
.hud a.on i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 90, 31, 0.8); transform: scale(1.3); }
@media (max-width: 1180px) {
  html.motion-on .hud { display: none; }
}

/* ---- How we ship: the stations go by sideways while you stay put ---- */

.home-path { padding: 96px 0; }
.path-line { display: none; }
.path-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding: 0 32px;
}
.station {
  background: rgba(19, 20, 24, 0.85);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
}
.station-glyph {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.6));
}
.station-num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.station h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 12px; }
.station p { margin: 0; }

html.motion-on .home .home-path { padding: 0; }
html.motion-on .home .scene.len-4 { height: 400vh; height: 400svh; }
html.motion-on .home .home-path .stage { flex-direction: column; align-items: stretch; justify-content: center; gap: 36px; }
html.motion-on .home .path-window { position: relative; perspective: 1200px; }
/* each station is 42vw wide with a 6vw gap (48vw apart); the first starts
   centred, and --p from 0 to 1 slides the fifth to the centre */
html.motion-on .home .path-track {
  display: flex;
  gap: 6vw;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0 0 0 29vw;
  transform: translateX(calc(var(--p, 0) * -192vw));
  transform-style: preserve-3d;
}
html.motion-on .home .station {
  --f: calc(var(--k, 1) - var(--o, 0));
  width: 42vw;
  flex-shrink: 0;
  opacity: calc(0.22 + var(--f) * 0.78);
  border-color: rgba(255, 90, 31, calc(0.15 + var(--f) * 0.55));
  box-shadow: 0 30px 90px -40px rgba(255, 90, 31, calc(var(--f) * 0.7));
  transform:
    rotateY(calc((1 - var(--k, 1)) * -40deg + var(--o, 0) * 40deg))
    translateZ(calc((var(--f) - 1) * 200px))
    scale(calc(0.84 + var(--f) * 0.16));
}
html.motion-on .home .path-line {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(255, 90, 31, 0.55) 0 16px, transparent 16px 36px);
  background-position: calc(var(--p, 0) * -192vw) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.path-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.2), 0 0 24px rgba(255, 90, 31, 0.9);
  animation: path-pulse 1.6s ease-in-out infinite;
}
@keyframes path-pulse { 50% { box-shadow: 0 0 0 14px rgba(255, 90, 31, 0), 0 0 30px rgba(255, 90, 31, 1); } }

/* ---- The fleet flies in from deep space, one card from each side ---- */

.home-fleet .app-card-art { aspect-ratio: 2 / 1; }
html.motion-on .home .home-fleet .app-cards { margin-top: 28px; perspective: 1400px; }
html.motion-on .home .home-fleet .app-card {
  transform:
    translate3d(calc((1 - var(--k, 1)) * var(--fx)), calc((1 - var(--k, 1)) * 140px), calc((1 - var(--k, 1)) * -1600px))
    rotateY(calc((1 - var(--k, 1)) * var(--fr) + var(--mx, 0) * 6deg))
    rotateX(calc((1 - var(--k, 1)) * 30deg - var(--my, 0) * 5deg));
  opacity: calc(var(--k, 1) * 1.3);
}
html.motion-on .home .app-card-signum { --fx: -35vw; --fr: 55deg; }
html.motion-on .home .app-card-optletics { --fx: 35vw; --fr: -55deg; }
html.motion-on .home .home-fleet .app-card:hover { translate: 0 -6px; }

/* ---- Phones and tablets for the journey ---- */
@media (max-width: 860px) {
  html.motion-on .home .path-track { gap: 6vw; padding-left: 12vw; transform: translateX(calc(var(--p, 0) * -328vw)); }
  html.motion-on .home .station { width: 76vw; }
  html.motion-on .home .path-line { background-position: calc(var(--p, 0) * -328vw) 0; }
  .station { padding: 24px; }

  /* the fleet is not pinned here: each card flies in as it comes up the
     screen (--v), so both fit without a tall pinned stage */
  html.motion-on .home .scene.home-fleet.len-25 { height: auto; --p: 0 !important; }
  html.motion-on .home .home-fleet .stage { position: relative; top: auto; height: auto; padding: 88px 0; display: block; }
  html.motion-on .home .home-fleet .app-card { --k: clamp(0, calc(var(--v, 0) * 3), 1) !important; }
  html.motion-on .home .app-card-signum { --fx: -18vw; --fr: 35deg; }
  html.motion-on .home .app-card-optletics { --fx: 18vw; --fr: -35deg; }
  .jring { width: 92vmin; height: 92vmin; margin: -46vmin 0 0 -46vmin; }
}
@media (prefers-reduced-motion: reduce) {
  .path-pulse { animation: none; }
}

/* ======================================================================
   Sci-fi layer (2026-10-16, Marc: "more futuristic and sci-fi ... on par
   with other movement/motion based websites").
   - .gl-stage: the WebGL canvas from assets/home-gl.js (warp corridor of
     hexagon gates, star streaks, point terrain). With it running
     (html.gl-on) the CSS stand-in .journey is hidden.
   - .hud-frame: corner brackets, live readouts, faint scanlines.
   - headings split into orange and blue as their scene arrives.
   ====================================================================== */

.gl-stage { display: none; }
html.motion-on.gl-on .gl-stage {
  display: block;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
html.motion-on.gl-on .journey { display: none; }
/* the page sits over the canvas; the panels let the world show through */
html.motion-on.gl-on .home .home-ops { background: rgba(10, 10, 12, 0.35); }
html.motion-on.gl-on .home .home-cta { background: linear-gradient(180deg, transparent, rgba(19, 20, 24, 0.85) 55%); }
/* the footer sits above the fixed screen frame, so its corner label never
   covers the footer text on phones */
html.motion-on .site-footer { position: relative; z-index: 31; background: var(--bg); }
html.motion-on.gl-on .nav { background: rgba(10, 10, 12, 0.6); }

/* the frame */
.hud-frame { display: none; }
html.motion-on .hud-frame {
  display: block;
  position: fixed;
  inset: calc(var(--hdr, 71px) + 14px) 14px 14px 14px;
  z-index: 30;
  pointer-events: none;
}
/* scanlines and a vignette over the whole view, very faint */
html.motion-on .hud-frame::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55));
}
.hf-c {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(255, 90, 31, 0.7);
  border-style: solid;
  border-width: 0;
}
.hf-tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.hf-tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.hf-bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.hf-br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.hf-read {
  position: absolute;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.hf-read b { color: var(--accent); font-weight: 600; }
.hf-read i { font-style: normal; opacity: 0.5; margin: 0 6px; }
.hf-left { left: 32px; }
.hf-right { right: 32px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  html.motion-on .hud-frame { inset: calc(var(--hdr, 77px) + 8px) 8px 8px 8px; }
  .hf-right { display: none; }
  .hf-left { left: 26px; }
}

/* headings split into orange and blue as their scene comes in, and when
   the opening line leaves */
html.motion-on .home .scene h2 {
  text-shadow:
    calc((1 - var(--enter, 1)) * 10px + var(--exit, 0) * 8px) 0 rgba(255, 90, 31, 0.75),
    calc((1 - var(--enter, 1)) * -10px - var(--exit, 0) * 8px) 0 rgba(91, 140, 255, 0.65);
}
html.motion-on .home .home-hero h1 {
  text-shadow:
    calc(var(--p, 0) * 8px) 0 rgba(255, 90, 31, 0.7),
    calc(var(--p, 0) * -8px) 0 rgba(91, 140, 255, 0.6),
    0 0 40px rgba(255, 90, 31, 0.25);
}
html.motion-on .home .eyebrow { text-shadow: 0 0 12px rgba(255, 90, 31, 0.6); }

/* glass panels for the cards over the 3D world */
html.motion-on.gl-on .home .station,
html.motion-on.gl-on .home .app-card {
  background: rgba(14, 15, 19, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* plain-language pass (2026-10-16): one plain sentence under each app's line */
.app-card-line { margin: -12px 0 22px; color: var(--text-dim); }
.home .hero-actions.justify-center { justify-content: center; }