/* House motion, all three venue previews (design panel 2026-10-29, Egie: "make sure that the
   redesigned websites do not look vibe coded. The websites should feel natural, beautiful and
   smooth with amazing transitions"). Four designers and Codex reviewed the sites; this file is
   the one motion system they agreed on, loaded last so it settles the older layers.
   1. Tokens: one entrance curve and one set of durations for everything new.
   2. Word rise: each word of a heading rises from behind its own line (makeitniche.com).
   3. Photo curtain: a home photo opens from the bottom as a cover in the card's colour lifts
      off it, and the picture settles from a slight zoom. Transform only, so nothing re-lays out.
   4. Smooth scroll on desktop (Lenis, house-motion.js); phones keep their own scrolling.
   Nothing here hides content unless house-motion.js has started (html.hm-ready) and motion is
   allowed, so with no script, reduced motion or Motion off every heading and photo is plain. */

/* 1. Tokens */
:root{
 --ease-out:cubic-bezier(.16,1,.3,1);
 --ease-in-out:cubic-bezier(.65,0,.35,1);
 --ease-in:cubic-bezier(.7,0,.84,0);
 --dur-1:160ms;--dur-2:280ms;--dur-3:520ms;--dur-4:760ms;--dur-5:1100ms;
 --stagger:55ms;
}

/* 2. Word rise. Each word sits in a clipping box a little taller than the line, so accents and
   descenders are never cut. overflow:clip, not hidden: a hidden box is a scroll container, and
   the venue name's word fill (view() in night-motion.css) would measure it instead of the page. */
.wr{display:inline-block;overflow:clip;vertical-align:top;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.wr-i{display:inline-block}
@media(prefers-reduced-motion:no-preference){
 html.hm-ready:not([data-motion=off]) .wr-host.hm-wait .wr-i{transform:translateY(112%)}
 html.hm-ready:not([data-motion=off]) .wr-host .wr-i{transition:transform var(--dur-4) var(--ease-out) calc(min(var(--i,0),6) * var(--stagger))}
}

/* 3. Photo curtain. The cover is a child span, not a pseudo-element, so it never collides with
   the card's own ::after (the deck's darkening layer). It takes the card's colour, so the photo
   seems to be uncovered on the page rather than faded in from nothing. */
html[data-venue=ab]{--hm-cover:#30151f}
html[data-venue=st]{--hm-cover:#13161a}
html[data-venue=sy]{--hm-cover:#eee7d9}
.hm-photo{position:relative;overflow:hidden}
.hm-curtain{position:absolute;inset:-1px;z-index:4;pointer-events:none;background:var(--deck-bg,var(--hm-cover));transform-origin:50% 0;transform:scaleY(0)}
@media(prefers-reduced-motion:no-preference){
 html.hm-ready:not([data-motion=off]) .hm-photo.hm-wait .hm-curtain{transform:scaleY(1)}
 html.hm-ready:not([data-motion=off]) .hm-photo.hm-wait img{scale:1.08}
 html.hm-ready:not([data-motion=off]) .hm-photo .hm-curtain{transition:transform var(--dur-5) var(--ease-out)}
 html.hm-ready:not([data-motion=off]) .hm-photo img{transition:scale 1600ms var(--ease-out)}
}
html[data-motion=off] .hm-curtain{display:none}
@media(prefers-reduced-motion:reduce){.hm-curtain{display:none}}

/* 4. Smooth scroll. Lenis's own required rules (lenis.css 1.1.20). */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}