/* The book's videos (/js/hmw-video.js): a 16:9 frame with a still, a silent loop over it and a link that
   covers it all and opens the full video with sound; the "Watch with sound" pill (bottom left: the floating
   live-event dock sits bottom right); and the lightbox. */
.hmw-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #0c0b0a; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.hmw-video-still, .hmw-video-loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hmw-video-loop { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.is-looping > .hmw-video-loop { opacity: 1; }
.hmw-video-poster { position: absolute; inset: 0; z-index: 1; display: block; color: #fff; text-decoration: none; }
.hmw-video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 11, 10, .35), rgba(12, 11, 10, 0) 32%); transition: background-color .3s; }
.hmw-video-poster:hover::after { background-color: rgba(255, 255, 255, .04); }
.hmw-video-poster:focus-visible { outline: none; }

.hmw-video-pill {
  position: absolute; left: 20px; bottom: 20px; z-index: 1; display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 18px 7px 7px; border-radius: 999px; background: rgba(28, 27, 26, .66); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.hmw-video-pill-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #F1672A; transition: transform .2s; }
.hmw-video-pill-icon svg { margin-left: 3px; }
.hmw-video-pill-time { color: rgba(255, 255, 255, .7); font-weight: 500; }
a:hover .hmw-video-pill-icon { transform: scale(1.08); }
a:focus-visible .hmw-video-pill { outline: 3px solid #fff; outline-offset: 3px; }

.hmw-video-lightbox {
  position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center;
  padding: 72px 24px 24px; background: rgba(12, 11, 10, .9); animation: hmw-video-fade .2s ease-out;
}
.hmw-video-lightbox[hidden] { display: none; }
.hmw-video-lightbox-inner { position: relative; width: min(1200px, 100%, calc((100vh - 120px) * 16 / 9)); animation: hmw-video-rise .3s cubic-bezier(.2, .8, .2, 1); }
.hmw-video-lightbox-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.hmw-video-lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hmw-video-close {
  position: absolute; top: -56px; right: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .2s;
}
.hmw-video-close:hover { background: rgba(255, 255, 255, .26); }
.hmw-video-close:focus-visible { outline: 3px solid #F1672A; outline-offset: 2px; }
.hmw-video-edge { position: absolute; width: 1px; height: 1px; overflow: hidden; }
@keyframes hmw-video-fade { from { opacity: 0; } }
@keyframes hmw-video-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

@media screen and (max-width: 767px) {
  .hmw-video-frame { border-radius: 10px; }
  .hmw-video-pill { left: 12px; bottom: 12px; gap: 10px; padding: 5px 14px 5px 5px; font-size: 14px; }
  .hmw-video-pill-icon { width: 32px; height: 32px; }
  .hmw-video-pill-icon svg { width: 11px; height: 13px; margin-left: 2px; }
  .hmw-video-lightbox { padding: 64px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hmw-video-lightbox, .hmw-video-lightbox-inner { animation: none; }
  .hmw-video-loop, .hmw-video-pill-icon { transition: none; }
}