/* ============================================================
   CULT — фоновая анимация кода на первом экране
   ============================================================ */

.hero__code {
  position: absolute;
  top: 0;
  right: max(20px, calc((100vw - var(--container, 1280px)) / 2 - 200px));
  width: min(440px, 38vw);
  height: 100%;
  z-index: 1;
  padding: 0 0 var(--space-6) 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}


.code-line {
  display: block;
  white-space: pre;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .02em;
  color: rgba(180, 195, 185, .5);
  opacity: 0;
  transform: translateY(3px);
  filter: blur(2px);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

.code-line--in {
  opacity: 1;
  transform: none;
  filter: none;
}

.code-line--dim { color: rgba(180, 195, 185, .22); }

.code-line--ok { color: rgba(57, 255, 20, .8); }

.code-line--cur::after {
  content: "▌";
  margin-left: 3px;
  color: #39FF14;
  animation: cultCodeBlink 1.1s steps(1) infinite;
}

@keyframes cultCodeBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.code-line--done {
  color: #39FF14;
  font-weight: 600;
  letter-spacing: .06em;
  text-shadow: 0 0 8px rgba(57, 255, 20, .15);
}

@media (max-width: 760px) {
  /* На мобильном код меньше размером и выводится в пустой области после
     основного текста первого блока — как статичный декоративный блок
     между кнопками и статусной строкой (hero__foot). Фоном, без наложения. */
  .hero__code {
    position: static;
    left: auto; right: auto;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    text-align: left;
    height: auto;
    max-height: 92px;
    overflow: hidden;
    padding: 0;
    opacity: .6;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .code-line { font-size: 9px; line-height: 1.75; letter-spacing: .01em; color: rgba(180, 195, 185, .32); }
  .code-line--dim { color: rgba(180, 195, 185, .14); }
  .code-line--ok { color: rgba(57, 255, 20, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .code-line { opacity: 1; transform: none; filter: none; transition: none; }
  .code-line--cur::after { animation: none; }
}