/* Directory-style motion, using each website's chosen accent and existing art. */
.wh-site :is(.wh-hero,.wh-about,.wh-player-panel,.wr-banner,.wr-public-list>li,.ws-banner,.wv-banner,.wn-server-card,.sp-panel){position:relative;isolation:isolate}
.wh-player-header{overflow:hidden}
@media(hover:hover) and (pointer:fine){
 .wh-site :is(.wh-hero,.wh-panel,.sp-panel,.wh-player-list li,.sp-prize,.sp-reward){transition:border-color .22s ease,box-shadow .22s ease}
 .wh-site :is(.wh-hero,.wh-panel,.sp-panel):is(:hover,:focus-within){box-shadow:0 12px 30px #0005,inset 0 1px 0 #ffffff0b,0 0 22px color-mix(in srgb,var(--wh-accent) 10%,transparent)}
 .wh-site :is(.wh-player-list li,.sp-prize,.sp-reward):hover{border-color:color-mix(in srgb,var(--wh-accent) 60%,#64747e);box-shadow:0 5px 16px #0003}
 .wh-site :is(.wh-button,.button:not(:disabled):not([aria-disabled=true])){transition:border-color .2s ease,filter .2s ease,box-shadow .2s ease}
 .wh-site :is(.wh-button,.button:not(:disabled):not([aria-disabled=true])):hover{filter:brightness(1.12);border-color:#a4bdcd;box-shadow:0 4px 14px #0004}
 .wh-page-links>:is(a,button){transition:color .2s ease,background-color .2s ease,border-color .2s ease}
 .wh-page-links>:is(a,button):hover{border-bottom-color:var(--wh-accent);color:#fff}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .wh-site :is(.wh-hero,.wh-about,.wh-player-panel,.wr-banner,.wr-public-list>li,.ws-banner,.wv-banner,.wn-server-card,.sp-panel)::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(420px circle at var(--hover-x,50%) var(--hover-y,50%),color-mix(in srgb,var(--wh-accent) 9%,transparent),transparent 72%)}
 .wh-site :is(.wh-hero,.wh-about,.wh-player-panel,.wr-banner,.wr-public-list>li,.ws-banner,.wv-banner,.wn-server-card,.sp-panel).is-pointer-over::before{opacity:1}
 .wh-site :is(.wh-hero,.wh-about,.wh-player-header,.wr-banner,.ws-banner,.wv-banner,.wn-server-card)>.wh-responsive-picture img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
 .wh-site .wh-hero-video{transition:opacity .35s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
 .wh-site :is(.wh-hero,.wh-about,.wh-player-header,.wr-banner,.ws-banner,.wv-banner,.wn-server-card):hover>.wh-responsive-picture img,.wh-site .wh-hero:hover>.wh-hero-video{transform:scale(1.035)}
 .wh-site :is(.wh-button img,.button img,.wh-logo,.sp-prize>img){transition:transform .2s ease}
 .wh-site :is(.wh-button,.button:not(:disabled):not([aria-disabled=true])):hover img,.wh-site .wh-wordmark:hover .wh-logo{transform:translateY(-2px) scale(1.09)}
 .wh-site .sp-prize:hover>img{transform:translateY(-3px) scale(1.04)}
 .wh-site :is(.wh-button,.button:not(:disabled):not([aria-disabled=true])):active img{transform:scale(.95)}
}
/* A phone preview should show the phone crop, even when operated with a mouse. */
@media(max-width:650px){.wh-embedded .wh-site :is(.wh-hero,.wh-about,.wh-player-header,.wr-banner,.ws-banner,.wv-banner,.wn-server-card)>.wh-responsive-picture img{transform:none!important}}