/* ORBINTU hero — FIELD (background environment) + CHASSIS (outer instrument frame).
   The ORBI OS screen inside is untouched. Geometry runs off one pixel unit --u (= chassis width / 260) so every rail scales together. */

/* ───────── FIELD ───────── */
.ob-field { position: absolute; inset: 0 0 -1px; z-index: 5; pointer-events: none; overflow: hidden; background: #070605; --wg: 216, 205, 190; --px: 0; --py: 0; --sy: 0px; }
.ob-field > div { position: absolute; inset: 0; }
/* far field: near-invisible technical grid + scanlines + grain, brighter toward the instrument so the screen separates from the void */
.ob-field__far { transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px));
  background:
    repeating-linear-gradient(0deg, rgba(var(--wg), .022) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(var(--wg), .05) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, rgba(var(--wg), .05) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(var(--wg), .022) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(var(--wg), .022) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 64%, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.18) 100%); mask-image: radial-gradient(ellipse 78% 62% at 50% 64%, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.18) 100%);
  }   /* still: no ambient drift (motion is reserved for meaning) */
.ob-field__far::after { content: ""; position: absolute; inset: 0; opacity: .05; background-size: 140px 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes obGridDrift { to { background-position: 0 0, 96px 0, 0 96px, 24px 0, 0 24px; } }
/* mid field: calibration rulers, sparse signal pixels, orange system markers */
.ob-field__mid { transform: translate(calc(var(--px) * 4px), calc(var(--py) * 4px + var(--sy))); }
.ob-field .cal { position: absolute; top: 4%; bottom: 4%; width: 9px; opacity: .8;
  background: repeating-linear-gradient(0deg, rgba(var(--wg), .2) 0 1px, transparent 1px 12px) 0 0 / 4px 100% no-repeat, repeating-linear-gradient(0deg, rgba(var(--wg), .3) 0 1px, transparent 1px 60px) 0 0 / 9px 100% no-repeat; }
.ob-field .cal--l { left: 2.2%; } .ob-field .cal--r { right: 2.2%; background-position: 100% 0, 100% 0; }
.ob-field .cal em { position: absolute; left: 14px; font: normal 9px/1 var(--ob-font, monospace); letter-spacing: .1em; color: rgba(var(--wg), .3); transform: translateY(-50%); }
.ob-field .cal--r em { left: auto; right: 14px; }
.ob-field b { position: absolute; left: 0; width: 5.2%; height: 1px; background: rgba(var(--wg), .1); }
.ob-field b:nth-of-type(even) { left: auto; right: 0; }
.ob-field b.o { background: linear-gradient(90deg, rgba(250,104,12,.5), rgba(250,104,12,0)); }
.ob-field b.o:nth-of-type(even) { background: linear-gradient(270deg, rgba(250,104,12,.5), rgba(250,104,12,0)); }
.ob-field u { position: absolute; width: 11px; height: 11px; transform: translate(-50%, -50%); text-decoration: none;
  background: linear-gradient(rgba(var(--wg), .22), rgba(var(--wg), .22)) center / 11px 1px no-repeat, linear-gradient(rgba(var(--wg), .22), rgba(var(--wg), .22)) center / 1px 11px no-repeat; }
.ob-field .sig i { position: absolute; background: rgba(var(--wg), .16); }
.ob-field .sig i.w { background: rgba(var(--wg), .3); }
.ob-field .sig i.o { background: rgba(250, 104, 12, .7); animation-duration: 9s; }
@keyframes obSig { 0%, 100% { opacity: 1; } 31% { opacity: .35; } 34% { opacity: 1; } 71% { opacity: .55; } 73% { opacity: 1; } }
.ob-field .cal i.on, .ob-field b.on { background: rgba(250, 104, 12, .8); }
/* hero field: a gentle contrast halo behind the instrument (centred on the chassis, not the page) */
.ob-field__halo { inset: auto -8% 0; top: var(--halo-top, 34%); transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px));
  background: radial-gradient(ellipse 52% 50% at 50% 47%, rgba(255, 238, 214, .075) 0%, rgba(250, 104, 12, .03) 42%, transparent 72%); }
.ob-field--off * , .ob-field--off { animation-play-state: paused !important; }

/* ───────── CHASSIS ───────── */
.ob-monitor { padding-bottom: clamp(56px, 8vw, 120px); }
.ob-chq { container-type: inline-size; width: min(100%, 1080px); margin-inline: auto; }
.ob-ch { --u: calc(100cqw / 260); --rs: calc(var(--u) * 7); --rt: calc(var(--u) * 9); --rb: calc(var(--u) * 9);
  --edge: #8f867a; --edge-d: #443f39; --ink: #0d0b0a; --hl: rgba(var(--wg, 216, 205, 190), .16); --lab: #857c70; --o: #fa680c;
  position: relative; display: grid; grid-template-columns: var(--rs) 1fr var(--rs); grid-template-rows: var(--rt) auto var(--rb);
  grid-template-areas: "t t t" "l v r" "b b b"; font-family: var(--ob-font, monospace); text-transform: uppercase; }
.ob-ch::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; pointer-events: none;      /* soft separation from the field */
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55), transparent 68%); }
/* body: stepped pixel corners (3 steps of 1u). Edge = light plate, fill = graphite plate inset by 1px */
.ob-ch__plate, .ob-chm > .ob-ch__plate { position: absolute; inset: 0; pointer-events: none; }
.ob-ch__plate i { position: absolute; --c1: var(--u); --c2: calc(var(--u) * 2); --c3: calc(var(--u) * 3);
  clip-path: polygon(0 var(--c3), var(--c1) var(--c3), var(--c1) var(--c2), var(--c2) var(--c2), var(--c2) var(--c1), var(--c3) var(--c1), var(--c3) 0,
    calc(100% - var(--c3)) 0, calc(100% - var(--c3)) var(--c1), calc(100% - var(--c2)) var(--c1), calc(100% - var(--c2)) var(--c2), calc(100% - var(--c1)) var(--c2), calc(100% - var(--c1)) var(--c3), 100% var(--c3),
    100% calc(100% - var(--c3)), calc(100% - var(--c1)) calc(100% - var(--c3)), calc(100% - var(--c1)) calc(100% - var(--c2)), calc(100% - var(--c2)) calc(100% - var(--c2)), calc(100% - var(--c2)) calc(100% - var(--c1)), calc(100% - var(--c3)) calc(100% - var(--c1)), calc(100% - var(--c3)) 100%,
    var(--c3) 100%, var(--c3) calc(100% - var(--c1)), var(--c2) calc(100% - var(--c1)), var(--c2) calc(100% - var(--c2)), var(--c1) calc(100% - var(--c2)), var(--c1) calc(100% - var(--c3)), 0 calc(100% - var(--c3))); }
.ob-ch__plate .e { inset: 0; background: linear-gradient(180deg, #a49a8d 0, #5b554d 14%, #37332e 60%, #262320 100%); }
.ob-ch__plate .f { inset: 1px; background: linear-gradient(180deg, #171412, #0e0c0b 40%, #0b0908); }
/* rails: separate structural pieces with broken hairlines and calibration rulers */
.ob-ch__top, .ob-ch__bot, .ob-ch__l, .ob-ch__r { position: relative; z-index: 1; }
.ob-ch__top { grid-area: t; display: flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 10); }
.ob-ch__bot { grid-area: b; display: flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 10); }
.ob-ch__l { grid-area: l; } .ob-ch__r { grid-area: r; }
.ob-ch__top::after, .ob-ch__bot::before { content: ""; position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); height: 1px; background: linear-gradient(90deg, var(--hl) 0 68%, transparent 68% 70.5%, var(--hl) 70.5% 100%); }
.ob-ch__top::after { bottom: 0; } .ob-ch__bot::before { top: 0; background: linear-gradient(90deg, var(--hl) 0 24%, transparent 24% 25.5%, var(--hl) 25.5% 100%); }
.ob-ch__l::before, .ob-ch__r::before { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; background: repeating-linear-gradient(0deg, rgba(var(--wg, 216, 205, 190), .2) 0 1px, transparent 1px 10px); }
.ob-ch__l::before { left: 25%; } .ob-ch__r::before { right: 25%; }
.ob-ch .lb { font-size: clamp(8px, .82cqw, 11px); letter-spacing: .14em; color: var(--lab); white-space: nowrap; }
.ob-ch .ruler { flex: 1; align-self: flex-end; margin-bottom: calc(var(--u) * 1.4); height: 7px; position: relative;
  background: repeating-linear-gradient(90deg, rgba(var(--wg, 216, 205, 190), .28) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat, repeating-linear-gradient(90deg, rgba(var(--wg, 216, 205, 190), .4) 0 1px, transparent 1px 40px) 0 100% / 100% 7px no-repeat; }
.ob-ch__bot .ruler { align-self: flex-start; margin: calc(var(--u) * 1.4) 0 0; background-position: 0 0; }
.ob-ch .tick { position: absolute; bottom: 0; left: var(--tick, 38%); width: 1px; height: 9px; background: var(--o); opacity: .85; transition: left .2s steps(3); }
.ob-ch .st { font-size: clamp(8px, .82cqw, 11px); letter-spacing: .14em; color: var(--lab); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border: 1px solid rgba(250, 104, 12, .45); background: rgba(250, 104, 12, .06); white-space: nowrap; }
.ob-ch .st b { font-weight: 400; color: var(--o); }
.ob-ch .st .dot { width: 5px; height: 5px; background: var(--o); }
/* side clamps: engineered brackets, one longer and proud of the rail (deliberate asymmetry) */
.ob-ch .clamp { position: absolute; left: -1px; right: -1px; top: 27%; height: calc(var(--u) * 12); border: 1px solid var(--edge-d); background: linear-gradient(90deg, #1d1a17, #141210); box-shadow: inset 0 1px 0 rgba(var(--wg, 216, 205, 190), .22); }
.ob-ch .clamp::after { content: ""; position: absolute; left: 22%; right: 22%; top: calc(var(--u) * 4.5); height: calc(var(--u) * 3); background: #070605; border: 1px solid var(--edge-d); }
.ob-ch .clamp--ext { top: 58%; height: calc(var(--u) * 15); left: calc(var(--u) * -1.6); }
.ob-ch__r .clamp { top: 24%; }
/* corner locks (SVG symbol, mirrored) */
.ob-ch .lock, .ob-chm .lock { position: absolute; z-index: 2; width: calc(var(--u) * 12); height: calc(var(--u) * 12); pointer-events: none; }
.lock--tl { top: 0; left: 0; } .lock--tr { top: 0; right: 0; transform: scaleX(-1); } .lock--bl { bottom: 0; left: 0; transform: scaleY(-1); } .lock--br { bottom: 0; right: 0; transform: scale(-1, -1); }
/* viewport + inner active rail */
.ob-ch__vp, .ob-chm__vp { position: relative; grid-area: v; z-index: 1; }
.ob-ch__vp { aspect-ratio: 688 / 515; background: #050200; box-shadow: 0 0 0 calc(var(--u) * 1.1) #050302; }
.ob-ch__vp > .orbs { position: absolute; inset: 0; }
.ob-ch .rail, .ob-chm .rail { position: absolute; z-index: 3; pointer-events: none; inset: calc(var(--u) * -1.1); --o: rgba(250, 104, 12, .72);
  background: linear-gradient(90deg, var(--o) 0 44%, transparent 44% 46%, var(--o) 46%) top / 100% 1px no-repeat, linear-gradient(90deg, var(--o) 0 21%, transparent 21% 22.6%, var(--o) 22.6%) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, var(--o) 0 100%) left / 1px 100% no-repeat, linear-gradient(180deg, var(--o) 0 58%, transparent 58% 61%, var(--o) 61%) right / 1px 100% no-repeat; }
.ob-ch .node, .ob-chm .node { position: absolute; z-index: 4; width: 5px; height: 5px; background: #fa680c; pointer-events: none; }
.node--tl { top: calc(var(--u) * -1.1 - 2px); left: calc(var(--u) * -1.1 - 2px); } .node--tr { top: calc(var(--u) * -1.1 - 2px); right: calc(var(--u) * -1.1 - 2px); }
.node--bl { bottom: calc(var(--u) * -1.1 - 2px); left: calc(var(--u) * -1.1 - 2px); } .node--br { bottom: calc(var(--u) * -1.1 - 2px); right: calc(var(--u) * -1.1 - 2px); }
.ob-ch.pulse .rail { animation: obRail .95s steps(7) 1; }
@keyframes obRail { 0% { filter: drop-shadow(0 0 0 rgba(250,104,12,0)); opacity: 1; } 12% { filter: drop-shadow(0 0 5px rgba(250,104,12,.55)); } 100% { filter: drop-shadow(0 0 0 rgba(250,104,12,0)); } }
.ob-ch.pulse .node { animation: obNode .95s steps(4) 1; } @keyframes obNode { 30% { background: #fff; } }

/* ───────── MOBILE chassis: structure only — rails, corner treatment, inner orange line ───────── */
.ob-chm { --u: 3px; position: relative; padding: calc(var(--u) * 3); --wg: 216, 205, 190; }
.ob-chm > .ob-ch__plate { z-index: 0; }
.ob-chm .lock { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.ob-chm .ob-ch__plate i { --c1: 2px; --c2: 4px; --c3: 6px; }
.ob-chm__vp { grid-area: auto; box-shadow: 0 0 0 4px #050302; }
.ob-chm .ob-mob { border-color: rgba(250, 104, 12, .72); margin: 0; }
.ob-chm .node--tl { top: -2px; left: -2px; } .ob-chm .node--tr { top: -2px; right: -2px; } .ob-chm .node--bl { bottom: -2px; left: -2px; } .ob-chm .node--br { bottom: -2px; right: -2px; }
@media (max-width: 767px) { .ob-mobwrap.page-container { padding-inline: 8px; } }
/* below desktop widths the frame simplifies: no coordinate text / micro labels (see also .ob-chm above) */
@media (max-width: 1023px) { .ob-ch .lb { display: none; } .ob-field .cal em { display: none; } }
@media (max-width: 767px) { .ob-field .cal, .ob-field u { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ob-field__far, .ob-field .sig i, .ob-ch.pulse .rail, .ob-ch.pulse .node { animation: none !important; }
  .ob-field__far, .ob-field__mid, .ob-field__halo { transform: none !important; }
}