/* ==========================================================
   REZN® — Screen 1 centrepiece: floating portrait screen
   (Fromzero-style: turns to the cursor, code typed beside it)
   ========================================================== */
.portrait {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  pointer-events: none;
  perspective: 1400px;
  transform-style: preserve-3d;   /* the screen and the code layers share one depth: windows float in front of the photo */
}

/* ---------- left: code columns scrolling behind the screen ---------- */
.portrait__code {
  position: absolute; inset: 0;
  /* one 3D scene: every block sits on its own --z and the whole scene leans to the cursor */
  transform-style: preserve-3d;
  transform: rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg));
}
.code-col {
  position: absolute; overflow: hidden;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; line-height: 1.6;
  color: rgba(17, 17, 17, .2);
  white-space: pre;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  transform: translateZ(var(--z, 0px));
}
.code-col__track { display: flex; flex-direction: column; will-change: transform; }
.code-col__track span { display: block; padding: 0 4px; width: max-content; transition: background .5s, color .5s; }
.code-col__track span.hl { background: rgba(17, 17, 17, .78); color: #fff; }
@keyframes codeFall { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes codeRise { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* tall column hugging the screen, partly tucked behind it */
.code-col--l  { top: 11.5%; height: 58%; right: calc(50% + clamp(130px, 12vw, 205px) + 90px); width: max-content; max-width: 21vw; }
.code-col--l { -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent); }
/* small block sitting just above the photo */
.code-col--top {
  --z: 40px;
  left: calc(50% - clamp(130px, 12vw, 205px) + 64px); bottom: calc(50% + clamp(162px, 15vw, 256px) + 72px);
  width: max-content; -webkit-mask-image: none; mask-image: none; opacity: .9;
}

/* big faint wall of code deep behind the photo — peeks out around its edges */
.code-col--behind {
  --z: -320px;
  top: 6%; height: 84%;
  left: calc(50% - clamp(130px, 12vw, 205px) - 60px); width: calc(clamp(130px, 12vw, 205px) * 2 + 120px);
  color: rgba(17, 17, 17, .13);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(60% 55% at 50% 50%, #000 40%, transparent 100%);
}
/* far-left layer drifting up, deepest of all */
.code-col--far {
  --z: -520px;
  top: 4%; height: 92%; left: -12vw; width: 30vw;
  color: rgba(17, 17, 17, .08);
}
/* top-right config block, between the meta and the claim */
.code-col--tr {
  --z: -140px;
  top: 14%; right: calc(var(--pad, 40px) + 1vw); height: 15em;
  width: max-content; max-width: 18vw;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
}
/* lower-right helpers, scrolling, right of the typed code */
.code-col--br {
  --z: -90px;
  top: 63%; right: calc(var(--pad, 40px) + 1vw); height: 10em;
  width: max-content; max-width: 16vw;
}
/* 2K and wider: fills the empty gap between the services and the tall column */
.code-col--wide { display: none; }
@media (min-width: 1921px) {
  .code-col--wide {
    display: block;
    --z: -60px;
    top: 34%; height: 30%; left: 12vw;
    width: max-content; max-width: 14vw;
  }
}

/* ---------- right: code typed live ---------- */
.code-type {
  position: absolute;
  left: calc(50% + clamp(130px, 12vw, 205px) + 80px);
  top: calc(50% - clamp(162px, 15vw, 256px) + 70px);
  width: min(19vw, 300px); height: calc(clamp(162px, 15vw, 256px) * 2);
  overflow: hidden;
  font-family: "HelveticaNeueCyr", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10.5px; line-height: 1.7;
  color: rgba(17, 17, 17, .42);
  white-space: pre;
  display: flex; flex-direction: column; justify-content: flex-start;
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
          mask-image: linear-gradient(#000 80%, transparent);
  transform: translateZ(70px);
}
.code-type__lines span { display: block; min-height: 1.7em; padding: 0 4px; }
.code-type__lines span.is-cur { background: rgba(17, 17, 17, .06); color: rgba(17, 17, 17, .7); }
.code-type__lines span.is-cur::after {
  content: ""; display: inline-block; width: 6px; height: 1.1em; margin-left: 1px;
  background: #111; vertical-align: -2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- the floating screen ---------- */
.portrait__stage { position: relative; perspective: 1100px; }
.portrait__screen {
  position: relative; margin: 0;
  width: clamp(260px, 24vw, 410px); aspect-ratio: 4 / 5;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 0 50px rgba(110, 110, 110, .16),
    0 0 140px rgba(140, 140, 140, .12),
    0 40px 70px rgba(0, 0, 0, .2);
  animation: screenFloat 6s ease-in-out infinite alternate;
}
@keyframes screenFloat { from { translate: 0 -6px; } to { translate: 0 8px; } }
.portrait__screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 30%;
  filter: contrast(1.08) brightness(1.12) saturate(.9);
}
.portrait__screen::after { /* glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .2), transparent 38%),
    radial-gradient(80% 70% at 70% 30%, rgba(255, 255, 255, .13), transparent 70%);
  box-shadow: inset 0 0 50px rgba(255, 255, 255, .09);
  mix-blend-mode: screen;
}
.portrait__rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait__screen { transform-style: preserve-3d; }

/* depth frames: a thin plate behind the photo and corner brackets floating in front */
.portrait__frame { position: absolute; pointer-events: none; }
.portrait__frame--back {
  inset: -22px;
  border: 1px solid rgba(17, 17, 17, .12);
  transform: translateZ(-90px);
  background: repeating-linear-gradient(0deg, rgba(17, 17, 17, .035) 0 1px, transparent 1px 14px);
}
.portrait__frame--front { inset: -14px; transform: translateZ(60px); }
.portrait__frame--front i {
  position: absolute; width: 22px; height: 22px;
  border: 0 solid rgba(17, 17, 17, .55);
}
.portrait__frame--front i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.portrait__frame--front i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.portrait__frame--front i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.portrait__frame--front i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

/* soft neutral shadow below */
.portrait__reflect {
  width: clamp(260px, 24vw, 410px); height: 60px; margin: 14px auto 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(17, 17, 17, .12), transparent 70%);
  filter: blur(12px);
  animation: ripple 5s ease-in-out infinite alternate;
}
@keyframes ripple { from { opacity: .7; transform: scaleX(1.3); } to { opacity: 1; transform: scaleX(1.55); } }

@media (max-width: 1500px) {
  .code-col--br { display: none; }
}
@media (max-width: 1100px) {
  .code-type { width: 16vw; font-size: 9px; }
  .code-col--tr { display: none; }
  .code-col--l { opacity: .45; }   /* sits under the services and the manifest here */
}
@media (max-width: 820px) {
  .code-col--far { display: none; }
  .portrait__frame--back { inset: -12px; transform: translateZ(-50px); }
  .code-col { font-size: 7.5px; }
  .code-col--l { right: calc(50% + 14vw); width: 40vw; max-width: none; }
  /* the same column on the right of the photo */
  .code-col--br {
    display: block; --z: 0px; opacity: .45;
    top: 4%; height: 88%; left: calc(50% + 14vw); right: auto; width: 40vw; max-width: none;
    -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 86%, transparent);
  }
  .code-col--top { display: none; }
  .code-type { display: none; }
  /* in the hero's flow (row 3) instead of covering the whole screen */
  .portrait {
    position: relative; inset: auto;
    grid-column: 1; grid-row: 3;
    margin: 18px -16px 10px;        /* the hero clips the code columns, so the page never widens */
  }
  .portrait__screen, .portrait__reflect { width: clamp(160px, min(50vw, 26svh), 300px); }
  .portrait__reflect { height: 30px; margin-top: 6px; }
  .code-col--l { top: 4%; height: 88%; }
  .code-col--behind { top: 0; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait__screen, .portrait__reflect { animation: none; }
}