/* ---------------------------------------------------------------------------
   Scroll-stage: секция закрепляется на экране, пока листаете; портреты
   растворяются и проступает «звёздный» рисунок, фон меняется с белого на бордовый.
   Прогресс (0..1) считает js/scroll-stage.js и пишет в CSS-переменные ниже.
   Без JS / при prefers-reduced-motion секция обычная (без закрепления).
   --------------------------------------------------------------------------- */
.stage{position:relative;background:#fff;--navy:#002B48}
.stage-pin{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  min-height:100svh;padding:6.5rem 1.25rem 3rem;overflow:hidden;background:var(--stage-bg,#fff);text-align:center}

/* тексты: заголовок и лид лежат в одной ячейке и меняются местами */
.stage-copy{display:grid;width:min(100%,58rem)}
.stage-copy>*{grid-area:1/1;align-self:center}
.stage-eyebrow{display:block;margin-bottom:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF0028}
.stage-title{margin:0;font-size:clamp(1.7rem,4.2vw,3.2rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:var(--stage-ink,#002B48)}
.stage-head{opacity:var(--head,1);transform:translateY(var(--head-y,0))}
.stage-lead{margin:0;font-size:clamp(.98rem,1.6vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.88);opacity:var(--lead,1);transform:translateY(var(--lead-y,0))}
.stage-lead b{color:#FFAC00;font-weight:700}

/* картинки: размер ограничен и по ширине, и по высоте экрана */
.stage-art{position:relative;width:min(92vw,940px,calc((100svh - 28rem) * 2.247));min-width:min(92vw,300px);aspect-ratio:2000/890}
.stage-art img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;will-change:opacity,transform}
.stage-ink{opacity:var(--ink,1);transform:scale(var(--ink-s,1))}
.stage-stars{opacity:var(--stars,0);transform:scale(var(--stars-s,1))}

.stage-names{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:.2rem;font-weight:700;color:var(--stage-ink,#002B48);font-size:clamp(.82rem,1.5vw,1.05rem)}
.stage-names small{display:block;font-weight:500;font-size:.8em;opacity:.7;margin-top:.1rem}
.stage-names{opacity:var(--names,1)}
.stage-cta{opacity:var(--lead,1);transform:translateY(var(--lead-y,0))}

.stage-hint{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stage-ink,#002B48);opacity:var(--hint,0)}
.stage-hint i{width:1px;height:1.6rem;background:currentColor;opacity:.6}
.stage-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:#FFAC00;opacity:var(--bar,0)}

/* --- режим с JS: высокая «дорожка» + закреплённая сцена --- */
.stage.has-js{height:340vh}
.stage.has-js .stage-pin{position:sticky;top:0;height:100svh;min-height:0}
.stage.has-js .stage-lead,.stage.has-js .stage-cta{pointer-events:none}
.stage.has-js.is-end .stage-cta{pointer-events:auto}

/* --- без JS / reduced-motion: обычная секция, портреты на белом, текст виден --- */
.stage:not(.has-js) .stage-stars{display:none}
.stage:not(.has-js) .stage-head{display:none}
.stage:not(.has-js) .stage-lead{color:var(--navy)}
.stage:not(.has-js) .stage-lead b{color:#780032}
.stage:not(.has-js) .stage-hint,.stage:not(.has-js) .stage-bar{display:none}

@media (max-width:639px){
  .stage.has-js{height:300vh}
  .stage-pin{gap:1rem;padding-top:5.6rem}
  .stage-art{width:min(96vw,calc((100svh - 29rem) * 2.247))}
}