/* Contemporary motion layer: subtle, responsive, and respectful of reduced-motion preferences. */
:root{--ease-out:cubic-bezier(.2,.75,.25,1);--motion-line:color-mix(in srgb,var(--line) 76%,transparent)}
body{background-image:radial-gradient(ellipse at 82% 7%,color-mix(in srgb,var(--orange) 5%,transparent),transparent 34rem)}
.page-shell{animation:page-enter .75s var(--ease-out) both}
.hero h1{animation:rise-in .8s .08s var(--ease-out) both}
.hero-copy{animation:rise-in .7s .18s var(--ease-out) both}
.hero-meta{animation:rise-in .7s .26s var(--ease-out) both}
.film-orb{display:grid;place-items:center;animation:orb-drift 8s ease-in-out infinite;filter:saturate(1.08)}
.orb-wordmark{display:block;color:#fff;font:800 18px var(--display);letter-spacing:-.7px;text-shadow:0 2px 12px #13080acc;white-space:nowrap;opacity:.94;animation:wordmark-sway 8s ease-in-out infinite alternate;transform-origin:center}
.ring-one{animation:ring-turn 24s linear infinite}.ring-two{animation:ring-turn 30s linear infinite reverse}
.panel{transition:border-color .25s,box-shadow .3s,transform .3s var(--ease-out);box-shadow:0 18px 55px #0000000b}
.panel:not(.hidden){animation:panel-enter .42s var(--ease-out) both}
.panel:hover{border-color:color-mix(in srgb,var(--orange) 28%,var(--line));box-shadow:0 20px 60px #00000012}
.button.primary{box-shadow:0 7px 22px color-mix(in srgb,var(--orange) 20%,transparent)}
.button.primary:hover{transform:translateY(-2px);box-shadow:0 11px 30px color-mix(in srgb,var(--orange) 30%,transparent)}
.answer{transition:transform .2s var(--ease-out),border-color .2s,background .2s,box-shadow .2s}
.answer:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 18px #00000012}
.genre-option{transition:background .2s,color .2s,border-color .2s,transform .2s}
.genre-option:hover{transform:translateY(-1px)}
.leader-row{transition:background .2s,transform .2s}.leader-row:hover{background:color-mix(in srgb,var(--orange) 4%,transparent);transform:translateX(3px)}
.leader-avatar{position:relative;isolation:isolate}.leader-avatar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffffd9 50%,transparent 75%);mix-blend-mode:screen;opacity:0;transform:translateX(-100%);z-index:1;animation:avatar-shimmer 9s ease-in-out infinite;animation-delay:var(--shimmer-delay,0s)}
.leader-row:nth-child(2n) .leader-avatar::after{--shimmer-delay:3s}.leader-row:nth-child(3n) .leader-avatar::after{--shimmer-delay:6s}
.leader-avatar img{position:relative;z-index:0}
input:focus-visible,button:focus-visible,.upload:focus-visible{outline:3px solid color-mix(in srgb,var(--orange) 58%,transparent);outline-offset:3px}
.live-dot{animation:live-pulse 2s ease-out infinite}
@keyframes page-enter{from{opacity:0}to{opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes orb-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes wordmark-sway{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
@keyframes ring-turn{from{rotate:0deg}to{rotate:360deg}}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange) 40%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes avatar-shimmer{0%,68%,100%{opacity:0;transform:translateX(-100%)}72%{opacity:.9}82%{opacity:.9;transform:translateX(100%)}86%{opacity:0;transform:translateX(100%)}}
@media(max-width:760px){body{background-image:radial-gradient(ellipse at 90% 4%,color-mix(in srgb,var(--orange) 5%,transparent),transparent 22rem)}.panel:hover{transform:none}.film-orb{animation-duration:10s}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}