html[data-graphics=next]{--fluid-ease:cubic-bezier(.22,.78,.25,1);--fluid-pop:cubic-bezier(.2,.9,.25,1.22)}
html[data-graphics=next] :is(.primary,.secondary,.icon-button,.course-choice,.difficulty-choice,.costume-card,.home-adventures button,.menu-nav button,.menu-nav a){transition:transform .38s var(--fluid-pop),box-shadow .38s var(--fluid-ease),border-color .3s,filter .3s;transform-origin:center;backface-visibility:hidden}
html[data-graphics=next] .primary{box-shadow:inset 0 2px 1px #fff9,inset 0 -4px 6px #b8802033,0 7px 0 #704b1529,0 10px 22px #0005}
html[data-graphics=next] .primary:hover{filter:brightness(1.07);box-shadow:inset 0 2px 2px #fffc,inset 0 -3px 8px #b8802026,0 9px 0 #704b151f,0 15px 28px #0005}
html[data-graphics=next] :is(.player-dialog[open],.end-card){animation:fluidPanel .62s var(--fluid-ease) both;transform-origin:50% 65%;box-shadow:inset 0 1px 1px #e7f7ff4d,inset 0 -8px 20px #0208163d,0 22px 60px #0009}
html[data-graphics=next] .player-dialog::backdrop{animation:fluidBackdrop .35s ease-out both}
html[data-graphics=next] .course-choice img{transition:transform .65s var(--fluid-ease),filter .5s}
html[data-graphics=next] .course-choice:hover img{transform:scale(1.035) translateY(-2px);filter:saturate(1.08)}
html[data-graphics=next] .guide-illustration{animation:fluidIllustration .7s var(--fluid-ease) both;transform-origin:50% 70%}
html[data-graphics=next] :is(.race-card,.power-meter){box-shadow:inset 0 1px 1px #d6efff47,inset 0 -7px 16px #010b1833,0 9px 22px #0003}
html[data-graphics=next] :is(.race-track i,.arena-track i){transition:transform .6s var(--fluid-ease)}
html[data-graphics=next] .power-meter progress{border-radius:8px;overflow:hidden;filter:drop-shadow(0 1px 2px #0006)}
html[data-graphics=next] #journey-ghost::after{transition:transform .4s var(--fluid-pop);box-shadow:inset 0 2px 2px #fff,0 2px 4px #0005}
html[data-graphics=next] .intro-portrait{transition:none;filter:brightness(var(--reveal,0)) contrast(1.2) drop-shadow(0 16px 20px #0008)}
html[data-graphics=next] .intro-titles h2{text-shadow:0 2px 0 #294150,0 5px 0 #081424,0 10px 23px #000a}
html[data-graphics=next] .countdown:not(.hidden) b{animation:fluidCount 1s var(--fluid-ease) infinite;transform-origin:50% 65%;text-shadow:0 3px 0 #765c28,0 6px 0 #132534,0 12px 32px #ffdb624d}
html[data-graphics=next] .paused:not(.hidden)>b{animation:fluidPanel .6s var(--fluid-ease) both}
@keyframes fluidPanel{0%{opacity:0;transform:perspective(850px) translateY(22px) rotateX(-8deg) scale3d(.96,.9,1)}58%{opacity:1;transform:perspective(850px) translateY(-3px) rotateX(1deg) scale3d(1.012,1.025,1)}80%{transform:perspective(850px) translateY(1px) scale3d(.997,.99,1)}100%{opacity:1;transform:none}}
@keyframes fluidBackdrop{from{opacity:0}to{opacity:1}}
@keyframes fluidIllustration{0%{opacity:0;transform:translateY(14px) scale3d(1.06,.88,1) rotate(-2deg)}55%{opacity:1;transform:translateY(-3px) scale3d(.98,1.04,1) rotate(.4deg)}100%{opacity:1;transform:none}}
@keyframes fluidCount{0%{transform:scale3d(1.12,.84,1);opacity:.5}27%{transform:scale3d(.95,1.09,1);opacity:1}55%{transform:scale3d(1.025,.98,1)}80%,100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-graphics=next] *,html[data-graphics=next] *::before,html[data-graphics=next] *::after,html[data-graphics=next] dialog::backdrop{animation:none!important;transition:none!important}html[data-graphics=next] .course-choice:hover img{transform:none}}