/* ---------------------------------------------------------------------------
   Publication teasers
   ---------------------------------------------------------------------------
   Every publication thumbnail on the page is a short looping video instead of a
   still image. The rules here keep that quiet and academic: the video sits in
   the same small slot the image used to occupy, it only moves when the reader
   is actually looking at it, and clicking opens it large with sound.

   Motion is opt-in for two reasons: a page with seven autoplaying videos is
   visually noisy, and it burns bandwidth for readers who scroll past. So a
   teaser plays when it enters the viewport or is hovered, and pauses when it
   leaves. Readers who ask for reduced motion get the poster frame only.
   --------------------------------------------------------------------------- */

.paper-row {
  --teaser-accent: #2b6cb0;
}

/* Row layout, after the reference page: video left (45%), citation right.
   The old thumbnail column was a fixed 160px, which is why nothing in the
   teaser was legible; at 45% of a 1040px page the video is ~440px wide. */
.teaser-cell {
  width: 45%;
  padding: 18px 12px 18px 20px;
  vertical-align: middle;
}

.paper-cell {
  width: 55%;
  padding: 18px 20px 18px 12px;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .teaser-cell,
  .paper-cell {
    display: block;
    width: auto;
    padding: 12px 16px;
  }
}

/* The media half of a publication row. */
.teaser {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #06070a;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  isolation: isolate;
  transition: box-shadow 260ms ease, transform 260ms ease;
  -webkit-tap-highlight-color: transparent;
}

.teaser:hover,
.teaser:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20),
              0 0 0 2px var(--teaser-accent);
}

.teaser:focus-visible {
  outline: none;
}

.teaser video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #06070a;
  /* Fades in once the first frame decodes, so a slow network shows a clean
     placeholder rather than a black hole. */
  opacity: 0;
  transition: opacity 420ms ease;
}

.teaser.is-ready video {
  opacity: 1;
}

/* Progress hairline at the bottom of a playing teaser. */
.teaser__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.teaser:hover .teaser__rail,
.teaser:focus-visible .teaser__rail,
.teaser.is-playing .teaser__rail {
  opacity: 1;
}

.teaser__rail span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teaser-accent);
  box-shadow: 0 0 8px var(--teaser-accent);
}

/* Corner affordances: expand, and (when the teaser has a soundtrack) sound. */
.teaser-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 26px;
  padding-top: 4px;
}

/* Buttons sit below the video, not over it: every teaser paints the full frame,
   so an overlay would collide with its own captions and pager. */
.teaser__actions {
  display: flex;
  gap: 4px;
  opacity: 0.55;
  transition: opacity 200ms ease;
}

.teaser-bar:hover .teaser__actions,
.teaser-bar:focus-within .teaser__actions {
  opacity: 1;
}

.teaser__btn {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.10);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
  color: #5d6779;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.teaser__btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: #1772d0;
  border-color: rgba(23, 114, 208, 0.35);
}

.teaser__btn:focus-visible {
  outline: 2px solid #1772d0;
  outline-offset: 1px;
}


/* Readers who prefer no motion get the poster still. */
@media (prefers-reduced-motion: reduce) {
  .teaser video {
    display: none;
  }

  .teaser__media-still {
    display: block !important;
  }
}

.teaser__media-still {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------------------- */

.teaser-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgba(4, 5, 8, 0.90);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}

.teaser-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.teaser-modal__stage {
  position: relative;
  width: min(1180px, 94vw);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #06070a;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
  transform: scale(0.97);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.teaser-modal.is-open .teaser-modal__stage {
  transform: scale(1);
}

.teaser-modal__stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser-modal__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1180px, 94vw);
  color: #e8ecf4;
  font-size: 14px;
}

.teaser-modal__title {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.teaser-modal__hint {
  color: #98a2b8;
  font-size: 12px;
}

.teaser-modal__ctrl {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.teaser-modal__ctrl:hover {
  background: rgba(255, 255, 255, 0.14);
}

.teaser-modal__ctrl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.teaser-modal__close {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 8, 12, 0.7);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.teaser-modal__close:hover {
  background: rgba(6, 8, 12, 0.9);
}

body.is-locked {
  overflow: hidden;
}

@media (max-width: 720px) {
  .teaser-modal {
    padding: 12px;
  }

  .teaser__actions {
    opacity: 1;
    transform: none;
  }
}