/* =====================================================================
   CINEMA · lesson fragments: a silent living preview while in view, the
   card comes closer as it crosses the screen, and the lights go down
   around it when she presses play.
   ===================================================================== */
.videos__row--two { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 48px); max-width: 980px; }
.videos__row--two .vclip:first-child { grid-column: auto; }

.vclip { position: relative; margin: 0;
  transform: scale(calc(0.9 + var(--vk, 0) * 0.1)) translateY(calc((1 - var(--vk, 0)) * 24px));
  transform-origin: 50% 60%; will-change: transform; }
.vclip__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111;
  box-shadow: 0 30px 70px -36px rgb(18 18 18 / 0.7), 0 0 0 1px rgb(18 18 18 / 0.06); }
.vclip__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vclip__full { object-fit: contain !important; background: #000; }
.vclip figcaption { margin-top: 12px; display: flex; gap: 10px; align-items: baseline; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); letter-spacing: -0.02em; color: var(--text); }
.vclip__n { font-family: var(--sc-font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); }

/* the play button: a pulse on the icon, the label on a glass pill */
.vclip__btn { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; cursor: pointer; background: linear-gradient(to top, rgb(0 0 0 / 0.45), transparent 45%);
  display: flex; align-items: flex-end; justify-content: flex-start; gap: 12px; padding: clamp(14px, 2.4vw, 24px); color: #fff; font: inherit; text-align: left; }
.vclip__icon { flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--acc); position: relative; box-shadow: 0 10px 24px -8px rgb(90 21 32 / 0.8);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.vclip__icon::after { content: ""; position: absolute; left: 23px; top: 18px; border: 11px solid transparent; border-left: 17px solid #fff; border-right: 0; }
.vclip__icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--acc); animation: vpulse 2s ease-out infinite; }
@keyframes vpulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.vclip__cta { padding: 8px 12px; border-radius: 999px; background: rgb(0 0 0 / 0.55); font-family: var(--sc-font-text); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.vclip__btn:hover .vclip__icon { transform: scale(1.08); }
.vclip__btn:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; }

/* lights down: a dark wash over the whole page around the playing card */
.vclip.is-playing { z-index: 45; }
.vclip.is-playing .vclip__screen { box-shadow: 0 0 0 100vmax rgb(10 8 8 / 0.82), 0 40px 90px -30px rgb(0 0 0 / 0.9); }
.vclip.is-playing figcaption { color: #F2EDE6; position: relative; }
.vclip .vclip__screen { transition: box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.vclip.is-playing .vclip__btn, .vclip.is-playing .vclip__preview { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vclip { transform: none; }
  .vclip__icon::before { animation: none; }
}
@media (max-width: 860px) {
  .videos__row--two { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .vclip__icon { width: 48px; height: 48px; }
  .vclip__icon::after { left: 19px; top: 14px; border-width: 10px; border-left-width: 15px; }
  .vclip__cta { font-size: 0.8rem; }
}

.vclip__full[hidden] { display: none !important; }
.vclip figcaption { flex-wrap: wrap; row-gap: 2px; }
.vclip__n { white-space: nowrap; }