/* ============================================================
   CoreCorp — motion layer
   Semua efek aktif HANYA kalau motion.js menambahkan class .m-js
   di <html> (tidak aktif untuk prefers-reduced-motion).
   ============================================================ */

/* ---------- Progress bar scroll (gradasi 7 warna unit) ---------- */
.m-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:100; pointer-events:none;
  background:linear-gradient(90deg,#c8791f,#7a4a24,#2c4230,#0b7fc4,#4338ca,#3c7a4b,#2e6fa3);
  transform-origin:0 50%; transform:scaleX(0);
}

/* ---------- Transisi antar-halaman ---------- */
.m-js body{animation:m-pagein .55s cubic-bezier(.2,.7,.2,1) backwards;}
@keyframes m-pagein{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.m-js body.m-leaving{opacity:0; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease;}

/* ---------- Navbar masuk ---------- */
.m-js header.nav{animation:m-navin .7s cubic-bezier(.2,.7,.2,1) both;}
@keyframes m-navin{from{transform:translateY(-100%);} to{transform:none;}}
.m-js .nav-links li{animation:m-fadedown .6s cubic-bezier(.2,.7,.2,1) both;}
.m-js .nav-links li:nth-child(1){animation-delay:.15s;} .m-js .nav-links li:nth-child(2){animation-delay:.20s;}
.m-js .nav-links li:nth-child(3){animation-delay:.25s;} .m-js .nav-links li:nth-child(4){animation-delay:.30s;}
.m-js .nav-links li:nth-child(5){animation-delay:.35s;} .m-js .nav-links li:nth-child(6){animation-delay:.40s;}
.m-js .nav-links li:nth-child(7){animation-delay:.45s;} .m-js .nav-links li:nth-child(8){animation-delay:.50s;}
@keyframes m-fadedown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;}}
header.nav.m-scrolled{box-shadow:0 10px 30px -18px rgba(10,10,10,.35);}

/* ---------- Hero: kata muncul satu-satu ---------- */
.m-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em;}
.m-wi{display:inline-block; transform:translateY(112%); animation:m-wordup .85s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.25s + var(--i) * .07s);}
@keyframes m-wordup{to{transform:none;}}
.m-hero-item{opacity:0; transform:translateY(22px); animation:m-itemup .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(.2s + var(--i) * .11s);}
@keyframes m-itemup{to{opacity:1; transform:none;}}
.m-hero-media{clip-path:inset(0 0 100% 0 round 20px); animation:m-clip 1.1s cubic-bezier(.7,0,.2,1) .35s forwards;}
@keyframes m-clip{to{clip-path:inset(0 0 0 0 round 20px);}}
.m-hero-media img{animation:m-zoomout 1.6s cubic-bezier(.2,.7,.2,1) .35s both;}
@keyframes m-zoomout{from{transform:scale(1.18);} to{transform:scale(1);}}

/* ---------- Blob ambient di hero beranda ---------- */
.m-hero-host{position:relative; overflow:hidden;}
.m-hero-host > .wrap{position:relative; z-index:1;}
.m-blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.34; pointer-events:none; will-change:transform;}
.m-blob.b1{width:420px; height:420px; background:#c8791f; top:-120px; right:6%; animation:m-float1 16s ease-in-out infinite;}
.m-blob.b2{width:360px; height:360px; background:#4338ca; bottom:-140px; left:-60px; animation:m-float2 19s ease-in-out infinite;}
.m-blob.b3{width:300px; height:300px; background:#0b7fc4; top:30%; left:44%; opacity:.2; animation:m-float3 22s ease-in-out infinite;}
@keyframes m-float1{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-70px,60px) scale(1.15);}}
@keyframes m-float2{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(90px,-50px) scale(1.2);}}
@keyframes m-float3{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-50px,-70px) scale(.85);}}

/* ---------- Reveal saat scroll ---------- */
.m-reveal{opacity:0; transform:translateY(34px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms);}
.m-reveal.m-left{transform:translateX(-46px);}
.m-reveal.m-right{transform:translateX(46px);}
.m-reveal.m-zoom{transform:scale(.88);}
.m-reveal.m-in{opacity:1; transform:none;}

/* ---------- Marquee nama unit ---------- */
.m-marquee{background:var(--ink); color:#fff; overflow:hidden; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1);}
.m-track{display:flex; width:max-content; animation:m-marq 38s linear infinite;}
.m-marquee:hover .m-track{animation-play-state:paused;}
.m-item{display:inline-flex; align-items:center; gap:18px; padding-right:42px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(20px,3vw,30px); letter-spacing:-.01em; white-space:nowrap; text-decoration:none; color:#fff;}
.m-item i{width:12px; height:12px; border-radius:50%; display:inline-block; background:var(--c);}
.m-item:hover{color:var(--c);}
@keyframes m-marq{to{transform:translateX(-50%);}}

/* ---------- Kartu: spotlight + tilt ---------- */
.m-card{position:relative; --mx:50%; --my:50%;}
.m-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(120,120,120,.14), transparent 65%);
  transition:opacity .3s ease;
}
.pstep.m-card::after{background:radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.12), transparent 65%);}
.m-card:hover::after{opacity:1;}
.unit-card.m-card{transition:transform .25s ease, box-shadow .25s ease; will-change:transform;}
.unit-card .uc-swatch{transition:transform .45s cubic-bezier(.3,1.6,.5,1), border-radius .45s ease;}
.unit-card:hover .uc-swatch{transform:rotate(-8deg) scale(1.18); border-radius:50%;}
.unit-card .uc-go{display:inline-block; transition:transform .25s ease;}
.unit-card:hover .uc-go{transform:translateX(8px);}

/* ---------- Tombol magnetik + shine ---------- */
.btn{position:relative; overflow:hidden;}
.btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .6s ease;
}
.btn:hover::before{left:130%;}
.btn.m-mag{transition:transform .2s ease;}

/* ---------- Peta ekosistem ---------- */
.m-js .eco-diagram svg line{stroke-dashoffset:0; animation:m-flow 1.4s linear infinite;}
@keyframes m-flow{to{stroke-dashoffset:-8;}}
.m-js .eco-diagram .eco-dot{transform:scale(0); transition:transform .7s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(.15s + var(--n,0) * .12s);}
.m-js .eco-diagram.m-in .eco-dot{transform:scale(1);}
.m-js .eco-diagram.m-in .eco-node:hover .eco-dot{transform:scale(1.14); transition-delay:0s;}
.m-js .eco-diagram .eco-label{opacity:0; transition:opacity .6s ease; transition-delay:calc(.45s + var(--n,0) * .12s);}
.m-js .eco-diagram.m-in .eco-label{opacity:1;}
.m-js .eco-diagram.m-in .eco-node.center .eco-dot{animation:m-pulse 2.6s ease-out 1.1s infinite;}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%,100%{box-shadow:0 0 0 34px rgba(255,255,255,0);}}

/* ---------- Pipeline: nomor menyala berurutan ---------- */
.pstep .pnum{transition:opacity .6s ease, color .6s ease; transition-delay:calc(.3s + var(--d,0ms));}
.pstep.m-in .pnum{opacity:1; color:#f5c26b;}

/* ---------- Efek kecil lain ---------- */
.nav-brand img{transition:transform .5s cubic-bezier(.3,1.6,.5,1);}
.nav-brand:hover img{transform:rotate(-12deg) scale(1.1);}
.eyebrow .dot{animation:m-dotpulse 2s ease-in-out infinite;}
@keyframes m-dotpulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.6); opacity:.5;}}
.footer-col a{transition:transform .2s ease, opacity .2s ease;}
.footer-col a:hover{transform:translateX(5px);}
.value-card, .price-card{transition:transform .25s ease, box-shadow .25s ease;}
.price-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(10,10,10,.35);}

@media (prefers-reduced-motion: reduce){
  .m-blob, .m-track, .m-progress{display:none;}
}

/* ============================================================
   Peta ekosistem — tampilan futuristik (neon, orbit, radar)
   ============================================================ */
.m-js .eco-wrap{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 62%, rgba(67,56,202,.22), transparent 70%),
    radial-gradient(700px 400px at 85% 10%, rgba(200,121,31,.16), transparent 70%),
    #05060a;
}
.m-js .eco-wrap::before{ /* grid teknis yang memudar ke tepi */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 55%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 65% at 50% 55%, #000 30%, transparent 78%);
  animation:m-gridmove 22s linear infinite;
}
@keyframes m-gridmove{to{background-position:46px 46px, 46px 46px;}}
.m-js .eco-wrap > .wrap{position:relative; z-index:1;}
.m-star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0; animation:m-twinkle var(--t,4s) ease-in-out var(--dl,0s) infinite; pointer-events:none;}
@keyframes m-twinkle{0%,100%{opacity:0; transform:translateY(0) scale(.6);} 50%{opacity:.9; transform:translateY(-14px) scale(1.4);}}

.m-js .eco-diagram{max-width:620px; overflow:visible;}
.m-radar{ /* sapuan radar */
  position:absolute; inset:2%; border-radius:50%; pointer-events:none; opacity:.9;
  background:conic-gradient(from 0deg, rgba(120,140,255,0) 0deg, rgba(120,140,255,0) 300deg, rgba(120,160,255,.28) 350deg, rgba(160,190,255,.55) 360deg);
  -webkit-mask-image:radial-gradient(circle, transparent 12%, #000 13%, #000 70%, transparent 71%);
          mask-image:radial-gradient(circle, transparent 12%, #000 13%, #000 70%, transparent 71%);
  animation:m-spin 7s linear infinite;
}
@keyframes m-spin{to{transform:rotate(360deg);}}
.m-hud{
  position:absolute; left:0; top:-6px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  color:#8fa0ff; text-transform:uppercase; display:flex; align-items:center; gap:8px; z-index:3;
}
.m-hud::before{content:""; width:7px; height:7px; border-radius:50%; background:#37e08b; box-shadow:0 0 10px #37e08b; animation:blink 1.4s infinite;}
.m-hud.r{left:auto; right:0; color:#6f7691;}
.m-hud.r::before{display:none;}

/* orbit & garis di dalam svg */
.m-orbit{fill:none; stroke:rgba(150,170,255,.28); stroke-width:.25; stroke-dasharray:.8 1.6; transform-box:view-box; transform-origin:50% 50%; animation:m-spin 60s linear infinite;}
.m-orbit.o2{stroke:rgba(150,170,255,.18); stroke-dasharray:1.2 2.4; animation-duration:90s; animation-direction:reverse;}
.m-orbit.o3{stroke:rgba(150,170,255,.12); stroke-dasharray:.4 1.2; animation-duration:140s;}
.m-js .eco-diagram svg line{stroke-width:.5; stroke-dasharray:1.6 1.6; opacity:.85;}
.m-spark{filter:drop-shadow(0 0 1.4px currentColor);}

/* node: halo neon + cincin berputar */
.m-js .eco-node{--c:#fff;}
.m-js .eco-node .eco-dot{
  position:relative; border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 0 30px 2px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 14px rgba(255,255,255,.35);
  color:#fff; text-shadow:0 0 8px rgba(0,0,0,.55);
}
.m-js .eco-node .eco-dot::before{
  content:""; position:absolute; inset:-11px; border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--c) 80%, #fff); opacity:.75; animation:m-spin 12s linear infinite;
}
.m-js .eco-node:nth-of-type(even) .eco-dot::before{animation-direction:reverse; animation-duration:16s;}
.m-js .eco-node.center .eco-dot{
  background:radial-gradient(circle at 35% 30%, #ffd9a0, #c8791f 70%) !important; color:#1a1004; text-shadow:none;
  box-shadow:0 0 0 7px rgba(200,121,31,.2), 0 0 60px 8px rgba(200,121,31,.55), inset 0 0 20px rgba(255,255,255,.5);
}
.m-js .eco-node.center .eco-dot::before{inset:-16px; border-color:rgba(255,200,120,.7);}
.m-js .eco-node.center .eco-dot::after{
  content:""; position:absolute; inset:-30px; border-radius:50%; border:1px solid rgba(255,200,120,.25);
  animation:m-ring 3s ease-out infinite;
}
@keyframes m-ring{0%{transform:scale(.7); opacity:.9;} 100%{transform:scale(1.5); opacity:0;}}
.m-js .eco-diagram.m-in .eco-node.center .eco-dot{animation:none;}
.m-js .eco-node span.eco-label{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:4px 10px; border-radius:100px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#dfe4ff; letter-spacing:.1em; transition:background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.m-js .eco-node:hover span.eco-label{background:color-mix(in srgb, var(--c) 35%, transparent); border-color:var(--c); color:#fff; box-shadow:0 0 18px color-mix(in srgb, var(--c) 60%, transparent);}
@media (max-width:560px){ .m-hud.r{display:none;} .m-js .eco-node span.eco-label{font-size:9px; padding:3px 7px;} }