/* Brand motion: only opacity and transforms are continuously animated. */
.prototype-actions{display:flex;align-items:center;gap:20px}.prototype-bar #motion-toggle{display:inline-flex;gap:6px;align-items:center}.prototype-bar #motion-toggle>span{margin:0}.motion-status{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--violet);opacity:.6}#motion-toggle[aria-pressed="true"] .motion-status{background:var(--orange);opacity:1}.motion-state-label{margin:0!important}
.logo-aura{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;mix-blend-mode:screen}
.logo-aura::before,.logo-aura::after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.logo-aura::before{inset:-7px -5px;background:radial-gradient(ellipse at 34% 25%,#a03ff5a8,transparent 65%),radial-gradient(ellipse at 66% 78%,#ff78259e,transparent 65%);filter:blur(8px);opacity:.22;animation:brand-aura 3.8s ease-in-out infinite}
.logo-aura::after{inset:2px;background:radial-gradient(ellipse at 25% 20%,#b455ff80,transparent 70%),radial-gradient(ellipse at 75% 80%,#ff8c3a70,transparent 70%);filter:blur(6px);opacity:.08;animation:brand-aura-secondary 3.8s ease-in-out infinite}
.logo-aura>.logo-crop{animation:brand-breathe 3.8s ease-in-out infinite;transform-origin:50% 52%;position:relative;z-index:1}
.logo-aura.hero-mark{margin-top:3px;margin-left:-12px}
.story .logo-aura .logo-crop{margin:0}
.logo-aura.hero-mark::before{inset:-10px -6px;filter:blur(13px)}
.logo-aura.hero-mark::after{inset:10px 8px;filter:blur(10px)}
@keyframes brand-aura{0%,100%{opacity:.12;transform:scale(.92) rotate(-3deg)}48%{opacity:.34;transform:scale(1.05) rotate(3deg)}}
@keyframes brand-aura-secondary{0%,100%{opacity:.04;transform:translate(-2px,-1px) scale(.95)}50%{opacity:.12;transform:translate(2px,1px) scale(1.04)}}
@keyframes brand-breathe{0%,100%{transform:scale(.99);filter:brightness(1) saturate(1.05)}48%{transform:scale(1.025);filter:brightness(1.05) saturate(1.08)}}

/* Tactile controls: a restrained sweep on hover and a ripple on tap. */
.primary,.secondary,.access-button,.vote-choice,.stage-buttons button,.mobile-nav button,.access-tabs button{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease}
.primary::before{content:'';position:absolute;inset:-1px;background:linear-gradient(112deg,transparent 28%,#fff5e529 45%,#fff7e549 50%,#fff5e516 55%,transparent 73%);transform:translateX(-115%);transition:transform .62s cubic-bezier(.2,.7,.3,1);pointer-events:none;z-index:-1}
.primary svg{transition:transform .25s ease}
.primary:not(:disabled):active,.secondary:not(:disabled):active,.access-button:active{transform:scale(.975)}
.vote-choice:not(:disabled):active{transform:scale(.98)}
.tap-ripple{position:absolute;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#ffddae42 0%,#d8a1f52b 38%,transparent 70%);transform:scale(0);opacity:.7;animation:tap-ripple .62s ease-out forwards}
@keyframes tap-ripple{to{transform:scale(1);opacity:0}}
@media(hover:hover) and (pointer:fine){
 .primary:not(:disabled):hover{box-shadow:0 8px 30px #ea76272e,0 0 0 1px #ffa25c20}
 .primary:not(:disabled):hover::before{transform:translateX(115%)}
 .primary:not(:disabled):hover svg{transform:translateX(4px)}
 .secondary:not(:disabled):hover,.access-button:hover{transform:translateY(-2px);box-shadow:0 5px 20px #b25aee13}
 .vote-choice:not(:disabled):hover{box-shadow:0 10px 30px #0002,0 0 25px #b66aeb0c}
 .desktop-nav button:hover{color:var(--ivory)}
 .location-mini button{transition:transform .25s ease,border-color .25s ease}
 .location-mini button:hover{transform:rotate(-30deg);border-color:var(--orange)}
 .location-mini button:hover svg{transform:rotate(30deg)}
}
.desktop-nav button.active:after{animation:nav-line .3s ease-out both;transform-origin:left}
@keyframes nav-line{from{transform:scaleX(.1);opacity:0}to{transform:scaleX(1);opacity:1}}
.access-tabs button.active,.stage-buttons button.active{box-shadow:inset 0 0 0 1px #ffb27c0d}

/* The vote destination calls attention to an actual open round, without hover. */
.has-open-vote [data-view="vote"]{background:#54224940;border-radius:7px;color:#ffe8d5;animation:vote-destination 2.1s ease-in-out infinite}
.has-open-vote .desktop-nav [data-view="vote"]{height:42px;padding:0 16px;align-self:center}
.has-open-vote .desktop-nav [data-view="vote"].active:after{bottom:-1px;left:14px;right:14px}
.has-open-vote .mobile-nav [data-view="vote"]{border-radius:8px 8px 0 0}
.has-open-vote [data-action="wrist-access"].primary{animation:vote-destination 2.1s ease-in-out infinite}
@keyframes vote-destination{0%,100%{box-shadow:inset 0 0 0 1px #bc61ec6e,0 0 0 0 #b763ef00;background-color:#49233b40}50%{box-shadow:inset 0 0 0 1px #ffa15dbf,0 0 20px #b763ef33,0 0 0 4px #ff8b3d12;background-color:#8d45285c}}

/* Scene changes reveal once; ordinary updates do not replay the whole page. */
.motion-ready .reveal-pending{opacity:0;transform:translateY(16px)}
.motion-ready .reveal-visible{animation:section-arrive .65s cubic-bezier(.2,.75,.25,1) var(--enter-delay,0ms) both}
@keyframes section-arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.reveal-visible .progress>span{transform-origin:left;animation:meter-arrive .8s cubic-bezier(.2,.75,.25,1) var(--enter-delay,0ms) both}
@keyframes meter-arrive{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stat-updated{animation:stat-update .45s ease-out}
@keyframes stat-update{0%{transform:translateY(4px);opacity:.45}55%{transform:translateY(-2px);opacity:1}100%{transform:translateY(0)}}
.vote-choice.selected .choice-check svg{stroke-dasharray:25;stroke-dashoffset:25;animation:vote-check .35s ease-out forwards}
@keyframes vote-check{to{stroke-dashoffset:0}}
.access-ok svg{animation:confirmed .35s ease-out}
@keyframes confirmed{from{transform:scale(.75);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}

/* Live details: deliberately few independently animated bars on mobile. */
body[data-phase="live"] .live-badge:not(.closed) i,.nav-dot{animation:live-beacon 2.8s ease-in-out infinite}
@keyframes live-beacon{0%,100%{opacity:.65;box-shadow:0 0 0 0 #94dca700}50%{opacity:1;box-shadow:0 0 0 4px #94dca710}}
body[data-phase="live"] .waveform i{animation:wave-dance 1.9s ease-in-out infinite;animation-delay:var(--wave-delay,0ms);transform-origin:center}
body[data-phase="live"] .vote-shell.is-voting .waveform i{animation-duration:.95s}
body[data-phase="live"] .waveform i:nth-child(3n){animation-duration:1.25s}
body[data-phase="live"] .vote-shell.is-voting .waveform i:nth-child(3n){animation-duration:.75s}
@keyframes wave-dance{0%,100%{transform:skew(-10deg) scaleY(.22);opacity:.5}45%{transform:skew(-10deg) scaleY(1.16);opacity:1}}
.lock-halo{position:relative}
.lock-halo::after{content:'';position:absolute;inset:-1px;border:1px solid currentColor;border-radius:50%;opacity:0;animation:location-signal 4s ease-out infinite;pointer-events:none}
@keyframes location-signal{0%,65%,100%{transform:scale(1);opacity:0}12%{opacity:.2}48%{transform:scale(1.35);opacity:0}}
.timer-pill.is-ending{border-color:#d37847;color:#ffb488;animation:round-ending 1.6s ease-in-out infinite}
@keyframes round-ending{0%,100%{box-shadow:0 0 0 0 #ff8b3d00}50%{box-shadow:0 0 0 4px #ff8b3d0d}}

.modal[open]{animation:dialog-arrive .25s cubic-bezier(.2,.75,.25,1) both}
.studio[open]{animation:studio-arrive .3s cubic-bezier(.2,.75,.25,1) both}
dialog[open]::backdrop{animation:backdrop-arrive .2s ease-out both}
@keyframes dialog-arrive{from{transform:translateY(12px) scale(.985);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes studio-arrive{from{transform:translateX(25px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
@media(max-width:800px){.story .logo-aura.hero-mark>.logo-crop.large{transform:none}.story .logo-aura.hero-mark{transform:scale(.8);transform-origin:top left}}
@media(max-width:600px){
 .prototype-actions{gap:11px}.prototype-bar .motion-state-label{display:none}
 .logo-aura.hero-mark{height:96px}.logo-aura.hero-mark .logo-crop.large{height:116px}
 .primary,.access-button,.stage-buttons button,.secondary{min-height:44px}
 .mobile-nav button:active{background:#b76d4420}.mobile-nav button.active svg{animation:confirmed .3s ease-out}
 .logo-aura.hero-mark::before{filter:blur(11px)}
}
/* Compact controls use the same tactile motion as the original interface. */
#party-app .pc-ticket-button,#party-app .pc-shortcut,#party-app .pc-info-button,#party-app .studio-nav-button{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
#party-app .pc-ticket-button>svg,#party-app .pc-shortcut>svg{transition:transform .25s ease}
#party-app .pc-ticket-button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#ffedd52b 50%,transparent 80%);transform:translateX(-115%);transition:transform .65s ease;pointer-events:none}
html.motion-full #party-app .brand .pz-brand-logo{animation:pc-logo-pulse 2.8s ease-in-out infinite}
@keyframes pc-logo-pulse{0%,100%{transform:scale(1);filter:drop-shadow(-2px -1px 5px #a64bf05e) drop-shadow(2px 2px 4px #ff872535)}50%{transform:scale(1.055);filter:drop-shadow(-2px -2px 10px #ae51ef8a) drop-shadow(3px 3px 9px #ff87256b)}}
.pc-audio-bars{display:flex;align-items:center;justify-content:center;gap:2px;height:20px;width:21px}
.pc-audio-bars i{width:2px;height:15px;background:currentColor;border-radius:2px;animation:pc-audio-wave 1.3s ease-in-out infinite alternate;transform-origin:center}
.pc-audio-bars i:nth-child(2n){height:10px;animation-delay:-.7s}.pc-audio-bars i:nth-child(3){height:20px;animation-delay:-.3s}.pc-audio-bars i:nth-child(5){height:12px;animation-delay:-1s}
@keyframes pc-audio-wave{from{transform:scaleY(.35);opacity:.6}to{transform:scaleY(1);opacity:1}}
@media(hover:hover) and (pointer:fine){
 #party-app .pc-shortcut:hover{transform:translateY(-2px);border-color:#bc80da77;box-shadow:0 7px 24px #0003}
 #party-app .pc-ticket-button:hover::before{transform:translateX(115%)}
 #party-app .pc-ticket-button:hover>svg,#party-app .pc-shortcut:hover>svg{transform:translateX(4px)}
 #party-app .pc-info-button:hover{transform:scale(1.1)}
}
#party-app .pc-ticket-button:active,#party-app .pc-shortcut:active{transform:scale(.985)}
.motion-reduced *,.motion-reduced *::before,.motion-reduced *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-reduced .reveal-pending,.motion-reduced .reveal-visible{opacity:1!important;transform:none!important}
.motion-reduced .logo-aura::before{opacity:.12;transform:none}.motion-reduced .logo-aura::after{opacity:.04;transform:none}
.motion-reduced .vote-choice.selected .choice-check svg{stroke-dashoffset:0}
.motion-reduced .tap-ripple{display:none}
@media(prefers-reduced-motion:reduce){
 html:not(.motion-full) *,html:not(.motion-full) *::before,html:not(.motion-full) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html:not(.motion-full) .reveal-pending,html:not(.motion-full) .reveal-visible{opacity:1!important;transform:none!important}
 html:not(.motion-full) .logo-aura::before{opacity:.12;transform:none}html:not(.motion-full) .logo-aura::after{opacity:.04;transform:none}
 html:not(.motion-full) .vote-choice.selected .choice-check svg{stroke-dashoffset:0}
 html:not(.motion-full) .tap-ripple{display:none}
}