/* Video block «Как проходит русификация» (W-0061 step 5): templates/partials/video.html + assets/js/video.js.
   Loaded only by pages that show a video (home, the model pages listed in data/site/videos.yaml). 16:9 frame, poster + play
   button; after a tap the Kinescope player fills the same frame (.vid-if). The button breathes (a ring) until the first tap. */
.vid{margin:0}
.vid-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.vid-play{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.vid-play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
.vid-btn{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:84px;height:84px;margin:-42px 0 0 -42px;
  border-radius:50%;background:#d6262d;box-shadow:0 8px 32px var(--red-glow);transition:transform .25s var(--ease)}
.vid-btn svg{margin-left:4px}
.vid-btn::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid rgba(255,255,255,.8);animation:vid-ring 2.2s var(--ease) infinite}
.vid-len{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:6px;background:rgba(0,0,0,.78);color:#fff;font-size:14px;font-weight:600;line-height:1.2}
.vid-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;color:#fff;background:#000}
.vid-play:hover img,.vid-play:focus-visible img,.vid-play:hover .vid-loop,.vid-play:focus-visible .vid-loop{transform:scale(1.04)}
.vid-play:hover .vid-btn,.vid-play:focus-visible .vid-btn{transform:scale(1.1)}
.vid-play:active .vid-btn{transform:scale(.92)}
.vid-if{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cap{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:16px;line-height:1.4}
.vid-cap span{font-size:14px}
@keyframes vid-ring{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.vid-btn::after{animation:none;opacity:0}.vid-play img,.vid-btn{transition:none}}

/* cover loop (step 10e): a silent 12 s loop of the video's own footage over the poster; video.js sets its src only when the frame is
   in view and adds .is-live when it plays, so a refused autoplay / no JS / reduced motion leaves the poster with the red button.
   Taps go to the link underneath (pointer-events:none). The button and its label stay above the loop. */
.vid-play picture{display:block;width:100%;height:100%}
.vid-loop{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform var(--dur) var(--ease)}
.vid-loop.is-live{opacity:1}
.vid-btn,.vid-cta,.vid-len{z-index:2}
.vid-cta{position:absolute;left:50%;top:calc(50% + 56px);transform:translateX(-50%);padding:6px 14px;border-radius:999px;
  background:rgba(0,0,0,.78);color:#fff;font-size:16px;font-weight:700;line-height:1.25;white-space:nowrap;pointer-events:none}
.has-cover .vid-len{top:12px;bottom:auto}  /* the label sits under the button; the length chip moves up so they never meet on a phone */
@media (prefers-reduced-motion:reduce){.vid-loop{display:none}}

/* text with the video (step 10b, cut down by W-0062 on 13.10: «far too much text»). Home: a short text (.vid-about), on a desktop the
   column to the right of the video, centred and never taller than it; on a phone under the video. Model page: the chapter ticker
   (.vid-tick): a window of ~3 lines where the chapters slowly roll up like credits, in a loop (the list is there twice and moves by
   half its height, so the seam is invisible); paused under the pointer; keyboard focus or reduced motion = the list stands still and
   the window scrolls, the twin is hidden. A chapter is a button that starts the player at its second. Colours follow the section
   (currentColor), the time stamp is red. */
.vid-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.vid-about{font-size:16px;line-height:1.5}
.vid-h{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:700}
.vid-lead{margin:0}
body.pb .vid-duo{gap:14px}
.vid-tick{--row:34px;position:relative;height:calc(var(--row) * 3);overflow:hidden;border-radius:10px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.vid-roll{animation:vid-roll 26s linear infinite}
.vid-tick:hover .vid-roll{animation-play-state:paused}
.vid-chs{list-style:none;margin:0;padding:0}
.vid-ch{display:flex;gap:12px;align-items:baseline;padding:5px 6px;font-size:16px;line-height:24px;color:inherit;text-decoration:none;
  border-radius:6px;transition:background var(--dur) var(--ease)}
.vid-t{flex:none;min-width:48px;font-weight:700;font-variant-numeric:tabular-nums;color:#b01c22}  /* 5.9:1 on the paper band (#d6262d was 4.3) */
.vid-ch:hover,.vid-ch:focus-visible{background:rgba(214,38,45,.08)}
.vid-ch:hover .vid-cht{text-decoration:underline}
@keyframes vid-roll{to{transform:translateY(-50%)}}
.vid-tick:has(.vid-ch:focus-visible){overflow-y:auto;-webkit-mask-image:none;mask-image:none}
.vid-tick:has(.vid-ch:focus-visible) .vid-roll{animation:none}
.vid-tick:has(.vid-ch:focus-visible) .vid-chs[aria-hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .vid-tick{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;-webkit-mask-image:none;mask-image:none;
    border:1px solid rgba(127,127,127,.3)}
  .vid-roll{animation:none}
  .vid-chs[aria-hidden]{display:none}
}
@media (min-width:1000px){
  .home .vid-band .vid-duo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
}
/* W-0084 (Mikhail 14.10: room beside the video, a bit more text on the web version): from 1100 px the column also has the rest of the
   text, a car / length line and the chapters as numbered steps (the same links that start the player at their second); a phone and
   narrower screens keep heading + lead only. */
.vid-more,.vid-meta,.vid-steps{display:none}
@media (min-width:1100px){
  .vid-more{display:block;margin:8px 0 0}
  .vid-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0 0;font-size:14px;line-height:1.4}
  .vid-meta b{font-weight:700}
  .vid-steps{display:block;list-style:none;margin:12px 0 0;padding:0}
  .home .vid-band .vid-duo{grid-template-rows:auto auto;row-gap:0;align-content:center}
  .home .vid-band .vid-duo>.vid{grid-row:1 / span 2}
  .home .vid-band .vid-about{align-self:end}
  .home .vid-band .vid-steps{align-self:start;color:var(--ink)}
  .vid-steps .vid-ch{padding:2px 6px;margin:0 -6px;border-radius:6px}
}

/* home: phone section (dark) and the desktop band «Как проходит работа» (light paper band) */
.home .vid-cap{color:var(--txt)}
.home .vid-cap span{color:var(--txt-soft)}
.home .vid-band{margin-top:40px}
.home .vid-band>.vid{max-width:760px}
.home .vid-band .vid-about{color:var(--ink)}
.home .vid-band .vid-cap{color:var(--ink)}
.home .vid-band .vid-cap span{color:var(--ink-muted)}

/* model page (light content column); on a phone the block follows «Было по-китайски, стало по-русски» (m-model.css order 2) */
body.pb .vid-cap{color:var(--ink)}
body.pb .vid-cap span{color:var(--ink-muted)}
@media (max-width:759px){
  body.pb .pb-video{order:2}
  .vid-btn{width:72px;height:72px;margin:-36px 0 0 -36px}
  .vid-cta{top:calc(50% + 46px);font-size:15px}
}