/* Flying products: a wingless product picture with the shared brand wings layered behind it. The wings flutter from
   their roots, the product lifts off its shadow. Positions come from assets/fly-anchors.js as fractions of the 4:3
   picture, mapped onto the visible (contained) picture with container query units, so they line up at any size. */
.fly{position:relative;display:block;container-type:size;filter:none!important;object-fit:initial}
.fly .fly-body{position:absolute;inset:0;transition:translate .45s cubic-bezier(.3,1.25,.5,1)}
.fly .fly-body,.fly .fly-shadow{
 --iw:min(100cqw,133.333cqh);--ih:calc(var(--iw)*.75);--ox:calc((100cqw - var(--iw))/2);--oy:calc((100cqh - var(--ih))/2)}
.fly:not(.ready) .fly-body{opacity:0}   /* product and wings appear together, once the picture has loaded (fly.js adds .ready) */
:is(.card,.wcard):has(.fly){-webkit-tap-highlight-color:transparent}   /* the lift is the tap feedback */
.fly img.fly-prod{position:absolute;left:var(--ox);top:var(--oy);width:var(--iw);height:var(--ih);object-fit:contain;filter:none;z-index:2}
.fly img.fly-layer{position:absolute;left:var(--ox);top:var(--oy);width:var(--iw);height:var(--ih);object-fit:contain;filter:none;z-index:3}.fly img.fly-layer[hidden]{display:none}
.fly img.fw{position:absolute;height:auto;filter:none;object-fit:initial;z-index:1;pointer-events:none;rotate:var(--r)}
.fly img.fw-l{left:calc(var(--ox) + var(--iw)*var(--lx));top:calc(var(--oy) + var(--ih)*var(--ly));width:calc(var(--iw)*var(--lw));--r:calc(var(--lr)*1deg);transform-origin:100% 70%}
.fly img.fw-r{left:calc(var(--ox) + var(--iw)*var(--rx));top:calc(var(--oy) + var(--ih)*var(--ry));width:calc(var(--iw)*var(--rw));--r:calc(var(--rr)*1deg);transform-origin:0 70%}
.fly .fly-shadow{position:absolute;left:50%;top:calc(var(--oy) + var(--ih)*var(--sy) - var(--ih)*.035);width:calc(var(--iw)*var(--sw));height:calc(var(--ih)*.07);
 translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(23,52,92,.32),rgba(23,52,92,0));transition:scale .45s,opacity .45s}

/* Wing beats: a quick burst on take-off, then a soft flutter with rests. Left and right mirror each other. */
@keyframes fw-burst-l{from{transform:rotate(12deg)}to{transform:rotate(-20deg)}}
@keyframes fw-burst-r{from{transform:rotate(-12deg)}to{transform:rotate(20deg)}}
@keyframes fw-idle-l{0%,58%,100%{transform:none}64%,76%{transform:rotate(-14deg)}70%,82%{transform:rotate(6deg)}}
@keyframes fw-idle-r{0%,58%,100%{transform:none}64%,76%{transform:rotate(14deg)}70%,82%{transform:rotate(-6deg)}}
@keyframes fly-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2%)}}
@keyframes fly-hop{0%,100%{translate:0 0}28%,72%{translate:0 -6%}}

/* Desktop: hover or keyboard focus on a menu card lifts the product and beats its wings while it stays there. */
@media (hover:hover) and (pointer:fine){
 :is(.card,.wcard):is(:hover,:focus-visible) .fly .fly-body{translate:0 -6%;animation:fly-bob 2.6s ease-in-out .45s infinite}
 :is(.card,.wcard):is(:hover,:focus-visible) .fly .fly-shadow{scale:.78;opacity:.6}
 :is(.card,.wcard):is(:hover,:focus-visible) .fly .fw-l{animation:fw-burst-l .15s ease-in-out 6 alternate,fw-idle-l 2.2s ease-in-out .9s infinite}
 :is(.card,.wcard):is(:hover,:focus-visible) .fly .fw-r{animation:fw-burst-r .15s ease-in-out 6 alternate,fw-idle-r 2.2s ease-in-out .9s infinite}
}
/* Phones: one small hop as a card settles into view (set by fly.js), and a lift while a finger is on the card. */
.fly.hop .fly-body{animation:fly-hop 1.3s cubic-bezier(.4,0,.3,1)}
.fly.hop .fly-shadow{animation:fly-shadow-hop 1.3s cubic-bezier(.4,0,.3,1)}
@keyframes fly-shadow-hop{0%,100%{scale:1;opacity:1}28%,72%{scale:.8;opacity:.6}}
.fly.hop .fw-l{animation:fw-burst-l .14s ease-in-out .1s 8 alternate}
.fly.hop .fw-r{animation:fw-burst-r .14s ease-in-out .1s 8 alternate}
.fly.press .fly-body{translate:0 -5%;transition-duration:.18s}
.fly.press .fly-shadow{scale:.82;opacity:.65}
.fly.press .fw-l{animation:fw-burst-l .12s ease-in-out 4 alternate}
.fly.press .fw-r{animation:fw-burst-r .12s ease-in-out 4 alternate}

/* Product sheet: the product lifts off as the sheet opens, then hovers with an occasional flutter. */
.stage:has(.fly)>.shadow{display:none}   /* the rig brings its own ground shadow */
.stage .fly{width:100%;height:min(440px,52vh);flex:none}
@media(max-width:899px){.stage .fly{height:100%}}
.stage .fly .fly-body{translate:0 -6%;animation:fly-bob 3.4s ease-in-out infinite}
.stage .fly .fly-shadow{scale:.78;opacity:.6}
.stage .fly .fw-l{animation:fw-idle-l 2.8s ease-in-out infinite}
.stage .fly .fw-r{animation:fw-idle-r 2.8s ease-in-out infinite}
/* Set by order.mjs only when the sheet opens, so redraws (quantity, options) don't restart the take-off. */
.stage .fly.liftoff .fly-body{animation:fly-liftoff .9s cubic-bezier(.3,1.3,.5,1) both,fly-bob 3.4s ease-in-out .9s infinite}
@keyframes fly-liftoff{from{translate:0 0}to{translate:0 -6%}}
.stage .fly.liftoff .fly-shadow{animation:fly-shadow-lift .9s ease-out both}
@keyframes fly-shadow-lift{from{scale:1;opacity:1}to{scale:.78;opacity:.6}}
.stage .fly.liftoff .fw-l{animation:fw-burst-l .14s ease-in-out .1s 8 alternate,fw-idle-l 2.8s ease-in-out 1.3s infinite}
.stage .fly.liftoff .fw-r{animation:fw-burst-r .14s ease-in-out .1s 8 alternate,fw-idle-r 2.8s ease-in-out 1.3s infinite}
/* Flying into the bag: stay lifted, leave the shadow behind and keep flapping. */
.flyer.fly .fly-body{translate:0 -6%}
.flyer.fly .fly-shadow{opacity:0}
.flyer.fly .fw-l{animation:fw-burst-l .13s ease-in-out infinite alternate}
.flyer.fly .fw-r{animation:fw-burst-r .13s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
 .fly .fly-body,.fly .fly-shadow,.fly img.fw{animation:none!important;transition:none!important}
 .fly .fly-body{translate:none!important}
 .fly .fly-shadow{scale:none!important;opacity:1!important}
}