/* Hero — versie Youri: zachte randen + scroll-cue "Doors are open". Alleen voor home-youri.html. */

/* stilstaand eerste beeld: zelfde zachte randen als het raster, geen harde snede */
.hall__poster {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 42%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 42%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect;
}
/* de oude hint maakt plaats voor de cue */
.hall [data-hint] { display: none; }

/* ---------- typografie volgens de PBA-posts op Instagram ----------
   bovenregel: Aeonik Regular, hoofdletters, klein · kop: Aeonik Bold, HOOFDLETTERS, strak
   accent: Aeonik cursief, rechts, twee regels · aanwijzing: hoofdletters met ruime spatiëring */
.hall__copy { align-items: stretch; }
.hall__head { width: fit-content; max-width: min(100%, 10.6em); font-size: clamp(34px, 4.7vw, 86px); }
.hall__eyebrow { margin: 0 0 .9em; font: 400 clamp(13px, .95vw, 16px)/1.2 Aeonik, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #F7F7F7; }
.hall__title { max-width: none; font-size: 1em; font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; }
.hall__title em { font: inherit; font-style: normal; line-height: inherit; letter-spacing: inherit; }
.hall__sub { position: absolute; right: var(--gutter, clamp(20px, 4vw, 64px)); bottom: clamp(44px, 9vh, 96px); margin: 0; width: fit-content; max-width: calc(100% - 2 * var(--gutter, 20px)); text-align: right; font: italic 500 clamp(16px, 1.35vw, 23px)/1.3 Aeonik, "Helvetica Neue", Arial, sans-serif; font-synthesis: style; letter-spacing: -.01em; color: #F7F7F7; text-shadow: 0 0 18px #161616, 0 0 6px #161616; }
.hall__sub span { display: block; }

/* scroll-cue: cursief accent, lichtstreep, "SCROLL ↓" zoals "SWIPE →" */
.cue { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: #F7F7F7; text-align: center; white-space: nowrap; pointer-events: none; transition: opacity .5s var(--ease, ease), transform .5s var(--ease, ease); }
.cue.is-gone { opacity: 0; transform: translate(-50%, 10px); }
.cue__lbl { font: italic 500 clamp(15px, 1.1vw, 18px)/1 Aeonik, "Helvetica Neue", Arial, sans-serif; font-synthesis: style; letter-spacing: -.01em; }
.cue__line { position: relative; display: block; width: 1px; height: 64px; margin: 14px 0 12px; background: rgba(247, 247, 247, .16); overflow: hidden; }
.cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(to bottom, transparent, var(--accent, #80d7d2)); animation: cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { to { top: 100%; } }
.cue__go { font: 400 11px/1 Aeonik, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--accent, #80d7d2); }

@media (max-width: 720px) {
  .hall__head { width: 100%; font-size: clamp(30px, 9.4vw, 46px); }
  .hall__sub { position: static; font-size: 16px; margin: 1.1em 0 0 auto; }   /* gsm: rechts onder de kop, in het donkere deel */
  .cue { bottom: max(20px, env(safe-area-inset-bottom)); } .cue__line { height: 46px; margin: 10px 0 9px; }
}
@media (prefers-reduced-motion: reduce) { .cue__line::after { animation: none; top: 30%; } }

/* krimpen bij het scrollen (js/hall-init-youri.js zet transform en --k) */
.hall__head { transform-origin: 0 0; will-change: transform; }
.hall__sub { opacity: calc(1 - var(--k, 0) * .35); }
/* knoppen aan het einde van de rit: linksonder, los van de gekrompen kop */
.hall [data-cta] { position: absolute; left: var(--gutter, clamp(20px, 4vw, 64px)); bottom: clamp(48px, 9vh, 96px); margin: 0; }

/* font-glitch: elke letter houdt de breedte van Aeonik, andere lettertypes passen erin zonder dat de zin verspringt */
.hall__title .gw, .hall__sub .gw { display: inline-block; white-space: nowrap; }
.hall__title .gl, .hall__sub .gl { display: inline-block; text-align: center; }

/* bewijs op het eerste scherm: wie we bedienen (krimpt mee met de kop) */
.hall__proof { margin: 1.1em 0 0; font: 400 clamp(12px, .9vw, 15px)/1.5 Aeonik, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: rgba(247, 247, 247, .62); max-width: 40em; }
.hall__proof b { font-weight: 500; color: #f7f7f7; }