/* uploadly.io hero (variant C2, Robin 10-28: "C je nejlepší") · the deep field as an upload queue. Loaded after /assets/site.css; it only adds the field and sizes
   the hero to the first screen. The text block (eyebrow, H1, sub, form, small print) is the live v8 one, untouched (phones
   only move it down, to open a top band for the cards).

   Back to front: .hero-bg (page colour + a faint blue depth haze at the vanishing point) → .df (one or two .df-f fields, each
   with its own CSS perspective; cards placed by hero-c2.js) → .df-vig (darker edges) → the text. No scrim: hero-c2.js never
   draws a card where the text is. Per frame only transform and opacity move; the upload bar is its own small layer. */

.hc-hero { min-height: max(100svh, 680px); padding-bottom: 0; }
.hc-hero .hero-bg {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(91, 132, 255, .07), transparent 70%),
    radial-gradient(52% 44% at 50% var(--vpy, 42%), rgba(70, 104, 255, .06), transparent 78%),
    var(--bg);
}
.hc-hero::after { height: 120px; }   /* the hero's foot: cards dissolve into the page */

/* the field: one perspective per band (desktop: one band, phones: a top and a bottom band) */
.df { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.df-f { position: absolute; inset: 0; perspective: var(--P, 1100px); perspective-origin: var(--fx, 50%) var(--fy, 40%); }
.js .df { opacity: 0; }
.js .df.is-ready { opacity: 1; transition: opacity 1.2s var(--ease) .2s; }   /* the upload shows within the first 2 s */
.shot .df.is-ready { transition: none; }

.df-c {
  position: absolute; left: 0; top: 0; width: var(--cw, 360px);
  transform-origin: 50% calc(var(--cw, 360px) * .28125);      /* the thumbnail's centre, not the card's */
  backface-visibility: hidden; will-change: transform, opacity; opacity: 0; visibility: hidden;
  --r: calc(var(--cw, 360px) * .028);
}
.df-c .th { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #12151B; }
.df-c .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-c .b { opacity: 0; }
.df-c.far .b { filter: blur(2.5px); transform: scale(1.04); }   /* 320 px-only thumbnails: soft focus made once, at raster */
/* a hairline and a soft drop, like a screen catching a little light */
.df-c .th::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.df-c::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; border-radius: var(--r); pointer-events: none;
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .9);
}

/* the upload bar: along the thumbnail's bottom edge, on mid and near cards (YouTube's red watch bar, but blue: going up) */
.df-c .pb { position: absolute; left: 0; right: 0; bottom: 0; height: max(3px, calc(var(--cw, 360px) * .0095)); background: rgba(91, 132, 255, .2); opacity: 0; transition: opacity .6s var(--ease); }
.df-c .pb i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #2D5BFF, #6F93FF); will-change: transform; }
.df-c.is-bar .pb { opacity: 1; }
.df-c.is-done .pb i { background: var(--live); transition: background .35s; }
.df-c.is-done .pb { opacity: 0; transition: opacity .9s var(--ease) .9s; }
/* a video card's bar: thicker, glowing, a slow sheen running along it while the upload runs (it reads at a glance) */
.df-c.is-near .pb { height: max(4px, calc(var(--cw, 360px) * .015)); background: rgba(255, 255, 255, .13); }
.df-c.is-near .pb i { overflow: hidden; background: linear-gradient(90deg, #3A66FF, #8AA8FF); box-shadow: 0 0 12px rgba(91, 132, 255, .9); }
.df-c.is-near[data-s=up] .pb i::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  animation: df-sheen 1.7s linear infinite;
}
@keyframes df-sheen { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* duration badge, YouTube style (near cards, with the details) */
.df-c .du {
  position: absolute; right: 7px; bottom: 9px; padding: 2px 5px 3px; border-radius: 5px; background: rgba(0, 0, 0, .78);
  font: 500 12.5px/1.15 var(--f); letter-spacing: .01em; color: #fff; opacity: 0; transition: opacity .6s var(--ease);
}

/* the video's details under the thumbnail, near cards only: a quiet tile, then title, channel, upload status */
.df-c .mt { display: none; }
.df-c.is-near .mt { display: block; }
.df-c.is-near::after {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: calc(var(--r) + 3px); pointer-events: none;
  background: #101217; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .95);
  opacity: 0; transition: opacity .7s var(--ease);
}
.df-c.is-near { isolation: isolate; }
.mt { position: relative; padding: 10px 12px 11px; opacity: 0; transition: opacity .7s var(--ease); text-align: left; }
.df-c.is-meta::after, .df-c.is-meta .mt, .df-c.is-meta .du { opacity: 1; }
.mt .tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15.5px; line-height: 20px; font-weight: 500; letter-spacing: -.005em; color: #E9EBF0; }
.mt .cn { display: flex; align-items: center; gap: 6px; margin-top: 2px; overflow: hidden; white-space: nowrap; font-size: 13.5px; line-height: 19px; color: #A3A9B4; }
.mt .cn .mono, .mt .cn img { width: 16px; height: 16px; flex: none; border-radius: 50%; font-size: 9px; font-weight: 600; }
.mt .cn em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.mt .st { position: relative; height: 20px; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.mt .st { display: block; }
.mt .st > span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .18s linear; }
.mt .st .i { width: 15px; height: 15px; }
/* "Uploading · 37 %": the loudest line on the card while it runs (bright blue, semibold, the percent in white) */
.mt .s-up { color: #A9BDFF; font-weight: 600; gap: 7px; }
.mt .s-up .pc { color: #fff; font-variant-numeric: tabular-nums; }
.mt .s-sc { color: var(--tx-2); }
.mt .s-sc .i { color: var(--tx-3); }
.mt .s-lv { color: var(--tx-2); }
.mt .s-lv .sep { width: 3px; height: 3px; border-radius: 50%; background: #5D636F; flex: none; }
.mt .s-lv .a-lv { gap: 5px; }
.mt .s-lv .tick { width: 15px; height: 15px; }
.mt .tick.is-on:not(.is-static) .m { transition: stroke-dashoffset .5s var(--ease-tick) .3s; }   /* draws as its line comes in */
/* the status changes in two steps (the old line out, then the new one in), never two lines on top of each other */
.df-c[data-s=up] .s-up, .df-c[data-s=sc] .s-sc, .df-c[data-s=lv] .s-lv { opacity: 1; transition: opacity .4s var(--ease) .2s; }
.mt .ring { display: block; width: 16px; height: 16px; flex: none; }
.mt .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mt .ring circle { fill: none; stroke: rgba(91, 132, 255, .3); stroke-width: 2.8; }
.mt .ring .ring-v { stroke: #7C9CFF; stroke-dasharray: 100; stroke-linecap: round; }
.mt .ring .ring-v { stroke-dashoffset: calc(100 - var(--pn, 0)); transition: none; }

/* edges a little darker (a lens, not a frame) */
.df-vig {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% var(--vpy, 42%), transparent 56%, rgba(8, 9, 12, .3) 84%, rgba(8, 9, 12, .55) 100%);
}


@media (max-width: 640px) {
  .hc-hero { min-height: max(100svh, 640px); padding-top: 186px; }   /* +70 px: a top band for the cards, under the nav */
  .df-vig { background: radial-gradient(150% 90% at 50% 50%, transparent 55%, rgba(8, 9, 12, .35) 88%, rgba(8, 9, 12, .55) 100%); }
  .mt { padding: 7px 9px 8px; }
  .mt .tt { font-size: 14.5px; line-height: 18px; }
  .mt .cn { margin-top: 1px; line-height: 17px; }
  .mt .st { height: 18px; margin-top: 3px; line-height: 18px; font-size: 13.5px; }
  .df-c .du { right: 5px; bottom: 7px; }
}
.df.cmp .mt .cn { display: none; }   /* small phones: title + status only (set by hero-c2.js when the room is tight) */
@media (max-width: 640px) and (max-height: 760px) {
  .hc-hero { padding-top: 156px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .df.is-ready { transition: none; }
  .df-c .pb, .df-c .du, .mt, .mt .st > span, .df-c.is-near::after { transition: none !important; }
  .df-c.is-near .pb i::after { animation: none; display: none; }
}