/* =============================================================================
   VIDEO BLOCK — Yuma video work: stacked category rails (AI / clinic / UGC).
   Tokens only. Ink (flagship) context.
============================================================================= */

.fo-vb-mount { margin-top: var(--space-6); padding-top: var(--space-6);
               border-top: var(--border-width) dashed var(--color-border-inverse);
               display: flex; flex-direction: column; gap: var(--space-7); }

.vb-grid { display: flex; flex-wrap: nowrap; gap: var(--space-4); align-items: flex-start;
           overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
           -webkit-overflow-scrolling: touch; padding: 18px 20px 18px 6px; scroll-padding-left: 6px;
           scrollbar-width: none; -ms-overflow-style: none; }
.vb-grid::-webkit-scrollbar { display: none; }
.vb-tile { position: relative; margin: 0; flex: 0 0 clamp(180px, 23%, 260px); scroll-snap-align: start;
           aspect-ratio: 9 / 16; border-radius: var(--radius-md); overflow: hidden;
           border: var(--border-width) solid var(--color-border-inverse); background: #000; cursor: pointer;
           transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease, filter .22s ease, box-shadow .22s ease; }
/* spotlight: hovered tile pops, the rest of the rail dims + blurs */
.vb-grid.is-focusing .vb-tile { opacity: .38; filter: blur(3px) brightness(.5) saturate(.85); }
.vb-grid.is-focusing .vb-tile.is-active { opacity: 1; filter: none;
           transform: translateY(-4px) scale(1.04); z-index: 3;
           box-shadow: 8px 8px 0 0 var(--color-accent); }
/* periodic sheen — glossy diagonal light sweep to signal interactivity */
.vb-tile::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: translateX(-200%) skewX(-12deg);
  animation: vb-sheen 12s linear infinite;
}
@keyframes vb-sheen {
  0%   { transform: translateX(-200%) skewX(-12deg); }
  18%  { transform: translateX(320%) skewX(-12deg); }
  100% { transform: translateX(320%) skewX(-12deg); }
}
.vb-tile:nth-child(2)::after { animation-delay: .5s; }
.vb-tile:nth-child(3)::after { animation-delay: 1s; }
.vb-tile:nth-child(4)::after { animation-delay: 1.5s; }
.vb-tile:nth-child(5)::after { animation-delay: 2s; }
.vb-tile:nth-child(n+6)::after { animation-delay: 2.5s; }
.vb-grid.is-focusing .vb-tile::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vb-tile::after { animation: none; display: none; } }
.vb-tile:hover { transform: translateY(-3px); }
.vb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vb-play { position: absolute; left: var(--space-2); top: var(--space-2); width: 0; height: 0;
           border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--color-accent); }

.vb2 { display: flex; flex-direction: column; gap: var(--space-7); }
.vb2__cat { display: flex; flex-direction: column; gap: var(--space-4); }
.vb2__head { font-family: var(--font-script); transform: rotate(-3deg); font-size: var(--fs-title-m);
             color: var(--color-accent); align-self: flex-start; line-height: 1.1; white-space: nowrap; padding-bottom: var(--space-3); }

@container (max-width: 760px) { .vb-tile { flex-basis: clamp(150px, 42%, 220px); } }

/* ── "Enable sound" floating prompt (browsers block audio until 1 user gesture) ── */
#vb-soundcta { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
               z-index: 9999; display: inline-flex; align-items: center; gap: var(--space-3);
               padding: var(--space-3) var(--space-5); border: none; cursor: pointer;
               font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-body-sm);
               color: var(--color-ink); background: var(--color-accent);
               border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
               transition: transform .12s ease, box-shadow .12s ease, opacity .3s ease;
               animation: vb-cta-in .45s cubic-bezier(.22,.61,.36,1) both; }
#vb-soundcta:hover  { transform: translateX(-50%) translateY(-2px); }
#vb-soundcta:active { transform: translateX(-50%) translate(0, 4px); box-shadow: 0 0 0 0 var(--color-ink); }
#vb-soundcta.is-gone { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.vb-soundcta__ico { font-size: 1.15em; line-height: 1; }
@keyframes vb-cta-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce) { #vb-soundcta { animation: none; } }