/* Native alpha; the whole building remains visible at every depth. */
.is-style-mpf-hero { overflow-x: clip; }
.is-style-mpf-hero-layout > .mpf-building {
  position: relative; mix-blend-mode: normal; isolation: isolate; --building-glow: .23;
  opacity:var(--building-scene-opacity,1);
  transform: translate(var(--building-scroll-x, 0px), var(--building-scroll-offset, 0px)); cursor:grab; touch-action:pan-y; user-select:none;
}
.mpf-building-stage { position: absolute; inset: 0; z-index: 0; overflow: visible; }
.mpf-building-stage::before {
  content: ''; position: absolute; inset: 12% 7% 2%; pointer-events: none;
  background: radial-gradient(ellipse at 55% 48%, #f7f4ef, rgba(247,244,239,.4) 45%, rgba(247,244,239,0) 72%);
  opacity: var(--building-glow); filter: blur(22px); z-index: -1;
}
.mpf-building-stage > img.mpf-building-poster,
.mpf-building-stage > canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  transform: none; border-radius: 0;
}
.mpf-building-stage > img.mpf-building-poster {
  inset: 50% auto auto 50%; width: var(--building-frame-width, 112%); height: var(--building-frame-height, auto); max-width: none;
  aspect-ratio: 6 / 5; transform: translate(-50%, -50%);
  mask-image: linear-gradient(to bottom, #000 var(--building-poster-mask-start, 100%), transparent var(--building-poster-mask-end, 120%));
}
.mpf-building-stage > canvas {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden; transition: opacity .5s ease; pointer-events:none;
}
@media (min-width: 801px) {
  .is-style-mpf-hero > .is-style-mpf-hero-layout { min-height:calc(100svh - 80px); }
  .is-style-mpf-hero-layout > .mpf-building { z-index:2; }
  .mpf-building-stage > canvas { mask-image: linear-gradient(to bottom, #000 var(--building-mask-start, 100%), transparent var(--building-mask-end, 120%)); }
}
.mpf-building-stage > canvas:active { cursor: grabbing; }
.is-building-ready .mpf-building-stage > canvas { visibility: visible; opacity: 1; }
.is-building-ready .mpf-building-poster { opacity: 0; transition: opacity .5s ease; }
.mpf-building-stage > canvas:focus-visible { outline: none; }
/* People orbit in a separate HTML layer; back bubbles pass behind the alpha canvas. */
.mpf-building-person {
  position: absolute; left: var(--orbit-x, 50%); top: var(--orbit-y, 50%);
  width: clamp(104px, 8vw, 120px); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 5px 7px; border-radius: 11px; border: 1px solid #dce1e3;
  background: #f7f4ef;
  box-shadow: 0 8px 24px rgba(52,64,70,.07); pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--orbit-scale, .7)); z-index: -1;
  translate: 0 0; opacity: 1; visibility: var(--orbit-visibility, visible);
  transition: translate .46s cubic-bezier(.22,.61,.36,1), opacity .32s ease, visibility 0s;
  will-change: transform;
}
.mpf-building[data-building-scrolling="true"] .mpf-building-person {
  translate:none; opacity:1; visibility:hidden; transition:none;
}
.mpf-building .mpf-building-person img {
  position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: contain; object-position: center; border-radius: 0; flex: 0 0 auto;
}
.mpf-building-person span {
  margin-top: 4px; min-height: 2.6em; color: #304d60; font: 400 12px/1.3 var(--wp--preset--font-family--mono, 'JetBrains Mono', monospace);
  letter-spacing: -.025em; text-align: center; overflow-wrap: normal;
}
/* Reveal only the measured layout; without scripting retain the static fallback. */
@media (scripting: enabled) {
  .mpf-building:not([data-orbit-ready]) .mpf-building-person { visibility: hidden; }
}
@media (max-width: 800px) {
  .is-style-mpf-hero-layout > .mpf-building { height: auto; aspect-ratio: 6 / 5; }
  .mpf-building-stage { inset: 0; }
  .mpf-building-stage { opacity: 1; }
  .mpf-building-stage > img.mpf-building-poster { width: var(--building-frame-width, 100%); height: var(--building-frame-height, 100%); }
  .mpf-building-person {
    left: var(--orbit-mobile-x, var(--orbit-x, 50%)); top: var(--orbit-mobile-y, var(--orbit-y, 50%));
    width: clamp(68px, 18vw, 76px); padding: 3px 3px 4px; border-radius: 7px;
    transform: translate(-50%, -50%) scale(var(--orbit-mobile-scale, .68));
  }
  .mpf-building-person span { margin-top: 2px; min-height: 3.6em; font-size: 9px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  .mpf-building .mpf-building-stage > canvas, .mpf-building .mpf-building-stage > img { transition: none; }
  .mpf-building .mpf-building-person, .mpf-building[data-building-scrolling] .mpf-building-person { transition: none; translate: none; }
}
/* Phone hero: a compact, full-width render above the institutional copy. */
@media (max-width: 700px) {
  .is-style-mpf-hero-layout > .mpf-building {
    height: clamp(285px, 43svh, 400px);
    aspect-ratio: auto;
    overflow: visible;
    z-index:3;
  }
  .is-style-mpf-hero-copy,
  .is-style-mpf-hero > .is-style-mpf-service-grid { z-index:4; }
  .is-style-mpf-hero-copy > *, .is-style-mpf-hero > .is-style-mpf-service-grid > * {
    opacity:var(--building-copy-opacity,1); visibility:var(--building-copy-visibility,visible);
  }
  .is-style-mpf-hero-copy, .is-style-mpf-service-grid a { scroll-margin-top:calc(var(--building-mobile-bottom,0px) + 16px); }
  .mpf-building-person { transition:translate .46s cubic-bezier(.22,.61,.36,1),visibility 0s; }
  .mpf-building[data-building-scrolling="true"] .mpf-building-person { opacity:1; translate:none; transition:none; }
  .mpf-building-person span { font-size: 9px; white-space: normal; }
}
@media print { .mpf-building-stage > canvas { display: none; } .mpf-building-stage > img.mpf-building-poster { opacity: 1; mask-image: none; } }

/* Avoid a frame around the interactive building. */
.mpf-building-stage > canvas:focus { outline: none; }
@media (prefers-reduced-motion: reduce), print {
  .is-style-mpf-hero-layout > .mpf-building { transform: none; opacity: 1; }
}
@media print { .mpf-building-person { display: none; } }

/* Native pinning avoids compositor scroll/rAF disagreement on trackpads. */
.mpf-building-slot[hidden] { display:none!important; }
.is-style-mpf-hero-layout > .mpf-building[data-building-pin] {
  position:fixed; left:var(--building-pin-left); top:var(--building-pin-top);
  width:var(--building-pin-width); height:var(--building-pin-height);
  margin:0!important; transform:none; overflow-anchor:none;
}
.is-style-mpf-hero-layout > .mpf-building[data-building-pin=released] { position:absolute; }
.mpf-building-slot, .mpf-home-building-intro { overflow-anchor:none; }

/* The native sticky parent moves the complete scene, never a per-frame correction. */
.is-style-mpf-hero[data-hero-story] .mpf-building { transform:none; }

.is-style-mpf-hero[data-hero-story] .mpf-building-poster { scale:calc(1 - var(--building-scroll-composition,0) * .18); transform-origin:0 0; }

.is-style-mpf-hero[data-hero-story] .mpf-building-stage > canvas,
.is-style-mpf-hero[data-hero-story] .mpf-building-stage > .mpf-building-poster { mask-image:none; }
