/* video-player.css: the Vurvo theater, the one video player for the whole site.

   Built to the app's video rule (design/VURVO-HANDOFF.md §1.1 and §5.2):
   the provider's player plays untouched, with its own controls and branding,
   and every piece of Vurvo chrome sits OUTSIDE its rectangle. Header above,
   meta, action rail and Up Next below, the atmosphere behind.

   The look is the app's Stadium Glass, in the site's own type: a blurred,
   team-washed atmosphere per clip, Stories-style segmented progress, glass
   surfaces with a bevel and grain, and Vurvo controls that always read
   glyph + label + value. Colours: --team, --team-2, --team-ink from the page. */

.vt { position: fixed; inset: 0; z-index: 80; visibility: hidden; color: #F5F3F0; font-family: var(--body, system-ui, sans-serif);
  --vt-ease: cubic-bezier(.16, 1, .3, 1); --vt-press: cubic-bezier(.34, 1.56, .64, 1); }
.vt.on { visibility: visible; }
.vt [hidden] { display: none !important; }
.vt button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vt svg { display: block; flex: none; }

/* ── the atmosphere: the clip's poster, blurred and washed in the team colour ── */
.vt-atmo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #08070A; pointer-events: none; }
.vt-atmo i { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(38px) saturate(1.25); transform: scale(1.08); opacity: 0; transition: opacity .6s ease-out; }
.vt-atmo i.on { opacity: 1; }
.vt-atmo::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
    linear-gradient(180deg, color-mix(in srgb, var(--team-2, #FF7A30) 28%, transparent) 0%, transparent 40%, rgba(0,0,0,.35) 70%, color-mix(in srgb, var(--team, #E8400C) 34%, transparent) 100%),
    rgba(8,7,10,.58); }
/* grain: flat black is the tell */
.vt-atmo::after { content: ""; position: absolute; inset: 0; z-index: 2; opacity: .5; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.vt-shell { position: relative; z-index: 1; height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.vt-shell::-webkit-scrollbar { display: none; }
/* the column follows the screen's height, so the player, the headline and the rail share the first view */
.vt-col { width: clamp(min(640px, calc(100% - 40px)), calc((100vh - 370px) * 16 / 9), min(1080px, calc(100% - 40px))); margin: 0 auto; padding: 18px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vt-col > * { min-width: 0; } /* a long filmstrip must scroll, never widen the column */

/* ── header: Stories progress, the crest, the way out ── */
.vt-segs { display: flex; gap: 4px; height: 3px; }
.vt-segs button { flex: 1; min-width: 6px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.22); position: relative; }
.vt-segs button::before { content: ""; position: absolute; inset: -10px 0; } /* a bigger hit area than a 3px line */
.vt-segs button i { position: absolute; inset: 0; border-radius: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.vt-segs button.done i { --f: 1; }
.vt-hd { display: flex; align-items: center; gap: 12px; }
.vt-crest { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none;
  font: 900 15px/1 var(--disp, sans-serif); letter-spacing: .02em; color: #fff;
  background: linear-gradient(160deg, var(--team-2, #FF7A30), var(--team, #E8400C) 58%, color-mix(in srgb, var(--team, #E8400C) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18), 0 12px 28px -12px color-mix(in srgb, var(--team, #E8400C) 70%, transparent); }
.vt-crest svg { width: 22px; height: 22px; }
.vt-hl { display: grid; gap: 2px; min-width: 0; }
.vt-hl small { font: 800 10.5px var(--body); letter-spacing: .2em; text-transform: uppercase; color: #A79FA8; }
.vt-hl b { font: 900 22px/1 var(--disp, sans-serif); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-hd .vc { margin-left: auto; }

/* ── the provider's player: untouched, 16:9, chrome only around it ── */
.vt-player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 52px 104px -31px rgba(0,0,0,.95), 0 0 70px -20px color-mix(in srgb, var(--team-2, #FF7A30) 40%, transparent); }
.vt-player iframe, .vt-player .vt-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── meta: whose clip, what it is, when ── */
.vt-meta { display: grid; gap: 10px; }
.vt-src { justify-self: start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding: 0 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--team, #E8400C) 88%, #000); color: var(--team-ink, #fff); font: 800 11px var(--body); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.14); }
.vt-src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-meta h2 { margin: 0; font: 900 clamp(28px, 3.4vw, 46px)/.94 var(--disp, sans-serif); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
.vt-when { font: 800 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #A79FA8; }
.vt-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 16px; font-size: 14px; color: #F5F3F0;
  background: linear-gradient(163deg, rgba(255,255,255,.105), rgba(255,255,255,.026)); box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 0 0 1px rgba(255,255,255,.13); }
.vt-note a { color: var(--team-2, #FF7A30); font-weight: 800; }

/* ── Vurvo controls: one recipe, six layers, parameterized by tone ──
   glyph + label + value; a control with only a word in it is a bug. */
.vc { --hi: rgba(255,255,255,.13); --lo: rgba(255,255,255,.035); --ring: rgba(255,255,255,.15); --glow: rgba(255,255,255,.10); --fg: #F5F3F0;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; overflow: hidden;
  color: var(--fg); background: linear-gradient(180deg, var(--hi), var(--lo)); text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(23px) saturate(140%); backdrop-filter: blur(23px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.55), 0 0 0 1px var(--ring), 0 13px 34px -10px var(--glow), 0 26px 44px -26px rgba(0,0,0,.95);
  transition: translate 90ms var(--vt-press), scale 90ms var(--vt-press), box-shadow .2s ease-out, opacity .15s; }
.vc::before { content: ""; position: absolute; inset: 0 0 48% 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.02)); pointer-events: none; }
.vc:active { translate: 0 2px; scale: .985; }
.vc:disabled { opacity: .38; cursor: default; }
.vc:disabled:active { translate: none; scale: none; }
.vc:focus-visible { outline: 2px solid #F5F3F0; outline-offset: 3px; }
.vc b { font: 800 14px var(--body); }
.vc .v { font: 800 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .78; font-variant-numeric: tabular-nums; }
.vc.team { --hi: var(--team-2, #FF7A30); --lo: var(--team, #E8400C); --ring: rgba(255,255,255,.24); --glow: color-mix(in srgb, var(--team-2, #FF7A30) 62%, transparent); --fg: var(--team-ink, #fff); }
.vc.icon { width: 44px; padding: 0; justify-content: center; }
.vc.lg { height: 56px; padding: 0 24px; gap: 13px; }
.vc.lg b { font-size: 16px; }
/* the next control counts down at the end of a clip: its fill is the countdown */
.vc .cd { position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,.24); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }
.vc[aria-pressed="true"] { --ring: color-mix(in srgb, var(--team-2, #FF7A30) 55%, transparent); --glow: color-mix(in srgb, var(--team-2, #FF7A30) 40%, transparent); }
.vt-rail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vt-rail .grow { flex: 1; }

/* ── Up Next: a glass filmstrip ── */
.vt-up h3 { margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; font: 900 26px/1 var(--disp, sans-serif); text-transform: uppercase; }
.vt-up h3 small { font: 800 10.5px var(--body); letter-spacing: .2em; color: #A79FA8; }
.vt-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 23%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 2px 22px; margin: 0 -2px; overscroll-behavior-x: contain; }
.vt-strip::-webkit-scrollbar { display: none; }
.vt-card { scroll-snap-align: start; display: grid; align-content: start; gap: 10px; padding: 10px 10px 14px; border: 0; border-radius: 22px; text-align: left; color: #F5F3F0;
  background: linear-gradient(163deg, rgba(255,255,255,.105), rgba(255,255,255,.026)); -webkit-backdrop-filter: blur(23px) saturate(140%); backdrop-filter: blur(23px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 0 0 1px rgba(255,255,255,.13), 0 21px 44px -18px rgba(0,0,0,.75);
  transition: translate .24s var(--vt-ease), box-shadow .2s ease-out; }
.vt-card:hover { translate: 0 -3px; }
.vt-card:active { translate: 0 1px; }
.vt-card[aria-current="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 0 0 1px color-mix(in srgb, var(--team-2, #FF7A30) 55%, transparent), 0 0 39px -10px color-mix(in srgb, var(--team-2, #FF7A30) 45%, transparent), 0 21px 44px -18px rgba(0,0,0,.75); }
.vt-card .th { position: relative; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: #141218; }
.vt-card .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-card .n { position: absolute; left: 10px; bottom: 6px; font: 900 34px/1 var(--disp, sans-serif); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.vt-card .now { position: absolute; right: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  background: var(--team, #E8400C); color: var(--team-ink, #fff); font: 800 9.5px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.vt-card b { padding: 0 4px; font: 700 14px/1.3 var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-card small { padding: 0 4px; font: 800 10px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #A79FA8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A vertical clip on a wide screen: the stage keeps its 16:9 frame, so nothing
   around it moves; YouTube's player narrows to the centre (still untouched) and
   the clip's own art, blurred, fills the frame beside it. On a phone a 16:9
   frame would make it tiny, so there the frame itself grows to 9:16, animated. */
.vt-player::before { content: ""; position: absolute; inset: -40px; background: var(--art, none) center / cover; filter: blur(30px) brightness(.5) saturate(1.2); opacity: 0; transition: opacity .45s ease-out; }
.vt.portrait .vt-player::before { opacity: 1; }
.vt-player iframe, .vt-player .vt-yt { transition: left .45s var(--vt-ease), width .45s var(--vt-ease); }
@media (min-width: 721px) { .vt.portrait .vt-player iframe, .vt.portrait .vt-player .vt-yt { left: 34.1797%; width: 31.6406%; } } /* 9:16 inside 16:9 */
@media (max-width: 720px) { .vt.portrait .vt-player { aspect-ratio: 9 / 16; justify-self: center; width: min(100%, calc((100vh - 230px) * 9 / 16)); } }
.vt-card.portrait .th::before { content: ""; position: absolute; inset: -14px; background: var(--art) center / cover; filter: blur(16px) brightness(.55) saturate(1.2); }
.vt-card.portrait .th img { position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; width: auto; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; }

/* the clicked thumbnail on its way to the player (gone before the player paints) */
.vt-fly { position: fixed; z-index: 90; margin: 0; object-fit: cover; pointer-events: none; box-shadow: 0 34px 70px -23px rgba(0,0,0,.85); }

@media (max-width: 720px) {
  .vt-col { width: 100%; padding: calc(10px + env(safe-area-inset-top)) 0 calc(28px + env(safe-area-inset-bottom)); gap: 16px; }
  .vt-segs, .vt-hd, .vt-meta, .vt-rail, .vt-note { margin: 0 16px; }
  .vt-up h3 { margin: 0 16px 12px; }
  .vt-player { border-radius: 0; }
  .vt-rail .vc:not(.team) .v { display: none; }
  .vt-strip { grid-auto-columns: 74%; padding-left: 16px; padding-right: 16px; margin: 0; scroll-padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-atmo i, .vt-player::before, .vt-player iframe, .vt-player .vt-yt { transition: none; }
  .vt-card, .vc { transition: none; }
}