/**
 * @file about-media.css
 * @purpose Display supplied background photography/video with legible foreground text.
 * @dependencies about.html and about-media.js; optimized same-origin assets/about files.
 * @public .about-media, .about-background-video.
 * @sideEffects Local image loading; motion preferences retain the poster frame.
 */

/* Cover each chapter without changing its content flow or mobile height. */
.about-media { background: #101719; }
.about-media-poster, .about-background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.about-background-video { opacity: 0; transition: opacity 700ms ease; }
.about-media.has-video .about-background-video { opacity: 1; }
.about-intro .about-media-poster, .about-intro .about-background-video { object-position: 65% center; }
.about-media-projects .about-media-poster, .about-media-places .about-media-poster { object-position: 66% center; }

/* Keep supplied imagery visible on the right and readable under the white copy. */
.about-panel::after, .about-projects::after { background: linear-gradient(90deg, #050607eb 0%, #050607b8 28%, #05060745 64%, #05060712), linear-gradient(0deg, #050607 0%, #050607ed 7%, #05060785 16%, transparent 34%, transparent 63%, #05060780 84%, #050607ed 94%, #050607 100%); }
@media (max-width: 760px) {
  .about-panel::after, .about-projects::after { background: linear-gradient(0deg, #050607 0%, #050607f5 10%, #050607d9 27%, #05060775 60%, #05060733), linear-gradient(180deg, #050607 0%, #050607d9 9%, transparent 32%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-background-video { transition: none; }
}