/* ВСЕ! НА ТЕННИС — сториз: лента кружков и плеер.
   Одинаковая копия: vsenatennis.ru/MVC/Template/css/vnt-stories.css
                     tour.vsenatennis.ru/MVC/Template/cms/assets/vnt-stories.css */

/* ---------- лента ---------- */
.vst-rail{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.vst-rail::-webkit-scrollbar{display:none}
.vst-item{flex:0 0 auto;width:86px;background:none;border:0;padding:0;cursor:pointer;text-align:center;color:inherit;font:inherit;scroll-snap-align:start}
.vst-ring{display:block;width:86px;height:86px;border-radius:50%;padding:3px;background:conic-gradient(from 150deg,var(--c,#F5C518),#ff7a3d,var(--c,#F5C518));transition:transform .2s}
.vst-item:hover .vst-ring{transform:scale(1.05)}
.vst-item.seen .vst-ring{background:var(--line,#2a2a33)}
.vst-ph{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:3px solid var(--bg,#0c0c0f);background:#1d1d25 center/cover no-repeat;font-family:'Unbounded',sans-serif;font-weight:800;font-size:15px;color:#1a1500}
.vst-cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:12.5px;line-height:1.25;font-weight:700;color:var(--text,#f4f4f6)}
.vst-item.seen .vst-cap{color:var(--muted,#9a9aa6)}
@media(max-width:560px){.vst-item{width:74px}.vst-ring{width:74px;height:74px}.vst-cap{font-size:11.5px}}

/* ---------- плеер ---------- */
.vst-overlay{position:fixed;inset:0;z-index:2147483640;display:flex;align-items:center;justify-content:center;gap:18px;background:rgba(6,6,8,.94);opacity:0;transition:opacity .22s;-webkit-tap-highlight-color:transparent;font-family:'Manrope',system-ui,sans-serif}
.vst-overlay.on{opacity:1}
.vst-stage{--u:1;position:relative;overflow:hidden;border-radius:16px;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.vst-full .vst-stage{border-radius:0}
.vst-full .vst-side{display:none}
.vst-swap-r{animation:vstSwapR .32s ease}
.vst-swap-l{animation:vstSwapL .32s ease}
@keyframes vstSwapR{from{transform:translateX(30px);opacity:.3}to{transform:none;opacity:1}}
@keyframes vstSwapL{from{transform:translateX(-30px);opacity:.3}to{transform:none;opacity:1}}
.vst-side{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s}
.vst-side:hover{background:rgba(255,255,255,.24)}

.vst-media,.vst-fx,.vst-flt{position:absolute;inset:0}
.vst-flt img,.vst-flt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vst-shade{position:absolute;inset:0;pointer-events:none}

/* движение фона */
.vst-fx{animation-timing-function:linear;animation-fill-mode:both}
.fx-kenburns-in{animation-name:vstKbIn}
.fx-kenburns-out{animation-name:vstKbOut}
.fx-pan-left{animation-name:vstPanL}
.fx-pan-right{animation-name:vstPanR}
.fx-pulse{animation:vstPulse 3.2s ease-in-out infinite!important}
.fx-blur-in{animation:vstBlur 1.4s ease-out both!important}
@keyframes vstKbIn{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes vstKbOut{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes vstPanL{from{transform:scale(1.14) translateX(4%)}to{transform:scale(1.14) translateX(-4%)}}
@keyframes vstPanR{from{transform:scale(1.14) translateX(-4%)}to{transform:scale(1.14) translateX(4%)}}
@keyframes vstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes vstBlur{from{filter:blur(18px);transform:scale(1.08)}to{filter:blur(0);transform:scale(1)}}

/* фильтры (те же, что в редакторе фото) */
.vf-bw{filter:grayscale(1) contrast(1.08)}
.vf-warm{filter:sepia(.22) saturate(1.25) hue-rotate(-8deg) brightness(1.03)}
.vf-cold{filter:saturate(.85) hue-rotate(12deg) brightness(1.04) contrast(1.05)}
.vf-vintage{filter:sepia(.45) contrast(.92) brightness(1.06) saturate(.8)}
.vf-drama{filter:contrast(1.35) saturate(1.15) brightness(.92)}
.vf-fade{filter:contrast(.85) brightness(1.1) saturate(.75)}
.vf-court{filter:saturate(1.35) contrast(1.1) hue-rotate(-4deg)}

/* шапка */
.vst-head{position:absolute;left:0;right:0;top:0;padding:calc(10px*var(--u)) calc(10px*var(--u)) 0;z-index:4}
.vst-bars{display:flex;gap:4px}
.vst-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden}
.vst-bar i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.vst-info{display:flex;align-items:center;gap:10px;margin-top:10px;color:#fff}
.vst-ava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#F5C518 center/cover no-repeat;border:2px solid rgba(255,255,255,.85)}
.vst-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.vst-meta b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vst-meta span{font-size:12px;opacity:.85;font-weight:700}
.vst-tools{display:flex;align-items:center;gap:2px}
.vst-btn{width:36px;height:36px;border:0;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;border-radius:50%;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
.vst-btn:hover{background:rgba(255,255,255,.14)}
.vst-pause-ico{display:none;color:#fff;margin-right:4px}
.vst-paused .vst-pause-ico{display:inline-flex}

/* зоны касания */
.vst-tap{position:absolute;top:70px;bottom:90px;z-index:3;cursor:pointer}
.vst-tap-l{left:0;width:32%}
.vst-tap-r{right:0;width:68%}

/* текст */
.vst-layers{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:calc(78px*var(--u)) calc(20px*var(--u)) calc(92px*var(--u));pointer-events:none}
.vst-zone{display:flex;flex-direction:column;gap:calc(10px*var(--u))}
.vst-center{flex:1;justify-content:center}
.vst-l{display:flex}
.vst-l.a-left{justify-content:flex-start;text-align:left}
.vst-l.a-center{justify-content:center;text-align:center}
.vst-l.a-right{justify-content:flex-end;text-align:right}
.vst-l span{display:inline-block;max-width:100%;overflow-wrap:break-word;line-height:1.18;font-weight:700}
.vst-l.k-title span{font-family:'Unbounded','Manrope',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.12}
.vst-l.k-badge span{font-size:calc(12px*var(--u))!important;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:calc(6px*var(--u)) calc(11px*var(--u));border-radius:99px;background:#F5C518;color:#1a1500!important}
.vst-l.k-quote span{font-style:italic;font-weight:700}
.vst-l.k-quote span::before{content:'«'}
.vst-l.k-quote span::after{content:'»'}
.vst-l.k-score span{font-family:'Unbounded',sans-serif;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.02em}
.vst-l.s-s span{font-size:calc(15px*var(--u))}
.vst-l.s-m span{font-size:calc(20px*var(--u))}
.vst-l.s-l span{font-size:calc(28px*var(--u))}
.vst-l.s-xl span{font-size:calc(38px*var(--u))}
.vst-l.st-shadow span{text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6)}
.vst-l.st-plate span{background:rgba(10,10,12,.72);padding:calc(8px*var(--u)) calc(12px*var(--u));border-radius:calc(10px*var(--u));-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vst-l.st-accent span{background:#F5C518;color:#1a1500!important;padding:calc(6px*var(--u)) calc(12px*var(--u));border-radius:calc(8px*var(--u));-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vst-l.st-outline span{color:transparent!important;-webkit-text-stroke:calc(1.4px*var(--u)) #fff}

/* анимации текста */
.vst-l[class*="an-"]{animation-duration:.7s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.an-fade-up{animation-name:vstUp}
.an-zoom{animation-name:vstZoom}
.an-slide{animation-name:vstSlide}
.an-pop{animation-name:vstPop;animation-timing-function:cubic-bezier(.3,1.6,.5,1)!important}
@keyframes vstUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vstZoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes vstSlide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes vstPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1}100%{transform:none}}

/* кнопка */
.vst-cta-box{position:absolute;left:0;right:0;bottom:calc(22px*var(--u));z-index:5;display:flex;justify-content:center}
.vst-cta{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:calc(10px*var(--u)) calc(22px*var(--u));border-radius:99px;background:#fff;color:#111!important;font-weight:800;font-size:calc(14px*var(--u));text-decoration:none;box-shadow:0 8px 28px -6px rgba(0,0,0,.5);animation:vstCta 1.6s ease-in-out infinite}
.vst-cta svg{margin-top:-4px}
@keyframes vstCta{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.vst-toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:rgba(0,0,0,.8);color:#fff;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:700;opacity:0;transition:.2s;z-index:6;pointer-events:none;max-width:86%;text-align:center;word-break:break-all}
.vst-toast.on{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion: reduce){
  .vst-fx,.vst-l[class*="an-"],.vst-cta{animation:none!important}
}