/* Hero right side: a self-playing three-act story with the buyer character.
   Act "send": the buyer mails suppliers one by one. Act "wait": the days run out, nobody answers, he is sad.
   Act "bid": on the bidzaar platform the offers come in by themselves and the buyer is happy. */
.wow-hero .wow-visual{position:relative}
.st{--st-ink:#16121a;--st-line:#f2dbe6;position:relative;width:100%;max-width:520px;margin:24px 0 0;padding:20px 20px 0;background:linear-gradient(180deg,#fff 0%,#fff7fa 100%);border:1px solid var(--st-line);border-radius:28px;box-shadow:0 30px 70px -34px rgba(120,0,50,.35);overflow:hidden;will-change:transform}
.wow-hero .st+.wow-case.case-result{margin-top:22px}

/* The buyer's speech bubble: it sits above the stage and points down at his head. */
.st-say{position:relative;z-index:3;display:flex;align-items:flex-end;height:68px;padding-left:6%}
.st-say p{position:relative;margin:0;max-width:92%;padding:12px 18px;border-radius:20px;background:#16121a;color:#fff;font:500 16px/1.3 Eesti,Arial,sans-serif;box-shadow:0 14px 30px -16px rgba(22,18,26,.6);transform-origin:12% 120%}
.st-say p::after{content:"";position:absolute;left:34px;bottom:-9px;width:18px;height:18px;background:inherit;border-radius:3px;transform:rotate(45deg)}
.st .st-say p.is-win{background:#ff0067;box-shadow:0 14px 30px -16px rgba(255,0,103,.8)}

/* Stage: everything is placed in percentages so the scene scales with the card. */
.st-stage{position:relative;aspect-ratio:1/.9;margin-top:4px;container-type:inline-size}
.st-glow{position:absolute;left:-6%;bottom:-8%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,0,103,.18),rgba(255,0,103,.05) 45%,transparent 70%);transition:filter .6s}
.st[data-act=wait] .st-glow{filter:grayscale(1) brightness(1.1)}
.st-buyer{position:absolute;left:-4%;bottom:0;height:97%;width:auto;max-width:none;opacity:0;transform-origin:50% 100%;pointer-events:none}
.st-buyer-send{opacity:1}

/* Act 1: recipients and flying letters. */
.st-contacts{position:absolute;right:5%;top:4%;display:grid;gap:3cqw}
.st-contact{position:relative;display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:#f6f0f3;border:1.5px dashed #d8c3cd}
.st-contact::before{content:"?";font:500 4.4cqw/1 Eesti,Arial,sans-serif;color:#b7a3ad}
.st-contact::after{content:"";position:absolute;left:-15cqw;top:50%;width:13cqw;border-top:1.5px dashed #ecd3df}
.st-mails{position:absolute;inset:0;pointer-events:none}
.st-mail{position:absolute;left:44%;top:42%;width:12cqw;height:auto;opacity:0;filter:drop-shadow(0 8px 10px rgba(120,0,50,.2))}

/* Act 2: the selection runs to 60 days, nobody takes part. */
.st-deadline{position:absolute;right:4%;top:6%;width:44%;padding:3.6cqw 4cqw;background:#fff;border:1px solid var(--st-line);border-radius:4cqw;box-shadow:0 18px 40px -24px rgba(120,0,50,.35);opacity:0}
.st-deadline-label{display:block;font:500 2.3cqw/1.2 Eesti,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ff0067}
.st-days{margin:1.5cqw 0 0;font-family:Unbounded,Arial,sans-serif;letter-spacing:-.05em;line-height:1;color:var(--st-ink);transition:color .35s}
.st-days b{font-weight:400;font-size:11cqw;font-variant-numeric:tabular-nums}
.st-days span{font-size:4.2cqw}
.st.is-late .st-days{color:#ff0067}
.st-inbox{position:absolute;right:4%;bottom:8%;display:flex;align-items:center;gap:2cqw;padding:2.4cqw 4cqw;border-radius:100px;background:#fff;border:1px solid var(--st-line);font:500 3.4cqw/1 Eesti,Arial,sans-serif;color:#7a717c;opacity:0;box-shadow:0 12px 30px -20px rgba(120,0,50,.35)}
.st-inbox b{font:400 5.4cqw/1 Unbounded,Arial,sans-serif;color:#ff0067}

/* Act 3: the bidzaar window collects offers by itself. */
.st-app{position:absolute;right:3%;top:5%;width:56%;background:#fff;border:1px solid var(--st-line);border-radius:4cqw;box-shadow:0 24px 50px -26px rgba(120,0,50,.4);overflow:hidden;opacity:0}
.st-app-bar{display:flex;align-items:center;gap:1.2cqw;padding:2.6cqw 3.2cqw;border-bottom:1px solid var(--st-line);background:#fff7fa}
.st-app-bar i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#f3c6da}
.st-app-bar img{height:3.4cqw;width:auto;margin-left:auto}
.st-offers{display:grid;gap:2cqw;padding:3cqw}
.st-offer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.4cqw;padding:2cqw;border-radius:2.6cqw;border:1px solid #f6e6ee;background:#fff;transition:background .4s,border-color .4s,box-shadow .4s}
.st-av{display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:50%;background:linear-gradient(145deg,#ff3d8b,#ff0067)}
.st-av svg{width:4cqw;height:4cqw;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-lines{display:grid;gap:1.2cqw}
.st-lines i{display:block;height:1.4cqw;border-radius:2cqw;background:#efe3e9}
.st-lines i+i{width:60%;background:#f6eef2}
.st-score{width:10cqw;height:1.8cqw;border-radius:2cqw;background:#f6e6ee;overflow:hidden}
.st-score i{display:block;height:100%;width:100%;border-radius:inherit;background:#ff0067;transform-origin:left;transform:scaleX(var(--s,0))}
.st-offer.is-best{background:#fff0f6;border-color:#ff0067;box-shadow:0 10px 24px -14px rgba(255,0,103,.7)}
.st-save{position:absolute;right:4%;bottom:7%;padding:2.4cqw 4cqw;border-radius:100px;background:#ff0067;color:#fff;font:500 3.6cqw/1 Eesti,Arial,sans-serif;white-space:nowrap;opacity:0;box-shadow:0 14px 26px -12px rgba(255,0,103,.8)}

/* Before the intro runs (see the head script), the card waits hidden like the left column. */
.wow-js .wow-hero .st{opacity:0}

/* Reduced motion: the last frame of the story, still. */
.st.is-still .st-buyer{opacity:0}.st.is-still .st-buyer-happy{opacity:1}
.st.is-still .st-app,.st.is-still .st-save{opacity:1}.st.is-still .st-contacts{opacity:0}

@media(max-width:760px){
 .st{max-width:none;margin-top:30px;padding:16px 14px 0;border-radius:22px}
 .st-say{height:60px;padding-left:4%}.st-say p{font-size:14px;padding:10px 14px;max-width:88%}
}

/* Before the story script runs, keep the buyer, his bubble and the contacts hidden so they never show
   still and then restart (the head script sets .wow-js when motion is allowed). */
.wow-js .wow-hero :is(.st-buyer,.st-say p,.st-contacts){opacity:0}

/* No glow under the buyer. */
.st-glow{display:none!important}