/* Sunshine motion: calm ambient movement, precise feedback at interaction. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:180ms;--motion-normal:320ms}
.community-home :is(.feature,.story,.join,.server-address),.catalog-card,.result-card,.button--gold{position:relative;isolation:isolate;transition:transform var(--motion-normal) var(--motion-ease),box-shadow var(--motion-normal) var(--motion-ease),border-color 240ms ease,background-color 240ms ease}
.community-home :is(.feature,.story,.join,.server-address)::before,.catalog-card::before,.result-card::before,.button--gold::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(180px circle at var(--pointer-x,50%) var(--pointer-y,50%),#fff9,transparent 75%);opacity:0;transition:opacity 260ms ease;pointer-events:none;z-index:1}
.community-home :is(.feature,.story)::after,.catalog-card::after,.result-card::after{content:'';position:absolute;inset:-50% -80%;background:linear-gradient(115deg,transparent 42%,#ffffff05 47%,#ffffff55 50%,#ffffff05 53%,transparent 58%);transform:translateX(-50%);opacity:0;pointer-events:none;z-index:1;transition:transform 850ms var(--motion-ease),opacity 500ms ease}
.catalog-card,.result-card{overflow:hidden}
.community-home .feature-copy{z-index:2}
.community-home .round-arrow{transition:transform 320ms var(--motion-ease),background-color 250ms,border-color 250ms,box-shadow 250ms}
.community-home .story-art img,.catalog-card__image img{transition:transform 440ms var(--motion-ease),filter 440ms ease}
.community-home .story-link{display:inline-flex;align-items:center;gap:5px;transition:color 220ms,transform 320ms var(--motion-ease)}
.community-home .join svg{transition:transform 320ms var(--motion-ease)}
.community-home .sidebar nav a,.desktop-nav a,.mobile-menu nav a{transition:background-color 220ms,color 220ms,box-shadow 220ms,transform 300ms var(--motion-ease)}
.community-home .sidebar nav :is(img,svg),.community-home .panel-heading :is(img,svg){transition:transform 400ms var(--motion-ease),filter 300ms}
.community-home :is(.section-heading a,.sidebar-callout a,.how-to-join,.home-footer a),.site-footer__links a,.text-link,.back-link,.catalog-card__link{transition:color 220ms,text-shadow 220ms,transform 300ms var(--motion-ease)}
.community-home .ranking-tabs button,.filter-button,.icon-button{transition:background-color 180ms,color 180ms,box-shadow 220ms,transform 220ms var(--motion-ease)}
.community-home .ranking-tabs button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #ccb5e2,0 2px 5px #65478b12}
.community-home .player,.community-home .rank{transition:background-color 220ms}
.community-home :is(.avatar,.rank-number){transition:transform 300ms var(--motion-ease),box-shadow 300ms}
.page-hero .sun-bubble{animation:sunshine-float 8s ease-in-out infinite;transform-origin:center}
.page-hero .hero .hero-logo{animation:sunshine-glow 5s ease-in-out infinite}
.page-hero .bubble-one{animation:bubble-drift 6s ease-in-out infinite}
.page-hero .bubble-two{animation:bubble-drift 7.5s ease-in-out -3s infinite}
.page-hero .sun-bubble::before{animation:bubble-reflection 8s ease-in-out infinite}
.page-hero .hero-sun{animation:cloud-drift 22s ease-in-out infinite}
.page-hero .live-dot.online{box-shadow:0 0 0 3px #60a97515;transition:box-shadow 260ms}
.page-hero .live-dot.online::after{content:'';display:block;position:absolute;width:100%;height:100%;border:1px solid #60a97566;border-radius:50%;animation:online-ring 3.5s ease-out infinite}
.page-hero .live-dot{position:relative;flex-shrink:0}
.community-home .masthead-inner{animation:entrance-fade 550ms var(--motion-ease) both}
.page-hero .hero>div:not(.hero-sun):not(.sun-bubble){animation:entrance-rise 700ms var(--motion-ease) 80ms both}
.community-home .layout{animation:entrance-rise 750ms var(--motion-ease) 140ms both}
.community-home .rank-list,.community-home .player-list{animation:entrance-fade 240ms ease both}
.community-home :is(a,button):focus-visible,.button:focus-visible,.filter-button:focus-visible,.icon-button:focus-visible,.desktop-nav a:focus-visible{outline:3px solid #8563ab;outline-offset:4px;box-shadow:0 0 0 7px #bda4da28}
.community-home .short-card:focus-visible .short-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.community-home :is(.feature,.story):focus-visible{box-shadow:0 8px 26px #8063a52b,0 0 0 7px #bda4da28}
.community-home :is(.feature,.story):focus-visible .round-arrow{background:#fff8e7;border-color:#8563ab}
.community-home :is(.join,.server-address):active,.button:active{transform:translateY(1px) scale(.98);transition-duration:90ms}
.community-home :is(.feature,.story):active,.catalog-card:active,.result-card:active{transform:translateY(0) scale(.995);transition-duration:100ms}
.community-home .ranking-tabs button:active,.filter-button:active,.icon-button:active{transform:scale(.94);transition-duration:80ms}
.community-home .sidebar nav a:active,.mobile-menu nav a:active{background:#e6d8f5}

@media(hover:hover) and (pointer:fine){
 .community-home :is(.feature,.story):hover,.catalog-card:hover,.result-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #674c8a20,0 3px 0 #d5c8e6;border-color:#c3addc}
 .community-home :is(.feature,.story,.join,.server-address):hover::before,.catalog-card:hover::before,.result-card:hover::before,.button--gold:hover::before{opacity:.42}
 .community-home :is(.feature,.story):hover::after,.catalog-card:hover::after,.result-card:hover::after{transform:translateX(50%);opacity:1}
 .community-home .feature:hover>img{transform:scale(1.035);filter:brightness(1.04)}
 .community-home .feature:hover .round-arrow{transform:translate(2px,-2px);background:#fff7dc;border-color:#b295c7;box-shadow:0 3px 12px #6b548724}
 .community-home .story:hover .story-link{color:#684193;transform:translateX(3px)}
 .community-home .story:hover .story-art img{transform:translateY(-5px) rotate(0) scale(1.06);filter:drop-shadow(0 8px 5px #7f66992e)}
 .community-home .equipment:hover .story-art img:first-child{transform:translateY(-5px) rotate(-15deg) scale(1.06)}
 .community-home .equipment:hover .story-art img+img{transform:translateY(-7px) rotate(9deg) scale(1.08)}
 .catalog-card:hover .catalog-card__image img{transform:translateY(-3px) rotate(-5deg) scale(1.08)}
 .community-home .join:hover,.button--gold:hover{background:#ffe68a;transform:translateY(-2px);box-shadow:0 5px 0 #dba539,0 7px 22px #f1be5b38}
 .community-home .join:hover svg{transform:translate(2px,-2px)}
 .page-hero .server-address:hover{background:#fffc;border-color:#fff;transform:translateY(-2px);box-shadow:0 7px 18px #668fa025}
 .community-home .sidebar nav a:hover{transform:translateX(3px);background:#eee5fa;box-shadow:inset 3px 0 0 #bd9ad9}
 .community-home .sidebar nav a:hover :is(img,svg){transform:rotate(-7deg) scale(1.08)}
 .community-home :is(.section-heading a,.sidebar-callout a,.how-to-join,.home-footer a):hover,.site-footer__links a:hover,.text-link:hover,.back-link:hover,.catalog-card__link:hover{color:#744fa0;text-shadow:0 0 15px #a587c54d}
 .community-home .ranking-tabs button:hover,.filter-button:hover{background:#e9def6;color:#65478b;transform:translateY(-1px);box-shadow:0 3px 8px #8063a51a}
 .community-home .player:hover,.community-home .rank:hover{background:#f3edf9}
 .community-home .player:hover .avatar{transform:rotate(-4deg);box-shadow:0 3px 9px #65478b20}
 .community-home .rank:hover .rank-number{transform:translateX(2px);color:#9b7435}
 .community-home .panel:hover .panel-heading :is(img,svg){transform:rotate(-6deg)}
 .icon-button:hover{background:#e9def6;border-color:#c3addc;color:#65478b;transform:rotate(7deg)}
 .community-home .short-card:hover{transform:translateY(-3px);border-color:#c3addc;box-shadow:0 10px 22px #674c8a26,0 3px 0 #d5c8e6}
 .community-home .short-card:hover .short-card__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes sunshine-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(-3deg)}}
@keyframes sunshine-glow{0%,100%{filter:drop-shadow(0 0 8px #ffdb4c10)}50%{filter:drop-shadow(0 0 19px #ffda5655)}}
@keyframes bubble-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-8px)}}
@keyframes bubble-reflection{0%,100%{opacity:.65;transform:rotate(-35deg) translateX(0)}50%{opacity:1;transform:rotate(-35deg) translateX(3px)}}
@keyframes cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@keyframes online-ring{0%{opacity:0;transform:scale(1)}15%{opacity:.6}85%,100%{opacity:0;transform:scale(2.4)}}
@keyframes entrance-fade{from{opacity:0}to{opacity:1}}
@keyframes entrance-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.motion-paused *, .motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.motion-toggle{position:fixed;left:14px;bottom:14px;z-index:30;border:1px solid #d8cae4;border-radius:20px;padding:8px 13px;background:#fffefaeb;color:#7c668e;font-size:10px;font-weight:800;backdrop-filter:blur(8px);box-shadow:0 3px 10px #4f35670d}
.motion-toggle:focus-visible{outline:3px solid #8563ab;outline-offset:3px}
.app-shell.motion-disabled *,.app-shell.motion-disabled *::before,.app-shell.motion-disabled *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-disabled .reveal{opacity:1;transform:none}
@media(max-width:600px){.page-hero .sun-bubble{animation-duration:10s}.page-hero .hero .hero-logo{animation-duration:7s}}
@media(hover:none){
 .community-home .feature:hover>img{transform:none;filter:none}
 .community-home .story:hover .story-art img{transform:rotate(-9deg)}
 .community-home .equipment:hover .story-art img:first-child{transform:rotate(-23deg)}
 .community-home .equipment:hover .story-art img+img{transform:rotate(16deg)}
 .catalog-card:hover,.result-card:hover{transform:none;box-shadow:none}
 .community-home .ranking-tabs button,.filter-button{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
 .app-shell:not(.motion-enabled) *,.app-shell:not(.motion-enabled) *::before,.app-shell:not(.motion-enabled) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .app-shell:not(.motion-enabled) .community-home :is(.feature,.story,.join,.server-address,.short-card),.app-shell:not(.motion-enabled) :is(.catalog-card,.result-card,.button,.filter-button){transform:none!important}
 .app-shell:not(.motion-enabled) .community-home :is(.feature,.story)::after,.app-shell:not(.motion-enabled) :is(.catalog-card,.result-card)::after{display:none}
 .app-shell:not(.motion-enabled) .community-home .masthead-inner,.app-shell:not(.motion-enabled) .community-home .layout,.app-shell:not(.motion-enabled) .page-hero .hero>div{opacity:1}
 .app-shell:not(.motion-enabled) .page-hero .sun-bubble{transform:rotate(-6deg)}
 .app-shell:not(.motion-enabled) .page-hero .hero .hero-logo{transform:rotate(6deg)}
 .reveal{opacity:1;transform:none}
}