/* Every source-coordinate frame is immobile. Entrance / idle / interaction are separate. */
.layout{position:relative}
.motion-boot .layout .zone:first-child .art{opacity:0}
.native-replaced{opacity:0!important}
.motion-stage{position:absolute;z-index:2;top:0;left:50%;width:min(100%,1000px);height:100%;transform:translateX(-50%);pointer-events:none}
.motion-unit{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none}
.motion-enter,.motion-idle{position:relative;width:100%;height:100%;transform-origin:50% 55%}
.motion-paint{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.motion-paint>img{width:100%;height:100%;pointer-events:none}
.motion-unit[data-state=waiting]>.motion-enter{opacity:0}
.motion-unit[data-state=revealed]>.motion-enter{animation:enter-rise 820ms cubic-bezier(.16,.84,.2,1) var(--delay,0ms) both}
.motion-unit[data-enter=pop][data-state=revealed]>.motion-enter{animation-name:enter-pop;animation-duration:1120ms}
.motion-unit[data-enter=left][data-state=revealed]>.motion-enter{animation-name:enter-left;animation-duration:950ms}
.motion-unit[data-enter=right][data-state=revealed]>.motion-enter{animation-name:enter-right;animation-duration:950ms}
.motion-unit[data-enter=fade][data-state=revealed]>.motion-enter{animation-name:enter-fade;animation-duration:750ms}
.motion-unit[data-enter=still]>.motion-enter{opacity:1!important;animation:none!important}
.motion-unit[data-state=settled]>.motion-enter{opacity:1;transform:none}
.motion-unit[data-idle=mascot][data-state=settled] .motion-idle{animation:mascot-float 4100ms ease-in-out infinite}
.motion-unit[data-idle=title][data-state=settled] .motion-idle{animation:title-breathe 5400ms ease-in-out infinite}
.motion-sheen{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(108deg,transparent 38%,#fff5 46%,#fffce6c9 50%,#fff5 54%,transparent 62%);background-size:270% 100%;mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat}
.motion-unit[data-state=settled] .motion-sheen{animation:art-sheen 7200ms ease-in-out var(--sheen-delay,700ms) infinite}
.motion-active .hotspot{z-index:4;isolation:isolate;transition:filter .2s ease,transform .18s ease}
.motion-active .hotspot::after{content:"";position:absolute;inset:1% 1.2%;border-radius:999px;pointer-events:none;background:linear-gradient(108deg,transparent 40%,#fff9 50%,transparent 60%);background-size:300% 100%;opacity:0;animation:art-sheen 6100ms ease-in-out var(--button-delay,0ms) infinite}
.motion-active .hotspot[data-state=waiting]{opacity:0}
.motion-active .hotspot[data-state=revealed]{animation:enter-rise 750ms cubic-bezier(.16,.84,.2,1) both}
@media(hover:hover){.motion-active .hotspot:hover{filter:brightness(1.07) drop-shadow(0 3px 5px #27201024);transform:translateY(-2px)}}
.motion-active .hotspot:active{transform:translateY(2px) scale(.985)}
.motion-active .hotspot:focus-visible{opacity:1!important;animation:none!important}
.ambient-leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient-leaf{position:absolute;left:var(--leaf-x);top:var(--leaf-y);width:var(--leaf-size);height:auto;opacity:.38;animation:leaf-drift var(--leaf-time,18s) ease-in-out var(--leaf-delay,0s) infinite alternate}
.motion-paused .motion-idle,.motion-paused .motion-sheen,.motion-paused .ambient-leaf,.motion-paused .hotspot::after{animation-play-state:paused!important}
.motion-unit[data-visible=false] .motion-idle,.motion-unit[data-visible=false] .motion-sheen{animation-play-state:paused!important}
.motion-active dialog[open]{animation:dialog-enter .38s cubic-bezier(.16,.84,.2,1.05) both}
.motion-active dialog::backdrop{animation:backdrop-enter .22s ease both}
.reading-progress{position:fixed;z-index:20;left:0;top:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:#d29c22;pointer-events:none;opacity:.8}
@keyframes enter-rise{from{opacity:0;transform:translate3d(0,var(--rise,32px),0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes enter-fade{from{opacity:0}to{opacity:1}}
@keyframes enter-pop{0%{opacity:0;transform:translateY(var(--rise,32px)) scale(.76)}58%{opacity:1;transform:translateY(-4px) scale(1.028)}78%{transform:translateY(1px) scale(.995)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes enter-left{0%{opacity:0;transform:translate3d(calc(-1 * var(--slide,95px)),14px,0) scale(.97)}75%{opacity:1;transform:translate3d(3px,0,0) scale(1.003)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes enter-right{0%{opacity:0;transform:translate3d(var(--slide,95px),14px,0) scale(.97)}75%{opacity:1;transform:translate3d(-3px,0,0) scale(1.003)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(var(--float,-3px)) rotate(.35deg)}}
@keyframes title-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
@keyframes art-sheen{0%,65%{opacity:0;background-position:150% 0}72%{opacity:.6}88%,100%{opacity:0;background-position:-110% 0}}
@keyframes leaf-drift{0%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(7px,17px,0) rotate(7deg)}100%{transform:translate3d(-4px,35px,0) rotate(17deg)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(15px) scale(.9)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.ambient-leaves{display:none}}
@media(max-width:767px){.motion-stage{width:100%}.motion-unit,.hotspot{--rise:20px;--slide:36px;--float:-1.8px}.reading-progress{height:2px}}
.motion-disabled .motion-stage,.motion-disabled .ambient-leaves,.motion-disabled .reading-progress{display:none!important}
.motion-disabled .art{opacity:1!important}
.motion-disabled .hotspot{opacity:1!important;animation:none!important;transform:none!important}
.motion-disabled .hotspot::after{display:none!important}
@media(prefers-reduced-motion:reduce){
 .motion-stage,.ambient-leaves,.reading-progress{display:none!important}
 .art{opacity:1!important}
 .hotspot{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
 .hotspot::after{display:none!important}
 dialog,dialog::backdrop{animation:none!important}
}

:root{--motion-css-ready:1}