/* IBIÁ Pipa — seções: hero, manifesto, falésia, resort, experiências, residências, masterplan, localização, VIP */
/* ---------- hero ---------- */
#hero{position:relative;height:100svh;min-height:380px;overflow:hidden;background:var(--ink)}
#hero .bg{position:absolute;inset:-6% 0;background:url(/ibia/assets/img/hero.webp) center/cover;animation:kb 26s var(--ease) forwards;will-change:transform}
@keyframes kb{from{transform:scale(1.18) translateY(2%)}to{transform:scale(1.02) translateY(0)}}
#hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,12,4,.5) 0%,rgba(30,12,4,.12) 40%,rgba(46,16,5,.68) 100%)}
#hero .inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(96px,16vh,170px) clamp(20px,6vw,90px) clamp(56px,10vh,120px);color:var(--white)}
#hero .loc{font-size:clamp(9.5px,1vw,11px);letter-spacing:.5em;text-transform:uppercase;opacity:0;margin-top:auto;margin-bottom:clamp(12px,2.4vh,26px);color:var(--areia);animation:fadeup 1.2s 2.5s var(--ease) forwards}
#hero h1{font-size:clamp(28px,min(7.6vw,8.4svh),108px);line-height:1.02;text-transform:uppercase;font-weight:200;text-wrap:balance}
#hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom}
#hero h1 .word span{display:inline-block;transform:translateY(115%);animation:rise2 1.3s var(--ease) forwards}
@keyframes rise2{to{transform:none}}
#hero .sub{margin-top:clamp(14px,3vh,30px);display:flex;align-items:center;gap:26px;opacity:0;animation:fadeup 1.2s 3.2s var(--ease) forwards}
#hero .sub p{font-size:clamp(13px,1.05vw,16px);letter-spacing:.06em;font-weight:300;color:rgba(247,242,233,.85);max-width:44ch}
@keyframes fadeup{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
#hero .scroll{position:absolute;right:clamp(20px,5vw,70px);bottom:36px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--areia);font-size:9px;letter-spacing:.4em;text-transform:uppercase;writing-mode:vertical-rl;opacity:0;animation:fadeup 1s 3.8s forwards}
#hero .scroll i{width:1px;height:64px;background:linear-gradient(var(--areia),transparent);display:block;animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.bars{position:absolute;left:0;right:0;z-index:3;height:11vh;background:#120702;transition:transform 1.6s .8s var(--ease2)}
.bars.top{top:0;transform-origin:top}.bars.bot{bottom:0;transform-origin:bottom}
body.loaded .bars.top{transform:scaleY(0)}body.loaded .bars.bot{transform:scaleY(0)}

/* ---------- manifesto ---------- */
#manifesto{padding:clamp(110px,16vh,190px) clamp(20px,6vw,90px);position:relative;background:var(--cream)}
#manifesto .big{margin:44px 0 54px;font-size:clamp(34px,5.4vw,78px);line-height:1.12;font-weight:200;max-width:16ch}
#manifesto .big em{font-style:normal;color:var(--terra)}
#manifesto .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);max-width:1100px}
#manifesto .mark{position:absolute;right:clamp(10px,6vw,90px);top:90px;width:clamp(120px,16vw,230px);opacity:.08;filter:brightness(0) sepia(1) saturate(6) hue-rotate(-15deg)}
@media(max-width:820px){#manifesto .cols{grid-template-columns:1fr}}

/* ---------- cliff quote ---------- */
#guardiao{position:relative;height:130vh}
#guardiao .sticky{position:sticky;top:0;height:100svh;overflow:hidden}
#guardiao .img{position:absolute;inset:-12% 0;background:url(/ibia/assets/img/cliffs.webp) center/cover;will-change:transform}
#guardiao .shade{position:absolute;inset:0;background:rgba(46,16,5,.34)}
#guardiao .q{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--white);padding:0 5vw}
#guardiao .q h2{font-size:clamp(26px,4.4vw,58px);text-transform:uppercase;font-weight:200;line-height:1.25}
#guardiao .q .label{justify-content:center;margin-bottom:30px}


/* ---------- resort ---------- */
#resort{background:var(--areia);padding:clamp(110px,16vh,190px) clamp(20px,6vw,90px);position:relative;overflow:hidden}
#resort .tex{position:absolute;inset:0;background:var(--tex) center/cover;mix-blend-mode:multiply;opacity:.06;pointer-events:none}
#resort .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center;position:relative}
#resort .imgcol{position:relative}
#resort .imgcol .main{aspect-ratio:4/4.4;object-fit:cover;width:100%}
#resort .imgcol .over{position:absolute;right:-8%;bottom:-12%;width:52%;box-shadow:0 40px 80px rgba(46,16,5,.35)}
#resort ul{list-style:none;margin-top:40px;border-top:1px solid rgba(42,24,16,.2)}
#resort ul li{display:flex;justify-content:space-between;align-items:center;padding:17px 4px;border-bottom:1px solid rgba(42,24,16,.2);font-size:clamp(14px,1.05vw,17px);letter-spacing:.05em;transition:padding .4s var(--ease),background .4s}
#resort ul li:hover{padding-left:16px;background:rgba(173,69,37,.06)}
#resort ul li i{font-style:normal;color:var(--terra);font-size:11px;letter-spacing:.3em}
@media(max-width:900px){#resort .grid{grid-template-columns:1fr}#resort .imgcol .over{bottom:-8%}}

/* ---------- horizontal experiences ---------- */
#exp{position:relative;background:var(--terra-deep)}
#exp .rail{height:340vh;position:relative}
#exp .sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:clamp(84px,14vh,150px) 0 clamp(54px,10vh,108px);--ph:clamp(180px,calc(100svh - 460px),620px)}
#exp .head{flex:0 0 auto;padding:0 clamp(20px,6vw,90px);margin-bottom:clamp(18px,3.6vh,42px);color:var(--cream)}
#exp .track{display:flex;gap:clamp(18px,3vw,44px);padding-left:clamp(20px,6vw,90px);will-change:transform;align-items:flex-start;flex:1 1 auto;min-height:0}
#exp .track .pad{flex:0 0 auto;width:clamp(20px,6vw,90px);height:var(--ph)}
#exp .card{flex:0 0 auto;width:clamp(230px,min(calc(var(--ph)*.8),78vw),440px);position:relative;color:var(--cream);display:flex;flex-direction:column}
#exp .card .ph{overflow:hidden;position:relative;flex:0 0 auto;height:var(--ph)}
#exp .card .ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(20,8,2,.45),rgba(20,8,2,0) 34%)}
#exp .card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--ease);filter:saturate(.96)}
#exp .card:hover .ph img{transform:scale(1.01)}
#exp .card .n{position:absolute;z-index:2;top:14px;left:16px;font-size:10px;letter-spacing:.4em;color:rgba(247,242,233,.92)}
#exp .card .cap{flex:0 0 auto}
#exp .card h3{margin-top:16px;font-size:clamp(18px,1.7vw,26px);font-weight:300;letter-spacing:.04em}
#exp .card p{font-size:13px;letter-spacing:.04em;opacity:.78;margin-top:6px;font-weight:200}
#exp .card.tall{width:clamp(300px,min(calc(var(--ph)*1.4545),88vw),640px)}
#exp .bar{position:absolute;bottom:clamp(30px,6vh,60px);left:clamp(20px,6vw,90px);right:clamp(20px,6vw,90px);height:1px;background:rgba(247,242,233,.2)}
#exp .bar i{position:absolute;inset:0;background:var(--areia);transform-origin:left;transform:scaleX(0)}
#exp .tex{position:absolute;inset:0;background:var(--tex) center/cover;mix-blend-mode:soft-light;opacity:.16;pointer-events:none}

/* ---------- residences ---------- */
#res{background:var(--cream);padding:clamp(110px,16vh,190px) clamp(20px,6vw,90px)}
#res .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-bottom:clamp(50px,9vh,100px);align-items:end}
#res .gal{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;gap:clamp(14px,2vw,28px)}
#res .gal .a{grid-row:1/3}
#res .gal img{width:100%;height:100%;object-fit:cover}
#res .gal .a img{aspect-ratio:16/10.5}
#res .gal .b img,#res .gal .c img{aspect-ratio:16/9.2}
#res .note{margin-top:34px;display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra)}
#res .note svg{flex:0 0 auto}
@media(max-width:900px){#res .top{grid-template-columns:1fr}#res .gal{grid-template-columns:1fr}#res .gal .a{grid-row:auto}}

/* ---------- masterplan ---------- */
#master{background:var(--ceu);position:relative;padding:clamp(110px,16vh,190px) clamp(20px,6vw,90px);overflow:hidden}
#master .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:center}
#master .frame{position:relative;padding:clamp(14px,2vw,26px);background:var(--cream);box-shadow:0 50px 100px rgba(46,16,5,.25)}
#master .frame img{width:100%}
#master .frame .cap{display:flex;justify-content:space-between;padding-top:14px;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--terra)}
@media(max-width:900px){#master .wrap{grid-template-columns:1fr}}

/* ---------- location ---------- */
#loc{position:relative;height:170vh}
#loc .sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
#loc .img{position:absolute;inset:-12% 0;background:url(/ibia/assets/img/location.webp) center/cover;will-change:transform}
#loc .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,16,5,.72) 0%,rgba(46,16,5,.15) 60%)}
#loc .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,6vw,90px);color:var(--white);max-width:760px}
#loc .inner .h2{margin:26px 0 24px}
#loc .tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
#loc .tags span{border:1px solid rgba(247,242,233,.35);padding:10px 20px;border-radius:30px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;backdrop-filter:blur(4px)}

/* ---------- VIP ---------- */
#vip{background:var(--terra);position:relative;overflow:hidden;padding:clamp(120px,18vh,210px) clamp(20px,6vw,90px);text-align:center}
#vip .tex{position:absolute;inset:0;background:var(--tex) center/cover;mix-blend-mode:multiply;opacity:.22;pointer-events:none}
#vip .inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;color:var(--cream)}
#vip .label{justify-content:center}
#vip .h2{max-width:18ch}
#vip .body{max-width:52ch;margin:0 auto}
#vip .gold{display:inline-flex;align-items:center;gap:16px;background:var(--cream);color:var(--terra);border:0;padding:20px 42px;border-radius:40px;font-size:11px;letter-spacing:.35em;text-transform:uppercase;font-weight:500;transition:.45s var(--ease);margin-top:10px}
#vip .gold:hover{gap:26px;background:#fff}
#vip .keyicon{opacity:.5}

/* ---------- masterplan interactive ---------- */
#master .frame{overflow:visible}
.mp{position:relative}
.mpstage{position:relative}
.mpstage>img{width:100%;display:block}
.mpstage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mpstage svg polygon{fill:rgba(173,69,37,0);stroke:rgba(239,232,218,0);stroke-width:1.3px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;transition:fill .45s,stroke .45s}
.mpstage svg polygon.on{fill:rgba(173,69,37,.32);stroke:rgba(239,232,218,.95)}
.mpk{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(239,232,218,.94);border:1px solid var(--terra);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:transform .3s var(--ease),background .3s;padding:0}
.mpk::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(173,69,37,.6);animation:mpulse 2.4s ease-out infinite}
.mpk i{width:8px;height:8px;border-radius:50%;background:var(--terra);transition:.3s;pointer-events:none}
.mpk:hover{transform:translate(-50%,-50%) scale(1.18)}
.mpk.on{background:var(--terra);transform:translate(-50%,-50%) scale(1.18)}
.mpk.on i{background:var(--cream)}
.mpk.on::before{animation:none;opacity:0}
@keyframes mpulse{0%{transform:scale(.55);opacity:.9}80%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.mpp{position:absolute;z-index:9;width:min(250px,64vw);background:rgba(36,19,10,.93);backdrop-filter:blur(8px);color:var(--cream);padding:16px 18px 15px;border-left:2px solid var(--brasa);opacity:0;pointer-events:none;transform:translate(-50%,-100%) translateY(-16px);transition:opacity .4s var(--ease),transform .4s var(--ease);box-shadow:0 24px 50px rgba(20,8,2,.45)}
.mpp.show{opacity:1;transform:translate(-50%,-100%) translateY(-14px)}
.mpp.below{transform:translate(-50%,0) translateY(30px)}
.mpp.below.show{transform:translate(-50%,0) translateY(26px)}
.mpp .no{font-size:9px;letter-spacing:.4em;color:var(--brasa);font-weight:500}
.mpp h4{font-weight:400;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--areia);margin-top:6px}
.mpp p{font-size:12px;font-weight:200;line-height:1.65;margin-top:7px;color:rgba(247,242,233,.82)}
.mphint{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--terra);border:1px solid rgba(173,69,37,.35);padding:11px 18px;border-radius:30px}
.mphint b{width:8px;height:8px;border-radius:50%;background:var(--terra);position:relative;flex:0 0 auto}
.mphint b::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(173,69,37,.5);animation:mpulse 2.4s ease-out infinite}
.mplegend{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mplegend button{border:1px solid rgba(42,24,16,.28);background:none;padding:9px 15px;border-radius:20px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-family:inherit;transition:.3s;cursor:pointer}
.mplegend button.on,.mplegend button:hover{background:var(--terra);color:var(--cream);border-color:var(--terra)}
@media(max-width:700px){
  .mpp{position:relative;left:0 !important;top:0 !important;width:100%;transform:none;margin-top:14px;display:none;box-shadow:none}
  .mpp.show,.mpp.below,.mpp.below.show{transform:none}
  .mpp.show{display:block;animation:fadeup .5s var(--ease)}
}
@media(max-height:520px){
  #hero .inner{padding-top:clamp(62px,16vh,170px)}
}
@media(max-height:600px){
  #exp .sticky{padding-top:clamp(62px,11vh,84px);padding-bottom:32px;--ph:clamp(120px,calc(100svh - 300px),620px)}
  #exp .head{margin-bottom:14px}
  #exp .head .h2{font-size:clamp(19px,3.2vw,28px)}
}