/* Motion uses independent transforms to preserve every mockup's rotation/crop. */
.motion-control{font:inherit;font-size:.85rem;color:inherit;background:transparent;border:1px solid currentColor;border-radius:99px;padding:9px 15px;cursor:pointer;margin:16px 0}
.ui-vector{width:1em;height:1em;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.photo-link::after{content:'';background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23094fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 24 24 12M12 12h12v12'/%3E%3C/svg%3E") center/36px no-repeat}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=paused]) .motion-enter{animation:scene-enter .75s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--motion-delay,0ms)}
 html:not([data-motion=paused]) .motion-float.motion-visible{animation:scene-float var(--float-duration,5.2s) ease-in-out infinite alternate;animation-delay:var(--float-delay,0s)}
 html:not([data-motion=paused]) .event-bubble{animation:bubble-glow 3.2s ease-in-out infinite alternate}
 html:not([data-motion=paused]) .motion-depth{translate:0 var(--depth-y,0px)}
 html:not([data-motion=paused]) :is(.button,.event-bubble,.openmic-entry,.concept-band,.shop-rack-link,.shop-poster-link,.membership-card,.mockup-polaroid,.plan-teaser,.charter-teaser){transition:scale .25s,rotate .35s,box-shadow .25s,background-color .2s}
 html:not([data-motion=paused]) :is(.button,.event-bubble,.openmic-entry,.concept-band):active{scale:.96}
 html:not([data-motion=paused]) :is(input,textarea,select){transition:box-shadow .2s,border-color .2s}
 html:not([data-motion=paused]) :is(input,textarea,select):focus{box-shadow:0 0 0 4px #0761f52b}
 html:not([data-motion=paused]) dialog[open]{animation:dialog-enter .25s ease-out}
 html:not([data-motion=paused]) :is(.club-application,.quote-step):not([hidden]){animation:scene-enter .4s ease-out}
 @media(hover:hover) and (pointer:fine){
 html:not([data-motion=paused]) :is(.button,.event-bubble,.openmic-entry):hover{scale:1.045}
 html:not([data-motion=paused]) :is(.mockup-polaroid,.membership-card,.plan-teaser,.charter-teaser,.shop-rack-link,.shop-poster-link):hover{scale:1.035;rotate:1.5deg}
 html:not([data-motion=paused]) .concept-band:hover{scale:1.018;box-shadow:inset 0 0 60px #ffffff14}
 }
}
@keyframes scene-enter{from{opacity:.2;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes scene-float{from{translate:0 -5px;rotate:-1.5deg}to{translate:0 7px;rotate:1.5deg}}
@keyframes dialog-enter{from{opacity:0;scale:.97}to{opacity:1;scale:1}}
html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-page-hidden] *,html[data-page-hidden] *::before,html[data-page-hidden] *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.motion-depth{translate:none!important}}
@media print{.motion-control{display:none}.motion-enter,.motion-float,.motion-depth{animation:none!important;translate:none!important;opacity:1!important}}

@keyframes bubble-glow{from{box-shadow:0 0 0 0 #075af400}to{box-shadow:0 0 0 7px #075af415,0 0 28px #075af440}}