/* Concept B scroll motion: poster energy. Uses individual translate/scale properties so the existing tilts keep working. */
.pg{position:fixed;left:0;right:0;top:0;height:9px;z-index:60;background:var(--ink);border-bottom:2px solid var(--ink);pointer-events:none}
.pg i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--coral) 0 18px,var(--sun) 18px 36px);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.pg svg{position:absolute;top:-4px;left:calc(var(--p,0)*100% - 16px);width:34px;height:26px;transition:none}
.top{margin-top:9px}
.hero h1 span{display:block}
.mo .hero h1 span{opacity:0;translate:-60vw 0;rotate:-4deg;animation:slam .9s cubic-bezier(.2,1.25,.4,1) forwards}
.mo .hero h1 .b{animation-delay:.12s}.mo .hero h1 .c{animation-delay:.24s}
@keyframes slam{60%{translate:14px 0;rotate:1.5deg}to{opacity:1;translate:0 0;rotate:0deg}}
.mo .sticker{opacity:0;scale:.3;animation:pop .6s cubic-bezier(.3,1.6,.5,1) forwards}
.mo .sticker:nth-child(1){animation-delay:.7s}.mo .sticker:nth-child(2){animation-delay:.82s}.mo .sticker:nth-child(3){animation-delay:.94s}
@keyframes pop{to{opacity:1;scale:1}}
.mo .hero .row>*{animation:rise .8s .45s both cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.poster{will-change:transform;transform-origin:50% 60%}
.band,.band2{background-position-x:var(--bx,0)}
.mo .sr{opacity:0;translate:0 70px;rotate:var(--rot,0deg);transition:opacity .6s,translate .85s cubic-bezier(.2,1.2,.4,1),rotate .85s cubic-bezier(.2,1.2,.4,1),box-shadow .85s;transition-delay:calc(var(--i,0)*110ms)}
.mo .sr.l{translate:-80px 40px;--rot:-3deg}.mo .sr.r{translate:80px 40px;--rot:3deg}
.mo .sr.in{opacity:1;translate:0 0;rotate:0deg}
.mo .ticket.sr{box-shadow:0 0 0 var(--ink)}.mo .ticket.sr.in{box-shadow:8px 8px 0 var(--ink)}
.mo h2.sr{translate:0 50px;rotate:-2deg;transform-origin:0 100%}
.mo .tl div:before{transform:scaleY(0);transform-origin:0 0;transition:transform .7s .25s ease-out}.mo .tl div.in:before{transform:none}
.mo .tl b{scale:.2;transition:scale .6s cubic-bezier(.3,1.7,.5,1)}.mo .tl div.in b{scale:1}
.mo .tl div{opacity:0;translate:-24px 0;transition:opacity .5s,translate .6s}.mo .tl div.in{opacity:1;translate:0 0}
.mo .gal>*.sr{--rot:-4deg}.mo .gal>*:nth-child(even).sr{--rot:4deg}
.gal img,.gal video{transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s}.gal>*:hover{transform:rotate(-1.5deg) scale(1.03);box-shadow:9px 9px 0 var(--ink)}
.ticket{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}.ticket:hover{transform:translate(-4px,-4px) rotate(-.6deg)}
.final .btn{animation:wob 2.6s ease-in-out infinite}
@keyframes wob{0%,86%,100%{transform:none}90%{transform:rotate(-3deg) scale(1.05)}94%{transform:rotate(3deg) scale(1.05)}}
.top{overflow:hidden}.top span{display:inline-block}
.sun-st{position:fixed;right:14px;bottom:86px;z-index:20;width:74px;height:74px;display:grid;place-items:center;text-align:center;font:900 .7rem/1.05 "Archivo Black",sans-serif;text-transform:uppercase;background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);text-decoration:none;rotate:calc(var(--sy,0)*.25deg)}
@media(min-width:760px){.sun-st{bottom:24px;right:24px;width:92px;height:92px;font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.mo .sr,.mo .hero h1 span,.mo .sticker,.mo .hero .row>*,.mo .tl div,.mo .tl b{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;animation:none!important}.sun-st{rotate:0deg}}