/* ASM://PROTOCOL — landing, сцена 03 «Пролог» (#s2): хекс-стена → зум в микросхему → четыре шага.
   По умолчанию здесь итоговый кадр (без JS, без фильма и при reduced-motion): схема четырёх шагов одной инструкции.
   Стартовые состояния фильма — только под .motion .hx-armed (класс ставит scene03-film.js, пока сцена в кадре).
   Опирается на landing.css (.scene, .h2, .sub; keyframes appear, phosphor) и kit.css (keyframes shred). */

.scene--hx .scene__body { align-self: stretch; display: flex; flex-direction: column; max-width: none; }
@media (min-width: 561px) { .scene--hx .scene__body { padding: clamp(6px, 2.2vh, 28px) 0; } }

/* заголовок в три такта: хаос · внутри простые шаги · мы объясним каждый */
.hx__title { display: grid; justify-items: center; gap: clamp(4px, 1.1vh, 12px); }
.hx__q { display: block; font: 300 clamp(17px, min(2vw, 3.3vh), 28px)/1.25 var(--mono); letter-spacing: -0.02em; color: var(--body); }
.hx__a { display: block; font: 300 clamp(28px, min(4.4vw, 6.8vh), 64px)/1.06 var(--mono); letter-spacing: -0.035em; }
body.skin-operator .hx__q { text-shadow: none; }
.hx__b1, .hx__b2 { display: inline-block; }

/* кристалл: место под canvas зарезервировано, шаги стоят на своих местах с первого кадра */
.hx {
  position: relative; flex: 1 1 auto; display: grid; align-content: center; justify-items: center; gap: clamp(8px, 1.5vh, 14px);
  margin-top: clamp(10px, 2.6vh, 32px); min-height: clamp(220px, 34vh, 420px);
  padding: clamp(28px, 4vh, 44px) clamp(28px, 3.6vw, 56px);
}
.hx:not(.hx-live) { outline: 1px solid var(--line-2); outline-offset: -1px; }
.hx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx__steps {
  --g: clamp(26px, 3vw, 52px); counter-reset: hx;
  position: relative; z-index: 1; width: 100%; max-width: 1120px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g);
}
.hx__step {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: clamp(12px, 1.9vh, 20px) clamp(12px, 1.2vw, 20px); border: 1px solid var(--line-2); background: var(--film);
  counter-increment: hx;
}
.hx__name { display: flex; flex-direction: column-reverse; gap: 6px; }
.hx__name b { font: 300 clamp(17px, min(1.65vw, 2.9vh), 26px)/1.15 var(--mono); letter-spacing: -0.02em; color: var(--heading); }
.hx__name span { font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--caption); }
.hx__name span::before { content: counter(hx) " · "; }
.hx__what { font: 300 clamp(14px, min(1.1vw, 1.9vh), 16px)/1.45 var(--sans); color: var(--body); }
.hx__val { margin-top: auto; }
.hx__val code { font: 400 clamp(14px, min(1.2vw, 2.1vh), 18px)/1.3 var(--mono); color: var(--green); white-space: nowrap; }
body.skin-operator .hx__val code { text-shadow: 0 0 10px rgb(var(--fx-glow-rgb) / 0.25); }
.hx__src { position: relative; z-index: 1; font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption); }
/* стрелки потока — когда нет canvas; с canvas шину и стрелки рисует scene03-film.js */
.hx:not(.hx-live) .hx__step + .hx__step::before {
  content: "→"; position: absolute; top: 50%; left: calc(var(--g) / -2 - 10px); width: 18px; margin-top: -13px;
  font: 400 16px/26px var(--mono); text-align: center; color: var(--caption);
}

@media (max-width: 900px) {
  .hx__steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .hx:not(.hx-live) .hx__step:nth-child(3)::before { content: none; }
}
@media (max-width: 560px) {
  .hx__q { font-size: 16px; }
  .hx__a { font-size: 28px; }
  .hx { margin-top: 10px; min-height: 0; padding: 14px 10px 12px 28px; }
  .hx__steps { grid-template-columns: 1fr; --g: 8px; row-gap: 8px; }
  .hx__step { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; }
  .hx__name { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .hx__name b { font-size: 16px; }
  .hx__name span { font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }
  .hx__name span::before { content: none; }
  .hx__what { grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 1.35; }
  .hx__val { grid-column: 2; grid-row: 1; align-self: baseline; margin: 0; }
  .hx__val code { font-size: 14px; }
  .hx__src { font-size: 10px; }
  .hx:not(.hx-live) .hx__step + .hx__step::before { content: none; }
}
@media (max-width: 560px) and (max-height: 700px) {
  .hx__title { gap: 2px; }
  .hx__q, .hx__name b { font-size: 15px; }
  .hx__src { display: none; }
  .hx { padding-top: 10px; padding-bottom: 8px; gap: 6px; }
  .hx__steps { row-gap: 6px; }
  .hx__step { padding: 6px 10px; }
  .hx__what { font-size: 12.5px; }
}

/* ---------- фильм: только JS + motion (класс hx-armed ставит scene03-film.js) ---------- */
.motion .hx-armed :is(.hx__b2, .hx__a, .hx__val) { opacity: 0; }
.motion .hx-armed .hx__q { transform: translateX(var(--hx-shift, 0px)); }
.motion .hx-armed :is(.hx__step, .hx__src) { opacity: 0; transform: translateY(8px); }
.motion .hx-armed:is([data-phase="core"], [data-phase="walk"], [data-phase="done"]) :is(.hx__step, .hx__src, .hx__q) {
  opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.motion .hx-armed:is([data-phase="core"], [data-phase="walk"], [data-phase="done"]) .hx__q { transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .hx-armed[data-phase="core"] .hx__step:nth-child(2) { transition-delay: 70ms; }
.motion .hx-armed[data-phase="core"] .hx__step:nth-child(3) { transition-delay: 140ms; }
.motion .hx-armed[data-phase="core"] :is(.hx__step:nth-child(4), .hx__src) { transition-delay: 210ms; }
.motion .hx-armed .hx__step.is-active { border-color: var(--green); }
.motion .hx-armed .is-reached .hx__val { opacity: 1; transition: opacity 260ms ease-out; }
.motion .hx-armed:is([data-phase="core"], [data-phase="walk"], [data-phase="done"]) .hx__b2,
.motion .hx-armed[data-phase="done"] .hx__a { opacity: 1; animation: appear 700ms ease-out both; }
.motion .skin-operator .hx-armed:is([data-phase="core"], [data-phase="walk"], [data-phase="done"]) .hx__b2,
.motion .skin-operator .hx-armed[data-phase="done"] .hx__a { animation: appear 240ms ease-out both, phosphor 1400ms ease-out backwards; }
body.skin-operator .hx__canvas.is-cut { animation: shred var(--glitch-duration) steps(1, end); }
.hx__replay {
  position: absolute; z-index: 2; right: 8px; bottom: 8px; min-height: 28px; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--film);
  font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--caption);
}
.hx__replay:hover { color: var(--heading); border-color: var(--caption); }