/* Celestial stage: original artwork, depth, and restrained light. */
.hero-art{isolation:isolate;perspective:1100px}
.hero-card-left,.hero-card-right{width:195px;height:auto;aspect-ratio:auto;z-index:4;box-shadow:0 24px 45px #02030dbb,0 0 24px #e4bd6433;translate:var(--stage-x,0px) var(--stage-y,0px)}
.hero-card-left{animation:pegasus-drift 9s ease-in-out infinite;transform:translate(-90px,24px) rotate(-12deg)}
.hero-card-right{z-index:5;animation:lyra-drift 10s ease-in-out infinite;transform:translate(90px,32px) rotate(12deg)}
.hero-card-center{z-index:2;width:182px;height:273px;animation:none;transform:translateY(-59px) scale(.96);opacity:.82;box-shadow:0 0 35px #ae80f844}
.portal{position:absolute;width:440px;height:440px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,#e5b98222 0%,#925bea30 30%,#3922ae22 50%,transparent 69%);box-shadow:0 0 100px #8940fb22;animation:portal-breathe 8s ease-in-out infinite}
.portal::before,.portal::after{content:'';position:absolute;inset:20px;border-radius:50%;border:1px solid #c599ff6b;box-shadow:0 0 14px #be85ff88,inset 0 0 22px #a368ff44;background:conic-gradient(from 0deg,transparent 15%,#cb94ff33 25%,transparent 40%,#76e5f433 67%,transparent 80%);animation:portal-turn 36s linear infinite}
.portal::after{inset:0;border:1px dashed #d9c3ff77;box-shadow:none;background:none;animation-direction:reverse;animation-duration:65s}
.portal-floor{position:absolute;z-index:1;bottom:7px;width:400px;height:75px;border:1px solid #bb8cff99;border-radius:50%;box-shadow:0 0 24px #a76bff66,inset 0 0 25px #a76bff33;background:radial-gradient(ellipse,#b181ff33,transparent 65%);transform:rotate(-7deg)}
.portal-floor::after{content:'';position:absolute;inset:12px 28px;border:1px solid #8cdce866;border-radius:50%;box-shadow:0 0 18px #73d9ff44}
.magic-dust{position:absolute;inset:-20px;z-index:6;pointer-events:none}
.magic-dust i{position:absolute;left:var(--x);top:var(--y);height:var(--size);width:var(--size);border-radius:50%;background:#e8d9ff;box-shadow:0 0 8px #c99aff,0 0 17px #9767f7;animation:dust-rise var(--duration) ease-in-out infinite;animation-delay:var(--delay)}
.magic-dust i:nth-child(3n){background:#9be5ec;box-shadow:0 0 10px #77deef}
.hero .art-caption{bottom:-38px;color:#d9c7ed;font-size:10px;letter-spacing:3px}
.hero .art-star{z-index:7}.star-one{animation:star-pulse 5s ease-in-out infinite}.star-two{animation:star-pulse 7s ease-in-out infinite reverse}
.hero h1 em{background:linear-gradient(115deg,#eadcff 8%,#b994ff 42%,#a6f4f0 78%,#eadcff);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:aurora-text 14s ease-in-out infinite;text-shadow:none}
.hero .eyebrow{display:inline-flex;gap:12px;padding:9px 14px;border:1px solid #b787f44d;border-radius:30px;background:#25193d66;font-size:10px;letter-spacing:2px;box-shadow:inset 0 0 16px #aa71ef12}
.primary-button{position:relative;overflow:hidden;box-shadow:0 0 35px #a967ff55,0 12px 35px #0005}
.primary-button::after{content:'';position:absolute;inset:-100% auto -100% -70%;width:40%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#fff6,transparent);animation:button-glint 8s ease-in-out infinite;pointer-events:none}
.modes-section{position:relative}.modes-section::before{content:'';display:block;height:1px;width:65%;margin:0 auto 48px;background:linear-gradient(90deg,transparent,#a587e099,#8edbe788,transparent);box-shadow:0 0 17px #a775ff55}
.mode-card{border-radius:22px 22px 30px 30px}.mode-card>img{transition:filter .5s}.mode-card:hover>img{filter:brightness(1.12)}
@keyframes pegasus-drift{0%,100%{transform:translate(-90px,24px) rotate(-12deg)}50%{transform:translate(-94px,12px) rotate(-10deg)}}
@keyframes lyra-drift{0%,100%{transform:translate(90px,32px) rotate(12deg)}50%{transform:translate(95px,20px) rotate(10deg)}}
@keyframes portal-turn{to{transform:rotate(360deg)}}
@keyframes portal-breathe{0%,100%{opacity:.65;scale:.97}50%{opacity:1;scale:1.03}}
@keyframes dust-rise{0%,100%{opacity:.15;transform:translateY(12px) scale(.6)}50%{opacity:.9;transform:translateY(-18px) scale(1)}}
@keyframes star-pulse{0%,100%{opacity:.4;scale:.8}50%{opacity:1;scale:1.1}}
@keyframes aurora-text{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes button-glint{0%,65%{left:-70%}90%,100%{left:150%}}
.paused .portal,.paused .portal::before,.paused .portal::after,.paused .magic-dust i,.paused .hero-card,.paused .art-star,.paused .hero h1 em,.paused .primary-button::after{animation-play-state:paused}
@media(max-width:1100px) and (min-width:901px){.hero-art{transform:scale(.78)}}
@media(max-width:900px){.hero-art{margin-top:25px;margin-bottom:35px}.hero .art-caption{bottom:-35px}.portal-floor{bottom:-4px}}
@media(max-width:420px){.hero .eyebrow{font-size:9px;letter-spacing:1.4px}.hero-art{margin-top:15px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.hero-card,.portal,.portal::before,.portal::after,.magic-dust i,.art-star,.hero h1 em,.primary-button::after{animation:none!important}.hero-card{translate:none!important}.primary-button::after{display:none}}

.hero{overflow:clip;overflow-clip-margin:16px}

@media(max-width:420px){.hero .art-caption{bottom:-68px;letter-spacing:2px}}