/* boss-stage.css: the layered boss hero (cutout, crest, type on depth layers) and the film embed. Never volt. */

body.pt .pt-stage {
  --team: #3A3F49; --cut-fade: 7%;
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
  border-radius: 24px; border: 1px solid var(--pt-line); background: #0E0F13;
  contain: paint; perspective: 1400px; container-type: inline-size;
}
body.pt .pt-stage-rig { position: absolute; inset: 0; transform-style: preserve-3d; }
body.pt .pt-stage-l { position: absolute; inset: 0; pointer-events: none; }
body.pt .pt-stage.is-live .pt-stage-l, body.pt .pt-stage.is-live .pt-stage-rig { will-change: transform; }

/* back */
body.pt .pt-stage-glow {
  position: absolute; left: 10%; right: -20%; top: 2%; bottom: -12%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--team) 38%, transparent), transparent);
}
body.pt .pt-stage--crest-right .pt-stage-glow { left: -20%; right: 10%; }
body.pt .pt-stage-lines {
  position: absolute; inset: -6%;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(243, 241, 236, .05) calc(10% - 1px) 10%);
}
body.pt .pt-stage-ghost {
  position: absolute; left: -3%; top: 5%; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1.5px rgba(243, 241, 236, .07);
  font-family: var(--pt-display); font-stretch: 68%; font-weight: 800; text-transform: uppercase;
  font-size: 240px; font-size: 58cqw; line-height: .8; letter-spacing: -.01em;
}

/* mid: the portrait (--cut-* from assets/cutouts.js) */
body.pt .pt-stage-cut img {
  position: absolute; display: block; max-width: none;
  width: var(--cut-w, 100%); height: auto; left: var(--cut-x, 0); bottom: var(--cut-b, -2%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%),
    linear-gradient(90deg, transparent, #000 var(--cut-fade), #000 calc(100% - var(--cut-fade)), transparent);
  mask-composite: intersect;
}
body.pt .pt-stage-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* front */
body.pt .pt-stage-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(180deg, transparent, rgba(12, 13, 16, .94)); }
body.pt .pt-stage-crest { position: absolute; left: 5.5%; bottom: 5.5%; width: clamp(88px, 30%, 220px); }
body.pt .pt-stage-crest svg, body.pt .pt-stage-crest img.fbi-crest { display: block; width: 100%; height: auto; }
body.pt .pt-stage--crest-right .pt-stage-crest { left: auto; right: 5.5%; }
body.pt .pt-stage-tag {
  position: absolute; right: 5.5%; bottom: 6.5%; max-width: 60%; text-align: right;
  font-family: var(--pt-display); font-stretch: 84%; font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 9cqw, 64px); line-height: .9; color: var(--team-accent, var(--pt-tx));
}
body.pt .pt-stage--crest-right .pt-stage-tag { right: auto; left: 5.5%; text-align: left; }
body.pt .pt-stage-tag small { display: block; font-family: var(--pt-body); font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pt-tx2); margin-top: 8px; }

/* films */
body.pt .pt-motion { position: relative; margin: 0; border-radius: var(--pt-radius); overflow: hidden;
  border: 1px solid var(--pt-line); background: #0C0D10; display: grid; }
body.pt .pt-motion video { display: block; width: 100%; height: auto; background: #0C0D10; grid-area: 1/1; }
body.pt .pt-motion-toggle {
  grid-area: 1/1; place-self: end; margin: 12px; min-width: 44px; min-height: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--pt-line-2); background: rgba(12, 13, 16, .78);
  color: var(--pt-tx); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
body.pt .pt-motion-toggle[hidden] { display: none; }
body.pt .pt-motion-toggle:focus-visible { outline: 2px solid var(--pt-tx); outline-offset: 3px; }
body.pt .pt-motion figcaption { grid-row: 2; padding: 14px 18px; font-size: 15px; line-height: 1.5; color: var(--pt-tx3); border-top: 1px solid var(--pt-line); }

@media (prefers-reduced-motion: reduce) {
  body.pt .pt-stage-l, body.pt .pt-stage-rig { transform: none !important; }
}
@media (forced-colors: active) {
  body.pt .pt-stage-ghost, body.pt .pt-stage-lines, body.pt .pt-stage-glow { display: none; }
}