/* TrackFi landing · motion layer (maskot Beru + celengan, demo ketik, notifikasi, reveal) */
.scene{position:absolute;pointer-events:none;user-select:none}
.scene svg{position:absolute;bottom:0;overflow:visible}
.scene .fi{left:0;width:120px;height:140px}
.scene .pig{width:160px;height:120px}
.fi .fi-bob{animation:fiBob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.fi .fi-eyes{animation:fiBlink 4.2s infinite;transform-box:fill-box;transform-origin:50% 60%}
.fi .fi-arm{transform-box:fill-box;transform-origin:0% 85%}
.fi .ear{animation:ear 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:70% 90%}
.fi .ear.r{animation-delay:.25s;transform-origin:30% 90%}
@keyframes fiBob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-5px) scale(.98,1.02)}55%{transform:translateY(-5px)}}
@keyframes fiBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes ear{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}}
.pig .pig-body{transform-box:fill-box;transform-origin:50% 100%}
.coin{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#FFF3B0 0,#FCD34D 38%,#F59E0B 100%);border:2px solid #D97706;
  box-shadow:0 3px 6px rgba(146,64,14,.25);font:800 9px/22px Poppins,sans-serif;color:#92400E;text-align:center}
.plus{position:absolute;font:700 14px Poppins,sans-serif;color:var(--g);opacity:0;white-space:nowrap}
.save-card{position:absolute;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px -12px rgba(15,31,26,.28);min-width:170px}
.save-card small{display:block;font-size:12px;color:var(--sub);font-weight:500}
.save-card b{display:block;font:700 19px Poppins,sans-serif;color:var(--g);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.save-card .bar{height:7px;border-radius:9px;background:#E3F7EE;margin-top:6px;overflow:hidden}
.save-card .bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--g2),var(--g));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.save-card .goal{font-size:11px;color:var(--sub);margin-top:4px;display:flex;justify-content:space-between;gap:10px}

/* hero scene: menggantikan kartu "sisa aman" lama */
.hero-art .scene.hs{left:-34px;bottom:-6px;width:300px;height:250px;z-index:4}
.hero-art .scene.hs .pig{left:140px}
.hero-art .scene.hs .save-card{left:128px;top:0}

/* notifikasi berganti di hero */
.float.f1{transition:opacity .35s,transform .35s}
.float.f1.swap{opacity:0;transform:translateY(-8px) scale(.97)}
.float.f1 .tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--g);margin-bottom:2px}
.float.f1 .tag:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g2);box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* demo ketik */
.demo{max-width:620px;margin:0 auto 38px;background:#fff;border:1px solid var(--bd);border-radius:22px;padding:18px;box-shadow:0 24px 50px -30px rgba(4,120,87,.35)}
.demo .in{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid var(--bd);border-radius:999px;padding:12px 16px;font-size:16px;min-height:50px}
.demo .in .ty{flex:1;color:var(--ink);font-weight:500}
.demo .in .ty:after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--g);margin-left:2px;vertical-align:-3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.demo .in .send{width:34px;height:34px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.demo .out{display:flex;align-items:center;gap:12px;padding:14px 6px 2px;min-height:64px}
.demo .out .ico{width:42px;height:42px;border-radius:14px;background:#E3F7EE;display:grid;place-items:center;font-size:20px;flex:none}
.demo .out .meta{flex:1;min-width:0}
.demo .out .meta b{display:block;font-size:15px}
.demo .out .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.demo .out .chips span{font-size:12px;font-weight:600;background:var(--bg);border:1px solid var(--bd);border-radius:99px;padding:2px 9px;color:var(--sub)}
.demo .out .amt{font:700 17px Poppins,sans-serif;white-space:nowrap}
.demo .out .amt.neg{color:var(--ink)}.demo .out .amt.pos{color:var(--g)}
.demo .out>*{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.demo .out.on>*{opacity:1;transform:none}
.demo .out.on>*:nth-child(2){transition-delay:.08s}.demo .out.on>*:nth-child(3){transition-delay:.16s}
.demo .ok{font-size:12px;font-weight:600;color:var(--g);text-align:right;padding:0 6px;opacity:0;transition:opacity .3s .3s}
.demo .out.on+.ok{opacity:1}

/* final: celengan besar */
.final .final-in{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;text-align:left}
.final .final-in .btn{margin-top:4px}
.final .stage{position:relative;height:300px}
.scene.big{left:50%;bottom:0;width:340px;height:290px;margin-left:-170px;transform:scale(1.12);transform-origin:50% 100%}
.scene.big .pig{left:170px}
.scene.big .save-card{left:150px;top:0;color:var(--ink)}
.confetti{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}

/* reveal saat scroll (hanya aktif jika JS jalan) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.card,.plan,.sync-card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover,.plan:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(4,120,87,.45)}
.js .card.rv.in:hover{transform:translateY(-4px)}
.card .ic{transition:transform .25s}.card:hover .ic{transform:rotate(-8deg) scale(1.12)}
.logos.marq{display:flex;flex-wrap:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos.marq .track{display:flex;gap:8px;flex:none;animation:marq 26s linear infinite;padding-right:8px}
@keyframes marq{to{transform:translateX(-100%)}}

@media (max-width:980px){
  .hero-art .scene.hs{left:-6px;bottom:-14px;transform:scale(.86);transform-origin:0 100%}
  .final .final-in{grid-template-columns:1fr;text-align:center}
}
@media (max-width:640px){
  .hero-art .scene.hs{transform:scale(.72);left:-4px;bottom:-30px}
  .hero-art{margin-bottom:30px}
  .demo .in{font-size:14.5px}
  .final .stage{height:260px}.scene.big{transform:scale(.92)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
/* fix: kolom grid jangan melebar karena marquee */
.two>*,.hero-in>*{min-width:0}
.logos.marq{max-width:100%}
/* final: panggung terang agar maskot hijau kontras di latar hijau */
.final .stage:before{content:"";position:absolute;left:50%;bottom:-18px;width:430px;height:300px;margin-left:-215px;border-radius:50% 50% 24px 24px/60% 60% 24px 24px;background:radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.95) 0,rgba(236,253,245,.9) 55%,rgba(236,253,245,0) 72%)}
@media (max-width:640px){.final .stage:before{width:330px;margin-left:-165px}}