/* Small ambient details; text, form fields and page geometry stay still. */
.brand img,.login-brand>img{animation:vc-logo-glow 6s ease-in-out infinite}
@keyframes vc-logo-glow{0%,100%{filter:drop-shadow(0 0 2px #be8aff22)}50%{filter:drop-shadow(0 0 9px #be8aff80)}}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 24%,#ab63ed24,transparent 54%);animation:vc-atmosphere 12s ease-in-out infinite alternate}
.login-scene:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% 35%,#a661dc22,transparent 65%);animation:vc-atmosphere 11s ease-in-out infinite alternate}
@keyframes vc-atmosphere{from{opacity:.28}to{opacity:.8}}
.hero .button.light{background-size:200% 200%;animation:vc-button-colour 9s ease-in-out infinite}
.hero .button.light:after{animation:vc-button-sweep 9s ease-in-out infinite;transition:transform .65s}
.hero .button.light:hover:after{animation:none;transform:translateX(120%)}
@keyframes vc-button-colour{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes vc-button-sweep{0%,70%{transform:translateX(-120%)}91%,100%{transform:translateX(120%)}}
.film-play{isolation:isolate}.film-play:after{content:'';position:absolute;inset:-1px;border:1px solid #ceb4ff80;border-radius:50%;pointer-events:none;animation:vc-play-ring 3.6s ease-out infinite}
@keyframes vc-play-ring{0%{opacity:.55;transform:scale(1)}75%,100%{opacity:0;transform:scale(1.5)}}
.compare-handle span{position:relative;isolation:isolate}.compare-handle span:after{content:'';position:absolute;inset:-5px;border:1px solid #d8c2ff55;border-radius:50%;pointer-events:none;animation:vc-compare-ring 4.2s ease-in-out infinite}
@keyframes vc-compare-ring{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.6;transform:scale(1.12)}}
.badge .status-dot{animation:vc-status-breathe 3s ease-in-out infinite}
@keyframes vc-status-breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* Hover and keyboard feedback without moving controls inside cards. */
#main-nav>a:not(.button){position:relative}
#main-nav>a:not(.button):after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;background:linear-gradient(90deg,transparent,#cdb1ff,transparent);transform:scaleX(0);transition:transform .28s ease;pointer-events:none}
#main-nav>a:not(.button):is(:hover,:focus-visible):after{transform:scaleX(1)}
.button>span[aria-hidden=true],.text-link>span{display:inline-block;transition:transform .25s ease}
.button:is(:hover,:focus-visible)>span[aria-hidden=true],.text-link:is(:hover,:focus-visible)>span{transform:translate(2px,-2px)}
.text-link{transition:color .2s,text-shadow .25s}.text-link:hover{text-shadow:0 0 18px #c7a3ff44}
.linked-account-row,.license-card,.update-card,.operations-grid>.card{transition:border-color .3s,box-shadow .3s,background .3s}
.linked-account-row:hover,.license-card:hover,.update-card:hover,.operations-grid>.card:hover{border-color:#c5a7ff4d;box-shadow:0 8px 30px #00000016,inset 0 0 0 1px #c3a8ff08}
.app-nav button{transition:background .22s,color .22s,box-shadow .22s}
.app-nav button:hover{box-shadow:inset 0 0 0 1px #c6adff22,0 0 18px #a97df20b}
.login-content :is(.google-login,.discord-login){transition:background .25s,border-color .25s,box-shadow .3s,transform .25s}
.login-content :is(.google-login,.discord-login):is(:hover,:focus-visible){box-shadow:0 5px 26px #ae8ae52a,inset 0 1px 0 #ffffff50}
.faq summary:after{transition:color .25s,transform .3s,text-shadow .25s}
.faq summary:hover:after{color:#ddcaff;text-shadow:0 0 14px #b085ff77;transform:scale(1.16)}
.faq details[open] summary:after{transform:rotate(180deg)}
.avatar{transition:border-color .3s,box-shadow .3s}.avatar:hover{border-color:#ceb1ff77;box-shadow:0 0 20px #b286ef22}

@media(hover:hover) and (pointer:fine){
 .button:not(:disabled):hover,.login-content :is(.google-login,.discord-login):not([aria-disabled=true]):hover{transform:translateY(-2px)}
 .button:not(:disabled):active,.login-content :is(.google-login,.discord-login):not([aria-disabled=true]):active{transform:translateY(0) scale(.99)}
 .cosmetics figure img,.motion-grid figure img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s,box-shadow .4s}
 .cosmetics figure:hover img,.motion-grid figure:hover img{transform:translateY(-3px) scale(1.012)}
 .film-poster:hover>img{transform:scale(1.035)}
 .film-poster:hover .film-play{background:#b28ddd24;box-shadow:0 0 28px #b591ff33}
}
.hero.is-offscreen:before,.hero.is-offscreen .button.light,.hero.is-offscreen .button.light:after{animation-play-state:paused}
.page-hidden .brand img,.page-hidden .login-brand>img,.page-hidden .hero:before,.page-hidden .hero .button.light,.page-hidden .hero .button.light:after,.page-hidden .film-play:after,.page-hidden .compare-handle span:after,.page-hidden .badge .status-dot{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .brand img,.login-brand>img,.hero:before,.login-scene:before,.hero .button.light,.hero .button.light:after,.film-play:after,.compare-handle span:after,.badge .status-dot{animation:none!important}
 .hero .button.light:after,.film-play:after,.compare-handle span:after{display:none}
 .button,.button>span,.text-link,.text-link>span,#main-nav>a:after,.linked-account-row,.license-card,.update-card,.operations-grid>.card,.app-nav button,.login-content :is(.google-login,.discord-login),.faq summary:after,.avatar,.cosmetics figure img,.motion-grid figure img,.film-poster>img{transition:none!important}
 .button:hover,.button:active,.login-content :is(.google-login,.discord-login):hover,.cosmetics figure:hover img,.motion-grid figure:hover img{transform:none!important}
}