/* ============================================================
   Info section (#info) — scroll-target on index.html
   Layout: framed bands with a sticky left rail label and a
   content column; hairline separators; shader-backed lower half.
   ============================================================ */

.info-sec {
  position: relative;
  /* sits directly on the last project's dashed divider — that line is this
     band's grid line, same as between projects */
  margin-top: 0;
  scroll-margin-top: 68px;
  font-family: var(--font-sans, "PP Telegraf", "Helvetica Neue", sans-serif);
}
.info-sec a { color: #f5f5f4; text-decoration: none; }
.info-sec a:hover { color: #ffffff; }

/* ── band = rail + content — same grid as the project rows above:
   info column 442px wide (title indented 60px), media column from
   x=442 to right−98px. Text left edge == image left edge. ── */
.info-band {
  position: relative;
  display: grid;
  grid-template-columns: 438px minmax(0, 1fr); /* .project-stack: 32px 78px 0 438px */
}
/* full-width hairline only where the reference has one */
.info-band--rule { border-top: 1px solid rgba(245, 245, 244, 0.10); }
.info-rail {
  position: relative;
  /* padding-top matches .info-content's 48px image inset so the rail label
     top aligns with the image top border */
  padding: 48px 30px 30px 60px;
}
.info-rail .lbl {
  position: sticky;
  top: 96px;
  display: block;
  /* same type as the project names above (.project--cms .project-info h2) */
  font-family: var(--font-display, "PP Telegraf", "Helvetica Neue", sans-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: #f5f5f4;
}
.info-rail .rail-dot { display: none; }
.info-content {
  min-width: 0;
  /* images sit 48px below the grid line — same as .project-stack margin-top */
  padding: 48px 78px 96px 0;
}

/* ── About band ────────────────────────────────────────────── */
/* portrait matches the projects' full-row media slots: 3:2; radius follows
   the Tweaks "Скругление углов" slider via --img-radius */
.info-portrait {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--img-radius, 20px);
  background: #101010;
}
.info-portrait image-slot { width: 100%; height: 100%; display: block; }

.info-statement {
  margin: 56px 0 0;
  max-width: 620px;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: 0.002em;
  color: #c9c9c7;
  text-wrap: pretty;
}
.info-paras {
  margin-top: 32px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-paras p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #9c9c9b;
}
.info-paras p b { color: #d8d8d6; font-weight: 400; }

.info-mini-label {
  margin: 76px 0 18px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f6f6e;
}
.info-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.info-caps li {
  padding: 6px 0;
  font-size: 14px;
  color: #bdbdbb;
}

/* trusted-by marquee */
.info-logos {
  margin-top: 38px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.info-logos-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: info-logos-scroll 30s linear infinite;
}
.info-logos:hover .info-logos-track { animation-play-state: paused; }
/* Separate logos, height-normalized so they align; padding-right gives an
   even gap between every logo AND across the loop seam (no sticking). */
.info-logos-track .logo-cell {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding-right: 96px;
}
.logo-img {
  display: block;
  height: 28px;
  width: auto;
  opacity: 0.9;
}
/* Optical alignment: single-line wordmarks share a cap-height; the EU stacked
   lockup is boosted so it reads at the same visual size, not the same box height. */
.logo-img[src*="siemens"] { height: 22px; }
.logo-img[src*="mb.png"]  { height: 31px; }
.logo-img[src*="gwm"]     { height: 27px; }
.logo-img[src*="eu.png"]  { height: 53px; }
@keyframes info-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .info-logos-track { animation: none; }
}

/* ── rows (experience / cases) ─────────────────────────────── */
.info-rows { display: flex; flex-direction: column; }
.info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0 24px;
  border-bottom: 1px solid rgba(245, 245, 244, 0.09);
}
.info-row:last-child { border-bottom: 0; }
/* Experience band (reference layout): first row title flush to the content
   inset (aligns with the "Опыт работы" rail label); dates vertically centered
   per row; generous, symmetric spacing around each hairline. */
.info-band--rule .info-row { padding: 40px 0; }
.info-band--rule .info-content { padding-bottom: 40px; }
.info-band--rule .info-rows .info-row:first-child { padding-top: 0; }
.info-band--rule .info-rows .info-row:last-child { padding-bottom: 0; }
.info-row .t {
  font-size: 15px;
  font-weight: 400;
  color: #f0f0ee;
  letter-spacing: 0.01em;
}
.info-row .d {
  margin-top: 8px;
  max-width: 480px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8f8f8e;
}
.info-row .when {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7c7c7b;
  white-space: nowrap;
}

/* press-style rows: index left, title right */
.info-row--press { grid-template-columns: auto 1fr; align-items: center; padding: 26px 0; }
.info-row--press .ix {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: #7c7c7b;
}
.info-row--press .t {
  text-align: right;
  font-size: 15.5px;
  font-weight: 300;
}
.info-row--press a.t { display: block; }
.info-row--press a.t:hover { color: #fff; }
.info-row--press a.t .arr {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px;
  color: #7c7c7b;
  transition: transform 0.25s ease, color 0.25s ease;
}
.info-row--press a.t:hover .arr { transform: translate(2px, -2px); color: #fff; }

/* press-style rows keep the shared grid — no dashed enclosure */
.info-band--press .info-content { padding-top: 30px; }

/* dashed rule that closes the Experience section (matches the frame insets) */
.info-exp-divider {
  position: relative;
  z-index: 1;
  margin: 0 30px;
  border-top: 1px dashed var(--border);
}

/* ── shader backdrop for lower bands ───────────────────────── */
.info-lower {
  position: relative;
}
.info-shader {
  position: absolute;
  top: 0;
  /* stop at the closing dashed rule (16px above page end) — shader never goes below it */
  bottom: 16px;
  left: 30px;                    /* left frame border — never bleed past the dashed line */
  right: 30px;                   /* right frame border */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.info-shader > div { position: absolute; inset: 0; }
.info-lower > .info-band, .info-lower > .info-cta { position: relative; z-index: 1; }

/* ── CTA band ──────────────────────────────────────────────── */
.info-cta {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px;
}
/* closing horizontal dashed rule at the very end of the page — meets the
   frame's vertical dashed borders (30px side insets, 16px above page end) */
.info-cta::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 16px;
  border-top: 1px dashed var(--border);
}
.info-cta h3 {
  margin: 0;
  font-size: clamp(30px, 2.6vw, 46px);
  font-weight: 300;
  letter-spacing: 0.002em;
  color: #f5f5f4;
}
.info-cta .sub {
  margin: 18px 0 0;
  max-width: 380px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8f8f8e;
}
.say-hi {
  position: relative;
  margin-top: 56px;
  width: 214px;
  height: 214px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e6e6e4;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color 0.35s ease;
}
.say-hi svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.say-hi svg circle {
  fill: transparent;
  stroke: rgba(245, 245, 244, 0.55);
  stroke-width: 1;
  stroke-dasharray: 4 7;
  transition: fill 0.35s ease, stroke 0.35s ease;
}
.say-hi svg { animation: say-hi-spin 60s linear infinite; }
@keyframes say-hi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .say-hi svg { animation: none; } }
.say-hi .say { position: relative; z-index: 1; transition: color 0.35s ease; }
.say-hi:hover svg circle { fill: #f5f5f4; stroke: #f5f5f4; }
.say-hi:hover { color: #0c0c0c; }
.say-hi:hover .say { color: #0c0c0c; }

/* contact links row at the very bottom of the CTA band */
.info-links {
  position: absolute;
  left: 58px;
  right: 58px;
  bottom: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #9c9c9b;
}
.info-links a:first-child { justify-self: start; }
.info-links a:nth-child(2) { justify-self: center; }
.info-links a:last-child { justify-self: end; }
.info-links a { color: #9c9c9b; }
.info-links a:hover { color: #f5f5f4; }

/* ── scroll reveal (armed only when JS + motion allowed) ───── */
html.info-armed .info-rev {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rev-delay, 0ms);
}
html.info-armed .info-rev.in { opacity: 1; transform: none; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .info-band { grid-template-columns: 1fr; }
  .info-rail { padding: 20px 24px 0; }
  .info-rail .lbl { position: static; }
  .info-rail .rail-dot { display: none; }
  .info-content { padding: 26px 24px 72px; }
  .info-statement { margin-top: 40px; }
  .info-row--press .t { font-size: 14px; }
  .info-links { flex-direction: column; gap: 10px; }
}