/* Effects layer — loaded after site.css */

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:26px;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1),border-radius 1.1s;border-radius:0}
#pre.done{transform:translateY(-101%);border-radius:0 0 50% 50%/0 0 16vh 16vh}
#pre img{width:min(300px,64vw);animation:preLogo 1.4s cubic-bezier(.2,.8,.2,1) both}
#pre.done img{opacity:0;transition:.4s}
#pre .bar-w{width:min(260px,60vw);height:3px;background:var(--line);border-radius:9px;overflow:hidden}
#pre i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
@keyframes preLogo{from{opacity:0;transform:scale(.8) translateY(20px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
html:not(.js) #pre{display:none}

/* ---------- scroll progress / dots / top button ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:150;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--orange),var(--crimson));transform:scaleX(0);transform-origin:left}
.dots{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:80;display:grid;gap:14px}
.dots a{position:relative;width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);opacity:.35;transition:.35s;display:block}
.dots.light a{border-color:#fff}
.dots a.on{background:var(--crimson);border-color:var(--crimson);opacity:1;transform:scale(1.35)}
.dots.light a.on{background:var(--orange);border-color:var(--orange)}
.dots a::before{content:attr(data-l);position:absolute;right:24px;top:50%;translate:10px -50%;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:var(--ink);color:#fff;padding:5px 12px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s}
.dots a:hover{opacity:1}.dots a:hover::before{opacity:1;translate:0 -50%}
.top{position:fixed;right:18px;bottom:158px;z-index:90;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-content:center;opacity:0;translate:0 20px;pointer-events:none;transition:.4s}
.top.show{opacity:1;translate:0 0;pointer-events:auto}
.top:hover{background:var(--ink)}.top:hover svg{stroke:#fff}
.top svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.3s}

/* ---------- cursor ---------- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:1000;display:none}
body.has-cur .cur-dot,body.has-cur .cur-ring{display:block}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--crimson)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px solid var(--crimson);transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s;display:none}
.cur-ring.hov{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(163,31,36,.1)}
.cur-ring.zoom{background:rgba(255,255,255,.55);border-color:var(--ink)}
.cur-ring.zoom::after{content:"+";position:absolute;inset:0;display:grid;place-content:center;font-size:1.6rem;color:var(--ink)}

/* ---------- reveal: translate instead of transform so tilt can use transform ---------- */
.rv{transform:none;translate:0 46px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.8,.2,1),transform .3s ease-out}
.rv.in{translate:0 0}
.rv.l{translate:-70px 0}.rv.r{translate:70px 0}.rv.l.in,.rv.r.in{translate:0 0}
.rv.done{transition-delay:0s}

/* ---------- word-mask split text ---------- */
[data-split]{opacity:1}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em;margin:0 -.08em -.16em}
.wi{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 75ms)}
[data-split].in .wi{transform:none}
html:not(.js) .wi{transform:none}

/* scroll-scrub paragraph */
.scrub{color:var(--ink)}
.scrub .sw{opacity:.2;transition:opacity .35s}
.scrub .sw.lit{opacity:1}

/* ---------- hero upgrades ---------- */
.fade-up{animation:none;opacity:0}
.loaded .fade-up{animation:fadeUp .9s .5s forwards}
.loaded .hero-cta.fade-up{animation-delay:1s}
.hero p.lead.fade-up{animation-delay:.9s}
.offer-card{opacity:0;transition:opacity .8s 1.3s,transform .3s ease-out}
.loaded .offer-card{opacity:1}
@keyframes float{50%{translate:0 -14px}}
.hero{perspective:1400px}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero h1{perspective:none}
.eyebrow::before{transform-origin:left;transform:scaleX(0);transition:transform .9s .3s cubic-bezier(.2,.8,.2,1)}
.in .eyebrow::before,.eyebrow.in::before,.loaded .hero .eyebrow::before{transform:scaleX(1)}
.hero-bg{will-change:transform,translate;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 33vw,#000 46vw);mask-image:linear-gradient(90deg,transparent 0,transparent 33vw,#000 46vw)}

/* ---------- marquee ribbon ---------- */
.marq{background:var(--grad);color:#fff;overflow:hidden;padding:18px 0;position:relative;z-index:5;white-space:nowrap}
.marq-t{display:inline-flex;animation:marq 38s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--serif);font-size:1.25rem;letter-spacing:.04em}
.marq span::after{content:"";width:12px;height:12px;background:var(--orange);transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;pointer-events:none;animation:blob 16s ease-in-out infinite alternate}
.blob.a{width:380px;height:380px;background:var(--blue);left:-120px;top:10%}
.blob.b{width:320px;height:320px;background:var(--orange);right:-90px;bottom:5%;animation-delay:-5s}
.blob.c{width:280px;height:280px;background:var(--crimson);right:20%;top:-80px;opacity:.2;animation-delay:-9s}
@keyframes blob{to{transform:translate(60px,-50px) scale(1.25)}}
section>.wrap{position:relative;z-index:1}
#overview,.offer,.loc,#contact,#plans{overflow:hidden}

/* ---------- stats ---------- */
.stat{position:relative;overflow:hidden;transition:.4s}
.stat::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12),transparent 70%);transform:translateX(-120%);transition:.9s}
.stat:hover::before{transform:translateX(120%)}
.stat b{transition:.4s}.stat:hover b{transform:scale(1.1)}

/* ---------- overview ---------- */
.img-stack{perspective:1000px}
.frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3.2;clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1)}
.rv.in .frame,.frame.in{clip-path:inset(0 0 0 0 round 18px)}
.frame img{position:absolute;left:0;top:-11%;width:100%;height:122%;object-fit:cover;transform:scale(1.15);transition:transform 2s cubic-bezier(.2,.8,.2,1)}
.rv.in .frame img{transform:scale(1)}
.img-stack .badge{width:170px;height:170px;right:-26px;bottom:-30px;animation:none;background:var(--grad);display:grid;place-content:center}
.badge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge .ring text{fill:#fff;font-size:12.5px;letter-spacing:.2em;font-weight:600;text-transform:uppercase}
.badge .bc{position:relative;font-size:.75rem;line-height:1.25}
@keyframes spin{to{transform:rotate(360deg)}}
.points li{transition:.35s;padding:8px 10px;margin:-8px -10px;border-radius:10px}
.points li:hover{background:#fff;box-shadow:0 10px 24px -14px rgba(20,35,58,.4);transform:translateX(6px)}

/* ---------- offer ---------- */
.plan-card{position:relative;overflow:hidden;transform-style:preserve-3d}
.plan-card::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform 1.2s .4s}
.plan-card.in::before{transform:scaleX(1)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;z-index:3}
[data-tilt]:hover .glare{opacity:1}
.plan-flex{display:flex;align-items:center;gap:32px;margin-top:10px;flex-wrap:wrap}
.donut{position:relative;width:170px;height:170px;flex:none}
.donut svg{width:100%;height:100%}
.donut circle{fill:none;stroke-width:15;transform-origin:80px 80px}
.d-bg{stroke:var(--line)}
.d-or,.d-bl{stroke-linecap:butt;stroke-dasharray:0 100;transition:stroke-dasharray 1.8s cubic-bezier(.2,.8,.2,1) .3s}
.d-or{stroke:var(--orange);transform:rotate(-90deg)}
.d-bl{stroke:var(--blue-d);transform:rotate(-54deg);transition-delay:.7s}
.donut.in .d-or{stroke-dasharray:10 100}
.donut.in .d-bl{stroke-dasharray:90 100}
.donut .dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .dc b{font-family:var(--serif);font-size:2.1rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.donut .dc span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legend{display:grid;gap:14px;font-weight:500}
.legend li{display:flex;align-items:center;gap:12px}
.legend i{width:14px;height:14px;border-radius:4px;flex:none}
.legend small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.price-big{font-family:var(--serif);font-size:4.2rem;font-weight:700;line-height:1.05;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:10px 0 4px}
.pulse-tag{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:9px 18px;border-radius:99px;background:rgba(163,31,36,.08);color:var(--crimson);font-weight:600;font-size:.9rem}
.pulse-tag::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--crimson);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(163,31,36,.6)}100%{box-shadow:0 0 0 14px rgba(163,31,36,0)}}

/* ---------- plan tabs ---------- */
.tabs{position:relative;width:max-content;max-width:100%;margin-inline:auto;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;box-shadow:0 12px 30px -20px rgba(20,35,58,.4);gap:0}
.tab{position:relative;z-index:1;background:transparent;border:0;padding:12px 26px;transition:color .35s}
.tab.on,.tab:hover{background:transparent;color:var(--crimson)}
.tab.on{color:#fff}
.tab-ind{position:absolute;left:0;top:0;z-index:0;border-radius:99px;background:var(--crimson);box-shadow:0 10px 22px -8px rgba(163,31,36,.7);transition:transform .55s cubic-bezier(.7,0,.2,1),width .55s cubic-bezier(.7,0,.2,1)}
.panel.on{animation:panelIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}
.plan-img{position:relative}
.plan-img::after{content:"Click to zoom";position:absolute;right:16px;bottom:16px;background:var(--ink);color:#fff;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;opacity:0;translate:0 8px;transition:.4s}
.plan-img:hover::after{opacity:1;translate:0 0}
.panel li{position:relative;padding-left:30px}
.panel li::before{content:"";position:absolute;left:0;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--grad-warm)}
.panel li::after{content:"";position:absolute;left:6px;top:50%;width:5px;height:9px;margin-top:-6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- amenities ---------- */
.amen-grid{perspective:1200px}
.am{--mx:50%;--my:50%;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(245,138,75,.28),transparent 65%),rgba(255,255,255,.05);transform-style:preserve-3d}
.am::before,.am:hover::before{opacity:0}
.am:hover{transform:none;border-color:rgba(245,138,75,.6)}
.am svg *{stroke-dasharray:1;stroke-dashoffset:1}
.am.in svg *{animation:draw 1.8s .4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
html:not(.js) .am svg *{stroke-dasharray:none;stroke-dashoffset:0}
.am:hover svg{stroke:var(--orange);transform:translateY(-6px) scale(1.12)}
.am h4{transition:.4s}.am:hover h4{color:var(--orange)}

/* ---------- gallery ---------- */
.gal a{transform-style:preserve-3d;box-shadow:0 14px 34px -22px rgba(20,35,58,.5)}
.gal{perspective:1200px}
.gal img{will-change:transform}
.gal a::after{content:"";background:linear-gradient(180deg,transparent 40%,rgba(20,35,58,.75));font-size:0}
.gal a::before{content:"+";position:absolute;right:16px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--crimson);display:grid;place-content:center;font-size:1.6rem;line-height:1;opacity:0;scale:.4;transition:.45s cubic-bezier(.2,.8,.2,1)}
.gal a:hover::before{opacity:1;scale:1}

/* ---------- lightbox ---------- */
.lb{display:grid;place-content:center;opacity:0;pointer-events:none;transition:opacity .4s;cursor:default}
.lb.open{opacity:1;pointer-events:auto;animation:none}
.lb img{opacity:0;transform:scale(.92);transition:.5s cubic-bezier(.2,.8,.2,1)}
.lb img.in{opacity:1;transform:none}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:54px;height:54px;border-radius:50%;font-size:1.6rem;cursor:pointer;transition:.3s;display:grid;place-content:center;backdrop-filter:blur(6px)}
.lb button:hover{background:var(--crimson);transform:scale(1.1)}
.lb-x{right:24px;top:24px}.lb-p{left:24px;top:50%;margin-top:-27px}.lb-n{right:24px;top:50%;margin-top:-27px}
.lb.single .lb-p,.lb.single .lb-n{display:none}
.lb-c{position:absolute;left:50%;bottom:24px;translate:-50% 0;color:#fff;font-size:.85rem;letter-spacing:.15em;opacity:.8}

/* ---------- location pin ---------- */
.pin{display:inline-grid;place-content:center;position:relative;width:46px;height:46px;border-radius:50%;background:rgba(163,31,36,.1);flex:none}
.pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--crimson);animation:ping 2s infinite}
.pin svg{width:22px;height:22px;stroke:var(--crimson);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes ping{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.8);opacity:0}}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(120deg,#2b5a8e,#a31f24,#f58a4b,#2b5a8e);background-size:300% 300%;animation:gshift 14s ease infinite}
@keyframes gshift{50%{background-position:100% 50%}}
.cta h2{font-size:clamp(2.2rem,5vw,3.8rem)}

/* ---------- buttons ---------- */
.btn{will-change:translate}
.rip{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:rgba(255,255,255,.55);animation:rip .8s ease-out forwards;pointer-events:none}
.btn-ghost .rip{background:rgba(163,31,36,.25)}
@keyframes rip{to{transform:scale(28);opacity:0}}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.3s}
.btn:hover svg{transform:translateX(5px)}
.btn.loading{pointer-events:none;opacity:.8}

/* ---------- form ---------- */
form.enq.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
form.enq::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--r) + 2px);padding:2px;background:linear-gradient(120deg,var(--blue),var(--orange),var(--crimson),var(--blue));background-size:300% 300%;animation:gshift 8s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
form.enq{position:relative}
.cbox a{position:relative;overflow:hidden}
.cbox a::before{content:"";position:absolute;inset:0;background:var(--grad);transform:translateX(-101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:0}
.cbox a>*{position:relative;z-index:1}
.cbox a:hover{color:#fff;transform:translateX(8px)}
.cbox a:hover::before{transform:none}
.cbox a:hover svg{stroke:#fff}
.cbox a{isolation:isolate}
.cbox a::before{z-index:-1}

/* ---------- dock ---------- */
.dock .ph{animation:ring 2.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(163,31,36,.55)}70%{box-shadow:0 0 0 18px rgba(163,31,36,0)}100%{box-shadow:0 0 0 0 rgba(163,31,36,0)}}
.dock .wa{animation:ring2 2.4s 1.2s infinite}
@keyframes ring2{0%{box-shadow:0 0 0 0 rgba(37,162,68,.55)}70%{box-shadow:0 0 0 18px rgba(37,162,68,0)}100%{box-shadow:0 0 0 0 rgba(37,162,68,0)}}

/* ---------- footer ---------- */
footer li a{position:relative;display:inline-block}
footer li a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s}
footer li a:hover::after{transform:scaleX(1);transform-origin:left}

@media (max-width:1000px){
  .dots,.top{display:none}
  .plan-flex{justify-content:center}
  .rv.l,.rv.r{translate:0 46px}
  .img-stack .badge{right:6px;bottom:-34px}
  .tabs{border-radius:26px}
}
@media (max-width:560px){
  .price-big{font-size:3.4rem}
  .donut{width:150px;height:150px}
  .lb-p{left:10px}.lb-n{right:10px}.lb button{width:46px;height:46px}
}
/* reduced-motion override removed: animations run on every device */

/* ---------- mobile fixes ---------- */
@media (max-width:1000px){
  .hero{flex-direction:column;align-items:stretch;justify-content:center;padding:120px 0 64px}
  .offer-card{align-self:flex-start;margin:36px 0 0 20px;right:auto;bottom:auto;width:calc(100% - 40px);max-width:340px}
  .pin{margin-left:8px}
}
@media (max-width:560px){
  .stat{padding:26px 8px}
  .stat b{font-size:1.5rem}
  .stat span{font-size:.7rem}
  .tabs{padding:5px}
  .tab{padding:10px 14px;font-size:.82rem}
  .hero h1{font-size:2.35rem}
  .hero-cta .btn{padding:13px 24px}
}