/* animated search placeholder (preview /search-anim/a..i/) */
.sa,.sa-x{position:absolute;top:0;bottom:0;align-items:center;pointer-events:none;white-space:nowrap}
.sa{display:none;overflow:hidden;z-index:2;font-family:var(--f);font-weight:600;letter-spacing:-.01em;color:#a3a19a;line-height:1.2}
.sa-on .sa{display:flex}.sa-on input::placeholder{color:transparent}
/* before the animation starts and between restarts: empty box, no placeholder flash (focus or reduced motion shows the real one) */
@media (prefers-reduced-motion:no-preference){input[data-anim]:not(:focus)::placeholder{color:transparent}}
.sa-p,.sa-t{white-space:pre}.sa-t{color:#6b6a66}
.sa-c{display:inline-block;flex:none;width:2px;height:1.05em;margin-left:2px;background:var(--spot);border-radius:1px}
.sa-c.blink{animation:sa-b 1.06s ease-in-out infinite}
@keyframes sa-b{0%,40%{opacity:1}55%,90%{opacity:0}100%{opacity:1}}
.sa-mc .sa-c,.sa-mf .sa-c,.sa-mh .sa-c{display:none}
/* effects layer under the text */
.sa-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sa-me input,.sa-me .fx-g,.sa-mf input,.sa-mf .fx-g,.sa-mg input,.sa-mg .fx-g{position:relative;z-index:1}
/* B / D: right-side hint */
.sa-x{display:flex;gap:8px;z-index:2;opacity:0;transform:translateY(4px);transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.sa-on .sa-x.on{opacity:1;transform:none}
.sa-x svg{height:1.9em;width:auto;flex:none}
.sa-sc,.sa-n{font:500 13px var(--m);letter-spacing:.04em;color:var(--spot);border:1.5px solid var(--spot);padding:3px 7px;border-radius:999px}
.sa-n{color:var(--mut);border-color:#c9c7c0}
/* C: vertical roll */
.sa-mc .sa-w{position:relative;display:inline-block;height:1.3em;overflow:hidden;transition:width .52s cubic-bezier(.2,.7,.2,1)}
.sa-r{position:absolute;left:0;top:0;line-height:1.3em;color:#6b6a66;white-space:pre;transition:transform .52s cubic-bezier(.2,.7,.2,1),opacity .42s ease}
.sa-r.in{transform:translateY(100%);opacity:0}.sa-r.out{transform:translateY(-100%);opacity:0}
.sa-mc .sa-r:first-child:last-child{position:relative}
/* E: fill level */
.sa-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(31,69,214,.1);transition:height .32s cubic-bezier(.3,.6,.3,1)}
.sa-fill svg{position:absolute;left:0;bottom:100%;width:200%;height:10px;fill:rgba(31,69,214,.1);animation:sa-wave 2.8s linear infinite}
.sa-me:not(.sa-on) .sa-fill{height:0!important}
@keyframes sa-wave{to{transform:translateX(-50%)}}
/* F: drop + ripple, word surfaces */
.sa-drop{position:absolute;top:-14px;width:7px;height:10px;margin-left:-3.5px;background:var(--spot);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:sa-fall .43s cubic-bezier(.55,0,.9,.5) forwards}
@keyframes sa-fall{to{top:calc(50% - 5px);opacity:.2}}
.sa-rip{position:absolute;top:50%;width:90px;height:22px;margin:-11px 0 0 -45px;border:1.5px solid rgba(31,69,214,.6);border-radius:50%;transform:scale(.05);opacity:0;animation:sa-rip 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sa-rip{0%{transform:scale(.05);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.sa-mf .sa-t,.sa-mh .sa-t,.sa-mi .sa-t{transition:opacity .4s ease,filter .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.sa-mf .sa-t.rise{transition:none;opacity:0;filter:blur(5px);transform:translateY(.35em) scaleY(.85)}
.sa-t.gone{opacity:0;filter:blur(3px);transform:translateY(-.15em)}
.sa-mf .sa-t{transition-duration:.7s,.7s,.8s}
/* G: bubbles */
.sa-bb{position:absolute;top:72%;border:1.5px solid rgba(31,69,214,.7);background:rgba(31,69,214,.06);border-radius:50%;opacity:0;animation:sa-bub var(--dur,1.2s) cubic-bezier(.3,.5,.4,1) forwards}
@keyframes sa-bub{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-50px) scale(1.15)}}
/* H: liquid surface, letters rise in a wave and settle */
.sa-l{display:inline-block;white-space:pre;animation:sa-surf .62s cubic-bezier(.2,.8,.25,1.15) both}
@keyframes sa-surf{0%{opacity:0;filter:blur(4px);transform:translateY(.45em) skewX(-8deg) scaleY(.7)}60%{opacity:1;filter:blur(.5px)}100%{opacity:1;filter:none;transform:none}}
/* I: pour from the bottle */
.sa-bt{display:inline-flex;flex:none;height:1.5em;margin:0 .3em 0 0;transform-origin:50% 70%;transition:transform .42s cubic-bezier(.3,.6,.3,1),opacity .3s ease,margin .42s cubic-bezier(.3,.6,.3,1);opacity:0;transform:translateY(.2em)}
.sa-bt svg{height:100%;width:auto}.sa-bt.tilt{opacity:1;margin-right:.95em;transform:rotate(58deg) translate(-.05em,-.2em)}.sa-bt:not(.tilt):not(.away){opacity:1}.sa-bt.away{opacity:0}
.sa-mi .sa-l{animation:sa-pour .38s cubic-bezier(.3,.6,.3,1) both}
@keyframes sa-pour{0%{opacity:0;transform:translate(-.3em,-.45em) scale(.6)}100%{opacity:1;transform:none}}
.sa-mi .sa-c{display:none}
@media (max-width:560px){.sa-x svg{height:1.6em}.sa-sc,.sa-n{font-size:11px;padding:2px 6px}}