/* Native placement is never animated. Each layer owns entrance, idle and gloss separately. */
:root{--motion-css-ready:1}
.artwork-piece{pointer-events:none}
.artwork-piece img{width:100%;height:100%}
.motion-enter,.motion-idle{display:block;position:relative;width:100%;height:100%;transform-origin:50% 55%}
.summary-paint{position:absolute;inset:0}
.motion-boot .zone--intro .artwork-piece{opacity:0}
.native-replaced{opacity:0!important}
.motion-layer{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none}
.motion-paint{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph)}
.motion-paint img{width:100%;height:100%}
.motion-active [data-motion-state=waiting]>.motion-enter{opacity:0}
.motion-active [data-motion-state=revealed]>.motion-enter{animation:arrival-rise 820ms cubic-bezier(.16,.84,.2,1) var(--delay,0ms) both}
.motion-active [data-enter=pop][data-motion-state=revealed]>.motion-enter{animation-name:arrival-pop;animation-duration:1120ms}
.motion-active [data-enter=left][data-motion-state=revealed]>.motion-enter{animation-name:arrival-left;animation-duration:980ms}
.motion-active [data-enter=right][data-motion-state=revealed]>.motion-enter{animation-name:arrival-right;animation-duration:980ms}
.motion-active [data-enter=fade][data-motion-state=revealed]>.motion-enter{animation-name:arrival-fade;animation-duration:700ms}
.motion-active [data-motion-state=settled]>.motion-enter{opacity:1;transform:none}
/* Interactive artwork and its real hit target travel as one unit. */
.motion-active :is(.artwork-button,summary)[data-motion-state]>.motion-enter{animation:none!important;opacity:1!important;transform:none!important}
.motion-active :is(.artwork-button,summary)[data-motion-state=waiting]{opacity:0}
.motion-active :is(.artwork-button,summary)[data-motion-state=revealed]{animation:arrival-rise 820ms cubic-bezier(.16,.84,.2,1) var(--delay,0ms) both}
.motion-active :is(.artwork-button,summary)[data-motion-state=settled]{opacity:1;transform:none}
.motion-active :is(.artwork-button,summary):focus-visible{opacity:1!important;animation:none!important;transform:none!important}
.motion-active [data-idle=mascot][data-motion-state=settled] .motion-idle{animation:mascot-float 4400ms ease-in-out infinite}
.motion-active [data-idle=title][data-motion-state=settled] .motion-idle{animation:title-breathe 5800ms ease-in-out infinite}
.motion-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(108deg,transparent 39%,#fff6 47%,#fffad4b8 50%,#fff6 53%,transparent 61%);background-size:280% 100%;mask:var(--art-mask) center/100% 100% no-repeat;-webkit-mask:var(--art-mask) center/100% 100% no-repeat}
.motion-active [data-motion-state=settled] .motion-sheen{animation:gold-gloss 7400ms ease-in-out var(--gloss-delay,400ms) infinite}
.artwork-button{transition:filter .18s ease,transform .18s ease}
.motion-active .artwork-button:active{transform:translateY(2px) scale(.986)}
@media(hover:hover){.motion-active .artwork-button:hover{transform:translateY(-3px);filter:brightness(1.05) drop-shadow(0 4px 5px #36261622)}}
.motion-active .artwork-button:focus-visible>.motion-enter,.motion-active summary:focus-visible>.motion-enter{opacity:1;animation:none;transform:none}
.motion-active dialog[open]{animation:dialog-arrive 350ms cubic-bezier(.16,.84,.2,1) both}
.motion-active dialog::backdrop{animation:arrival-fade 200ms ease both}
.motion-paused .motion-enter,.motion-paused .motion-idle,.motion-paused .motion-sheen,.motion-paused .ambient-leaf{animation-play-state:paused!important}
[data-motion-visible=false] .motion-idle,[data-motion-visible=false] .motion-sheen{animation-play-state:paused!important}
.ambient-leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ambient-leaf{position:absolute;left:var(--leaf-x);top:var(--leaf-y);width:var(--leaf-size);height:auto;opacity:.34;animation:leaf-drift var(--leaf-time,22s) ease-in-out var(--leaf-delay,0s) infinite alternate}
@keyframes arrival-rise{from{opacity:0;transform:translate3d(0,var(--rise,30px),0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes arrival-fade{from{opacity:0}to{opacity:1}}
@keyframes arrival-pop{0%{opacity:0;transform:translateY(var(--rise,28px)) scale(.77)}58%{opacity:1;transform:translateY(-3px) scale(1.027)}79%{transform:translateY(1px) scale(.996)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes arrival-left{0%{opacity:0;transform:translate3d(calc(-1 * var(--slide,85px)),10px,0)}78%{opacity:1;transform:translate3d(2px,0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes arrival-right{0%{opacity:0;transform:translate3d(var(--slide,85px),10px,0)}78%{opacity:1;transform:translate3d(-2px,0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(var(--float,-3px)) rotate(.3deg)}}
@keyframes title-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes gold-gloss{0%,62%{opacity:0;background-position:160% 0}70%{opacity:.56}88%,100%{opacity:0;background-position:-115% 0}}
@keyframes leaf-drift{from{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(7px,12px,0) rotate(5deg)}to{transform:translate3d(-4px,26px,0) rotate(14deg)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:1200px){.ambient-leaves{display:none}}
@media(max-width:767px){.motion-layer,.artwork-piece,.artwork-button,summary{--rise:18px;--slide:34px;--float:-1.7px}}
.motion-disabled .motion-layer,.motion-disabled .ambient-leaves{display:none!important}
.motion-disabled .native-replaced,.motion-disabled .artwork-piece{opacity:1!important}
.motion-disabled .motion-enter,.motion-disabled .motion-idle{animation:none!important;opacity:1!important;transform:none!important}
.motion-disabled .motion-sheen{display:none!important}
.motion-disabled .artwork-button,.motion-disabled summary{transform:none!important;transition:none;opacity:1!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
 .motion-layer,.ambient-leaves,.motion-sheen{display:none!important}
 .native-replaced,.artwork-piece{opacity:1!important}
 .motion-enter,.motion-idle,.artwork-button,summary,dialog,dialog::backdrop{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
}