/* ---------- Intro deck, GSAP mode (js/intro.js adds .gs). Without it the plain sticky stack above is used. ---------- */
.intro-pin{display:contents}
.intro-skip-pin{display:none}
.intro-deck{--ih:max(460px,calc(100svh - 60px - env(safe-area-inset-top,0px)))}
.intro-deck.intro-wait{opacity:0}
.intro-deck.gs{height:calc(var(--n,3) * var(--ih))}
.intro-deck.gs .intro-pin{display:block;position:sticky;top:calc(60px + env(safe-area-inset-top,0px));height:var(--ih);overflow:hidden;background:var(--bg)}
.intro-deck.gs .intro-poster{position:absolute;inset:0;height:auto;min-height:0}
.intro-deck.gs .intro-poster .intro-skip{display:none}
.intro-deck.gs .intro-skip-pin{display:block;position:absolute;top:6px;right:16px;z-index:6}
.intro-deck.gs .intro-poster .intro-stage,.intro-deck.gs .intro-poster .intro-glow{animation:none!important}
.intro-deck.gs .intro-fade{display:none}
.intro-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.intro-name .intro-tag{margin-left:0}
.intro-title{display:block}
.intro-clone{overflow:hidden}

/* ---------- Intro deck, desktop split stage (js/intro.js adds .desk). Lenis smooth wheel runs only while the deck is on screen. ---------- */
.intro-deck.intro-off{display:none}
.intro-peek{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
@media (min-width:821px){
  .intro-deck.desk .intro-top{display:none}
  .intro-deck.desk .intro-inner{flex-direction:row;align-items:center;gap:0;padding:0 clamp(32px,6vw,120px)}
  .intro-deck.desk .intro-stage{flex:0 0 42%;height:100%;padding:0;justify-content:center;align-items:center}
  .intro-deck.desk .intro-stage .flyer{height:70%;max-height:none;width:auto;max-width:100%;box-shadow:0 30px 70px rgba(0,0,0,.55)}
  .intro-deck.desk .intro-info{flex:1;min-width:0;gap:18px;padding-left:clamp(32px,5vw,96px);max-width:52rem}
  .intro-deck.desk .intro-name{font-size:clamp(40px,5.4vw,88px);line-height:.96;letter-spacing:-.03em;gap:10px 16px}
  .intro-deck.desk .intro-line{font-size:clamp(16px,1.3vw,20px)}
  .intro-deck.desk .intro-info .btn{width:auto;justify-self:start;min-width:260px;padding-inline:32px}
  .intro-deck.desk .intro-glow{opacity:.5}
  .intro-deck.desk .intro-skip-pin{top:12px;right:clamp(20px,3vw,48px)}
  /* Next and previous flyers peek in from the edges, flat and dim. */
  .intro-deck.desk .intro-peek{display:block;position:absolute;top:50%;height:46%;opacity:.28;pointer-events:none;z-index:0}
  .intro-deck.desk .intro-peek .flyer{height:100%;width:auto;aspect-ratio:var(--fly-ar,4/5)}
  .intro-deck.desk .intro-peek-prev{left:0;transform:translate(-62%,-50%)}
  .intro-deck.desk .intro-peek-next{right:0;transform:translate(62%,-50%)}
  /* Progress rail on the right edge. */
  .intro-deck.desk .intro-prog-in{left:auto;right:clamp(12px,2vw,28px);top:calc(var(--ih) / 2 - 56px);flex-direction:column;gap:8px}
  .intro-deck.desk .intro-prog button{flex:none;width:28px;height:36px;justify-items:end}
  .intro-deck.desk .intro-prog i{width:3px;height:100%;min-height:36px}
  .intro-deck.desk .intro-prog i::after{transform:scaleY(var(--f,0));transform-origin:top}
}

/* Events tab with 1 to 3 live events: big stacked posters. */
.app-bigstack{display:grid;gap:30px}
.ev-tab .app-poster.big.rise{animation:none}

/* Coming up: the first two posters sit in the grid, any more swipe sideways in a carousel under it. */
.app-rail-more{margin-top:18px}

/* "On sale soon" strip: compact cards under the featured poster. One card is full width; more swipe sideways. */
.app-h-soon{margin-top:22px}
.app-soon-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;scroll-padding-inline:16px}
.app-soon-strip::-webkit-scrollbar{display:none}
.app-soon-card{flex:0 0 82%;scroll-snap-align:start;display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:10px 12px 10px 10px;color:inherit;min-height:84px;transition:transform .14s ease,border-color .15s}
.app-soon-strip.one .app-soon-card{flex-basis:100%}
.app-soon-card:active{transform:scale(.98)}
.app-soon-card .flyer{aspect-ratio:4/5;border-radius:9px;padding:3px}
.app-soon-card .flyer .stamp{display:none}
.app-soon-t{display:grid;gap:2px;min-width:0}
.app-soon-t b{font-family:var(--display);font-size:16px;line-height:1.15}
.app-soon-t span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-soon-go{color:var(--muted);font-size:22px}
@media (prefers-reduced-motion:reduce){.app-soon-card:active{transform:none}}
/* Coming up is one carousel. */
.app-rail{margin-bottom:6px}
/* Events header uses the site logo; it does not collapse (the header just gains a background as you scroll). */
.app-logo{cursor:default}
@media (prefers-reduced-motion:no-preference){.ev-tab .app-logo{animation:titleLand .65s cubic-bezier(.2,.7,.2,1) both}#app.noenter .ev-tab .app-logo{animation:none!important}}

/* Wider phones, foldables and tablets (461 to 820px, or any touch screen): the app uses the whole width instead of a centred phone column. Posters stay a sensible size. */
@media (min-width:461px) and (max-width:820px),(min-width:461px) and (pointer:coarse){
  body.inapp .app-fr{max-width:none}
  body.inapp .app-tabs{width:100%}
  body.inapp .app-body{padding-inline:clamp(16px,4vw,32px)}
  body.inapp .app-head{padding-inline:clamp(16px,4vw,32px)}
  body.inapp .app-poster.big .app-poster-main .flyer{width:auto;max-width:100%;max-height:68svh;margin-inline:auto}
  body.inapp .app-rail .app-poster{flex-basis:min(62%,300px)}
  body.inapp .app-grid{grid-template-columns:repeat(3,1fr)}
  body.inapp .app-soon-card{flex-basis:min(82%,460px)}
  body.inapp .app-soon-strip.one .app-soon-card{flex-basis:100%}
}

/* Fan app tab switch: the tab bar is lifted out and stays still; the screen slides 18px and fades (direction follows the tab order). */
.app-tabs{view-transition-name:apptabs}
::view-transition-group(apptabs),::view-transition-old(apptabs),::view-transition-new(apptabs){animation:none}
html[data-tabdir="fwd"]{--tdx:18px}
html[data-tabdir="back"]{--tdx:-18px}
html[data-tabdir] ::view-transition-old(root){animation:tabOut .12s ease-in both}
html[data-tabdir] ::view-transition-new(root){animation:tabIn .26s cubic-bezier(.2,.7,.2,1) .08s both}
@keyframes tabOut{to{opacity:0;transform:translateX(calc(var(--tdx) * -1))}}
@keyframes tabIn{from{opacity:0;transform:translateX(var(--tdx))}}
/* Swipe between tabs: horizontal drags are ours, vertical ones scroll (carousels keep their own horizontal scroll). */
body.inapp .app-fr{touch-action:pan-y pinch-zoom}

/* Cards in a row line up: every card stretches to the tallest in its row, the "Tickets starting from" line sits at the bottom of the text and the buy button at the bottom of the card. */