/* hall.css — #hall: by night, Brain Club meets around your lamp. The picture is laid as a sheet (it laps the sheet above, the next
   sheet laps it), the headline sits on a night gradient that melts into plum, and three stars rise from the lamp's spout.
   The stage keeps the picture's own 3:2 shape and covers the section, so a point of the picture (the spout: 55 %, 54.3 %) stays a
   point of the stage at every width. Prefix ha-. */
.ha{--ha-h:clamp(640px,94svh,920px);position:relative;isolation:isolate;overflow:clip;height:var(--ha-h);margin-top:calc(var(--k-lap)*-1);border-radius:var(--k-r-sheet) var(--k-r-sheet) 0 0;background:#2a0518;color:var(--cream-100);box-shadow:0 -22px 40px -26px rgba(42,5,24,.5)}
.ha::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(38,4,21,.96) 0%,rgba(38,4,21,.84) 16%,rgba(38,4,21,.5) 34%,rgba(38,4,21,.08) 52%,rgba(38,4,21,0) 60%),
  radial-gradient(130% 80% at 50% 62%,rgba(38,4,21,0) 46%,rgba(38,4,21,.62) 100%),
  linear-gradient(0deg,rgba(38,4,21,.9) 0%,rgba(38,4,21,.35) 12%,rgba(38,4,21,0) 26%)}
.ha::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:screen;background-image:var(--k-grain-light)}

.ha-stage{position:absolute;z-index:-2;left:50%;top:54%;width:max(100%,calc(var(--ha-h)*1.65));aspect-ratio:3/2;transform:translate(-50%,-50%);container-type:inline-size}
.ha-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ha-glow{position:absolute;inset-inline-start:52.5%;top:56%;width:24cqw;height:24cqw;margin-block:-12cqw 0; margin-inline:-12cqw 0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,228,150,.5),rgba(255,196,90,.16) 48%,rgba(255,196,90,0));mix-blend-mode:screen;animation:ha-glow 5.5s ease-in-out infinite}
.ha-st{position:absolute;height:auto;opacity:0;filter:drop-shadow(0 .3cqw .4cqw rgba(60,10,0,.55)) drop-shadow(0 0 1cqw rgba(255,214,120,.7));animation:ha-rise 5.5s ease-in-out infinite;will-change:transform,opacity}
.ha-st--1{inset-inline-start:55%;top:54.3%;width:2.8cqw;margin-block:-1.4cqw 0; margin-inline:-1.4cqw 0}
.ha-st--2{inset-inline-start:55.3%;top:53.6%;width:1.8cqw;margin-block:-.9cqw 0; margin-inline:-.9cqw 0;animation-delay:1.85s}
.ha-st--3{inset-inline-start:54.6%;top:53.9%;width:1.35cqw;margin-block:-.7cqw 0; margin-inline:-.7cqw 0;animation-delay:3.7s}
@keyframes ha-rise{0%{transform:translate(0,.8cqw) scale(.3) rotate(0);opacity:0}16%{opacity:1}72%{opacity:.95}100%{transform:translate(1.4cqw,-12cqw) scale(1.06) rotate(16deg);opacity:0}}
@keyframes ha-glow{0%,100%{opacity:.72;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

.ha-in{position:relative;display:grid;justify-items:center;text-align:center;padding-top:clamp(84px,12vh,132px)}
.ha-in::before{content:"";position:absolute;z-index:-1;left:50%;top:clamp(84px,12vh,132px);width:min(980px,120%);height:calc(100% - clamp(84px,12vh,132px) + 60px);transform:translate(-50%,-30px);border-radius:50%;background:radial-gradient(closest-side,rgba(38,4,21,.62),rgba(38,4,21,.38) 55%,rgba(38,4,21,0));pointer-events:none}
.ha-eyebrow{color:var(--gold-300)}
.ha-eyebrow img{filter:drop-shadow(0 0 8px rgba(255,214,120,.7))}
.ha-h{margin-top:20px;max-width:14.5em;font-size:clamp(2.4rem,5vw,4.4rem);color:var(--cream-50);text-shadow:0 2px 0 rgba(20,0,10,.4),0 14px 44px rgba(20,0,10,.7)}
.ha .ha-p{margin-top:20px;max-width:31em;color:#f4dfcf;text-shadow:0 2px 20px rgba(20,0,10,.9)}

/* the picture drifts a little slower than the page where the browser can tie an animation to the scroll */
@supports (animation-timeline:view()){
  html.anim .ha-stage{scale:1.1;animation:ha-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes ha-drift{from{translate:0 -4%}to{translate:0 4%}}
}

@media (max-width:640px){
  .ha{--ha-h:clamp(620px,92svh,760px)}
  .ha-in{padding-top:88px}
  .ha-h{font-size:clamp(2rem,9vw,2.5rem)}
  .ha::before{background:
    linear-gradient(180deg,rgba(38,4,21,.97) 0%,rgba(38,4,21,.88) 22%,rgba(38,4,21,.55) 40%,rgba(38,4,21,.1) 56%,rgba(38,4,21,0) 62%),
    radial-gradient(150% 80% at 50% 66%,rgba(38,4,21,0) 44%,rgba(38,4,21,.6) 100%),
    linear-gradient(0deg,rgba(38,4,21,.9) 0%,rgba(38,4,21,0) 22%)}
}
@media (prefers-reduced-motion:reduce){
  .ha-st{animation:none;opacity:1}
  .ha-st--2{transform:translate(.8cqw,-4.6cqw) rotate(8deg)}
  .ha-st--3{transform:translate(.2cqw,-8.4cqw) rotate(14deg)}
  .ha-glow{animation:none}
}