/* Shared motion language for home, shop, vote and blog. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-fast:220ms;--motion-enter:600ms}
.button,.shop-account,.shop-cart-button,.shop-help button,.article-cover,.article-plank,.product-card,.blog-filters button{transition:transform var(--motion-fast) var(--motion-ease),filter var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.hero .wood-sign{transition:transform 320ms var(--motion-ease),filter 220ms ease;transform-origin:50% 50%}
.hero .wood-sign:hover,.hero .wood-sign:focus-visible{animation:none;transform:scale(1.035);filter:brightness(1.04)}
.hero .wood-sign:active{transform:scale(.985)}
.article-cover:hover{transform:none}
.article-cover:hover img{scale:1}
.article-image{display:block;overflow:hidden;border-radius:inherit;height:100%}
.product-card:hover{translate:none}
.article-plank:hover{transform:none}
.navigation a,.navigation button{transition:color 180ms ease,opacity 180ms ease}
.navigation a:hover,.navigation button:hover{color:#ffe599}
.hero-logo-image img,.shop-hero-logo img{animation:scene-logo-float 6s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 75%}
.motion-in-view .hero-logo-image img,.motion-in-view .shop-hero-logo img{animation-play-state:running}
.server-intro .bubble{animation-duration:10s}
.server-intro .bubble-two{animation-duration:12s}
.server-intro .bubble-three{animation-duration:14s}
.server-intro .season-token-icon{animation-duration:8s}
@keyframes scene-logo-float{0%,100%{translate:0 0;rotate:-1.4deg}50%{translate:0 -7px;rotate:1.4deg}}
.community-main>.page-sign{transform-origin:50% 0;animation:sign-arrive 1.25s cubic-bezier(.2,.7,.25,1) both}
@keyframes sign-arrive{
  0%{opacity:0;transform:translateY(-150px) rotate(-9deg)}
  40%{opacity:1;transform:translateY(7px) rotate(5deg)}
  61%{transform:translateY(-3px) rotate(-3deg)}
  79%{transform:translateY(1px) rotate(1.5deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
.hero .wave{width:110%;max-width:none;left:-5%;animation:shore-wave 7s ease-in-out infinite;animation-play-state:paused;transform-origin:center bottom;pointer-events:none}
.hero.motion-in-view .wave{animation-play-state:running}
@keyframes shore-wave{0%,100%{transform:translateX(-1.5%) scaleY(1)}50%{transform:translateX(1.5%) scaleY(1.18)}}
.server-intro{isolation:isolate}
.server-intro::before{content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#c0fbff12 34%,#d2fcff20 39%,transparent 44%,transparent 54%,#c0fbff18 59%,transparent 66%);animation:water-light 14s ease-in-out infinite;animation-play-state:paused}
.server-intro.intro-motion-active::before{animation-play-state:running}
@keyframes water-light{0%,100%{translate:-1% 0;opacity:.55}50%{translate:1% 0;opacity:.9}}
.motion-ready .motion-reveal{opacity:0;translate:0 22px;transition:opacity var(--motion-enter) var(--motion-ease),translate var(--motion-enter) var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal.motion-shown{opacity:1;translate:0 0}
.motion-ready .vote-banner.motion-reveal,.motion-ready .vote-player.motion-reveal,.motion-ready .vote-site.motion-reveal{translate:none;scale:1;transition:none}
.motion-ready .vote-banner.motion-shown,.motion-ready .vote-player.motion-shown,.motion-ready .vote-site.motion-shown{animation:vote-card-arrive 1150ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
.vote-banner{--card-enter-x:0px;--card-enter-y:65px}
.vote-site-spring{--card-enter-x:-85px;--card-enter-y:45px}
.vote-site-autumn{--card-enter-x:-65px;--card-enter-y:45px}
.vote-player{--card-enter-x:85px;--card-enter-y:0px}
@keyframes vote-card-arrive{
  0%{opacity:0;translate:var(--card-enter-x,0px) var(--card-enter-y,65px);scale:.96}
  100%{opacity:1;translate:0 0;scale:1}
}
.vote-envelope{animation:vote-envelope-bob 4s ease-in-out infinite;animation-play-state:paused}
.motion-in-view .vote-envelope{animation-play-state:running}
@keyframes vote-envelope-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.vote-site-mascot{transition:transform 300ms var(--motion-ease);transform-origin:center bottom}
@media(hover:hover) and (pointer:fine){
  .vote-site:hover .vote-site-mascot{transform:translateY(-3px) rotate(-2deg)}
  .vote-site-autumn:hover .vote-site-mascot{transform:translateY(-3px) rotate(2deg)}
  .article-cover:hover,.article-plank:hover{transform:translateY(-3px)}
  .product-card:hover{transform:translateY(-3px)}
  .blog-filters button:hover{transform:translateY(-2px)}
}
@media(hover:none){
  .hero .wood-sign:hover,.article-cover:hover,.article-plank:hover,.product-card:hover{transform:none;filter:none}
  .button:hover,.shop-account:hover,.shop-cart-button:hover,.shop-help button:hover{transform:none}
}
.button:disabled:hover{transform:none}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .motion-ready .motion-reveal{opacity:1;translate:none}
  .motion-ready .vote-banner.motion-reveal,.motion-ready .vote-player.motion-reveal,.motion-ready .vote-site.motion-reveal{opacity:1;translate:none;scale:1}
  .vote-site:hover .vote-site-mascot{transform:none}
  .hero .wood-sign:hover,.hero .wood-sign:focus-visible,.hero .wood-sign:active,.article-cover:hover,.article-plank:hover,.product-card:hover,.blog-filters button:hover,.button:hover,.button:active,.shop-account:hover,.shop-cart-button:hover{transform:none}
}