/* ===== Sasaka Bale Property · animasi (dipakai semua halaman) ===== */
body{animation:pagein .7s var(--ease) backwards}
@keyframes pagein{from{opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.7)}}
@keyframes fill{to{transform:scaleX(1)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(169,192,143,.5)}100%{box-shadow:0 0 0 18px rgba(169,192,143,0)}}
@keyframes menuItem{from{opacity:0;transform:translateY(10px)}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}

/* Reveal saat scroll (aktif hanya jika animasi.js termuat) */
.js [data-reveal]{opacity:0;transform:translateY(44px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal=left]{transform:translateX(-70px)}.js [data-reveal=right]{transform:translateX(70px)}
.js [data-reveal=zoom]{transform:scale(.9)}
.js [data-reveal=mask]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0)}
/* Teks muncul per kata */
.js .split .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .split .wd>i{display:inline-block;font-style:normal;transform:translateY(115%) rotate(5deg);transform-origin:left bottom;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*65ms + var(--sd,0ms))}
.js .split.is-in .wd>i{transform:none}

/* Beranda */
.marquee-track{animation:marquee 38s linear infinite}.marquee:hover .marquee-track{animation-play-state:paused}
.scroll-cue i{animation:cue 2.2s var(--ease) infinite}
.loader{position:fixed;inset:0;z-index:10000;display:grid;place-content:center;justify-items:center;gap:24px;background:#0a0a09;transition:transform .95s var(--ease)}
.loader.done{transform:translateY(-100%)}
.loader img{width:96px;border-radius:22px;animation:pop 1s var(--ease)}
.loader span{position:relative;width:150px;height:2px;overflow:hidden;background:var(--line)}
.loader span::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:fill 1.2s var(--ease) forwards}
.curtain{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#0a0a09;transform:translateY(101%);pointer-events:none;transition:transform .65s var(--ease)}
.curtain img{width:72px;border-radius:16px;opacity:0;transition:opacity .4s .25s}
.curtain.in{transform:none;pointer-events:auto}.curtain.in img{opacity:1}

/* Header pintar & progress scroll */
header.scrolled{background:rgba(20,20,18,.96);box-shadow:0 10px 30px rgba(0,0,0,.35)}
header.hide-nav{transform:translateY(-101%)}
.progress{position:fixed;inset:0 0 auto;z-index:200;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.menu.open a{animation:menuItem .5s var(--ease) backwards}
.menu.open a:nth-child(2){animation-delay:.05s}.menu.open a:nth-child(3){animation-delay:.1s}.menu.open a:nth-child(4){animation-delay:.15s}.menu.open a:nth-child(5){animation-delay:.2s}

/* Kursor, tilt, magnet */
.cursor{position:fixed;left:0;top:0;z-index:9998;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(236,235,229,.7);border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,opacity .3s}
.cursor.show{opacity:1}.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(236,235,229,.9)}
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease),border-color .3s,box-shadow .4s}
.card:hover{--ty:-6px;border-color:var(--accent);box-shadow:0 22px 44px rgba(0,0,0,.45)}
.js .card[data-reveal]{transform:translateY(44px)}.js .card[data-reveal].is-in{transform:none}
.btn{transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px))}
.wa-float{animation:ring 2.8s ease-out infinite}

/* Lightbox galeri (beranda) */
.lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(10,10,8,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lightbox.active{opacity:1;visibility:visible}
.lightbox figure{display:grid;justify-items:center;max-width:92vw;transform:scale(.92);transition:transform .6s var(--ease)}.lightbox.active figure{transform:none}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.8)}
.lightbox img.swap{animation:pop .5s var(--ease)}
.lightbox figcaption{margin-top:16px;font-size:14px;text-align:center}
.lightbox button{position:absolute;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.08);color:var(--text);font-size:22px;cursor:pointer;transition:background .3s,color .3s,transform .4s var(--ease)}
.lightbox button:hover{background:var(--accent);color:var(--bg)}
.lb-x{top:22px;right:24px}.lb-x:hover{transform:rotate(90deg)}.lb-nav{top:50%;margin-top:-23px}.prev{left:20px}.next{right:20px}

/* Halaman detail kontrakan */
.hero.wrap>*{animation:rise .9s var(--ease) backwards}
.hero.wrap>:nth-child(2){animation-delay:.1s}.hero.wrap>:nth-child(3){animation-delay:.2s}.hero.wrap>:nth-child(4){animation-delay:.3s}.hero.wrap>:nth-child(5){animation-delay:.4s}
.cover{overflow:hidden;border-radius:4px}
.cover img{transform:scale(1.14) translate3d(0,var(--py,0px),0);will-change:transform}
.gal figure{overflow:hidden;border-radius:4px}.gal img{transition:transform .9s var(--ease)}.gal figure:hover img{transform:scale(1.06)}
.flyer img{transition:transform .8s var(--ease)}.flyer img:hover{transform:scale(1.02)}
.price{transition:background .4s}.price:hover{background:var(--surface)}
.lb{display:flex;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}.lb.open{opacity:1;visibility:visible}
.lb img{transform:scale(.92);transition:transform .6s var(--ease)}.lb.open img{transform:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
.js [data-reveal],.js .split .wd>i{opacity:1!important;transform:none!important;clip-path:none!important}.cursor,.progress{display:none}}