/* Showpiece effects, all three venue previews (Egie 2026-10-29: "Build all 5", after "Add value
   instead of removing it"). Additions only; nothing older is turned off.
   1. Film in the name: after the hero, the venue's own logo is a window onto its night film. As the
      guest scrolls, the page zooms through the logo until the film fills the screen.
   2. Spotlight: on a computer, a soft club light follows the mouse over the photos.
   3. Flyer tilt: event flyers lean toward the mouse and catch a moving shine.
   4. Gallery reel: on the gallery pages the photos slide sideways as the guest scrolls down.
   5. Light beams: removed 2026-10-29 at Egie's request.
   Only transform and opacity move (the browser runs them off the main thread). With reduced
   motion or Motion off, everything is still: the logo shows the film's first frame, the reel is a
   strip you can swipe, and there is no spotlight or tilt. */

html[data-venue=ab]{--sp-accent:255,188,0;--sp-deep:#30151f}
html[data-venue=st]{--sp-accent:143,227,255;--sp-deep:#0d1116}
html[data-venue=sy]{--sp-accent:175,149,98;--sp-deep:#eee7d9}

/* 1. Film in the name. The cover is a solid sheet with the logo cut out of it (two masks, one
   subtracted from the other), over a film that never scales, so the film stays sharp while the
   sheet grows. The zoom aims at the thickest part of the logo (--nf-x, --nf-y, set by the script),
   so the screen fills with film and never with the sheet's edge. */
.fx-namefilm{position:relative;height:100svh;background:var(--sp-deep)}
.fx-namefilm-stage{position:relative;height:100svh;overflow:hidden;background:var(--sp-deep)}
.fx-namefilm video,.fx-namefilm .fx-namefilm-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-namefilm-cover{position:absolute;inset:-2px;background:var(--sp-deep);transform-origin:var(--nf-x,50%) var(--nf-y,50%);
 -webkit-mask:linear-gradient(#000 0 0),var(--nf-logo) center/var(--nf-w,min(72vw,920px)) auto no-repeat;-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0),var(--nf-logo) center/var(--nf-w,min(72vw,920px)) auto no-repeat;mask-composite:exclude}
html[data-venue=ab] .fx-namefilm{--nf-logo:url(/codex/assets/abigail-official-gold-logo.png?v=504cce23db)}
html[data-venue=st] .fx-namefilm{--nf-logo:url(/codex/assets/st-logo.png?v=12e030d4ba)}
html[data-venue=sy] .fx-namefilm{--nf-logo:url(/codex/assets/sy-logo.png?v=ded9653249)}
.fx-namefilm-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,rgba(var(--sp-accent),.16),transparent 70%);opacity:.9}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .fx-namefilm{height:260svh;view-timeline:--namefilm block}
  html:not([data-motion=off]) .fx-namefilm-stage{position:sticky;top:0}
  html:not([data-motion=off]) .fx-namefilm-cover{animation:nf-zoom linear both;animation-timeline:--namefilm;animation-range:contain 0% contain 100%}
  html:not([data-motion=off]) .fx-namefilm-glow{animation:nf-glow linear both;animation-timeline:--namefilm;animation-range:contain 0% contain 100%}
  html:not([data-motion=off]) .fx-namefilm video{animation:nf-settle linear both;animation-timeline:--namefilm;animation-range:contain 0% contain 100%}
 }
}
@keyframes nf-zoom{0%,14%{transform:scale(1)}86%,100%{transform:scale(var(--nf-zoom,40))}}
@keyframes nf-glow{0%,30%{opacity:.9}60%,100%{opacity:0}}
@keyframes nf-settle{0%{transform:scale(1.12)}100%{transform:scale(1)}}

/* 2. Spotlight. A box laid exactly over the photo, holding a soft-light disc that follows the
   pointer: bright under the light, a little darker around it, like a follow spot. */
.fx-spot{position:absolute;z-index:3;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .45s ease}
.fx-spot.is-on{opacity:1}
.fx-spot>i{position:absolute;left:0;top:0;width:var(--spot-size,900px);height:var(--spot-size,900px);border-radius:50%;
 background:radial-gradient(circle,rgba(255,246,226,.9) 0,rgba(255,236,200,.35) 14%,transparent 30%,rgba(0,0,0,.55) 56%);
 mix-blend-mode:soft-light;will-change:transform}
html[data-venue=st] .fx-spot>i{background:radial-gradient(circle,rgba(230,248,255,.9) 0,rgba(180,226,255,.35) 14%,transparent 30%,rgba(0,0,0,.55) 56%)}

/* 3. Flyer tilt. The card leans up to 9 degrees toward the pointer; the shine is a light band
   across the front face that moves with it. */
.fx-shine{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s ease;mix-blend-mode:screen;
 background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 42%,rgba(var(--sp-accent),.34) 50%,rgba(255,255,255,.1) 58%,transparent 70%) var(--shine-x,50%) 0/260% 100% no-repeat}
.wo-scene.fx-tilting .fx-shine{opacity:1}
.wo-scene.fx-tilting{transition:transform .12s ease-out,outline-color .2s ease,box-shadow .2s ease}

/* 4. Gallery reel. A pinned row of photos that moves sideways while the page scrolls down. The
   script sets --reel-run, how far the row must travel. Without scroll timelines it is a strip. */
.fx-reel{position:relative;margin:0 0 40px}
.fx-reel-stage{height:auto;overflow-x:auto;scrollbar-width:thin;padding:0 clamp(24px,5.5vw,88px)}
.fx-reel-track{display:flex;gap:clamp(14px,2vw,28px);width:max-content;padding:24px 0}
.fx-reel-slide{position:relative;flex:none;height:min(68svh,640px);aspect-ratio:3/4;overflow:clip;border-radius:4px;background:#111;cursor:pointer;border:0;padding:0}
html[data-venue=st] .fx-reel-slide{aspect-ratio:16/11}
.fx-reel-slide:nth-child(3n+2){aspect-ratio:4/5}
.fx-reel-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);display:block}
.fx-reel-count{position:absolute;left:clamp(24px,5.5vw,88px);bottom:18px;font:12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--sp-accent),1);opacity:.85}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .fx-reel{height:calc(100svh + var(--reel-run,0px) * .55);view-timeline:--reel block}
  html:not([data-motion=off]) .fx-reel-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  html:not([data-motion=off]) .fx-reel-track{animation:reel-run linear both;animation-timeline:--reel;animation-range:contain 0% contain 100%}
  html:not([data-motion=off]) .fx-reel-slide img{animation:reel-drift linear both;animation-timeline:view(inline);animation-range:cover}
  html:not([data-motion=off]) .fx-reel-bar{position:absolute;left:clamp(24px,5.5vw,88px);right:clamp(24px,5.5vw,88px);bottom:42px;height:1px;background:rgba(var(--sp-accent),.25)}
  html:not([data-motion=off]) .fx-reel-bar::after{content:"";position:absolute;inset:0;background:rgba(var(--sp-accent),.9);transform-origin:left;animation:reel-bar linear both;animation-timeline:--reel;animation-range:contain 0% contain 100%}
 }
}
@keyframes reel-run{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--reel-run,0px)))}}
@keyframes reel-drift{from{transform:scale(1.12) translateX(5%)}to{transform:scale(1.12) translateX(-5%)}}
@keyframes reel-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 5. Light beams: removed (Egie 2026-10-29: "remove the stage beams and the night belt"). */

html[data-motion=off] :is(.fx-spot,.fx-shine){display:none}
@media(prefers-reduced-motion:reduce){:is(.fx-spot,.fx-shine){display:none}}