/* Anantam films: a dawn poster with the turning emblem and a play button. Pressing it swaps
   in the player (video.js); without JavaScript the poster opens the film in a new page. */
.lab-film {
  margin: 0;
}
.lab-film-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 20px;
  background: var(--earth);
  box-shadow: 0 30px 70px -52px #573513b8;
}
.lab-film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lab-film-poster {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: grid;
  align-content: end;
  justify-items: start;
  padding: clamp(18px, 4%, 36px);
  color: var(--earth);
  text-decoration: none;
  background:
    radial-gradient(120% 90% at 50% 118%, var(--dawn), transparent 62%),
    linear-gradient(180deg, #fdf6ea, #f4dfbd);
}
.lab-film-poster::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url('assets/anantam-mark.99045036da9d.webp') center / contain no-repeat;
  opacity: .12;
  animation: film-turn 240s linear infinite;
}
@keyframes film-turn { to { rotate: 1turn; } }
.lab-film-kicker {
  margin: 0 0 6px;
  color: var(--copper-deep);
  font: 600 .75rem / 1.3 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lab-film-name {
  max-width: 18ch;
  font: 400 clamp(1.5rem, 3.4vw, 2.5rem) / 1.05 var(--font-display);
  letter-spacing: -.01em;
  text-align: left;
}
.lab-film-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(44px, 8%, 64px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--earth);
  color: var(--ivory);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ivory) 55%, transparent), 0 18px 40px -16px #39291f99;
  transition: scale 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.lab-film-icon svg { width: 42%; height: 42%; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .lab-film-poster:hover .lab-film-icon { scale: 1.06; background: var(--copper-deep); }
}
.lab-film-poster:active .lab-film-icon { scale: .97; }
.lab-film-poster:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) {
  .lab-film-poster::before { animation: none; }
  .lab-film-icon { transition: none; }
}
@media (max-width: 700px) {
  .lab-film-frame, .lab-film-poster:focus-visible { border-radius: 14px; }
  .lab-film-kicker { font-size: .75rem; }
}