/* Hero: full-screen orange, the Bekifft mummy mascot (own SVG) in the middle.
   Mouse interaction: face-follow component (assets/js/face-follow.js): only eyes and mouth move. */
[data-split="heading"] { visibility: hidden; }   /* revealed by mask-text-reveal.js */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero-mascot { --mascot-extra: 15svh; /* extra space below the mascot, before the section ends (and the pixels start) */ position: relative; height: calc(100svh + var(--mascot-extra)); min-height: 420px; background: var(--bk-accent); display: grid; place-items: center; overflow: clip; }
.hero-mascot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0.2; z-index: 0; pointer-events: none; }
/* Stage is placed so the character (mic to joint, ~59 % / 30 % of the SVG viewBox) sits in the exact centre of the hero;
   the mic cord runs on down past the bottom edge (hero clips it) */
.hero-mascot__stage { --h: min(90svh, 110vw); position: absolute; z-index: 1; height: var(--h); aspect-ratio: 493.69 / 654.57; left: calc(50% - var(--h) * 0.445); top: calc((100% - var(--mascot-extra)) / 2 - var(--h) * 0.3); }
.hero-mascot__body { position: relative; z-index: 1; width: 100%; height: 100%; }
/* Smoke sits behind the mascot and spills across the hero (full viewport width, extends above the stage; edges fade out in hero-smoke.js) */
.hero-mascot__smoke { position: absolute; z-index: 0; left: 50%; width: 100vw; margin-left: -50vw; top: -30svh; height: calc(100% + 40svh); pointer-events: none; }
.mascot-svg { display: block; width: 100%; height: 100%; overflow: visible; }