/* Impeccable motion layer: one authored arrival, then small state feedback. */
.site-header,.brand-mark i,.art-sticker,.game-card,.button,.nav-button{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.site-header{transition:background .3s ease,backdrop-filter .3s ease}
.brand-mark i{transform-origin:bottom;transition:height .35s cubic-bezier(.16,1,.3,1),background .2s ease}
.brand:hover .brand-mark i:nth-child(1){height:17px}.brand:hover .brand-mark i:nth-child(2){height:22px;background:var(--coral)}.brand:hover .brand-mark i:nth-child(3){height:14px;background:var(--lime)}
.button:active,.nav-button:active{transform:translateY(1px)}
.button:focus-visible,.nav-button:focus-visible,.text-link:focus-visible,.game-tab:focus-visible,.menu-toggle:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.art-sticker{transition:transform .35s cubic-bezier(.16,1,.3,1)}.art-sticker:hover{transform:rotate(0) scale(1.08)}
.game-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}.game-card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 22px 44px rgba(17,19,39,.16)}
body.motion-ready .hero-copy{animation:hero-copy-in .65s cubic-bezier(.16,1,.3,1) both}body.motion-ready .hero-art{animation:hero-art-in .8s .12s cubic-bezier(.16,1,.3,1) both}body.motion-ready .hero-art .art-glow{animation:glow-breathe 4s .9s ease-in-out infinite alternate}body.motion-ready .brand-mark i{animation:mark-wave .55s .25s cubic-bezier(.16,1,.3,1) both}
.game-feature.tab-enter{animation:tab-enter .38s cubic-bezier(.16,1,.3,1) both}
@keyframes hero-copy-in{from{opacity:.05;transform:translateY(22px);clip-path:inset(0 0 18% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes hero-art-in{from{opacity:.05;transform:translate3d(28px,12px,0) scale(.96);clip-path:inset(10% 0 10% 12%)}to{opacity:1;transform:translate3d(0,0,0) scale(1);clip-path:inset(0 0 0 0)}}
@keyframes mark-wave{0%{height:7px}50%{height:22px}100%{height:var(--mark-height,17px)}}.brand-mark i:nth-child(1){--mark-height:10px}.brand-mark i:nth-child(2){--mark-height:17px}.brand-mark i:nth-child(3){--mark-height:22px}
@keyframes glow-breathe{from{opacity:.32;transform:scale(.94)}to{opacity:.58;transform:scale(1.04)}}@keyframes tab-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}body.motion-ready .hero-copy,body.motion-ready .hero-art{animation:none}}

/* Content-driven desktop adaptation for short windows and OS-scaled displays. */
@media (min-width:1024px) and (max-width:1400px){
  .shell{width:min(1120px,calc(100% - 80px))}
  .hero{padding-top:116px;min-height:650px}
  .hero-grid{grid-template-columns:48% 52%;min-height:470px}
  .hero h1{font-size:clamp(58px,7.1vw,94px)}
  .hero-intro{font-size:15px;max-width:390px}
  .hero-art{min-height:470px}
  .hero-note{margin-top:48px}
}

@media (min-width:1024px) and (max-height:760px){
  .hero{padding-top:100px;min-height:590px}
  .hero-grid{min-height:430px}
  .hero-art{min-height:420px}
  .hero h1{font-size:clamp(54px,6.7vw,86px);margin-bottom:24px}
  .hero-intro{margin-bottom:24px}
  .hero-note{margin-top:34px}
  .hero-footer{padding-top:0}
}