/* Home hero — the machine. The whole first screen is one instrument: rings turning, signal
   running inward, and the sentence sitting in the middle of it. Four words of copy.

   The hero is exactly one viewport of instrument and sentence, and it is a SECTION rather
   than the whole document, so the rest of the landing page sits under it in machine.css's
   shared language. The rig and the two readouts are absolute inside the hero — as `fixed`
   they would trail the reader down every section below. */
.di { overflow-x: hidden; }
.di .field { display: none; }
.di .bar { position: relative; z-index: 5; }
/* The header moved inside the first screen, so this one block is the old full-bleed page:
   exactly one viewport, header at the top, sentence centred in what is left. */
.di-first {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ---------- the instrument ---------- */
/* The type sits in a hole in the middle of the machine. Punching that hole with a var(--bg)
   radial overlay banded visibly — a wide, near-black gradient over a near-black page has
   nowhere near enough steps — so the hole is a mask on the machine itself instead: the page
   stays flat behind it and there is nothing to band. */
.di-rig {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 40% 32% at 50% 46%, transparent 34%, #000 100%);
  mask-image: radial-gradient(ellipse 40% 32% at 50% 46%, transparent 34%, #000 100%);
}
.di-rig svg { width: 100%; height: 100%; display: block; }

.ri-ring { fill: none; stroke: var(--ink); stroke-dasharray: 2 10; transform-origin: 50% 50%; }
.ri-ring.a { opacity: .3; animation: di-spin 70s linear infinite; }
.ri-ring.b { opacity: .24; animation: di-spin 110s linear infinite reverse; }
.ri-ring.c { opacity: .18; animation: di-spin 160s linear infinite; }
.ri-ring.d { opacity: .12; animation: di-spin 220s linear infinite reverse; }
.ri-solid { fill: none; stroke: var(--ink); opacity: .14; }
.ri-wire { stroke: var(--ink); opacity: .16; stroke-width: 1; }
.ri-flow {
  fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 26 700; animation: di-flow 5.2s cubic-bezier(.45,0,.3,1) infinite;
}
.ri-dot { fill: var(--ink); opacity: .45; animation: di-blink 5s ease-in-out infinite; }
.ri-core { fill: var(--accent); }
.ri-halo {
  fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .45;
  transform-box: fill-box; transform-origin: center; animation: di-halo 5.6s ease-out infinite;
}
/* one bright arc sweeping the outer ring, like a radar head */
.ri-scan {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .8;
  stroke-dasharray: 90 3000; transform-origin: 50% 50%; animation: di-spin 14s linear infinite;
  filter: drop-shadow(0 0 10px var(--accent));
}

/* ---------- the sentence ---------- */
.di-main {
  position: relative; z-index: 2; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 4vh, 44px); padding: 0 clamp(20px, 5vw, 64px) clamp(70px, 10vh, 110px);
  text-align: center;
}
.di-say {
  font-size: clamp(38px, 6.4vw, 108px); font-weight: 500; line-height: .94;
  letter-spacing: -.042em; max-width: 14ch;
}
.di-say em { font-weight: 600; letter-spacing: -.012em; }
.di-say span { display: block; }
.di-say .l2 { color: var(--ink-60); }

/* The two doors sit on one centred line and the price line reads under them, so the block
   stays a column on the hero's own axis instead of the old pill-then-caption row that hung
   off to one side. Readers were walking past the single small pill; the pair is the size of
   the decision it asks for. */
.di-act { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vh, 20px); }
.di-row { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); flex-wrap: wrap; justify-content: center; }
.di-door {
  display: inline-flex; align-items: center; gap: 11px;
  padding: clamp(15px, 1.7vh, 19px) clamp(24px, 2.1vw, 32px); border-radius: var(--r-pill);
  background: var(--pill-bg); color: var(--pill-ink);
  font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; letter-spacing: -.012em;
  box-shadow: 0 18px 46px var(--glass-shadow);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.di-door:hover { transform: translateY(-3px); box-shadow: 0 26px 66px var(--glass-shadow); }
.di-door svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.di-door:hover svg { transform: translateX(4px); }
/* the second door is glass, not a second solid pill — same height and weight so the pair
   reads as one control, different fill so the primary still leads */
.di-door.alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-spec) 42%, transparent), transparent 58%),
    var(--glass-tint);
  border: 1px solid var(--glass-border); color: var(--ink);
  padding-block: calc(clamp(15px, 1.7vh, 19px) - 1px);
  box-shadow: 0 14px 34px -20px var(--glass-shadow);
}
.di-door.alt:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--glass-border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass-spec) 52%, transparent), transparent 58%),
    color-mix(in srgb, var(--accent) 7%, var(--glass-tint));
  box-shadow: 0 22px 46px -22px var(--glass-shadow);
}
.di-door.alt:hover svg { transform: translateY(2px); }
.di-door:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); outline-offset: 3px; }
.di-note { font-size: var(--fs-copy); color: var(--ink-40); letter-spacing: .03em; }
.di-note b { color: var(--ink-60); font-weight: 500; }

/* ---------- instrument readouts, pinned to the corners ---------- */
.di-hud {
  position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.di-hud.left { left: clamp(18px, 3vw, 48px); bottom: clamp(70px, 9vh, 96px); }
.di-hud.right { right: clamp(18px, 3vw, 48px); bottom: clamp(70px, 9vh, 96px); text-align: right; }
.di-hud b { font-size: clamp(22px, 2.4vw, 34px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.di-hud i {
  font-style: normal; font-size: var(--fs-micro); letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-40);
}
.di-hud u {
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40);
}
.di-hud.right u, .di-hud.right .mx-count { justify-content: flex-end; }
/* the green pip and the reveal transition now come from machine.css, shared with /nexa */

@keyframes di-spin { to { transform: rotate(360deg); } }
@keyframes di-flow { 0% { stroke-dashoffset: 726; } 72%, 100% { stroke-dashoffset: 0; } }
@keyframes di-blink { 0%, 100% { opacity: .18; } 50% { opacity: .7; } }
@keyframes di-halo { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(3.2); opacity: 0; } }

@media (max-width: 900px) {
  .di-hud.left, .di-hud.right { bottom: auto; top: 12px; }
}
/* on a phone the pair stacks and each door takes the column, so neither ends up a stranded
   half-width pill next to a wrapped one */
@media (max-width: 560px) {
  .di-row { flex-direction: column; width: 100%; max-width: 320px; }
  .di-door { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-ring, .ri-flow, .ri-dot, .ri-halo, .ri-scan { animation: none; }
}