/* The theater: the video grows forward, the page blurs and darkens behind it. */
html.mvt-open { overflow: hidden; }
#siteWrapper { transition: filter .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1); }
html.mvt-open #siteWrapper, html.mvt-open .mv-bio__card, html.mvt-open .mvr, html.mvt-open .mvm-theater { filter: blur(14px) brightness(.35) saturate(1.2); }
html.mvt-open #siteWrapper { transform: scale(.97); }
.mvt { position: fixed; inset: 0; z-index: 2000; perspective: 1400px; }
.mvt[hidden] { display: none; }
.mvt__veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(20, 14, 6, .55), rgba(0, 0, 0, .88) 70%); opacity: 0; transition: opacity .45s ease; cursor: zoom-out; }
.mvt.is-open .mvt__veil { opacity: 1; }
.mvt__spot { position: absolute; left: 50%; top: 45%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(254, 208, 49, .12), transparent 45%); opacity: 0; transform: scale(.6); transition: opacity .6s ease .15s, transform 1s cubic-bezier(.2, .9, .3, 1) .1s; }
.mvt.is-open .mvt__spot { opacity: 1; transform: none; }
.mvt__box { position: absolute; transform-origin: 0 0; will-change: transform; }
.mvt__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1), 0 0 140px -30px rgba(254, 208, 49, .45); }
.mvt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 1.2s ease; }
.mvt.is-playing .mvt__poster { opacity: 0; transform: scale(1.04); }
.mvt__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease .1s; }
.mvt.is-playing .mvt__frame { opacity: 1; }
.mvt__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* a light sweep across the screen as it lands */
.mvt__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-120%); }
.mvt.is-open .mvt__shine { animation: mvtShine 1s cubic-bezier(.3, .7, .2, 1) .35s; }
@keyframes mvtShine { to { transform: translateX(120%); } }
.mvt .mvt__title { margin: 14px 4px 0; color: #fed031 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .8); font: 400 clamp(16px, 1.6vw, 20px)/1.3 "Shrikhand", serif; letter-spacing: 0; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .4s ease .45s, transform .5s ease .45s; }
.mvt__title:empty { display: none; }
.mvt.is-open .mvt__title { opacity: 1; transform: none; }
.mvt__x { position: absolute; top: -20px; right: -20px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: #fed031; color: #0d0d0d; font-size: 28px; line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .3s ease .4s, transform .45s cubic-bezier(.2, 1.6, .4, 1) .4s; }
.mvt.is-open .mvt__x { opacity: 1; transform: none; }
.mvt__x:hover { transform: rotate(90deg) scale(1.06); }
.mvt.is-closing .mvt__x, .mvt.is-closing .mvt__title { transition-delay: 0s; opacity: 0; }
@media (max-width: 700px) { .mvt__x { top: -56px; right: 0; } }
@media (prefers-reduced-motion: reduce) { #siteWrapper, .mvt__veil, .mvt__spot, .mvt__poster, .mvt__frame, .mvt__title, .mvt__x { transition: none; } .mvt.is-open .mvt__shine { animation: none; } }