/* Hero stage: hall image + emblem share one coordinate system so the emblem stands on the podium at every size */
/* Stage = the hall image cropped like object-fit: cover, but as a real box so the
   emblem can be placed in image coordinates. Podium top-centre in the source
   image (1672×941): x 61.07%, y 50.7%.
   --zoom  stage width as a multiple of the viewport width (min; height-cover wins if larger)
   --fx/--fy  where the podium should land in the hero, as a fraction of width / height */
.hero__media {
  --img-ratio: 1.7768; --pod-x: .6107; --pod-y: .507;
  --zoom: 1.25; --fx: .72; --fy: .66; --emblem-w: 22%;
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  container-type: size;
  animation: hero-drift 24s var(--ease) infinite alternate;
}
.hero__stage {
  --sw: max(calc(var(--zoom) * 100cqw), calc(100cqh * var(--img-ratio)));
  --sh: calc(var(--sw) / var(--img-ratio));
  position: absolute; width: var(--sw); height: var(--sh);
  left: clamp(calc(100cqw - var(--sw)), calc(var(--fx) * 100cqw - var(--sw) * var(--pod-x)), 0px);
  top:  clamp(calc(100cqh - var(--sh)), calc(var(--fy) * 100cqh - var(--sh) * var(--pod-y)), 0px);
}
.hero__img { display: block; width: 100%; height: 100%; max-width: none; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,5,7,.94) 0%, rgba(10,5,7,.78) 30%, rgba(10,5,7,.12) 58%, rgba(10,5,7,.3) 100%),
    linear-gradient(180deg, rgba(10,5,7,.55) 0%, transparent 22%, transparent 64%, var(--ink-950) 100%);
}
.hero__emblem {
  position: absolute; z-index: 2;
  left: calc(var(--pod-x) * 100%); top: calc(var(--pod-y) * 100%);
  width: var(--emblem-w);
  translate: -50% -97%;           /* bottom edge rests on the platform */
}
.hero__emblem::before { content: ""; position: absolute; inset: -22% -18% -8%; background: var(--glow-gold); z-index: -1; animation: breathe 6s ease-in-out infinite; }
.hero__emblem img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0,0,0,.75)); }
@media (min-width: 1024px) and (max-width: 1279px) { .hero__media { --fx: .755; --emblem-w: 20%; } }
@media (min-width: 1600px) { .hero__media { --zoom: 1.12; --emblem-w: 21%; } }

/* Phones & tablets: the hall becomes a picture band; copy sits below it */
@media (max-width: 1023px) {
  .hero__media { position: relative; inset: auto; height: clamp(440px, 118vw, 620px); --zoom: 2.3; --fx: .5; --fy: .6; --emblem-w: 25%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(10,5,7,.6) 0%, transparent 24%, transparent 62%, var(--ink-950) 96%); }
  .hero__content { position: relative; margin-top: -5.5rem; }
}
@media (min-width: 640px) and (max-width: 1023px) { .hero__media { --zoom: 1.6; --emblem-w: 22%; height: clamp(460px, 70vw, 640px); } }

/* Mouse-reactive depth: the hall drifts opposite the cursor, the emblem tilts toward it.
   The stage is over-scaled 7% so the image always fills the hero edge to edge. */
.hero__media { --px: 0; --py: 0; }
.hero__stage { transform: translate3d(calc(var(--px) * -1.6%), calc(var(--py) * -1.6%), 0) scale(1.07); will-change: transform; }
.hero__emblem img {
  transform: perspective(900px) rotateY(calc(var(--px) * 9deg)) rotateX(calc(var(--py) * -7deg));
  transform-origin: 50% 100%;      /* pivot on the base so the logo never leaves the podium */
  filter: drop-shadow(calc(var(--px) * -10px) 14px 24px rgba(0,0,0,.75));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hero__stage, .hero__emblem img { transform: none; } }