/* „Видеа, които може би вече си гледал“ — анимирани карти. Данните идват от Cloudflare Worker-а. */
.topv{--ease:cubic-bezier(.16,1,.3,1);position:relative;background:linear-gradient(180deg,#0F1A14,#0b150f);border-radius:20px;padding:24px 16px 20px;isolation:isolate;overflow:hidden}
/* светлинен кант, който обикаля картата веднъж */
.topv::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
 background:conic-gradient(from var(--a,0deg),#1E2D24 0deg,#1E2D24 300deg,rgba(43,255,136,.9) 340deg,#E8FF3A 352deg,#1E2D24 360deg);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.topv.is-in::before{animation:orbit 2.2s var(--ease) .1s 1 both}
@keyframes orbit{from{--a:0deg}to{--a:360deg}}
.topv::after{content:"";position:absolute;inset:-40% -10% auto;height:70%;z-index:-1;background:radial-gradient(50% 60% at 20% 0,rgba(43,255,136,.10),transparent 70%);pointer-events:none}

.topv__title{font-family:Unbounded,system-ui;font-weight:700;font-size:17px;line-height:1.3;margin:0 0 20px;opacity:0;transform:translateY(10px);transition:all .7s var(--ease)}
.topv__title span{color:var(--accent,#2BFF88)}
.topv.is-in .topv__title{opacity:1;transform:none}

.topv__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}

/* появяване една след друга */
.tv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease) var(--d),transform .9s var(--ease) var(--d)}
.topv.is-in .tv{opacity:1;transform:none}

.tv__thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#13221a;box-shadow:0 0 0 1px #1E2D24;clip-path:inset(0 100% 0 0 round 12px);transition:clip-path 1s var(--ease) var(--d),box-shadow .5s,transform .5s var(--ease)}
.topv.is-in .tv__thumb{clip-path:inset(0 0 0 0 round 12px)}
.tv__thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);transition:transform 3.2s linear}
.topv.is-in .tv__thumb img{transform:scale(1)}


/* лента за времето на фокус */
.tv__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);opacity:0;transition:opacity .3s}
.tv__prog::after{content:"";display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent,#2BFF88),var(--yellow,#E8FF3A))}

.tv__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 0;font-size:13px;font-weight:600;line-height:1.3;transition:color .3s}
.tv__num{display:flex;align-items:baseline;gap:5px;margin:6px 0 0;font:700 13px/1.25 Manrope,system-ui;color:var(--text);font-variant-numeric:tabular-nums}
.tv__num small{color:var(--muted);font-weight:500;font-size:11.5px}

/* фокус: автоматично или при посочване */
.tv.is-active .tv__thumb,.tv:hover .tv__thumb{box-shadow:0 0 0 1.5px var(--accent,#2BFF88),0 12px 34px -10px rgba(43,255,136,.65);transform:translateY(-3px)}
.tv.is-active .tv__thumb img,.tv:hover .tv__thumb img{transform:scale(1.09)}
.tv.is-active .tv__prog{opacity:1}
.tv.is-active .tv__prog::after{animation:tvProg 3.2s linear both}
.tv.is-active .tv__name,.tv:hover .tv__name{color:var(--accent,#2BFF88)}
@keyframes tvProg{to{transform:scaleX(1)}}

/* одометър */
.odo{display:inline-flex;height:1.25em;line-height:1.25em;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.odo span{display:inline-block;height:1.25em;line-height:1.25em}
.odo .col{display:flex;flex-direction:column;transition:transform 1.5s var(--ease)}
.odo .col span{height:1.25em;flex:0 0 1.25em}

@media(min-width:720px){.topv__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@media(min-width:960px){.topv{padding:32px 30px 28px}.topv__title{font-size:22px;margin-bottom:26px}.tv__name{font-size:15px;margin-top:12px}.tv__num{font-size:14px}}
@media (prefers-reduced-motion:reduce){.topv *, .topv::before{transition:none!important;animation:none!important}.tv,.topv__title{opacity:1;transform:none}.tv__thumb{clip-path:none}}