/* ===== Desa Bajugan — lapisan gerak "pesisir": air pasang, ombak, perahu layar, kilau matahari di laut =====
   Hanya transform/opacity. Aktif bila <html class="mo">; tanpa JS / "kurangi gerakan" halaman tampil statis utuh. */

/* 1. Pembuka: air laut naik memenuhi layar, lalu surut ke atas */
.mo-intro{position:fixed;inset:0;z-index:9999;overflow:hidden;display:grid;place-items:center;color:#fff;background:#0b3a4d;transition:transform 1s cubic-bezier(.77,0,.18,1)}
.mo-intro.out{transform:translateY(-102%)}
.mo-water{position:absolute;left:-5%;right:-5%;bottom:0;height:130%;background:linear-gradient(180deg,#087fa7 0%,#0a6486 45%,#0b3a4d 100%);transform:translateY(100%);animation:moFill 1.7s .1s cubic-bezier(.3,.7,.2,1) forwards}
.mo-water::before,.mo-water::after{content:"";position:absolute;left:0;top:-38px;width:200%;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 Q50 2 100 22 T200 22 T300 22 T400 22 V40Z' fill='%23087fa7'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;animation:moWaveX 2.4s linear infinite}
.mo-water::after{top:-30px;opacity:.55;animation-duration:3.6s;animation-direction:reverse}
@keyframes moFill{to{transform:translateY(8%)}}
@keyframes moWaveX{to{transform:translateX(-50%)}}
.mo-box{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;text-align:center;transition:opacity .4s}
.mo-intro.out .mo-box{opacity:0}
.mo-logo{width:84px;height:84px;object-fit:contain;opacity:0;transform:translateY(16px) scale(.8);animation:moPop .7s .9s cubic-bezier(.2,1.4,.4,1) forwards;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.mo-name{font-weight:800;font-size:1.5rem;line-height:1.1;letter-spacing:.04em;opacity:0;animation:moUp .7s 1.1s ease forwards}
.mo-name small{display:block;margin-top:8px;font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#f0c466}
@keyframes moPop{to{opacity:1;transform:none}}
@keyframes moUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 2. Hero: laut yang menghampar pelan, ombak di dasar, judul per kata, tokoh masuk dari kanan */
html.mo .coast-landscape{transform-origin:60% 55%;animation:moKen 26s ease-in-out infinite alternate}
@keyframes moKen{from{transform:scale(1.02)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
.coast-hero{position:relative}
.mo-waves{position:absolute;left:0;right:0;bottom:-1px;height:70px;overflow:hidden;pointer-events:none;z-index:2}
.mo-waves i{position:absolute;left:0;bottom:0;width:200%;height:100%;background-repeat:repeat-x;background-size:50% 100%}
.mo-waves i:nth-child(1){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 V40 Q75 12 150 40 T300 40 T450 40 T600 40 V70Z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E");animation:moWaveX 14s linear infinite}
.mo-waves i:nth-child(2){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 V50 Q75 28 150 50 T300 50 T450 50 T600 50 V70Z' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E");animation:moWaveX 9s linear infinite reverse}
.mo-waves i:nth-child(3){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 V58 Q75 42 150 58 T300 58 T450 58 T600 58 V70Z' fill='%23ffffff'/%3E%3C/svg%3E");animation:moWaveX 6s linear infinite}
html.mo .coast-intro .kicker,html.mo .coast-intro p,html.mo .coast-actions>*,html.mo .hero-coordinate{opacity:0;translate:-22px 0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--k,0)*110ms)}
html.mo.mo-go .coast-intro .kicker,html.mo.mo-go .coast-intro p,html.mo.mo-go .coast-actions>*,html.mo.mo-go .hero-coordinate{opacity:1;translate:0 0}
html.mo .coast-intro h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
html.mo .coast-intro h1 .w>span{display:inline-block;transform:translateY(108%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--i)*65ms)}
html.mo.mo-go .coast-intro h1 .w>span{transform:none}
html.mo:not(.mo-go) .coast-intro h1:not([data-mo]){opacity:0}
html.mo .hero-leader img{opacity:0;translate:70px 0;transition:opacity 1s ease calc(var(--d,0ms) + 350ms),translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 350ms)}
html.mo.mo-go .hero-leader img{opacity:1;translate:0 0}
html.mo.mo-go .hero-leader-halo{animation:moHalo 4.5s ease-in-out 2s infinite alternate}
@keyframes moHalo{from{scale:1;opacity:.8}to{scale:1.07;opacity:1}}
html.mo .hero-leader-name{opacity:0;translate:0 16px;transition:opacity .7s ease calc(var(--d,0ms) + 1000ms),translate .7s ease calc(var(--d,0ms) + 1000ms)}
html.mo.mo-go .hero-leader-name{opacity:1;translate:0 0}
html.mo.mo-go .coast-button.gold{animation:moShine 5s ease-in-out 3s infinite}
@keyframes moShine{0%,80%,100%{box-shadow:0 0 0 0 rgba(240,196,102,0)}90%{box-shadow:0 0 0 12px rgba(240,196,102,.28)}}

/* 3. Muncul saat digulir */
html.mo .mo-r{opacity:0;translate:0 30px;transition:opacity .75s ease,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*85ms)}
html.mo .mo-r.mo-in{opacity:1;translate:0 0}
html.mo .mo-r.mo-sl{translate:-36px 0}html.mo .mo-r.mo-sr{translate:36px 0}
html.mo .mo-r.mo-sl.mo-in,html.mo .mo-r.mo-sr.mo-in{translate:0 0}
html.mo .mo-r.mo-pop{translate:0 0;scale:.88}html.mo .mo-r.mo-pop.mo-in{scale:1}
html.mo .coast-section-head h2::after,html.mo .numbers-title h2::after{content:"";display:block;height:4px;width:60px;margin-top:12px;border-radius:9px;background:#f0b44c;transform:scaleX(0);transform-origin:left;transition:transform .9s .25s cubic-bezier(.2,.8,.2,1)}
html.mo .coast-section-head.mo-in h2::after,html.mo .numbers-title.mo-in h2::after{transform:none}

/* 4. Mikro-interaksi */
.mo-prog{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#087fa7,#3dd6d0,#f0b44c);z-index:9998;pointer-events:none}
.coast-button,.btn,.site-header .btn{position:relative;overflow:hidden}
.mo-rip{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.75);transform:scale(0);animation:moRip .8s ease-out forwards;pointer-events:none}
.mo-rip.b{animation-delay:.12s;opacity:.7}
@keyframes moRip{to{transform:scale(9);opacity:0}}
.potential-card,.product-card,.svc-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.potential-card:hover,.product-card:hover{transform:translateY(-6px)}
.svc-card:active{transform:scale(.95)}
.bj-tilt{transition:transform .25s ease-out}

/* 5. Tirai antar halaman: gelombang air menyapu naik */
.mo-cur,html.mo-cur-in::before{content:"";position:fixed;left:0;right:0;top:0;bottom:0;z-index:10000;pointer-events:none;background:linear-gradient(180deg,#087fa7,#0b3a4d)}
.mo-cur{transform:translateY(102%);transition:transform .6s cubic-bezier(.77,0,.18,1);display:grid;place-items:center}
.mo-cur::before,html.mo-cur-in::after{content:"";position:absolute;left:0;top:-36px;width:200%;height:38px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 Q50 2 100 22 T200 22 T300 22 T400 22 V40Z' fill='%23087fa7'/%3E%3C/svg%3E") repeat-x;background-size:50% 100%;animation:moWaveX 1.6s linear infinite}
.mo-cur.on{transform:none}
.mo-cur img{width:60px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3));animation:moBobL 1.1s ease-in-out infinite alternate}
@keyframes moBobL{to{translate:0 -8px}}
html.mo-cur-in::before{transition:transform .8s cubic-bezier(.77,0,.18,1)}
html.mo-cur-in::after{z-index:10001;position:fixed}
html.mo-cur-out::before{transform:translateY(-102%)}html.mo-cur-out::after{display:none}

/* 6. Lanskap garis pesisir: matahari, ombak, perahu layar, kelapa, ikan */
.bj-land{--p:1;max-width:1100px;margin:0 auto;padding:34px 24px 30px;text-align:center;color:#087fa7}
.bj-land svg{display:block;width:100%;height:auto;overflow:visible}
.bj-land .ln path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:clamp(0,calc(1 - (var(--p)*1.9 - var(--s))*1.7),1)}
.bj-land .ln:nth-child(2) path{color:#d99a2b}
.bj-land .ln:nth-child(4) path{opacity:.6}
.bj-land .boat{transform-box:fill-box;transform-origin:50% 90%;animation:moBoat 5s ease-in-out infinite alternate}
@keyframes moBoat{from{transform:rotate(-2.5deg) translateY(0)}to{transform:rotate(2.5deg) translateY(-5px)}}
.bj-land .ln:nth-child(7) path{color:#0b3a4d}
.bj-land .sunf{fill:#f0b44c;opacity:clamp(0,calc(var(--p)*2.4 - 1.3),.95)}
.bj-land-cap{margin:10px auto 0;max-width:46ch;font-weight:700;font-size:1.05rem;line-height:1.5;color:#0b3a4d;opacity:clamp(0,calc(var(--p)*3 - 1.6),1)}

/* 7. Bagian sinematik "air pasang": laut tersingkap dari kiri ke kanan */
.bj-cine{position:relative;background:#0b3a4d}
.bj-cine-pin{position:relative;overflow:hidden;display:grid;place-items:center;min-height:480px;padding:80px 24px;color:#fff;text-align:center;background:#0b3a4d}
.bj-cine-bg{position:absolute;inset:-5%;background:url(../images/pesisir-bajugan.jpg) center/cover;transform:scale(calc(1.2 - var(--iris,1)*.16));clip-path:inset(0 calc((1 - var(--iris,1))*100%) 0 0);will-change:transform,clip-path}
.bj-cine-edge{position:absolute;top:0;bottom:0;width:46px;left:calc(var(--iris,1)*100% - 23px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:calc(1 - var(--done,1));filter:blur(6px)}
.bj-cine-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,58,77,.55),rgba(11,58,77,.86))}
.bj-cine-txt{position:relative;display:grid;gap:44px;max-width:780px}
.bj-cine .c{display:grid;justify-items:center;gap:8px}
.bj-cine .big{font-weight:800;font-size:clamp(4.4rem,15vw,9.4rem);line-height:.9;letter-spacing:-.04em;color:#f0c466;font-variant-numeric:tabular-nums}
.bj-cine .c span{font-weight:600;font-size:clamp(1.05rem,2.6vw,1.55rem);line-height:1.45;max-width:32ch}
.bj-cine-cta{margin-top:18px}
.bj-cine-dots{display:none}
.bj-cine.on{height:300vh}
.bj-cine.on .bj-cine-pin{position:sticky;top:0;height:100vh;min-height:0;padding:0 24px}
.bj-cine.on .bj-cine-txt{position:absolute;inset:0;max-width:none;display:block}
.bj-cine.on .c{position:absolute;left:50%;top:50%;width:min(92%,780px);transform:translate(-50%,calc(-50% + (1 - var(--o,1))*40px));opacity:var(--o,1);pointer-events:none}
.bj-cine.on .c3{pointer-events:auto}
.bj-cine.on .bj-cine-dots{display:flex;gap:10px;position:absolute;left:50%;bottom:34px;transform:translateX(-50%)}
.bj-cine-dots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.bj-cine-dots i.a{width:30px;background:#f0b44c}

/* 8. Kilau matahari di laut (partikel) */
.mo-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* sticky butuh overflow-x:clip */
html.mo,html.mo body{overflow-x:clip}
@media(max-width:700px){.bj-cine.on{height:240vh}.mo-waves{height:46px}}
@media(prefers-reduced-motion:reduce){.mo-intro,.mo-prog,.mo-cur,html.mo-cur-in::before,html.mo-cur-in::after,.mo-fx,.mo-waves i{display:none!important}
 html.mo .mo-r,html.mo .coast-intro .kicker,html.mo .coast-intro p,html.mo .coast-actions>*,html.mo .hero-coordinate,html.mo .hero-leader img,html.mo .hero-leader-name,html.mo .coast-intro h1 .w>span{opacity:1!important;translate:none!important;scale:none!important;transform:none!important;animation:none!important}
 html.mo .coast-landscape{animation:none}.bj-cine.on{height:auto}.bj-land{--p:1!important}}

/* Panorama realistis; air bergerak mengikuti progres guliran --p. */
.bj-land{--p:0;max-width:1180px;margin:22px auto 38px;padding:0 24px;text-align:center}
.bj-land .village-scene{position:relative;overflow:hidden;min-height:clamp(280px,40vw,470px);border-radius:28px;background:#d8ebe8;box-shadow:0 24px 64px rgba(9,58,73,.18);isolation:isolate}
.bj-land .village-scene::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 50%,rgba(4,42,55,.4));pointer-events:none}
.bj-land img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:calc(1.055 - var(--p)*.025);transform:translate3d(0,calc((.5 - var(--p))*18px),0);will-change:transform}
.bj-land .water-flow{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:calc(.15 + var(--p)*.78);will-change:transform,background-position}
.bj-land .waterfall{left:0;top:34%;width:31%;height:48%;background:repeating-linear-gradient(102deg,transparent 0 8px,rgba(255,255,255,.66) 10px 15px,transparent 18px 27px);filter:blur(1px);clip-path:polygon(4% 0,74% 0,92% 100%,0 100%);transform:translateY(calc((var(--p) - .5)*52px));background-position:0 calc(var(--p)*180px);animation:realFall 1.15s linear infinite}
.bj-land .river{left:0;right:0;bottom:-5%;height:32%;background:repeating-linear-gradient(168deg,transparent 0 19px,rgba(197,246,255,.46) 22px 26px,transparent 29px 45px);transform:translateX(calc((var(--p) - .5)*34px));background-position:calc(var(--p)*220px) 0;animation:realRiver 3.2s linear infinite}
.bj-land .scene-mist{position:absolute;z-index:2;inset:37% -8% 8%;background:radial-gradient(ellipse at 22% 48%,rgba(255,255,255,.42),transparent 36%),radial-gradient(ellipse at 70% 36%,rgba(255,255,255,.2),transparent 45%);filter:blur(18px);opacity:calc(.62 - var(--p)*.2);transform:translateX(calc((var(--p) - .5)*70px));pointer-events:none}
.bj-land-cap{position:relative;z-index:4;display:grid;gap:4px;margin:-70px 30px 0;padding:21px 25px;border-radius:20px;background:rgba(5,55,70,.91);color:#fff;box-shadow:0 16px 38px rgba(5,46,58,.22);backdrop-filter:blur(8px)}
.bj-land-cap strong{font-size:clamp(1.18rem,2.2vw,1.65rem)}.bj-land-cap span{color:rgba(255,255,255,.88);line-height:1.55}
@keyframes realFall{to{background-position:0 90px}}@keyframes realRiver{to{background-position:150px 0}}
@media(max-width:640px){.bj-land{padding:0 14px}.bj-land .village-scene{min-height:310px;border-radius:20px}.bj-land img{object-position:35% center}.bj-land-cap{margin:-52px 12px 0;padding:17px 16px}.bj-land .waterfall{width:44%}}
@media(prefers-reduced-motion:reduce){.bj-land .water-flow{animation:none}.bj-land img,.bj-land .water-flow,.bj-land .scene-mist{transform:none!important}}