/* Encore effects, all three venue previews (Egie 2026-10-29: "Come up with 5 more splashy effects
   for the three venue sites, show me a video before you deploy"). Additions only, on top of
   showpiece.css; nothing older is turned off. Phones get all five; the button pull is computers only.
   1. Night belt: removed 2026-10-29 at Egie's request.
   2. Words light up: the lead lines on each home light up word by word as they scroll in.
   3. Iris: big photos open from a ringed circle, like a camera aperture.
   4. Live buttons: a light sheen crosses every button now and then; on a computer, a button
      leans toward the mouse.
   5. Flyer coverflow: in the Coming up rail, flyers turn in 3D as they slide in and out.
   Only transform, opacity and the rotate/scale/translate properties move. With reduced motion or
   Motion off, all of it is still and every word is fully lit. */

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

/* 2. Words light up. The words light one after another once the line is on screen (encore.js
   removes .fx-wait). Timed, not tied to the scroll: a line inside a pinned card stops moving on the
   page, and a scroll-linked fill stalled there with the words still dim (2026-10-29, first home card). */
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=off]) .fx-lit.fx-wait .fx-w{opacity:.16}
 html:not([data-motion=off]) .fx-lit .fx-w{transition:opacity .55s ease calc(min(var(--i,0),40) * 55ms)}
}

/* 3. Iris. The photo box clips, so it is a scroll container; the timeline is the box's own place on
   the page (--iris), not the sheet's place inside the box. A sheet in the page's colour with a ringed hole in it, scaled up (transform only) until
   the hole is bigger than the photo. --iris-zoom is set per photo by encore.js. */
.fx-iris-host{overflow:hidden;view-timeline:--iris block}
.fx-iris{position:absolute;inset:0;z-index:3;pointer-events:none;transform:scale(var(--iris-zoom,8));opacity:0;
 background:radial-gradient(circle closest-side at 50% 50%,transparent 0 30%,rgba(var(--sp-accent),.95) 30.4% 31.2%,var(--iris-bg,#000) 31.6%)}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .fx-iris{opacity:1;animation:iris-open linear both;animation-timeline:--iris;animation-range:entry 30% cover 45%}
  html:not([data-motion=off]) .fx-iris.is-timed{animation:iris-open 1.5s cubic-bezier(.65,0,.35,1) .25s both;animation-timeline:auto}
 }
}
@keyframes iris-open{from{transform:scale(1)}to{transform:scale(var(--iris-zoom,8))}}

/* 4. Live buttons. */
.fx-live{position:relative;overflow:hidden;isolation:isolate}
.fx-sheen{position:absolute;inset:-2px;z-index:-1;pointer-events:none;transform:translateX(-120%) skewX(-18deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent);mix-blend-mode:soft-light}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=off]) .fx-sheen{animation:sheen 6.5s cubic-bezier(.65,0,.35,1) var(--sheen-delay,0s) infinite}
 html:not([data-motion=off]) .fx-live{transition:translate .35s cubic-bezier(.16,1,.3,1),background .2s,color .2s}
}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}18%,100%{transform:translateX(120%) skewX(-18deg)}}

/* 5. Flyer coverflow. rotate and scale are their own properties, so the card's hover lift
   (transform) and the desktop tilt keep working. */
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .wo-track{perspective:1100px}
  html:not([data-motion=off]) .wo-track>.wo-card{animation:coverflow linear both;animation-timeline:view(inline);animation-range:cover}
 }
}
@keyframes coverflow{
 entry 0%{rotate:y 42deg;scale:.84;opacity:.55}
 entry 100%{rotate:y 0deg;scale:1;opacity:1}
 exit 0%{rotate:y 0deg;scale:1;opacity:1}
 exit 100%{rotate:y -42deg;scale:.84;opacity:.55}
}

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