/* slide 02 "Start with an address" (scene s3): the phone's search, map and property loading, the data cards beside the
   phone, and the survey of the lot behind; every layer hidden off this scene (Jeremy 2026-10-10) */
.scr > .s2-ovr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.scr > .s2-ovr.s2-on{opacity:1}
.s2-ovr text{font-family:var(--body);fill:#1b1c1e}

/* A1 home: the dropdown under the search box, the result row, Make Offer pressed */
.s2-home .h-dd{opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .35s cubic-bezier(.3,1.3,.5,1)}
.s2-home .h-dd.on{opacity:1;transform:none}
.s2-home .h-pn{transition:height .35s cubic-bezier(.3,1.2,.5,1)}
.s2-home .h-srch{opacity:0;transition:opacity .2s}.s2-home .h-srch.on{opacity:1}
.s2-home .h-spin{transform-box:fill-box;transform-origin:center;animation:s2spin .8s linear infinite}
.s2-home .h-res{opacity:0;transform:translateY(-22px);transition:opacity .3s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.s2-home .h-res.on{opacity:1;transform:none}
.s2-home .h-hl{opacity:0;transition:opacity .25s}.s2-home .h-res.tap .h-hl{opacity:1}
.s2-home .h-rip{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.s2-home .h-res.tap .h-rip{animation:s2rip .6s ease-out forwards}
.s2-home .h-t{font-size:34px;font-weight:600}.s2-home .h-s{font-size:27px;fill:#62666a}
.s2-home .h-btn{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .18s}
.s2-home .h-btn.on{opacity:1}.s2-home .h-btn.press{transform:scale(.95)}
.s2-home .h-bt{fill:#fff;font-size:33px;font-weight:600}

/* A2 map */
.scr[data-k="map"] .s2-map{position:absolute;left:0;right:0;top:12.5cqw;bottom:14.6cqw;overflow:hidden;background:#F1EEE7}
.scr[data-k="map"] .s2-map svg{display:block;width:100%;height:100%}
.scr[data-k="map"] .bar{z-index:1}
.s2-map .m-par{fill:rgba(47,107,255,0);stroke:#2F6BFF;stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease-out,fill .5s .3s}
.s2-map .m-par.on{stroke-dashoffset:0;fill:rgba(47,107,255,.16)}
.s2-map .m-pin{opacity:0}.s2-map .m-pin.on{opacity:1}
.s2-map .m-r{fill:none;stroke:#2F55D4;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.s2-map .m-pin.land .m-r{animation:s2ring 1.8s ease-out infinite}.s2-map .m-pin.land .m-r2{animation-delay:.9s}
.s2-map .m-apn{opacity:0;transition:opacity .35s}.s2-map .m-apn.on{opacity:1}
.s2-map .m-apn text{font-family:var(--body);font-size:11px;font-weight:600;fill:#2F55D4;letter-spacing:.02em}
.scr[data-k="map"] .s2-sheet{position:absolute;left:0;right:0;bottom:14.6cqw;z-index:1;margin:0;padding:2.4cqw 5.5cqw 4cqw;background:#fff;border-radius:5cqw 5cqw 0 0;
  box-shadow:0 -2px 14px rgba(27,28,30,.12);display:flex;flex-direction:column;gap:1cqw;transform:translateY(110%);transition:transform .5s cubic-bezier(.3,1.15,.5,1)}
.scr[data-k="map"] .s2-sheet.on{transform:none}
.s2-sheet .gr{align-self:center;width:10cqw;height:1.1cqw;border-radius:99px;background:#dcd8cf;margin-bottom:1.4cqw}
.s2-sheet .sh-t{font-family:var(--app-serif);font-weight:600;font-size:5cqw;line-height:1.15}
.s2-sheet .sh-s{font-size:3.3cqw;color:#62666a}
.s2-sheet .sh-r{display:flex;align-items:center;justify-content:space-between;margin-top:1.6cqw}
.s2-sheet em{font-style:normal;font-size:2.9cqw;font-weight:600;color:#1f9d55;background:#e7f5ec;border-radius:99px;padding:.6cqw 2.4cqw}
.s2-sheet b{font-size:3.3cqw;font-weight:600;color:#fff;background:#2F55D4;border-radius:2.4cqw;padding:1.8cqw 3.6cqw}

/* A3 property: dots, skeletons clearing, the live price chip, the offer button calling */
.s2-prop .p-dots circle{fill:rgba(255,255,255,.55);transition:fill .3s}
.s2-prop .p-dots circle.on{fill:#fff}
.s2-prop .p-sk{transition:opacity .35s}.s2-prop .p-sk.gone{opacity:0}
.s2-prop .p-live{opacity:0;transform:translateX(-12px);transition:opacity .35s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.s2-prop .p-live.on{opacity:1;transform:none}
.s2-prop .p-lt{font-size:25px;font-weight:600;fill:#2F55D4}
.s2-prop .p-ld{transform-box:fill-box;transform-origin:center;animation:s2blink 1.2s ease-in-out infinite}
.s2-prop .p-pul{opacity:0;transform-box:fill-box;transform-origin:center}
.s2-prop .p-pul.on{animation:s2pul 1.6s ease-out infinite}.s2-prop .p-pul2.on{animation-delay:.8s}

/* B the data cards beside the phone (desktop) */
.s2-pour{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.s2-pour.s2-on{opacity:1;visibility:visible;transition:opacity .4s}
.s2-pour .s2-str{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s2-pour line{stroke:#7FA6FF;stroke-width:1.2;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 4px rgba(90,140,255,.9))}
.s2-c{position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 16px;border-radius:8px;opacity:0;will-change:transform,opacity;
  border:1px solid rgba(127,166,255,.55);background:linear-gradient(160deg,rgba(90,140,255,.2),rgba(11,14,24,.55) 60%),rgba(11,12,18,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(47,107,255,.15),0 0 22px rgba(47,107,255,.35),0 14px 30px rgba(0,0,0,.45)}
.s2-c span{font-family:var(--tech);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#9DB8FF}
.s2-c b{font-family:var(--tech);font-size:17px;font-weight:600;letter-spacing:.04em;color:#F2F5F5;white-space:nowrap;text-shadow:0 0 12px rgba(90,140,255,.6)}
.s2-c.s2-ph{padding:0;background:#223 url(img/villa.jpg) no-repeat;background-size:300% auto;border-color:rgba(160,190,255,.75)}

/* C the survey of the lot (over the villa canvas, under the copy, the crosshairs and the phone) */
.s2-sv{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.s2-sv.s2-on{opacity:1;visibility:visible;transition:opacity .45s}
.s2-sv .sv-l{fill:none;stroke:#DDE7FF;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px #5A8CFF) drop-shadow(0 0 8px rgba(47,107,255,.8))}
.s2-sv .sv-lg{stroke:#2F6BFF;stroke-width:5;opacity:.35;filter:blur(3px)}
.s2-sv .sv-f{fill:rgba(47,107,255,0);stroke:rgba(220,232,255,0);stroke-width:1.4;transition:fill .8s,stroke .8s}
.s2-sv .sv-f.on{fill:rgba(47,107,255,.24);stroke:rgba(220,232,255,.95);animation:s2glow 2.4s ease-in-out .8s infinite;filter:drop-shadow(0 0 10px rgba(47,107,255,.9))}
.s2-sv .sv-k{opacity:0}.s2-sv .sv-k.on{opacity:1}
.s2-sv .sv-k line{stroke:#EAF0FF;stroke-width:1.5}
.s2-sv .sv-k path{fill:#5A8CFF;stroke:#EAF0FF;stroke-width:1;filter:drop-shadow(0 0 5px #2F6BFF)}
.s2-sv .sv-k ellipse{fill:none;stroke:#9DB8FF;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.s2-sv .sv-k.land ellipse{animation:s2stake .9s ease-out forwards}
.s2-sv .sv-p{opacity:0}.s2-sv .sv-p.on{opacity:1}
.s2-sv .sv-pd path{fill:#2F6BFF;stroke:#EAF0FF;stroke-width:1.5;filter:drop-shadow(0 0 10px rgba(47,107,255,.95))}
.s2-sv .sv-pd circle{fill:#fff}
.s2-sv .sv-pr{fill:none;stroke:#7FA6FF;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.s2-sv .sv-p.land .sv-pr{animation:s2ring 2s ease-out infinite}.s2-sv .sv-p.land .sv-pr2{animation-delay:1s}
.s2-sv.mob .sv-l{stroke-width:1.1}.s2-sv.mob .sv-lg{display:none}

@keyframes s2spin{to{transform:rotate(360deg)}}
@keyframes s2rip{0%{opacity:.22;transform:scale(0)}100%{opacity:0;transform:scale(3.2)}}
@keyframes s2ring{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
@keyframes s2stake{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
@keyframes s2blink{50%{opacity:.35;transform:scale(.7)}}
@keyframes s2pul{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.05,1.25)}}
@keyframes s2glow{50%{fill:rgba(47,107,255,.4)}}
@media not all{.s2-pour,.s2-sv{display:none}}
.still .s2-pour,.still .s2-sv{display:none}
.s2-home .h-f{font-size:24px;fill:#9aa0a4}