.welcome-art,.board-preview{perspective:1100px;transform:perspective(1100px) rotateX(var(--board-x,0deg)) rotateY(var(--board-y,0deg));transition:transform .35s ease,box-shadow .35s ease;isolation:isolate}
.welcome-art>img,.board-preview>img{transform-origin:center;will-change:transform;box-shadow:0 12px 24px #203b3020;transition:filter .3s ease}
.board-preview:hover{transform:perspective(1100px) rotateX(var(--board-x,0deg)) rotateY(var(--board-y,0deg))}
.board-awake>img{animation:board-welcome 4.8s ease-in-out 1}
.welcome-art:after,.board-preview:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--board-light-x,50%) var(--board-light-y,30%),#ffffff50,transparent 65%);opacity:0;transition:opacity .3s}
@media(hover:hover) and (pointer:fine){.welcome-art:hover,.board-preview:hover{box-shadow:0 24px 45px #203b302b}.welcome-art:hover:after,.board-preview:hover:after{opacity:1}.welcome-art:hover>img,.board-preview:hover>img{animation-play-state:paused;filter:brightness(1.025)}}
.board-preview:focus-visible>img{filter:brightness(1.06)}
@keyframes board-welcome{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-7px) rotate(-1deg)}70%{transform:translateY(-3px) rotate(.7deg)}}
@media(prefers-reduced-motion:reduce){.welcome-art,.board-preview,.board-preview:hover{transform:none;transition:none}.welcome-art>img,.board-preview>img{animation:none;transition:none;will-change:auto}.welcome-art:after,.board-preview:after{display:none}}