/*
 * Design B, «Кино», the console's look since 8 Nov (admin.js DEFAULT_DESIGN; ?design=off goes back to plain v3).
 * The film never stops. The scene stays in sight under every chapter, only dimmed,
 * and each chapter is a slab of glass floating over it; headlines come into focus like a lens pulling.
 * A rail of chapters runs along the right edge (rail.js), a thin progress line on phones.
 * Only tokens and layout change here: markup and behaviour are the console's own.
 */
:root{
  /* The film stays in sight between the slabs; inside them text must still pass AA over the brightest sky */
  --scene-dim:.6;
  --slab:rgba(12,13,15,.78);--slab-line:rgba(255,255,255,.13);--slab-blur:22px;
}
[data-ch=field]{--ash:#b8bcc3;--ink-2:#d6d8dc}

/* Chapters float: a glass slab each, the film moving behind */
[data-ch=field] .ch{min-height:0;padding:clamp(48px,7vw,96px) 0}
[data-ch=field] .ch:first-child{padding-top:clamp(72px,12vh,140px)}
[data-ch=field] .ch:last-child{padding-bottom:calc(150px + var(--safe-b))}
[data-ch=field] .ch>.wrap{
  position:relative;padding:clamp(28px,4vw,64px) clamp(22px,4vw,64px);border-radius:clamp(22px,2.6vw,36px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),var(--slab);
  -webkit-backdrop-filter:blur(var(--slab-blur)) saturate(140%);backdrop-filter:blur(var(--slab-blur)) saturate(140%);
  border:1px solid var(--slab-line);box-shadow:0 30px 80px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);
  width:min(var(--wrap),calc(100% - 2*var(--pad)));
}
/* A thin line of light along the slab's top edge, as glass catches it */
[data-ch=field] .ch>.wrap::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,255,74,.55),transparent);opacity:.7}

/* Headlines in the film's own light */
[data-ch=field] .h{font-size:clamp(40px,6.6vw,104px);text-shadow:0 2px 24px rgba(0,0,0,.35)}
[data-ch=field] .h em{text-shadow:0 0 28px rgba(198,255,74,.25)}
/* Into focus: from soft and wide to sharp and set */
[data-ch=field] .h.rise.wait{opacity:0;transform:none;filter:blur(14px);letter-spacing:.06em}
[data-ch=field] .h.rise.seen{opacity:1;filter:blur(0);letter-spacing:-.035em;transition:opacity .9s var(--ease),filter 1.1s var(--ease),letter-spacing 1.3s var(--ease)}

/* Parts inside the glass: a little more air, hairlines in light */
[data-ch=field] .rows,[data-ch=field] .cmds,[data-ch=field] .tiles{border-top-color:rgba(255,255,255,.14)}
[data-ch=field] .row,[data-ch=field] .cmd,[data-ch=field] .tile{border-bottom-color:rgba(255,255,255,.1)}
[data-ch=field] .row-v{font-weight:300}
[data-ch=field] .cmd{margin:0 -12px;padding:14px 12px;border-radius:14px;border-bottom:0}
[data-ch=field] .cmds{gap:4px 24px;border-top:0}
[data-ch=field] .cmd::before{border-radius:14px}
@media (hover:hover){[data-ch=field] .cmd:hover{background:rgba(255,255,255,.06)}}
[data-ch=field] .meter{background:rgba(255,255,255,.12)}
[data-ch=field] .meter i{box-shadow:0 0 14px rgba(198,255,74,.5)}
[data-ch=field] .price label{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1)}
[data-ch=field] .tl{border-radius:16px}

/* The cover and the outro: the chips become glass too */
.hero .over,.hero .sync,.next .mono{background:rgba(12,13,15,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12)}

/* The rail: the page's chapters along the right edge (rail.js builds it) */
#rail{position:fixed;z-index:40;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);display:grid;gap:4px;opacity:0;transition:opacity .5s}
#rail.on{opacity:1}
/* Hidden, it is out of the keyboard's way too; focused, a chapter's name shows as on hover */
#rail:not(.on){visibility:hidden}
#rail:focus-within a span{opacity:1;transform:none}
#rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:30px;color:var(--ash);font-size:12px;letter-spacing:.02em}
#rail a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease);white-space:nowrap;padding:3px 9px;border-radius:999px;background:rgba(12,13,15,.6)}
#rail a i{width:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.3);transition:width .4s var(--ease),background .3s}
#rail a.at i{width:40px;background:var(--ion);box-shadow:0 0 12px rgba(198,255,74,.6)}
/* The chapter you are on is the long lit line; its name shows with the others on hover only: always shown,
   it lay over the slab's right edge on a 1440 screen («902 ₽ Где заряжались», audit 8 Nov) */
#rail a.at span{color:var(--bone)}
@media (hover:hover){#rail:hover a span{opacity:1;transform:none}#rail a:hover i{background:var(--bone)}}
#progress{position:fixed;z-index:45;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:var(--ion);box-shadow:0 0 10px rgba(198,255,74,.7);pointer-events:none}

@media (max-aspect-ratio:1/1),(max-height:520px){
  #rail{display:none}
  [data-ch=field] .ch{padding:14px 0}
  [data-ch=field] .ch:first-child{padding-top:64px}
  [data-ch=field] .ch:last-child{padding-bottom:calc(112px + var(--safe-b))}
  [data-ch=field] .ch>.wrap{width:calc(100% - 20px);padding:28px 20px 24px;border-radius:26px}
  [data-ch=field] .h{font-size:clamp(34px,10vw,52px)}
}
@media (min-aspect-ratio:1/1) and (min-height:521px){#progress{display:none}}
@media (prefers-reduced-motion:reduce){[data-ch=field] .h.rise.wait{opacity:1;filter:none;letter-spacing:-.035em}}
/* Each slab rises into place as it comes into view, tied to the scroll itself: it runs on the
   compositor, needs no script, and where the browser cannot do it the slab simply stands there. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-ch=field] .ch>.wrap{animation:slab-in linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    @keyframes slab-in{from{opacity:.2;transform:translateY(72px) scale(.965)}to{opacity:1;transform:none}}
  }
}
/* Browsers without glass get a plainer slab that still reads */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-ch=field] .ch>.wrap{background:rgba(12,13,15,.86)}}