/* Hero lab B: "Every kind of party".
   A full-width reel of their real nights that cruises on its own; grab it and throw it, the photos lean
   with the speed. The photo at the centre names the event in the headline and sets the page's light. */

.hb{position:relative;padding:clamp(18px,3.6vh,40px) 0 clamp(20px,4vh,44px);isolation:isolate}
/* the event's light pooled on the floor under the reel: a soft wash of colour, never a dark halo */
.hb::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-6%;height:62%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 70%,var(--ev-a),transparent 72%),radial-gradient(40% 50% at 82% 80%,var(--ev-b),transparent 70%);
  opacity:.2;transition:opacity .8s}

.hb-copy{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:18px clamp(24px,4vw,64px);align-items:end}
.hb h1{font:400 clamp(26px,2.7vw,40px)/1.08 var(--display);letter-spacing:-.01em}
.hb h1 .kicker{display:block;font:600 14px/1.4 var(--body);letter-spacing:.02em;color:var(--amber);margin-bottom:12px}
.hb-l1{display:block;color:var(--cream)}
/* the event word: one line tall, words roll through it */
.hb-word{position:relative;display:block;height:1.3em;margin:.02em 0 -.2em;overflow:hidden;font-size:clamp(46px,4.75vw,76px);line-height:1.08;white-space:nowrap;}
.hb-w{position:absolute;left:0;top:0;color:var(--ev-a);transition:color .6s}
.hb-w:not(.is-on){opacity:0}
.js .hb-w{transition:transform .46s var(--ease),opacity .32s,color .6s}
.hb-w.is-out{opacity:0;transform:translate3d(0,-1.05em,0)}
.hb-w.is-in{opacity:0;transform:translate3d(0,1.05em,0);transition:none}

.hb-side{display:flex;flex-direction:column;gap:18px;padding-bottom:.3em}
.hb-evs{display:flex;flex-wrap:wrap;gap:6px 8px}
.hb-evs a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 13px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;
  color:var(--cream-2);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:color .3s,background .3s,box-shadow .3s}
.hb-evs a i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45;transition:background .4s,opacity .4s,transform .4s}
.hb-evs a:hover{color:var(--cream);background:var(--glass-2)}
.hb-evs a.is-on{color:var(--cream);background:var(--glass-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev-a) 70%,transparent)}
.hb-evs a.is-on i{background:var(--ev-a);opacity:1;transform:scale(1.25)}
.hb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}

/* ---------- the reel ---------- */
.hb-reel{position:relative;margin-top:clamp(18px,3.4vh,34px);--cw:clamp(300px,35vw,520px);--gap:clamp(14px,1.6vw,24px);outline:none;
  -webkit-user-select:none;user-select:none}
.hb-reel:focus-visible{outline:none}
.hb-reel:focus-visible .hb-mark{opacity:1;box-shadow:0 0 0 3px var(--teal-hi)}
.hb-track{display:flex;gap:var(--gap);padding:14px var(--gut) 34px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hb-track::-webkit-scrollbar{display:none}
.hb-card{flex:0 0 var(--cw);scroll-snap-align:center}
.hb-lean{position:relative;margin:0;transform-origin:50% 100%;will-change:transform}
.hb-lean img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);background:#3a2236;
  box-shadow:0 1px 0 rgba(255,236,214,.18) inset,0 24px 40px -22px rgba(10,6,20,.55)}
/* distance from the centre dims a photo a little (a light veil of the ground, not a black one) */
.hb-lean::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;border-radius:var(--r-m);pointer-events:none;
  background:linear-gradient(180deg,rgba(45,26,51,.55),rgba(45,26,51,.7));opacity:var(--dim,0)}
.hb-lean figcaption{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--cream-2);opacity:calc(1 - var(--dim,0) * 1.4)}
.hb-lean figcaption::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ev-a)}
.hb-card[data-ev=wedding] figcaption::before{background:#ffb24a}
.hb-card[data-ev=mitzvah] figcaption::before{background:#ff3d9a}
.hb-card[data-ev=corporate] figcaption::before{background:#22c3da}
.hb-card[data-ev=school] figcaption::before{background:#ffd13d}
.hb-mark{position:absolute;left:50%;bottom:6px;width:34px;height:4px;margin-left:-17px;border-radius:4px;background:var(--ev-a);opacity:0;transition:background .5s,opacity .4s}

/* live mode (JS + motion): the row is a belt we drive ourselves */
.hb-reel.is-live .hb-track{display:block;position:relative;overflow:hidden;height:calc(var(--cw) * .75 + 14px + 34px + 32px);padding:0;
  touch-action:pan-y;cursor:grab}
.hb-reel.is-live.is-drag .hb-track{cursor:grabbing}
.hb-reel.is-live .hb-card{position:absolute;left:0;top:14px;width:var(--cw);will-change:transform}
.hb-reel.is-live .hb-mark{opacity:.9}
.hb-lean img{pointer-events:none}
/* before the reel deals in, the photos wait off to the right (shown anyway if the script never arrives) */
.js .hb-reel:not(.is-live):not(.is-static) .hb-card{transform:translate3d(120vw,0,0);animation:hb-late 0s 2.6s forwards}
@keyframes hb-late{to{transform:none}}

.hb-hint{max-width:var(--max);margin:2px auto 0;padding:0 var(--gut);text-align:center;font-size:var(--t-small);color:var(--cream-2);transition:opacity .6s}
.hb-hint.is-used{opacity:.45}
.h-tap{display:none}
@media (hover:none){.h-fine{display:none}.h-tap{display:inline}}

/* words arrive first, the reel deals in under them */
@media (prefers-reduced-motion:no-preference){
  .js .hb h1 .kicker,.js .hb-l1,.js .hb-word,.js .hb-side{animation:hb-up .7s var(--ease) both}
  .js .hb-l1{animation-delay:.06s}.js .hb-word{animation-delay:.14s}.js .hb-side{animation-delay:.26s}
}
@keyframes hb-up{from{opacity:0;transform:translate3d(0,18px,0)}}

@media (max-width:900px){
  .hb-copy{grid-template-columns:1fr;gap:16px}
  .hb-side{gap:14px}
}
@media (max-width:700px){
  /* phones: the photo sits straight under the word it names, then the events and the call to action */
  .hb{padding-top:14px;display:flex;flex-direction:column}
  .hb-copy{display:contents}
  .hb h1{order:1;padding:0 var(--gut)}
  .hb-reel{order:2}
  .hb-hint{order:3;margin-top:-4px}
  .hb-side{order:4;padding:14px var(--gut) 0;gap:12px}
  .hb-cta{order:-1}
  .hb h1{font-size:23px}
  .hb h1 .kicker{font-size:13px;margin-bottom:8px}
  .hb-word{font-size:clamp(34px,9.4vw,46px)}
  .hb-evs{gap:6px}
  .hb-evs a{font-size:14px;padding:0 12px 0 11px;min-height:44px}
  .hb-reel{--cw:68vw;margin-top:12px}
  .hb-track{padding:10px 16vw 22px}
  .hb-reel.is-live .hb-track{height:calc(var(--cw) * .75 + 10px + 22px + 18px)}
  .hb-reel.is-live .hb-card{top:10px}
  .hb-cta .ghost{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .hb-w,.hb-evs a,.hb::before{transition:none}
  .hb-hint{display:none}
}

/* Event list, sleeve style (owner: the dot pills "look too AI"; he picked the sleeve buttons). */
body .hb-evs{gap:4px 22px}
body .hb-evs a{min-height:44px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);
  font:800 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid transparent}
body .hb-evs a:hover{background:none;color:var(--cream)}
body .hb-evs a.is-on{background:none;box-shadow:none;color:var(--cream);border-bottom-color:var(--ev-a)}
@media (max-width:640px){ body .hb-evs{display:none} }   /* on phones the reel and the big word already say it; the menu has the pages */
/* no coloured dots on captions either; the caption reads in small capitals like the event list */
body .hb-lean figcaption::before{display:none}
body .hb-lean figcaption{font:800 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}