/* Orion Studio Pro: "The Movement", the page layer over the scene. Words sit on the left in a quiet zone the camera
   keeps clear, with a scrim under them; each act fades and rises with the scroll (--w, 0 to 1, set by boot.js). */
body { font-weight: 400; letter-spacing: 0.005em; }
.hd-brand__name { font-weight: 500; font-size: 1.12em; letter-spacing: 0.01em; }
.hd-brand__mark { fill: var(--color-ink); }
.hd-link--ask { color: var(--color-ink); }
.hd-link::after { background: var(--color-ruby); }
.btn--main { background: var(--color-ink); color: var(--color-ink-on-bright); }

.poster img { object-position: 62% 50%; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 22%, var(--scrim-mid) 40%, var(--scrim-clear) 62%); }

.act { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); align-items: center; gap: var(--space-7);
  padding: calc(var(--hd-h) + 2rem) var(--gutter) 5rem; opacity: var(--w, 0); pointer-events: none; visibility: hidden; }
.act.is-on { visibility: visible; }
.act.is-on .act__words a, .act.is-on .act__words button { pointer-events: auto; }
.act__words { transform: translateY(calc((1 - var(--w, 0)) * 1.25rem)); }
.label { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-orion); }
.label::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--color-ruby); }
.act h1, .act h2 { font-family: var(--font-display); color: var(--color-ink); text-wrap: balance; }
.hero__title { margin-top: var(--space-4); font-size: var(--text-hero); font-weight: 300; line-height: 0.98; letter-spacing: -0.02em; }
.act h2 { margin-top: var(--space-3); font-size: var(--text-2xl); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em; }
.act__words > p:not(.label) { margin-top: var(--space-4); max-width: 32rem; color: var(--color-ink); font-size: var(--text-base); line-height: 1.55; }
.hero__product { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; color: var(--color-ink); }
.hero__acts, .ask__act { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.small { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-ink-dim); }

/* the act's little panel: what the screen in Orion says, in words, never invented money */
.card { justify-self: end; align-self: end; width: min(100%, 22rem); margin-bottom: 1rem; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-panel-line); border-radius: var(--radius-lg);
  background: var(--color-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--text-sm); color: var(--color-ink-muted);
  transform: translateY(calc((1 - var(--w, 0)) * 1.5rem)); }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.card__title { font-weight: 500; color: var(--color-ink); }
.tag { font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-ink-dim); border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); padding: 0.1em 0.65em; white-space: nowrap; }
.card ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.card li { display: flex; justify-content: space-between; gap: var(--space-4); }
.card li b { font-weight: 500; color: var(--color-ink); text-align: right; }
.card li b.is-warn { color: var(--color-lamp); }

.status { z-index: 3; }

@media (max-width: 47.99rem) {
  .stage::after { background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 34%, var(--scrim-mid) 58%, var(--scrim-clear) 86%); }
  .act { grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--space-4); padding: calc(var(--hd-h) + 1rem) var(--gutter) 5.25rem; }
  .card { display: none; }
  .hero__acts .btn { flex: 1 1 12rem; }
  .act__words > p:not(.label) { font-size: var(--text-sm); margin-top: var(--space-3); }
  .poster img { object-position: 60% 30%; }
}
@media (prefers-reduced-motion: reduce) { .act__words, .card { transform: none; } }
@media (forced-colors: active) { .card { border: 1px solid CanvasText; } .label::before { background: Highlight; } }

.mark { position: absolute; left: 0; width: 1px; height: 1px; }