/* WAY COMPANY hero — layered landscape + real H1 + scene + UI (owner: Motion/Parallax).
   Stage = reference frame rows 40..800 on desktop (1 frame px = var(--k)). Layer stack, back to front:
   sky → H1 → veil (low cloud band, moves with the sky) → far ridge → near ridge → mist → scene SVG → labels.
   Only transform/opacity animate. */

.hero{position:relative;background:#fff;overflow:clip}
.hero-stage{
  --k:calc(min(100vw,1536px) / 1536);   /* fallback without container units */
  --bx:0; --by:40;                     /* frame coordinate shown at the stage's top-left corner */
  --title-size:140; --title-top:92.4;  /* frame px: cap-top ≈114, baseline ≈215 (cap .72em at .165em) */
  position:relative;width:min(100%,1536px);margin-inline:auto;aspect-ratio:1536/760;
  container-type:inline-size;overflow:hidden;isolation:isolate
}
@supports (width:1cqw){.hero-stage{--k:calc(100cqw / 1536)}}

.hero-backdrop{position:absolute;inset:0;pointer-events:none;background:#fff}
.hero-layer{position:absolute;left:calc(var(--bx) * -1 * var(--k));top:calc((var(--r0) - var(--by)) * var(--k));
  width:calc(1536 * var(--k));height:calc(var(--rh) * var(--k));margin:0}
.hero-layer img{display:block;width:100%;height:100%}
/* white sky cap above the raster's row 0 (moves with the sky; only visible in the mobile crop) */
.hero-sky::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(600 * var(--k));background:#fff}

.hero-title{position:absolute;left:0;right:0;top:calc((var(--title-top) - var(--by)) * var(--k));margin:0;
  font-size:calc(var(--title-size) * var(--k));line-height:1;font-weight:800;letter-spacing:-.055em;word-spacing:.02em;
  text-align:center;white-space:nowrap;color:var(--navy)}
/* the span's box ends one letter-spacing before its last glyph: extend it so the gradient covers the ink */
.hero-to{padding-right:.06em;margin-right:-.06em;
  letter-spacing:-.02em}
/* R2-01: Manrope's em dash is ~35 % longer than the reference's; draw it at .74em, raised back onto the
   original dash line (text content and accessible name unchanged: "Из Китая — в Бишкек"). */
.hero-dash{font-size:.74em;vertical-align:.105em;letter-spacing:0;margin:0 -.03em 0 .03em}
.hero-to{color:var(--red)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Stops in em from the top of each background box: the h1 box starts at the line top (cap top .165em,
     baseline .885em); an inline span's box starts .185em higher (content area = ascent 1.07 + descent .30). */
  .hero-title{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(180deg,#4a64a6 .2em,#5672b2 .5em,#6f8cc6 .74em,rgba(160,180,222,.55) .9em)}
  .hero-to{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(180deg,#e53c63 .385em,#e8466b .685em,#ef6283 .925em,rgba(246,150,172,.5) 1.085em)}
}
@media (forced-colors:active){.hero-title,.hero-to{color:CanvasText;background:none}}

.hero-scene{position:absolute;inset:0;pointer-events:none}

.hero-place{position:absolute;top:calc((744 - var(--by)) * var(--k));margin:0;
  font-size:max(11px,calc(16.5 * var(--k)));line-height:1.2;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy)}
.hero-place-cn{left:calc(60 * var(--k))}
.hero-place-kg{right:calc(61 * var(--k))}

.hero-bottom{position:relative;z-index:1;width:min(100%,1536px);margin:calc(min(100vw,1536px) * -.0156) auto 0;
  padding:0 calc(min(100vw,1536px) * .058) clamp(28px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:40px}
.hero-bottom p{margin:0;font-size:clamp(15px,1.36vw,21px);line-height:1.5;color:#34477f;letter-spacing:-.005em}
.hero-bottom .button{min-height:clamp(52px,4.2vw,64px);padding-inline:clamp(23px,2.4vw,36px);font-size:clamp(13px,1.08vw,16px);gap:clamp(24px,3.2vw,48px);border-radius:6px}

/* ---------------------------------------------------------------- parallax (transform/opacity only) */
/* The landscape is one flat painting cut into layers; any seam between layers moving at different speeds crosses painted
   mountains/forest and tears them while scrolling. So the painted planes move as one rigid plane (depth comes from
   H1 ↔ landscape ↔ foreground scene). */.hero-sky,.hero-veil{--f:.26}.hero-title{--f:.55}.hero-far{--f:.26}.hero-near{--f:.26}.hero-mist{--f:.26}
/* The veil carries the sky's own pixels and moves exactly with the sky, so it never ghosts; the title moves
   faster (0.55) and slides deeper under the veil and the far ridge while scrolling. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero-backdrop>*{animation:hero-px linear both;animation-timeline:scroll(root block);animation-range:0px 100vh;will-change:transform}
    .hero-backdrop>.hero-title{animation-name:hero-px-title}
  }
  .hero-backdrop[data-parallax="js"]>*{transform:translate3d(0,calc(var(--hero-p,0) * var(--f) * 100vh),0);will-change:transform}
  .hero-backdrop[data-parallax="js"]>.hero-title{opacity:calc(1 - var(--hero-p,0) * .85)}
}
@keyframes hero-px{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(var(--f) * 100vh),0)}}
@keyframes hero-px-title{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,calc(var(--f) * 100vh),0);opacity:.15}}

/* Wider than the 1536 frame: fade the raster's side edges into the white page. */
@media (min-width:1537px){.hero-backdrop{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}}

/* ---------------------------------------------------------------- mobile composition (≤700px) */
@media (max-width:700px){
  .hero-stage{--k:calc(100vw / 1300);--bx:200;--by:-122;width:100%;aspect-ratio:390/326}
  @supports (width:1cqw){.hero-stage{--k:calc(100cqw / 1300)}}
  .hero-title{top:3.6cqw;font-size:12.5cqw;line-height:1.02;letter-spacing:-.06em;word-spacing:0;white-space:normal;text-indent:0;padding-inline:4cqw}
  .hero-to{display:block;letter-spacing:inherit}
  .hero-veil{opacity:var(--veil-o,.6)}
  /* the sky's top rows fade into an opaque white cap that travels with the sky (no transparent band) */
  .hero-sky::after{content:"";position:absolute;left:0;right:0;top:0;height:24%;background:linear-gradient(#fff,rgba(255,255,255,0))}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    /* two lines: one gradient per line box (h1 line 1, span = line 2) */
    .hero-title{background-size:100% 1.02em;background-repeat:no-repeat}
    .hero-to{background-image:linear-gradient(180deg,#e53c63 .2em,#e8466b .5em,#ef6283 .74em,rgba(246,150,172,.5) .9em)}
  }
  .hero-scene{inset:auto 0 auto 0;top:32.2cqw}
  .hero-place{top:auto;bottom:3.4cqw;font-size:max(10px,2.9cqw);letter-spacing:.07em}
  .hero-place-cn{left:4.6cqw}.hero-place-kg{right:4.6cqw}
  .hero-bottom{margin:0;padding:6px 20px 30px;flex-direction:column;text-align:center;gap:18px}
  .hero-bottom p{font-size:13px;line-height:1.7}
  .hero-bottom .button{min-height:50px;padding-inline:24px;font-size:13px;gap:28px}
  .hero-sky,.hero-veil{--f:.13}.hero-title{--f:.28}.hero-far{--f:.13}.hero-near{--f:.13}.hero-mist{--f:.13}
}
@media (max-width:370px){.hero-bottom p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.hero-backdrop>*{animation:none!important;transform:none!important}.hero-backdrop>.hero-title{opacity:1!important}}