/* Slotester 0.16.0 — hero главной «ткань журнала» (parts/home-hero-x.php, assets/js/hero-x.js).
   Подложки нет: секция прозрачная, фон — canvas во всю ширину окна из знаков настоящих логов. Текст лежит прямо на нём.
   Блок графика .ai-home-rig не трогается: его стили в main.css, здесь только рамка-прицел вокруг и подпись над ним. */
@property --hx-p { syntax: '<percentage>'; inherits: false; initial-value: 130%; }
@property --hx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body.home .ai-main { overflow-x: clip; } /* ткань выходит за контейнер до краёв окна; clip не создаёт прокрутку и не ломает sticky */
.ai-hx { position: relative; isolation: isolate; margin: -32px 0 18px; padding: 60px 0 38px; }
.ai-hx-canvas { position: absolute; z-index: 0; top: 0; left: calc(50% - var(--hx-vw, 100%) / 2); display: block; width: var(--hx-vw, 100%); height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 120px), transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 120px), transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect; }

.ai-hx-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "text stage"; column-gap: 54px; row-gap: 46px; align-items: center; }
.ai-hx-text { grid-area: text; position: relative; min-width: 0; }
.ai-hx-stage { grid-area: stage; position: relative; min-width: 0; }


/* ---- H1: сплошной текст поверх «данных». ::before — те же строки, залитые знаками (видны при проявке; рентген под курсором и каретка сняты в 0.18.21) ---- */
.ai-hx-h1 { position: relative; display: flex; flex-direction: column; margin: 0 0 22px; font-size: clamp(34px, 4.25vw, 58px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; color: #eef4f8; }
.ai-hx-h1::before { content: attr(data-l1) "\A" attr(data-l2); content: attr(data-l1) "\A" attr(data-l2) / ""; position: absolute; inset: -.12em 0 -.22em; padding-top: .12em; z-index: 0; white-space: pre-line; color: transparent; background: var(--hx-tex, none) 0 0 / 176px 96px repeat, linear-gradient(rgba(94,234,212,.16), rgba(94,234,212,.16)); -webkit-background-clip: text; background-clip: text; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
/* заливка градиентом и маски режут по боксу строки, а при line-height 1.02 хвосты g/p/y ниже него: бокс раздвинут, отступ компенсирован
   (H1 — flex-колонка: там отрицательные отступы соседних строк не схлопываются и гасят паддинги точно) */
.ai-hx-h1 > span { position: relative; z-index: 1; display: block; padding: .12em 0 .22em; margin: -.12em 0 -.22em; }
.ai-hx-l2 { width: fit-content; color: transparent; background: linear-gradient(92deg, #e6fffa 0%, #5eead4 42%, #2dd4bf 64%, #a7f3e7 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(94,234,212,.26)); animation: ai-hx-shimmer 7s ease-in-out infinite alternate; }
@keyframes ai-hx-shimmer { to { background-position: 100% 0; } }
@keyframes ai-hx-tex { to { background-position: 0 -96px, 0 0; } }
@keyframes ai-hx-tex-s { to { background-position: 0 -68px, 0 0; } }
/* проявка сканером: JS ведёт --hx-p за лучом; страховка — через 3.4 с текст проявится и без JS */
.is-hx-intro .ai-hx-h1 > span { --hx-p: -20%; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--hx-p) - 14%), transparent calc(var(--hx-p) + 1%)); mask-image: linear-gradient(90deg, #000 calc(var(--hx-p) - 14%), transparent calc(var(--hx-p) + 1%)); animation: ai-hx-unmask 0s linear 3.4s forwards; }
.is-hx-intro .ai-hx-l2 { animation: ai-hx-unmask 0s linear 3.4s forwards, ai-hx-shimmer 7s ease-in-out infinite alternate; }
.is-hx-intro .ai-hx-h1::before { opacity: 1; animation: ai-hx-tex 6s linear infinite; } /* знаки бегут только на заставке */
@keyframes ai-hx-unmask { to { --hx-p: 130%; } }

.ai-hx-lead { position: relative; max-width: 35em; margin: 0 0 30px; font-size: 16.5px; line-height: 1.62; color: var(--ai-text-2); text-shadow: 0 0 14px rgba(11,15,20,.95), 0 0 3px rgba(11,15,20,.9); }
.ai-hx-lead::before { content: ""; position: absolute; z-index: -1; inset: -10px -40px -22px -34px; background: radial-gradient(closest-side, rgba(11,15,20,.86), rgba(11,15,20,.6) 62%, transparent); pointer-events: none; }

/* ---- кнопки: главная — окно в ткани (знаки видны сквозь стекло), по кромке бежит свет ---- */
.ai-hx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ai-hx-go { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 26px 0 14px; border-radius: 10px; font: 700 13px/1 var(--ai-mono); letter-spacing: .16em; text-transform: uppercase; color: #effffb; text-decoration: none; background: linear-gradient(180deg, rgba(20,44,46,.92), rgba(7,16,19,.94)); border: 1px solid rgba(94,234,212,.5); box-shadow: 0 0 0 5px rgba(94,234,212,.05), 0 0 34px rgba(94,234,212,.2), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 26px rgba(94,234,212,.12); text-shadow: 0 0 14px rgba(94,234,212,.75), 0 0 2px rgba(11,15,20,.9); transition: border-color .25s, box-shadow .25s, transform .25s, color .2s; }
.ai-hx-go::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--hx-a), transparent 0 62%, rgba(220,255,248,.95) 79%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: ai-hx-orbit 3.8s linear infinite; pointer-events: none; }
@keyframes ai-hx-orbit { to { --hx-a: 360deg; } }
.ai-hx-go-key { position: relative; flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(94,234,212,.6); background: rgba(94,234,212,.12); box-shadow: inset 0 0 10px rgba(94,234,212,.25), 0 0 10px rgba(94,234,212,.2); transition: background .2s; }
.ai-hx-go-key::before { content: ""; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #b8fff1; filter: drop-shadow(0 0 4px #5eead4); }
.ai-hx-go:hover, .ai-hx-go:focus-visible { color: #fff; border-color: #99f6e4; transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(94,234,212,.09), 0 0 48px rgba(94,234,212,.38), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 32px rgba(94,234,212,.2); }
.ai-hx-go:hover .ai-hx-go-key, .ai-hx-go:focus-visible .ai-hx-go-key { background: #5eead4; }
.ai-hx-go:hover .ai-hx-go-key::before, .ai-hx-go:focus-visible .ai-hx-go-key::before { border-left-color: #0b0f14; filter: none; }
.ai-hx-go:focus-visible { outline: 2px solid #99f6e4; outline-offset: 3px; }
.ai-hx-alt { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 4px; font: 600 13px/1 var(--ai-mono); letter-spacing: .08em; color: var(--ai-text); text-decoration: none; text-shadow: 0 0 10px rgba(11,15,20,.95); }
.ai-hx-alt::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 14px; height: 1px; background: linear-gradient(90deg, rgba(94,234,212,.75), rgba(94,234,212,.12)); transform-origin: left; transition: transform .35s ease; }
.ai-hx-alt i { font-style: normal; color: var(--ai-accent); transition: transform .25s ease; }
.ai-hx-alt:hover { color: #fff; }
.ai-hx-alt:hover i { transform: translateX(4px); }
.ai-hx-alt:hover::after { transform: scaleX(1.06); }

/* ---- прицел вокруг блока графика и подпись «tracking» ---- */
.ai-hx-lock { position: absolute; z-index: 2; width: 24px; height: 24px; border: 2px solid var(--ai-accent); filter: drop-shadow(0 0 6px rgba(94,234,212,.7)); pointer-events: none; transition: transform .8s cubic-bezier(.16, 1.3, .3, 1), opacity .5s ease; }
.ai-hx-lock.is-tl { top: -12px; left: -12px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
.ai-hx-lock.is-tr { top: -12px; right: -12px; border-left: 0; border-bottom: 0; border-top-right-radius: 5px; }
.ai-hx-lock.is-bl { bottom: -12px; left: -12px; border-right: 0; border-top: 0; border-bottom-left-radius: 5px; }
.ai-hx-lock.is-br { bottom: -12px; right: -12px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }
.is-hx-intro:not(.is-locked) .ai-hx-lock { opacity: 0; }
.is-hx-intro:not(.is-locked) .ai-hx-lock.is-tl { transform: translate(-34px, -34px); }
.is-hx-intro:not(.is-locked) .ai-hx-lock.is-tr { transform: translate(34px, -34px); }
.is-hx-intro:not(.is-locked) .ai-hx-lock.is-bl { transform: translate(-34px, 34px); }
.is-hx-intro:not(.is-locked) .ai-hx-lock.is-br { transform: translate(34px, 34px); }
.ai-hx-stage::after { content: ""; position: absolute; z-index: 2; inset: -5px; border: 1px solid transparent; border-radius: 8px; pointer-events: none; }
.ai-hx.is-locked .ai-hx-stage::after { animation: ai-hx-flash 1s ease-out .3s both; }
@keyframes ai-hx-flash { 0% { border-color: rgba(153,246,228,0); } 22% { border-color: rgba(153,246,228,.8); box-shadow: 0 0 26px rgba(94,234,212,.35); } 100% { border-color: rgba(153,246,228,0); box-shadow: 0 0 0 rgba(94,234,212,0); } }
.ai-hx-stage.is-ping .ai-hx-lock { animation: ai-hx-reacq .7s ease-out; }
@keyframes ai-hx-reacq { 30% { opacity: .3; } }
.ai-hx-track { position: absolute; right: 0; bottom: calc(100% + 20px); display: inline-flex; align-items: center; gap: 7px; font: 10.5px/1 var(--ai-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ai-muted); white-space: nowrap; pointer-events: none; }
.ai-hx-track b { color: var(--ai-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-hx-track-ico { position: relative; width: 11px; height: 11px; border: 1px solid var(--ai-accent); border-radius: 50%; box-shadow: 0 0 6px rgba(94,234,212,.6); }
.ai-hx-track-ico::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ai-accent); animation: ai-blink 1.4s ease-in-out infinite; }
.ai-hx-stage.is-ping .ai-hx-track b { animation: ai-hx-tick .6s ease-out; }
@keyframes ai-hx-tick { 0% { color: #fff; text-shadow: 0 0 10px #5eead4; } }


/* ---- луч сканера (над текстом; над блоком графика гаснет) ---- */
.ai-hx-beam { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(200,255,246,.95) 16%, rgba(200,255,246,.95) 84%, transparent); box-shadow: 0 0 10px rgba(94,234,212,.95), 0 0 34px rgba(94,234,212,.5); will-change: transform, opacity; }
.ai-hx-beam::after { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 150px; background: linear-gradient(90deg, rgba(94,234,212,0), rgba(94,234,212,.08)); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }


@media (max-width: 1180px) {
  .ai-hx-grid { column-gap: 40px; }
}
@media (max-width: 980px) {
  .ai-hx { padding: 50px 0 40px; }
  .ai-hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "stage"; row-gap: 28px; }
  .ai-hx-stage { margin-top: 34px; }
}
@media (max-width: 640px) {
  .ai-hx { padding: 38px 0 30px; margin-bottom: 14px; }
  .ai-hx-h1 { margin-bottom: 16px; font-size: clamp(30px, 9.2vw, 40px); }
  .ai-hx-h1::before { background-size: 124px 68px, auto; }
  .is-hx-intro .ai-hx-h1::before { animation-name: ai-hx-tex-s; } /* «данные» в буквах мельче под размер шрифта */
  .ai-hx-lead { margin-bottom: 24px; font-size: 15.5px; }
  .ai-hx-lead::before { inset: -6px -16px -18px; }
  /* на телефоне пара кнопок поровну: вторая — контурная кнопка той же высоты, а не ссылка, зажатая у края */
  .ai-hx-cta { flex-wrap: nowrap; gap: 10px; }
  .ai-hx-go, .ai-hx-alt { flex: 1 1 0; min-width: 0; justify-content: center; height: 50px; white-space: nowrap; }
  .ai-hx-go { padding: 0 12px 0 10px; gap: 10px; font-size: 12px; letter-spacing: .1em; }
  .ai-hx-go-key { width: 22px; height: 22px; }
  .ai-hx-go-key::before { left: 8px; top: 6px; }
  .ai-hx-alt { padding: 0 12px; gap: 8px; font-size: 12px; letter-spacing: .05em; border: 1px solid rgba(94,234,212,.28); border-radius: 10px; background: linear-gradient(180deg, rgba(17,24,31,.72), rgba(9,13,18,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .25s, color .2s; }
  .ai-hx-alt::after { display: none; }
  .ai-hx-alt:hover, .ai-hx-alt:focus-visible { border-color: rgba(153,246,228,.6); }
  .ai-hx-stage { margin-top: 30px; }
  .ai-hx-track { bottom: calc(100% + 14px); font-size: 9.5px; }
  .ai-hx-lock { width: 18px; height: 18px; }
  .ai-hx-lock.is-tl { top: -8px; left: -8px; }
  .ai-hx-lock.is-tr { top: -8px; right: -8px; }
  .ai-hx-lock.is-bl { bottom: -8px; left: -8px; }
  .ai-hx-lock.is-br { bottom: -8px; right: -8px; }
}
@media (max-width: 400px) {
  .ai-hx-go { padding: 0 8px; gap: 8px; letter-spacing: .06em; }
  .ai-hx-go-key { width: 20px; height: 20px; }
  .ai-hx-go-key::before { left: 7px; top: 5px; }
  .ai-hx-alt { padding: 0 8px; letter-spacing: .02em; }
}