/* The home hero of 28.10 (hero_v5.py): three variants on real work. The words stand beside or above the frames,
   never on them, and nothing darkens a frame to make a word legible. */
.hv5{position:relative;background:#0c0c0c;color:#f4f4f2;text-align:left;padding:calc(var(--header-height) + var(--s-5)) var(--m-page) var(--s-6);overflow:hidden}
/* the visitor's letter (hero_v5.head) hides the other variants before the first paint; without JS the first stays */
html[data-hero=a] .hv5:not(.hv5--a),html[data-hero=b] .hv5:not(.hv5--b),html[data-hero=c] .hv5:not(.hv5--c),html:not([data-hero]) .hv5 ~ .hv5{display:none}
/* the liquid layer (experiments.js, body.fx-on) makes the old hero click-through; these heroes are clicked and hovered */
body.fx-on .h4 > .hv5{pointer-events:auto}
.h4 > .hv5--b{justify-content:flex-start}
:lang(ru) .hv5__en{display:none}
.hv5__nw{white-space:nowrap}
.hv5__eyebrow{margin:0 0 var(--s-3);font-size:var(--fs-small);color:#a9a9a6;letter-spacing:.01em}
.hv5__t{margin:0;font-weight:400;font-size:clamp(44px, 6.2vw, 116px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.hv5__cta{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.hv5__cta .btn{background:#f4f4f2;color:#0c0c0c;border:0}
.hv5__more{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-size:var(--fs-ui);color:#f4f4f2;border-bottom:1px solid #f4f4f255}
.hv5__more:hover{border-color:#f4f4f2}

/* a · «Лента»: the sentence and the about line on top, two ribbons of covers under them */
.hv5--a .hv5__t{font-size:clamp(44px, 5.4vw, 100px)}
.hv5--a{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);padding-left:0;padding-right:0}
.hv5a__top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gutter);align-items:end;padding:0 var(--m-page)}
.hv5a__head .hv5__t{max-width:13em}
.hv5a__side{display:flex;flex-direction:column;gap:var(--s-4);padding-bottom:.6em}
.hv5a__about{margin:0;font-size:var(--fs-body);line-height:1.45;color:#cfcfcc;max-width:26em}
.hv5a__rows{display:flex;flex-direction:column;gap:var(--s-2)}
.hv5a__row{overflow:hidden}
.hv5a__track{display:flex;gap:var(--s-2);width:max-content;animation:hv5-drift 70s linear infinite}
.hv5a__row--rev .hv5a__track{animation-direction:reverse;animation-duration:82s}
.hv5a__rows:hover .hv5a__track{animation-play-state:paused}
.hv5a__dup{display:contents}
.hv5a__card{position:relative;flex:none;height:clamp(140px, 19vh, 230px);aspect-ratio:var(--r);border-radius:max(6px, calc(8 * var(--u)));overflow:hidden;background:#1a1a1a}
.hv5a__img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.hv5a__card:hover .hv5a__img{transform:scale(1.05)}
.hv5a__cap{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:#f4f4f2;color:#0c0c0c;font-size:var(--fs-small);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease-out)}
.hv5a__card:hover .hv5a__cap,.hv5a__card:focus-visible .hv5a__cap{opacity:1;transform:none}
@keyframes hv5-drift{to{transform:translateX(-50%)}}

/* b · «След»: the sentence in the middle, covers dropped along the pointer's path */
.hv5--b{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;cursor:default}
.hv5b__text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s-5);pointer-events:none}
.hv5b__text a{pointer-events:auto}
.hv5b__text .hv5__t{max-width:16em;font-size:clamp(40px, 4.9vw, 92px)}
.hv5b__pool{position:absolute;inset:0;z-index:2;pointer-events:none}
.hv5b__img{position:absolute;left:0;top:0;width:clamp(140px, 13vw, 220px);height:auto;border-radius:6px;opacity:0;will-change:transform,opacity}
.hv5b__img.is-on{animation:hv5-pop 1.15s var(--ease-out) forwards}
@keyframes hv5-pop{0%{opacity:0;transform:translate(var(--x),var(--y)) translate(-50%,-50%) rotate(var(--a)) scale(.6)}
  14%{opacity:1;transform:translate(var(--x),var(--y)) translate(-50%,-50%) rotate(var(--a)) scale(1)}
  72%{opacity:1;transform:translate(var(--x),var(--y)) translate(-50%,-50%) rotate(var(--a)) scale(1)}
  100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 40px)) translate(-50%,-50%) rotate(var(--a)) scale(.92)}}
.hv5b__hint{position:absolute;left:0;right:0;bottom:var(--s-5);margin:0;font-size:var(--fs-small);color:#a9a9a6}
@media (hover:none),(pointer:coarse){.hv5b__hint{display:none}}

/* c · «Окна»: three live windows inside the sentence */
.hv5--c{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--s-5)}
.hv5c__t{max-width:15em}
.hv5c__win{position:relative;display:inline-block;width:1.7em;height:.86em;margin:0 .12em;vertical-align:-.06em;border-radius:.43em;overflow:hidden;background:#222;transition:width .5s var(--ease-out)}
.hv5c__win:hover,.hv5c__win:focus-visible{width:3.1em}
.hv5c__v{width:100%;height:100%;object-fit:cover;display:block}
.hv5c__lab{position:absolute;right:.35em;bottom:.3em;padding:.25em .6em;border-radius:999px;background:#f4f4f2;color:#0c0c0c;font-size:max(11px, .13em);letter-spacing:0;line-height:1.2;opacity:0;transition:opacity .25s}
.hv5c__win:hover .hv5c__lab,.hv5c__win:focus-visible .hv5c__lab{opacity:1}

@media (max-width:900px){
  .hv5__t{font-size:clamp(38px, 11vw, 64px);line-height:1.06}
  .hv5a__top{grid-template-columns:1fr;gap:var(--s-4)}
  .hv5a__side{padding-bottom:0}
  .hv5a__card{height:clamp(120px, 19vh, 180px)}
  .hv5--b .hv5__t{font-size:clamp(36px, 10vw, 56px)}
  .hv5b__text .hv5__t{max-width:none}
  /* on phones the trail runs by itself in the band under the words (hero.js), so it never covers them */
  .hv5b__img{width:clamp(120px, 38vw, 170px)}
  .hv5c__win{width:1.5em}
}
@media (prefers-reduced-motion:reduce){
  .hv5a__track{animation:none}
  .hv5a__row{overflow-x:auto;scrollbar-width:none}
  .hv5b__img.is-on{animation:none;opacity:0}
}