/* ==========================================================================
   reel.css, homepage brand-film section.

   The hero already carries a silent 14.5s loop, but that reads as texture --
   most visitors never register it as a film. This band is the invitation: a
   still, a runtime, and something obvious to press. It opens the same lightbox
   as the hero's corner button (see hero-video.js), so there is one player.

   Ink ground on purpose: mission and search are both Sand, so this breaks a
   run of two identical bands and gives the film a darkened-room feel.
   ========================================================================== */
.vr-reel{background:var(--vr-ink); padding-block:var(--vr-section-y); text-align:center;}
.vr-reel__wrap{max-width:980px; margin:0 auto; padding-inline:var(--vr-gutter);}

.vr-reel .vr-eyebrow{color:var(--vr-accent-inverse); margin-bottom:.9rem;}
.vr-reel__head{
  font-weight:500; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15;
  color:#fff; margin-bottom:.8rem; text-wrap:balance;
}
.vr-reel__head em{font-style:italic; color:var(--vr-canvas);}
.vr-reel__sub{
  font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.82);
  max-width:56ch; margin:0 auto 2.2rem;
}

/* ---------- the poster / play target ---------- */
.vr-reel__player{
  display:block; position:relative; width:100%; padding:0; border:0;
  background:var(--vr-ink); border-radius:8px; overflow:hidden; cursor:pointer;
  box-shadow:0 26px 60px rgba(0,0,0,.42);
  transition:transform .3s ease, box-shadow .3s ease;
}
.vr-reel__player img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform .5s ease, filter .3s ease;
}
/* A light scrim keeps the play button legible over the brightest part of the
   frame, which is the sunlit brick behind the two of them. */
.vr-reel__player::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(31,42,46,.10) 0%, rgba(31,42,46,.34) 100%);
}
.vr-reel__player:hover{transform:translateY(-3px); box-shadow:0 32px 70px rgba(0,0,0,.5);}
.vr-reel__player:hover img{transform:scale(1.02);}
.vr-reel__player:focus-visible{outline:2px solid var(--vr-ivory); outline-offset:4px;}

.vr-reel__play{
  position:absolute; inset:0; z-index:2; margin:auto;
  width:clamp(64px,9vw,88px); height:clamp(64px,9vw,88px);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(31,42,46,.52); border:1px solid rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
/* CSS triangle, nudged right so it sits optically centred in the circle */
.vr-reel__play::before{
  content:''; border-style:solid;
  border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff;
  margin-left:5px;
}
.vr-reel__player:hover .vr-reel__play{
  background:var(--vr-peacock); border-color:#fff; transform:scale(1.06);
}

/* Runtime, lower-right of the poster */
.vr-reel__time{
  position:absolute; right:clamp(12px,2vw,20px); bottom:clamp(12px,2vw,20px); z-index:2;
  font-family:var(--vr-ui); font-weight:400; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  background:rgba(31,42,46,.6); border-radius:3px; padding:.4rem .7rem;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

.vr-reel__caption{
  font-family:var(--vr-ui); font-weight:300; font-size:.82rem; letter-spacing:.06em;
  color:rgba(255,255,255,.6); margin-top:1.2rem;
}

@media (prefers-reduced-motion:reduce){
  .vr-reel__player, .vr-reel__player img, .vr-reel__play{transition:none;}
  .vr-reel__player:hover{transform:none;}
  .vr-reel__player:hover img{transform:none;}
  .vr-reel__player:hover .vr-reel__play{transform:none;}
}