/* ---------- Fan app Events tab motion (2026-10-11). Reduced motion gets none of the animation; everything still shows. ---------- */
.app-poster[data-hue="h-yellow"]{--pglow:#ff9500}.app-poster[data-hue="h-green"]{--pglow:#39d98a}.app-poster[data-hue="h-violet"]{--pglow:#8a3df0}.app-poster[data-hue="h-blue"]{--pglow:#3a55d6}.app-poster[data-hue="h-coral"]{--pglow:#ff5c6c}
/* The Events tab header sticks; the big title shrinks into it as --hc runs 0 to 1 (set in app-motion.js). */
.app-fr.ev-tab{overflow:clip}
.ev-tab .app-body{overflow:visible}
.ev-tab .app-head{position:sticky;top:0;z-index:5}
.ev-tab .app-head::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);border-bottom:1px solid var(--border);opacity:calc(var(--hc,0)*.94);backdrop-filter:blur(10px);pointer-events:none}
.ev-tab .app-title{display:inline-block;transform-origin:left center;scale:calc(1.35 - .5*var(--hc,0))}
.app-fr.ev-tab.washed{background:radial-gradient(120% 55% at 50% -8%,color-mix(in srgb,var(--wash) calc(var(--washa,1)*38%),transparent),transparent 70%),var(--bg);transition:--wash .7s ease,--washa 1.2s ease .1s}
/* Featured poster: a slow glow behind it, in the event's own colour. */
.ev-tab .app-poster.big{isolation:isolate}
.ev-tab .app-poster.big::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;top:-4%;height:74%;background:radial-gradient(closest-side,var(--pglow,#39c984),transparent);filter:blur(18px);opacity:.3;pointer-events:none}
.ev-tab .app-pd-t b .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ev-tab .app-pd-t b .ln>span{display:block}
.ev-tab .app-pd-t b .ln,.ev-tab .app-pd-t b .ln>span{font-size:inherit;color:inherit}
/* Press: posters dip under the thumb. */
.app-poster-main{transition:transform .14s ease;-webkit-tap-highlight-color:transparent}
.app-poster-main:active{transform:scale(.97)}
/* Posters below the fold wait, then rise in when they arrive (class set in app-motion.js). */
.app-poster.rise{opacity:0;transform:translateY(26px);animation:none}
.app-poster.rise.in{opacity:1;transform:none;transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.app-grid .app-poster.rise.in:nth-child(2n){transition-delay:.07s}
/* "You're going" glints once on the poster. */
.app-poster .app-going{position:relative;display:inline;clip-path:inset(0)}
@media (prefers-reduced-motion:no-preference){
  .ev-tab .app-title{animation:titleLand .65s cubic-bezier(.2,.7,.2,1) both}
  @keyframes titleLand{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .ev-tab .app-poster.big{animation:featIn .85s cubic-bezier(.2,.7,.2,1) .05s both}
  @keyframes featIn{from{opacity:0;transform:translateY(34px) scale(.95)}to{opacity:1;transform:none}}
  .ev-tab .app-poster.big::before{will-change:opacity,transform;animation:breathe 6.5s ease-in-out infinite}
  @keyframes breathe{50%{opacity:.55;transform:scale(1.07)}}
  .ev-tab .app-pd-t b .ln>span{animation:lineUp .75s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i,0)*.1s) both}
  @keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
  .app-poster .app-going::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-130%);animation:glint 1s ease 1s 1 both;pointer-events:none}
  @keyframes glint{to{transform:translateX(130%)}}
}
@media (prefers-reduced-motion:reduce){.app-poster-main:active{transform:none}.app-poster.rise{opacity:1;transform:none}}
/* In-place re-renders and returns from an event page don't replay the opening. */
#app.noenter .ev-tab .app-title,#app.noenter .ev-tab .app-poster.big,#app.noenter .ev-tab .app-pd-t b .ln>span,#app.noenter .app-poster .app-going::after{animation:none!important}
/* Event page: the flyer is the shared element of the poster-to-page morph. 4:5 to match the poster so it grows without stretching. */
.app-view .app-body .ev-fly .flyer{aspect-ratio:4/5;view-transition-name:evfly}
::view-transition-group(evfly){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}


/* ---------- Fan app chrome: tab bar pinned to the bottom like an app; "On sale soon" carousel; no demo tag on phones ---------- */
.app-tabs{position:fixed;left:50%;right:auto;bottom:0;width:min(100%,430px);transform:translateX(-50%);z-index:30;background:var(--bg);backdrop-filter:none;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
/* Phones (any width up to 820px, or a touch screen): the app fills the screen, no frame. Only a desktop with a mouse keeps the framed look; the tab bar still sits on the very bottom edge. */
@media (max-width:820px),(pointer:coarse){body.inapp .app-view{padding-block:0}body.inapp .app-fr{border:0;border-radius:0;min-height:100svh}}
@media (min-width:821px) and (pointer:fine){body.inapp .app-view{padding-bottom:0}body.inapp .app-fr{border-bottom:0;border-radius:28px 28px 0 0}}
.app-sale{color:var(--st-soon)!important;font-weight:600}
.app-rail .app-pd{grid-template-columns:1fr}.app-rail .app-pd-d{display:none}.app-rail .app-pd-dt{display:block}
.app-rail .app-poster{animation:none}
/* The Demo menu button is hidden everywhere. Open the site with ?demo on the end of the address to bring it back. */