/* Vickram Buttar — listing detail page transition + lead form motion */

/* ============ LISTING DETAIL — expand-to-page ============ */
#lview{position:fixed;inset:0;z-index:9990;display:none}
#lview.on{display:block}
#lview .lv-cur{position:absolute;inset:0;background:var(--gold);clip-path:inset(var(--t) var(--r) var(--b) var(--l) round 18px);transition:clip-path .5s var(--wipe)}
#lview.go .lv-cur{clip-path:inset(0 0 0 0)}
#lview .lv-sheet{position:absolute;inset:0;background:var(--cream);overflow-y:auto;overscroll-behavior:contain;clip-path:inset(var(--t) var(--r) var(--b) var(--l) round 18px);transition:clip-path .56s var(--wipe) .1s}
#lview.go .lv-sheet{clip-path:inset(0 0 0 0)}
#lview .lv-flash{position:absolute;top:0;bottom:0;left:-24vw;width:22vw;z-index:5;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
#lview.go .lv-flash{opacity:1;animation:lvFlash .62s var(--wipe) .06s forwards}
@keyframes lvFlash{to{left:104vw;opacity:0}}
#lview .lv-close{position:fixed;top:22px;right:24px;z-index:9;display:flex;align-items:center;gap:10px;border:1.5px solid rgba(255,255,255,.34);background:rgba(11,11,11,.34);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:11px 18px;font-family:var(--fD);font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(-8px);transition:opacity .4s .34s,transform .4s var(--ease) .34s,background .3s,border-color .3s}
#lview.rdy .lv-close{opacity:1;transform:none}
#lview .lv-close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
#lview .lv-close i{display:block;width:9px;height:9px;position:relative}
#lview .lv-close i::before,#lview .lv-close i::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1.5px;background:currentColor}
#lview .lv-close i::before{transform:rotate(45deg)}
#lview .lv-close i::after{transform:rotate(-45deg)}

#lview .lv-hero{position:relative;height:min(52vh,470px);overflow:hidden;background:#ded8cc;display:flex;align-items:flex-end}
#lview .lv-hero .lv-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.14);transition:transform 1.5s var(--ease)}
#lview.rdy .lv-hero .lv-bg{transform:none}
#lview .lv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.82),rgba(11,11,11,.15) 62%,rgba(11,11,11,.3))}
#lview .lv-slats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);z-index:2}
#lview .lv-slats s{background:var(--ink3);transform:scaleY(1);transform-origin:top;transition:transform .6s var(--wipe)}
#lview.rdy .lv-slats s{transform:scaleY(0)}
#lview.rdy .lv-slats s:nth-child(2){transition-delay:.05s}
#lview.rdy .lv-slats s:nth-child(3){transition-delay:.1s}
#lview.rdy .lv-slats s:nth-child(4){transition-delay:.15s}
#lview.rdy .lv-slats s:nth-child(5){transition-delay:.2s}
#lview.rdy .lv-slats s:nth-child(6){transition-delay:.25s}
#lview .lv-hwrap{position:relative;z-index:3;width:100%;max-width:1180px;margin:0 auto;padding:0 40px 44px;color:#fff}
#lview .lv-tag{display:inline-block;background:var(--gold);color:var(--ink);font-family:var(--fD);font-weight:900;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;border-radius:4px}
#lview .lv-ad{margin:18px 0 0;font-family:var(--fD);font-weight:900;font-size:clamp(28px,4.4vw,58px);line-height:.96;letter-spacing:-.025em;text-transform:uppercase;max-width:22ch;text-wrap:pretty}
#lview .lv-ct{margin-top:12px;font-size:15.5px;color:rgba(255,255,255,.72)}
#lview .lv-mls{margin-top:8px;font-family:var(--fB);font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l)}

#lview .lv-body{max-width:1180px;margin:0 auto;padding:56px 40px 90px;display:grid;grid-template-columns:1.45fr .85fr;gap:60px;align-items:start}
#lview .lv-price{font-family:var(--fD);font-weight:900;font-size:clamp(32px,3.6vw,50px);letter-spacing:-.03em;line-height:1}
#lview .lv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
#lview .lv-facts div{background:var(--paper);padding:22px 20px}
#lview .lv-facts b{display:block;font-family:var(--fD);font-weight:900;font-size:24px;letter-spacing:-.02em}
#lview .lv-facts span{display:block;margin-top:6px;font-size:12.5px;color:var(--mut)}
#lview .lv-h3{margin:44px 0 0;font-family:var(--fD);font-weight:900;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
#lview .lv-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
#lview .lv-gal s{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,#ded8cc,#c9c1b0);display:grid;place-items:center;font-family:var(--fB);font-weight:800;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(29,29,29,.42);text-decoration:none}
#lview .lv-gal s img{width:100%;height:100%;object-fit:cover;display:block}
#lview .lv-gal s.ph::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:lvShim 2.6s linear infinite}
#lview .lv-gal s.ph:nth-child(2)::after{animation-delay:.3s}
#lview .lv-gal s.ph:nth-child(3)::after{animation-delay:.6s}
#lview .lv-gal s.ph:nth-child(4)::after{animation-delay:.9s}
@keyframes lvShim{to{left:120%}}
#lview .lv-note{margin-top:18px;border:1.5px dashed var(--gold);border-radius:14px;padding:18px 20px;font-size:13.5px;line-height:1.6;color:var(--mut);background:rgba(184,153,91,.06)}
#lview .lv-note b{display:block;font-family:var(--fD);font-weight:900;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-bottom:7px}
#lview .lv-panel{position:sticky;top:32px;background:var(--ink);color:#fff;border-radius:20px;padding:32px 30px 30px}
#lview .lv-panel .ey{font-family:var(--fB);font-weight:800;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l)}
#lview .lv-panel h3{margin:14px 0 0;font-family:var(--fD);font-weight:900;font-size:24px;line-height:1.04;text-transform:uppercase}
#lview .lv-panel p{margin:14px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6)}
#lview .lv-btns{display:flex;flex-direction:column;gap:10px;margin-top:24px}
#lview .lv-btns button,#lview .lv-btns a{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:15px 22px;font-family:var(--fD);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;border:1.5px solid rgba(255,255,255,.28);background:transparent;color:#fff;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
#lview .lv-btns .go{background:var(--gold);border-color:var(--gold);color:var(--ink)}
#lview .lv-btns button:hover,#lview .lv-btns a:hover{transform:translateY(-2px);background:#fff;border-color:#fff;color:var(--ink)}
#lview .lv-panel .fine{margin-top:18px;font-size:11px;line-height:1.6;color:rgba(255,255,255,.42)}

/* staged content entry */
#lview [data-r]{opacity:0;transform:translateY(20px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
#lview.rdy [data-r]{opacity:1;transform:none}
#lview.rdy [data-r="1"]{transition-delay:.06s}
#lview.rdy [data-r="2"]{transition-delay:.12s}
#lview.rdy [data-r="3"]{transition-delay:.18s}
#lview.rdy [data-r="4"]{transition-delay:.24s}
#lview.rdy [data-r="5"]{transition-delay:.3s}
#lview.rdy [data-r="6"]{transition-delay:.36s}
@media(max-width:900px){#lview .lv-body{grid-template-columns:1fr;gap:38px;padding:40px 22px 70px}#lview .lv-hwrap{padding:0 22px 32px}#lview .lv-gal{grid-template-columns:repeat(2,1fr)}#lview .lv-panel{position:static}}
@media(prefers-reduced-motion:reduce){#lview .lv-cur,#lview .lv-sheet{transition:none;clip-path:none}#lview .lv-flash,#lview .lv-slats{display:none}#lview [data-r],#lview .lv-close{opacity:1;transform:none;transition:none}#lview .lv-hero .lv-bg{transform:none}}

/* ============ MEMBER GATE ============ */
#gate{position:fixed;inset:0;z-index:9995;display:none}
#gate.on{display:block}
#gate .g-back{position:absolute;inset:0;background:rgba(11,11,11,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .38s}
#gate.go .g-back{opacity:1}
#gate .g-card{position:absolute;left:50%;top:50%;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;background:var(--paper);border-radius:24px;box-shadow:0 50px 110px rgba(11,11,11,.5);transform:translate(-50%,calc(-50% + 26px)) scale(.965);opacity:0;transition:transform .52s var(--ease),opacity .34s}
#gate.go .g-card{transform:translate(-50%,-50%) scale(1);opacity:1}
#gate .g-rule{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--wipe) .18s}
#gate.go .g-rule{transform:scaleX(1)}
#gate .g-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;background:var(--cream);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
#gate .g-x:hover{background:var(--gold);transform:rotate(90deg)}
#gate .g-x i{width:11px;height:11px;position:relative;display:block}
#gate .g-x i::before,#gate .g-x i::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.6px;background:var(--ink)}
#gate .g-x i::before{transform:rotate(45deg)}
#gate .g-x i::after{transform:rotate(-45deg)}
#gate .g-in{padding:40px 38px 34px}
#gate .ey{font-family:var(--fB);font-weight:800;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-d)}
#gate h3{margin:14px 0 0;font-family:var(--fD);font-weight:900;font-size:clamp(24px,2.7vw,32px);line-height:1.02;text-transform:uppercase;letter-spacing:-.02em;text-wrap:pretty}
#gate .g-sub{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--mut)}
#gate .g-val{display:flex;flex-direction:column;gap:9px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
#gate .g-val span{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5;color:var(--ink)}
#gate .g-val span::before{content:"";flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--gold)}
#gate .g-form{margin-top:24px}
#gate .g-go{margin-top:20px;width:100%;position:relative;overflow:hidden;border:0;border-radius:999px;background:var(--ink);color:#fff;padding:17px 24px;font-family:var(--fD);font-weight:800;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .35s,color .35s,transform .35s var(--ease)}
#gate .g-go:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
#gate .g-go.sending{pointer-events:none}
#gate .g-go.sending::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(205,176,121,.9),transparent);animation:fSweep .85s linear infinite}
#gate .g-alt{margin-top:16px;text-align:center;font-size:12.5px;color:var(--mut)}
#gate .g-alt button{border:0;background:none;padding:0;font-family:var(--fB);font-weight:800;font-size:12.5px;color:var(--gold-d);cursor:pointer;border-bottom:1px solid var(--gold);transition:color .3s}
#gate .g-alt button:hover{color:var(--ink)}
#gate .g-alt .sig{display:none}
#gate .signin .g-alt .reg{display:none}
#gate .signin .g-alt .sig{display:inline}
#gate .signin .g-form .fld:first-child,#gate .signin .g-pw{display:none}
#gate [data-g]{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
#gate.go [data-g]{opacity:1;transform:none}
#gate.go [data-g="2"]{transition-delay:.06s}
#gate.go [data-g="3"]{transition-delay:.12s}
#gate.go [data-g="4"]{transition-delay:.18s}
#gate.go [data-g="5"]{transition-delay:.24s}
#gate.go [data-g="6"]{transition-delay:.3s}
#gate .g-ok{display:none;text-align:center;padding:14px 6px 6px}
#gate .g-ok .tick{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
#gate .g-ok .tick svg{width:27px;height:27px;color:var(--ink)}
#gate .g-ok b{display:block;font-family:var(--fD);font-weight:900;font-size:23px;text-transform:uppercase}
#gate .g-ok p{margin-top:11px;font-size:14px;line-height:1.6;color:var(--mut)}
#gate .done .ey,#gate .done h3,#gate .done .g-sub,#gate .done .g-val,#gate .done .g-form{display:none}
#gate .done .g-ok{display:block;animation:fadeup .55s var(--ease)}
#gate .done .g-ok .tick{animation:fRing .9s var(--ease) .05s}
#gate .done .g-ok .tick svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:fTick .5s var(--ease) .22s forwards}
@media(max-width:520px){#gate .g-in{padding:32px 24px 26px}}
@media(prefers-reduced-motion:reduce){#gate .g-card,#gate .g-back,#gate [data-g],#gate .g-rule{transition:none;opacity:1;transform:translate(-50%,-50%)}#gate [data-g]{transform:none}#gate .g-rule{transform:scaleX(1)}}

/* ============ LEAD FORM MOTION ============ */
.leadcard{position:relative;transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.leadcard:focus-within{box-shadow:0 40px 84px rgba(29,29,29,.16);transform:translateY(-3px)}
.leadcard.pulse{animation:lfPulse 1.5s var(--ease)}
@keyframes lfPulse{0%{box-shadow:0 30px 70px rgba(29,29,29,.1),0 0 0 0 rgba(184,153,91,.5)}55%{box-shadow:0 30px 70px rgba(29,29,29,.1),0 0 0 14px rgba(184,153,91,0)}100%{box-shadow:0 30px 70px rgba(29,29,29,.1),0 0 0 0 rgba(184,153,91,0)}}
.fprog{position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fprog i{display:block;height:100%;width:0;background:var(--gold);transition:width .6s var(--wipe)}
#tabs{position:relative}
#tabs .tind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:10px;background:var(--ink);z-index:0;transition:transform .5s var(--ease),width .5s var(--ease)}
.tabs .tab{position:relative;z-index:1}
.tabs .tab.on{background:transparent}
/* field entry stagger */
.leadcard.arm .fld,.leadcard.arm .consent,.leadcard.arm .fsubmit{opacity:0;transform:translateY(12px)}
.leadcard.arm.lit .fld,.leadcard.arm.lit .consent,.leadcard.arm.lit .fsubmit{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.fld{transition:transform .35s var(--ease)}
.fld:focus-within{transform:translateY(-1px)}
.fld .ok{position:absolute;right:14px;top:50%;margin-top:-9px;width:18px;height:18px;border-radius:50%;background:var(--gold);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.fld textarea~.ok{top:18px;margin-top:0}
.fld .ok::after{content:"";width:8px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px)}
.fld.done .ok{opacity:1;transform:none}
.fld.err input,.fld.err select,.fld.err textarea{border-color:#c0563f}
.fld.err{animation:fShake .42s var(--ease)}
@keyframes fShake{20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}
.swapin{animation:fSwap .45s var(--ease) both}
@keyframes fSwap{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.swapout{animation:fSwapOut .18s ease both}
@keyframes fSwapOut{to{opacity:0;transform:translateY(-6px)}}
.fsubmit{position:relative;overflow:hidden}
.fsubmit.sending{pointer-events:none}
.fsubmit.sending::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(205,176,121,.9),transparent);animation:fSweep .85s linear infinite}
@keyframes fSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.fbody.wipeout{animation:fWipe .5s var(--wipe) forwards;pointer-events:none}
@keyframes fWipe{to{clip-path:inset(0 0 100% 0);opacity:.4}}
.fok.on .tick{animation:fRing .9s var(--ease) .1s}
@keyframes fRing{0%{transform:scale(.6);box-shadow:0 0 0 0 rgba(184,153,91,.55)}60%{transform:scale(1);box-shadow:0 0 0 18px rgba(184,153,91,0)}100%{transform:none;box-shadow:0 0 0 0 rgba(184,153,91,0)}}
.fok.on .tick svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:fTick .55s var(--ease) .3s forwards}
@keyframes fTick{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.leadcard.arm .fld,.leadcard.arm .consent,.leadcard.arm .fsubmit{opacity:1;transform:none}.fsubmit.sending::after,.fok.on .tick{animation:none}.fok.on .tick svg path{animation:none;stroke-dashoffset:0}}