/* 2026-09-29 motion pass, shared by the home page and /birria/.
   Every hidden or moving state here sits under html.fxm, which fx-motion.js adds only when reduced motion is off,
   so without the script (or with reduced motion) the page is the finished, still page. Transform and opacity only. */
:root{--fxm-ease:cubic-bezier(.16,1,.3,1);--fxm-spring:cubic-bezier(.34,1.56,.64,1);--fxm-io:cubic-bezier(.65,0,.35,1)}

/* titles: each word rises out of its own mask, left to right */
.fxm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .05em .16em;margin:-.12em -.05em -.16em}
.fxm-w>span{display:inline-block}
html.fxm .fxm-title .fxm-w>span{transform:translateY(110%) rotate(5deg);transform-origin:0 100%;transition:transform 1s var(--fxm-ease);transition-delay:calc(var(--w,0) * 60ms + 60ms)}
html.fxm .fxm-title.is-up .fxm-w>span{transform:none}

/* product page: blocks side by side arrive one after another */
.pp-anim .pp-in{transition-delay:calc(var(--i,0) * 110ms)}

/* icons draw themselves line by line, then wiggle on hover */
html.fxm .fxm-draw{opacity:0;transition:opacity .2s}
html.fxm .fxm-draw *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--fxm-io);transition-delay:calc(var(--i,0) * 140ms + 200ms)}
html.fxm .fxm-draw.is-up{opacity:1}
html.fxm .fxm-draw.is-up *{stroke-dashoffset:0}
@keyframes fxm-wig{0%,100%{rotate:0deg}25%{rotate:-9deg}55%{rotate:7deg}80%{rotate:-3deg}}
@media (hover:hover){html.fxm .pp-three>div:hover .pp-ico{animation:fxm-wig .6s var(--fxm-io)}}

/* review stars pop in one by one */
html.fxm .fxm-stars svg{opacity:0;scale:.2;rotate:-40deg;transition:opacity .25s,scale .55s var(--fxm-spring),rotate .55s var(--fxm-spring);transition-delay:calc(var(--c,0) * 130ms + var(--s,0) * 90ms + 200ms)}
html.fxm .is-up .fxm-stars svg{opacity:1;scale:1;rotate:0deg}

/* numbers roll to their new value (price, quantity) */
.fxm-roll{display:inline-grid;overflow:hidden;vertical-align:bottom;padding:.1em 0;margin:-.1em 0}
.fxm-roll>span{grid-area:1/1;transition:transform .6s var(--fxm-ease),opacity .45s var(--fxm-ease)}
.fxm-swap{transition:opacity .22s var(--fxm-ease),translate .4s var(--fxm-ease)}
.fxm-swap.is-out{opacity:0;translate:0 6px}

/* size cards: the chosen one lifts, a press gives, Best Value wobbles */
html.fxm .pp-size span{transition:border-color .2s,box-shadow .45s var(--fxm-ease),background-color .2s,transform .55s var(--fxm-spring)}
html.fxm .pp-size input:checked+span{transform:translateY(-3px);box-shadow:5px 7px 0 var(--tan)}
@media (hover:hover){html.fxm .pp-size:hover input:not(:checked)+span{transform:translateY(-2px);border-color:rgb(0 0 0 / .4)}}
@keyframes fxm-pick{0%{scale:1}35%{scale:.95}100%{scale:1}}
html.fxm .pp-size.is-picked span{animation:fxm-pick .5s var(--fxm-spring)}
@keyframes fxm-wob{0%{rotate:12deg;scale:1}25%{rotate:-10deg;scale:1.14}50%{rotate:22deg}75%{rotate:6deg}100%{rotate:12deg;scale:1}}
html.fxm .pp-badge.is-wob{animation:fxm-wob .85s var(--fxm-io)}

/* Buy Now: a small nudge and a light sweep when the choice changes */
@keyframes fxm-nudge{0%{scale:1}30%{scale:1.035}65%{scale:.99}100%{scale:1}}
html.fxm [data-buy]{overflow:hidden}
html.fxm [data-buy]::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .3) 50%,transparent 70%);translate:-120% 0;pointer-events:none}
html.fxm [data-buy].fxm-nudge{animation:fxm-nudge .5s var(--fxm-io)}
html.fxm [data-buy].fxm-nudge::after{translate:120% 0;transition:translate .8s var(--fxm-ease)}

/* gallery: a sliding frame on the thumbnails, drag with the mouse */
.fxm-thumbs{position:relative}
html.fxm .fxm-thumbs button[aria-current="true"]{border-color:transparent}
html.fxm .fxm-thumbs button{transition:transform .35s var(--fxm-ease)}
@media (hover:hover){html.fxm .fxm-thumbs button:hover{transform:translateY(-3px)}}
.pp-gal__ind{position:absolute;left:0;top:0;width:72px;height:72px;border:2px solid var(--ink);border-radius:10px;pointer-events:none;will-change:transform}
@media (hover:hover) and (pointer:fine){html.fxm .pp-gal__track{cursor:grab}html.fxm .pp-gal__track.is-drag{cursor:grabbing}}
.pp-gal__track.is-drag img{pointer-events:none}

/* stickers around the gallery (the Bucks ingredient idea): pop in, float, drift with the mouse. Wide screens only. */
.fxm-float{position:absolute;left:0;right:0;top:0;aspect-ratio:1;pointer-events:none;z-index:2;display:none}
@media (min-width:1200px){.fxm-float{display:block}}
.fxm-st{position:absolute;display:block;rotate:var(--r,0deg);opacity:0;scale:.2;transition:opacity .3s,scale .8s var(--fxm-spring);transition-delay:calc(var(--k) * 160ms)}
.fxm-float.is-up .fxm-st{opacity:1;scale:1}
.fxm-st img{width:100%;height:auto;animation:fxm-bob var(--bob,5s) ease-in-out infinite;animation-delay:calc(var(--k) * -1.7s);filter:drop-shadow(0 8px 10px rgb(0 0 0 / .22))}
@keyframes fxm-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.fxm-st--a{right:-54px;top:-40px;width:82px;--r:18deg;--bob:5.2s}
.fxm-st--b{left:-68px;top:52%;width:86px;--r:-12deg;--bob:6.1s;display:none}
.fxm-st--c{right:3%;bottom:-104px;width:128px;--r:-6deg;--bob:4.6s}
@media (min-width:1360px){.fxm-st--b{display:block}}

/* How To Make It: a dashed arrow draws from step to step as you scroll */
html.fxm .pp-recipe__steps{position:relative}
.fxm-arc{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.fxm-arc .d{fill:none;stroke:rgb(0 0 0 / .5);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.fxm-arc .m{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:1}
.fxm-arc .h{fill:none;stroke:rgb(0 0 0 / .5);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s}

/* steam: a few wisps rise and fade (the pot sticker, the birria photo) */
.fxm-steam{position:absolute;pointer-events:none;overflow:visible}
.fxm-steam path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 100%}
@keyframes fxm-steam{0%{opacity:0;transform:translateY(8px) scaleX(.85)}30%{opacity:.9}100%{opacity:0;transform:translateY(-16px) scaleX(1.2)}}
.fxm-steam.is-on path{animation:fxm-steam 3s ease-out infinite;animation-delay:calc(var(--k) * 1s)}
.pp-spot .fxm-steam{left:50%;top:-24%;width:36%;translate:-50% 0}

/* Pozole: the Sold Out stamp thumps down once */
@keyframes fxm-stamp{0%{opacity:0;scale:2.6;rotate:-24deg}62%{opacity:1;scale:.93;rotate:-8deg}80%{scale:1.04}100%{opacity:1;scale:1;rotate:-9deg}}
@keyframes fxm-jolt{0%,100%{translate:0 0}30%{translate:0 3px}60%{translate:0 -1px}}
html.fxm .fxm-stamp .pp-stamp{opacity:0}
html.fxm .fxm-stamp.is-up .pp-stamp{animation:fxm-stamp .6s cubic-bezier(.5,0,.4,1) .35s both}
html.fxm .fxm-stamp.is-up h2{animation:fxm-jolt .35s ease-out .72s}

/* FAQ: rows arrive in turn and open smoothly (browsers without this just open instantly) */
html.fxm .fxm-faq details{opacity:0;translate:0 14px;transition:opacity .6s var(--fxm-ease),translate .8s var(--fxm-ease);transition-delay:calc(var(--i,0) * 80ms)}
html.fxm .fxm-faq.is-up details{opacity:1;translate:0 0}
html.fxm .pp-faq details{interpolate-size:allow-keywords}
html.fxm .pp-faq details::details-content{height:0;overflow:clip;transition:height .45s var(--fxm-ease),content-visibility .45s allow-discrete}
html.fxm .pp-faq details[open]::details-content{height:auto}

/* home: Known For Our Birria photo zooms slowly as you pass; steam over the consomme.
   The steam is placed for the stand-in photo: when Eric's photo replaces it, set --sx/--sy on the figure (or remove data-fxm-steam). */
.fxm-shot{position:relative}
.fxm-shot img,.fxm-shot video{transform-origin:var(--sx,88%) 55%;will-change:transform}
.fxm-shot .fxm-steam{left:var(--sx,88%);top:var(--sy,40%);width:11%;translate:-50% -100%}

/* home: Why photos drift inside their torn frames */
html.fxm .fx-why__photo img{will-change:transform}

/* home: size cards tilt toward the mouse, spring back, prices roll up */
html.fxm .fx-size{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:border-color .25s,background-color .25s,transform .7s var(--fxm-spring)}
html.fxm .fx-size.is-tilt{transition:border-color .25s,background-color .25s,transform .15s linear}
.fxm-mask{display:block;overflow:hidden}
.fxm-mask>span{display:inline-block}
html.fxm .fxm-mask>span{transform:translateY(105%);transition:transform .8s var(--fxm-ease);transition-delay:calc(var(--i,0) * 140ms + 350ms)}
html.fxm .is-up .fxm-mask>span{transform:none}