/* Soft ambient motion; intentional interactions are tweened in app.js. */
.hero-art{animation:illustration-breathe 7s ease-in-out infinite;will-change:transform}
.illustration-caption{animation:caption-sway 8s ease-in-out infinite;transform-origin:bottom left}
.art-stamp{animation:stamp-sway 9s ease-in-out infinite;transform-origin:center}
.art-bottom{animation:signature-sway 8s ease-in-out -3s infinite}
.tiny-heart{display:inline-block;animation:heart-beat 2.8s ease-in-out infinite}
.brand-icon{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.brand:hover .brand-icon{transform:rotate(8deg) scale(1.1)}
.yes-button>span{display:inline-block;animation:button-heart-beat 3s ease-in-out 1s infinite}
.button{transition:background .25s,box-shadow .35s,transform .45s cubic-bezier(.16,1,.3,1),border-color .25s}
.button:hover{transform:translateY(-3px)}
.button:active{transform:translateY(1px) scale(.97);transition-duration:.1s}
.button:disabled{cursor:default;opacity:.7}
.no-button{padding:14px 18px;white-space:nowrap}
.no-button.running{transition:background .2s,box-shadow .2s;will-change:left,top,transform}
.no-button.running:hover,.no-button.running:active{transform:none}
.runaway-heart{position:fixed;pointer-events:none;z-index:31;color:#bd6d58;font:23px Georgia,serif}
.quick-times button{transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.food-option{transition:background .32s,border-color .32s,box-shadow .32s}
.food-option:hover{box-shadow:0 5px 14px #9c584809}
.food-icon{display:inline-block;transform-origin:bottom left;transition:transform .55s cubic-bezier(.2,.8,.2,1.4)}
.food-option:has(input:checked) .food-icon{transform:rotate(-8deg) scale(1.12)}
.checkmark{transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.6,1)}
.progress-item,.progress-item b{transition:color .4s,border-color .4s,background .4s,box-shadow .4s}
.progress-item.active b{box-shadow:0 0 0 4px #b7473e0a}
.progress-line{background:linear-gradient(90deg,#c5977c 50%,#e9dfd1 50%);background-size:200% 100%;background-position:100% 0;transition:background-position .7s cubic-bezier(.16,1,.3,1)}
.progress-item.done + .progress-line{background-position:0 0}
.text-button{transition:color .2s,transform .4s cubic-bezier(.16,1,.3,1)}
.text-button:hover{transform:translateX(3px)}
.dialog-heart{animation:surprised-heart 3s ease-in-out infinite}
dialog[open]{animation:dialog-arrive .62s cubic-bezier(.16,1,.3,1) both}
dialog[open]::backdrop{animation:backdrop-arrive .4s ease both}
dialog.closing::backdrop{animation:backdrop-leave .24s ease both}
.ticket-footer>span{animation:heart-beat 3s ease-in-out infinite}
@keyframes illustration-breathe{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(-.7deg)}}
@keyframes caption-sway{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}
@keyframes stamp-sway{0%,100%{transform:rotate(10deg)}50%{transform:rotate(5deg) translateY(-3px)}}
@keyframes signature-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(-3deg) translateY(-3px)}}
@keyframes heart-beat{0%,32%,60%,100%{transform:scale(1)}40%{transform:scale(1.18)}49%{transform:scale(1.04)}54%{transform:scale(1.13)}}
@keyframes button-heart-beat{0%,35%,65%,100%{transform:scale(1) rotate(0)}43%{transform:scale(1.2) rotate(-9deg)}54%{transform:scale(1.08) rotate(5deg)}}
@keyframes surprised-heart{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(-4deg) scale(1.05)}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(35px) scale(.88) rotate(-2deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes backdrop-arrive{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(5px)}}
@keyframes backdrop-leave{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;will-change:auto!important}}
