/* Video testimonials, Synthesia-style cards (Matias, 9-oct-2026). Pairs with scripts/vt.js.
   Each card: the guest's video, "Past guest" tag, their words over a soft blur at the bottom, name + detail.
   Hover: the words and the blur drop away fast and "Play story" opens from the centre like a pill.
   Leave: the words rise back from below; the pill closes almost at once.
   Playing: only a small pause button in the top corner, so the video's own subtitles stay clear.
   No backdrop-filter and no mask on the scrolling row: both drew glitches in Firefox/Zen. */

/* The row runs edge to edge; the first card lines up with the page text */
.vt {
  --vt-edge: max(var(--gutter), calc((100vw - var(--col-broad)) / 2 + var(--gutter)));
  --vt-fade: clamp(36px, 7vw, 120px);
  --vt-bg: var(--paper);
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(28px, 4vh, 44px);
}
section:has(> .container > .vt) { overflow-x: clip; }
.vt__viewport { overflow: hidden; }
.vt__track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px var(--vt-edge) 12px; scroll-padding-inline: var(--vt-edge);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.vt__track::-webkit-scrollbar { display: none; }

/* Soft fades on the sides, drawn over the row; the left one only once you have moved */
.vt::before, .vt::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--vt-fade); z-index: 4; pointer-events: none;
  transition: opacity .3s ease;
}
.vt::before { left: 0; background: linear-gradient(90deg, var(--vt-bg) 12%, rgba(253, 251, 244, 0)); }
.vt::after { right: 0; background: linear-gradient(270deg, var(--vt-bg) 12%, rgba(253, 251, 244, 0)); }
.vt.at-start::before, .vt.at-end::after { opacity: 0; }

.vt__card {
  position: relative; flex: 0 0 clamp(250px, 23vw, 310px); aspect-ratio: 2 / 3;
  border-radius: 22px; overflow: hidden; scroll-snap-align: start;
  background: #1a221c; cursor: pointer; isolation: isolate;
  box-shadow: 0 24px 50px -30px rgba(20, 28, 22, .5);
}
.vt__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }

.vt__tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(253, 251, 244, .94); color: var(--ink);
  font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .25s ease;
}

/* The soft blur at the bottom: a blurred copy of the same frame (set by vt.js), shown only near the bottom */
.vt__shade {
  position: absolute; inset: -16px; z-index: 1;
  background-size: cover; background-position: center 30%;
  filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 70%);
          mask-image: linear-gradient(180deg, transparent 50%, #000 70%);
  transition: opacity .5s ease .06s;
}

.vt__text {
  position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
  transition: opacity .45s ease .06s, transform .55s cubic-bezier(.22, 1, .36, 1) .06s;  /* rises back from below */
}
.vt__quote { margin: 0; font: 500 clamp(17px, 1.3vw, 19px)/1.32 var(--font-body); letter-spacing: -.01em; text-wrap: balance; }
.vt__who { margin: 12px 0 0; font: 400 12px/1.4 var(--font-body); color: rgba(255, 255, 255, .78); }
.vt__who b { font-weight: 600; color: #fff; margin-right: 6px; }

/* "Play story": a pill that opens from the centre */
.vt__play {
  position: absolute; left: 50%; bottom: 22px; z-index: 4; transform: translateX(-50%);
  height: 40px; width: 40px; padding: 0; border: 0; border-radius: 999px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(253, 251, 244, .96); color: var(--ink);
  font: 500 13px/1 var(--font-body); white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45);
  transition: width .12s ease, opacity .1s ease;                   /* closes almost at once */
}
.vt__play svg { flex: 0 0 auto; width: 12px; height: 12px; }
.vt__play span { overflow: hidden; }

@media (hover: hover) {
  .vt__card:not(.is-playing):hover .vt__text, .vt__card:not(.is-playing):focus-within .vt__text {
    opacity: 0; transform: translateY(14px);
    transition: opacity .16s ease, transform .2s ease;               /* drops away fast */
  }
  .vt__card:not(.is-playing):hover .vt__shade, .vt__card:not(.is-playing):focus-within .vt__shade {
    opacity: 0; transition: opacity .2s ease;
  }
  .vt__card:not(.is-playing):hover .vt__play, .vt__card:not(.is-playing):focus-within .vt__play {
    width: 128px; opacity: 1; pointer-events: auto;
    transition: width .42s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
  }
}

/* Playing: the video takes the whole card; the pause button is a small circle in the top corner */
.vt__card.is-playing .vt__shade, .vt__card.is-playing .vt__text, .vt__card.is-playing .vt__tag { opacity: 0; }
.vt__card.is-playing .vt__play {
  left: auto; right: 14px; top: 14px; bottom: auto; transform: none;
  width: 36px; height: 36px; gap: 0;
}
.vt__card.is-playing .vt__play span { display: none; }
@media (hover: hover) {
  .vt__card.is-playing:hover .vt__play { opacity: .95; pointer-events: auto; transition: opacity .2s ease; }
}

/* Arrows on the row's edges */
.vt__arrow {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(31, 42, 34, .12);
  background: rgba(253, 251, 244, .97); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35); transition: opacity .25s ease;
}
.vt__arrow svg { width: 18px; height: 18px; }
.vt__arrow--prev { left: max(10px, calc(var(--vt-edge) - 21px)); }
.vt__arrow--next { right: max(10px, calc(var(--vt-edge) - 21px)); }
.vt__arrow:disabled { opacity: 0; pointer-events: none; }

/* Phones: no hover, so the pill sits under the words, small and always there */
@media (hover: none) {
  .vt__text { bottom: 74px; }
  .vt__shade {
    -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 54%);
            mask-image: linear-gradient(180deg, transparent 34%, #000 54%);
  }
  .vt__play { width: 118px; opacity: 1; pointer-events: auto; }
  .vt__card.is-playing .vt__play { width: 36px; opacity: .9; }
}
@media (max-width: 700px) {
  .vt__card { flex-basis: 74vw; }
  .vt__track { gap: 12px; }
  .vt::before, .vt::after { display: none; }
  .vt__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vt__text, .vt__play, .vt__shade { transition: none !important; }
  .vt__track { scroll-behavior: auto; }
}