/* Storefront to website. Every element is laid out where it sits on the finished
   site (the no-JS and reduced-motion view); showcase.js measures each one and sets
   --dx/--dy/--sx/--sy so that at --t:0 it sits on the storefront instead. */
#show{position:relative;overflow-x:clip} /* clip, not hidden: keeps the sticky stage working */
#show .track{position:relative}
#show .stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vh,22px);padding:clamp(16px,3vh,32px) 16px}
#show.anim .track{height:calc(100svh - var(--hh) + 190vh)}
#show.anim .stage{position:sticky;top:var(--hh);height:calc(100svh - var(--hh))}

#show .fit{position:relative;width:calc(var(--W) * var(--k) * 1px);height:calc(var(--H) * var(--k) * 1px);flex:none}
#show .canvas{position:absolute;left:0;top:0;width:calc(var(--W) * 1px);height:calc(var(--H) * 1px);transform:scale(var(--k));transform-origin:0 0}
#show{--W:1280;--H:760;--k:.62}
#show.portrait{--W:640;--H:1000;--k:.53}
/* scale fallbacks for when the script doesn't run; the script sets the exact value */
@media (max-width:820px){#show{--k:.5}}
@media (max-width:680px){#show{--k:.36}}
@media (max-width:500px){#show{--k:.26}}
@media (max-width:380px){#show{--k:.22}}
@media (min-width:1100px){#show{--k:.8}}
@media (min-width:1500px){#show{--k:1}}

/* the camera: a calm push-in, no rotation */
#show .world{position:absolute;inset:0;transform-origin:50% 60%;transform:scale(calc(.92 + var(--t,1) * .08))}

/* ---------- piece helpers: each reads only its own --t ---------- */
#show .fade{opacity:var(--t,1)}
#show .out{opacity:calc(1 - var(--t,1))}
#show .rise{opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 16px))}
#show .mo{position:absolute;transform-origin:0 0;
  transform:translate(calc(var(--dx,0px) * (1 - var(--t,1))),calc(var(--dy,0px) * (1 - var(--t,1))))
            scale(calc(1 + (var(--sx,1) - 1) * (1 - var(--t,1))),calc(1 + (var(--sy,1) - 1) * (1 - var(--t,1))))}
#show .skin{position:absolute;inset:0}
#show .world>*{position:absolute}

/* ---------- finished website: desktop layout (the B positions) ---------- */
#show .m-facade{left:110px;top:60px;width:800px;height:620px;z-index:1}
#show .m-awning{left:110px;top:60px;width:800px;height:36px;z-index:3}
#show .m-fascia{left:110px;top:96px;width:800px;height:64px;z-index:3;background:var(--accent)}
#show .m-name{left:142px;top:117px;z-index:4;max-width:420px;overflow:hidden;white-space:nowrap;color:#fff;font:700 22px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase}
#show .m-nav{left:640px;top:120px;z-index:4;display:flex;gap:26px;color:#fff;font:500 14px/1 var(--text)}
#show .m-window{left:520px;top:196px;width:350px;height:250px;z-index:2;background:#C9D4D9;overflow:hidden}
#show .m-decal{left:150px;top:198px;width:340px;z-index:3;font:700 36px/1 var(--display);letter-spacing:-.02em;text-transform:uppercase}
#show .m-para{left:150px;top:324px;width:320px;z-index:3;font:400 15px/1.45 var(--text);color:var(--ink-soft)}
#show .m-open{left:150px;top:392px;width:180px;height:48px;z-index:6}
#show .m-hours{left:150px;top:484px;width:230px;height:140px;z-index:6}
#show .m-number{left:395px;top:484px;width:230px;height:140px;z-index:3}
#show .m-book{left:640px;top:484px;width:230px;height:140px;z-index:3}
#show .m-door{left:950px;top:130px;width:240px;height:500px;z-index:5}
#show .pave{left:0;top:700px;width:1280px;height:60px;background:#AEBBC1}
#show .aboard{left:92px;top:572px;width:92px;height:128px;background:var(--ink);color:#fff;display:grid;align-content:center;justify-items:center;gap:6px;text-align:center;padding:8px;
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
#show .aboard b{font:700 11px/1 var(--display);text-transform:uppercase}
#show .aboard span{font:500 11px/1.2 var(--text)}

/* ---------- finished website: phone-first layout ---------- */
#show.portrait .m-door{left:150px;top:60px;width:340px;height:880px;z-index:8}
#show.portrait .m-facade{left:164px;top:74px;width:312px;height:852px}
#show.portrait .m-awning{left:164px;top:74px;width:312px;height:30px}
#show.portrait .m-fascia{left:164px;top:104px;width:312px;height:56px}
#show.portrait .m-name{left:184px;top:123px;max-width:270px;font-size:18px}
#show.portrait .m-decal{left:184px;top:186px;width:272px;font-size:28px}
#show.portrait .m-window{left:184px;top:300px;width:272px;height:200px}
#show.portrait .m-open{left:184px;top:520px;width:272px;height:48px}
#show.portrait .m-hours{left:184px;top:586px;width:272px;height:96px}
#show.portrait .m-number{left:184px;top:694px;width:272px;height:96px}
#show.portrait .m-nav,#show.portrait .m-para,#show.portrait .m-book,#show.portrait .aboard{display:none}
#show.portrait .pave{top:920px;width:640px;height:80px}
#show.portrait .m-open,#show.portrait .m-hours{z-index:9}

/* ---------- skins ---------- */
#show .wall svg{display:block}
#show .page{background:#F6F8F9}
#show .stripes{background:repeating-linear-gradient(90deg,var(--accent) 0 40px,#F6F8F9 40px 80px);
  -webkit-mask:radial-gradient(circle at 20px 100%,transparent 19px,#000 20px) 0 0/40px 100% repeat-x;mask:radial-gradient(circle at 20px 100%,transparent 19px,#000 20px) 0 0/40px 100% repeat-x}
#show .chrome{background:#DCE3E6;display:flex;align-items:center;gap:7px;padding:0 14px}
#show .chrome i{width:9px;height:9px;border-radius:50%;background:#B7C3C9}
#show .chrome b{margin-left:16px;font:500 11px/1 var(--text);color:var(--ink-soft);background:#F6F8F9;padding:5px 12px}
#show.portrait .chrome i,#show.portrait .chrome b{display:none}

#show .display{position:absolute;inset:0}
#show .display>*{position:absolute;display:block}
#show .shelf{left:6%;right:6%;height:3.2%;background:var(--ink)}
#show .s1{top:50%}
#show .s2{top:84%}
#show .jar{bottom:50%;width:9%;height:16%;background:var(--accent);border-radius:6px 6px 2px 2px}
#show .j1{left:12%}#show .j2{left:24%;height:21%;background:var(--ochre)}#show .j3{left:36%;height:13%;background:var(--accent-deep)}
#show .box{bottom:16%;background:#8DA2AC}
#show .b1{left:12%;width:20%;height:22%}
#show .b2{left:34%;width:14%;height:30%;background:var(--deep)}
#show .plant{left:62%;bottom:16%;width:18%;height:52%}
#show .plant::before{content:"";position:absolute;left:22%;right:22%;bottom:0;height:34%;background:var(--accent)}
#show .plant i{position:absolute;left:0;right:0;top:0;bottom:30%;border-radius:50% 50% 46% 46%;background:var(--sage)}
#show .vase{left:56%;bottom:50%;width:8%;height:22%;border-radius:40% 40% 10% 10%;background:var(--paper)}
#show .round{left:70%;bottom:50%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--ochre)}
#show .glass{border:10px solid var(--ink)}
#show .glass i{position:absolute;left:-10%;top:0;width:18%;height:140%;background:rgba(255,255,255,.28);transform:rotate(24deg);transform-origin:0 0}


#show .plate{background:var(--paper);color:var(--ink);display:grid;place-items:center;font:700 13px/1 var(--display)}
#show .card,#show .card-solo{background:#E3E9EC;padding:18px 18px;display:grid;align-content:start;gap:6px;color:var(--ink)}
#show .card b,#show .card-solo b{font:700 14px/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
#show .card span,#show .card-solo span{font:400 14px/1.35 var(--text)}
#show .card .cta,#show .card-solo .cta{margin-top:auto;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#show.portrait .card{padding:14px 16px;gap:4px}
#show.portrait .card .cta{margin-top:0}

#show .door{background:var(--accent-deep);border:8px solid var(--ink)}
#show .door .pane{position:absolute;left:12%;right:12%;top:8%;height:46%;background:#C9D4D9}
#show .door .handle{position:absolute;right:10%;top:58%;width:6%;height:9%;background:var(--ochre)}
#show .phone{background:var(--ink);border-radius:30px;padding:10px}
#show .screen{position:relative;height:100%;border-radius:22px;background:#F6F8F9;overflow:hidden;padding:0 14px}
#show .screen::before{content:"";position:absolute;top:8px;left:50%;width:56px;height:14px;margin-left:-28px;border-radius:8px;background:var(--ink);z-index:2}
#show .p-head{margin:0 -14px 16px;padding:38px 14px 12px;background:var(--accent);color:#fff;font:700 14px/1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden}
#show .p-h1{font:700 21px/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px}
#show .p-img{height:96px;background:#C9D4D9;position:relative;margin-bottom:12px}
#show .p-img i{position:absolute;bottom:18%;width:14%;height:40%;background:var(--accent)}
#show .p-img i:nth-child(1){left:12%}#show .p-img i:nth-child(2){left:32%;height:56%;background:var(--ochre)}
#show .p-img i:nth-child(3){left:58%;width:26%;height:30%;background:var(--deep)}
#show .p-btn{background:var(--accent);color:#fff;text-align:center;font:600 13px/1 var(--text);padding:13px 0;margin-bottom:12px}
#show .p-row{display:flex;justify-content:space-between;background:#E3E9EC;padding:11px 12px;margin-bottom:6px;font:500 12px/1 var(--text)}
#show .p-row b{font:700 11px/1 var(--display);text-transform:uppercase}
/* on the phone-first layout the door becomes the phone frame around the site itself */
#show.portrait .phone{background:transparent;border:14px solid var(--ink);border-radius:40px;padding:0}
#show.portrait .screen{background:transparent}
#show.portrait .screen>*{display:none}

#show .m-open .string{position:absolute;left:20%;right:20%;top:-30%;height:30%;border:2px solid var(--ink);border-bottom:0;
  clip-path:polygon(0 100%,50% 0,100% 100%)}
#show .sign-a{background:var(--paper);color:var(--accent);display:grid;place-items:center;font:700 22px/1 var(--display);text-transform:uppercase;border:2px solid var(--accent)}
#show .sign-b{background:var(--accent);color:#fff;display:grid;place-items:center;font:600 16px/1 var(--text)}
#show .placard{background:var(--paper);color:var(--ink);display:grid;align-content:center;justify-items:center;gap:8px;text-align:center}
#show .placard b{font:700 30px/1 var(--display);text-transform:uppercase}
#show .placard span{font:600 24px/1 var(--text)}

/* ---------- chrome around the stage ---------- */
#show .hint{position:absolute;left:50%;top:96%;transform:translate(-50%,-50%);font:600 15px/1 var(--text);color:var(--ink);display:flex;align-items:center;gap:10px;z-index:9}
#show .hint::after{content:"";width:2px;height:22px;background:var(--ink);animation:sw-drip 1.8s ease-in-out infinite}
@keyframes sw-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
#show .label{font:700 clamp(18px,1.6vw,24px)/1.1 var(--display);letter-spacing:-.01em;text-transform:uppercase;text-align:center}
#show .caption{font:500 var(--step-lead)/1.2 var(--text);text-align:center;min-height:1.2em}
#show .steps{display:flex;gap:clamp(12px,2.4vw,32px);list-style:none;padding:0;font:500 var(--step-small)/1 var(--text);color:var(--ink-soft);flex-wrap:wrap;justify-content:center}
#show .steps li{display:flex;align-items:center;gap:8px;transition:color .3s}
#show .steps li::before{content:"";width:8px;height:8px;background:#B7C3C9;transition:background .3s}
#show .steps li.on{color:var(--ink)}
#show .steps li.on::before{background:var(--accent)}
#show .rail{width:min(420px,70vw);height:3px;background:var(--ground-2);position:relative;overflow:hidden}
#show .rail i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1))}
@media (max-width:640px){#show .steps{gap:8px 14px}#show .caption{font-size:17px;min-height:2.4em}}
@media (prefers-reduced-motion:reduce){#show .hint::after{animation:none}}