/* media.css — shared cinematic media treatment for The Pattern.
   Loaded by every page. Keeps disparate stock footage reading as one
   somber, unified system, and stays quiet & accessible (reduced-motion safe). */

.pat-media{
  margin:34px 0 4px; position:relative; border-radius:3px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 46px -22px rgba(0,0,0,.75);
  background:#0b0f16;
}
.pat-media img{
  display:block; width:100%; height:auto;
  /* gentle unifying grade — desaturate a touch, deepen, without killing warm hope-imagery */
  filter:grayscale(.14) contrast(1.05) brightness(.95);
}
.pat-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,rgba(10,16,24,.04) 0%,rgba(10,16,24,.10) 55%,rgba(10,16,24,.40) 100%);
}
/* silent ambient video layered over its still poster (fades in once playing) */
.pat-media .pat-poster{display:block; width:100%; height:auto;}
.pat-media .pat-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; opacity:0; transition:opacity 1s ease; pointer-events:none;
  filter:grayscale(.14) contrast(1.05) brightness(.95);
}
.pat-media .pat-vid.playing{opacity:1;}
.pat-band .pat-vid{max-height:46vh;}
/* full-bleed intro band used on the secondary pages */
.pat-band{margin:0; border-radius:0; border-left:0; border-right:0;
  max-height:46vh; }
.pat-band img{max-height:46vh; object-fit:cover;}
/* credit sits as a subtle overlay bottom-right so overflow:hidden never clips it */
.pat-credit{
  position:absolute; right:9px; bottom:7px; margin:0; z-index:3;
  font-family:'IBM Plex Mono',monospace; font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(244,239,228,.80);
  text-shadow:0 1px 4px rgba(0,0,0,.7); pointer-events:auto;
}
.pat-credit a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(244,239,228,.35);}

/* ---- hero ambient video loop (index) ---- */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:.26; filter:grayscale(.2) contrast(1.05) brightness(.8);
  pointer-events:none;
}
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(12,16,24,.25), transparent 60%),
    linear-gradient(180deg, rgba(12,16,24,.55) 0%, rgba(12,16,24,.72) 60%, rgba(12,16,24,.90) 100%);
}
.hero > .wrap{position:relative; z-index:2;}

/* respect reduced motion & small screens: drop the video, keep the still poster */
@media (prefers-reduced-motion: reduce){
  .hero-bg{display:none;}
}
@media (max-width:640px){
  .hero-bg{display:none;} /* save mobile data; poster/veil remain */
}