/* ============================================================
   ANIMATIONS.CSS - Web Design & Development by KitaBikin.Web.id
   Rumata Propertindo
   ============================================================ */

/* ---------- Reveal (fade/slide saat scroll) ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

.reveal-lg{transform:translateY(90px); transition:transform 1s cubic-bezier(.16,1,.3,1);}
.reveal-lg.in{transform:translateY(0);}

.reveal-slow{opacity:0; transform:translateY(28px); transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);}
.reveal-slow.in{opacity:1; transform:translateY(0);}

.reveal-kontak-text{transform:translateY(200px); transition:transform 1.4s cubic-bezier(.16,1,.3,1);}
.reveal-kontak-text.in{transform:translateY(0);}

/* Foto di section Kontak */
.reveal-photo{opacity:0; transform:translateY(60px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.reveal-photo.in{opacity:1; transform:translateY(0);}

.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
/* ---------- Delay khusus Mengapa Kami: kartu naik satu-satu (0.2s per kartu) ---------- */
#mengapa .why-grid.reveal-stagger.in > *:nth-child(1){transition-delay:.2s;}
#mengapa .why-grid.reveal-stagger.in > *:nth-child(2){transition-delay:.4s;}
#mengapa .why-grid.reveal-stagger.in > *:nth-child(3){transition-delay:.6s;}

/* ---------- Delay khusus Yang Kami Bawa: 6 item naik satu-satu ---------- */
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(1){transition-delay:.15s;}
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(2){transition-delay:.3s;}
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(3){transition-delay:.45s;}
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(4){transition-delay:.6s;}
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(5){transition-delay:.75s;}
#dedikasi .why-grid-2.reveal-stagger.in > *:nth-child(6){transition-delay:.9s;}

/* ---------- Delay khusus Cara Pembelian: lebih rapat (0.2s per step) ---------- */
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(1){transition-delay:.2s;}
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(2){transition-delay:.4s;}
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(3){transition-delay:.6s;}
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(4){transition-delay:.8s;}
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(5){transition-delay:1.0s;}
#cara-pembelian .steps.reveal-stagger.in > *:nth-child(6){transition-delay:1.2s;}

/* ---------- Delay khusus daftar Legalitas: mulai setelah paragraf reveal-slow selesai (~0.8s) ---------- */
#legalitas .legal-list.reveal-stagger.in > *:nth-child(1){transition-delay:.9s;}
#legalitas .legal-list.reveal-stagger.in > *:nth-child(2){transition-delay:1.1s;}
#legalitas .legal-list.reveal-stagger.in > *:nth-child(3){transition-delay:1.3s;}
#legalitas .legal-list.reveal-stagger.in > *:nth-child(4){transition-delay:1.5s;}
#legalitas .legal-list.reveal-stagger.in > *:nth-child(5){transition-delay:1.7s;}
#legalitas .legal-list.reveal-stagger.in > *:nth-child(6){transition-delay:1.9s;}

/* ---------- Decor (elemen dekoratif: drop-in, rise-in, diag, float) ---------- */
@keyframes decorFloat{
  0%   { transform:translateY(0px); }
  50%  { transform:translateY(-14px); }
  100% { transform:translateY(0px); }
}
@keyframes decorDropIn{
  0%   { opacity:0; transform:translateY(-320px); }
  100% { opacity:.95; transform:translateY(0); }
}
@keyframes decorRiseIn{
  0%   { opacity:0; transform:translateY(320px); }
  100% { opacity:.95; transform:translateY(0); }
}
img.decor-drop, div.decor-drop{ opacity:0; transform:translateY(-320px); }
img.decor-drop.in, div.decor-drop.in{
  animation: decorDropIn 1.4s cubic-bezier(.16,1,.3,1) forwards,
             decorFloat 5s ease-in-out infinite 1.4s;
}
img.decor-rise, div.decor-rise{ opacity:0; transform:translateY(320px); }
img.decor-rise.in, div.decor-rise.in{
  animation: decorRiseIn 1.4s cubic-bezier(.16,1,.3,1) forwards,
             decorFloat 5s ease-in-out infinite 1.4s;
}
@keyframes decorDiagIn{
  0%   { opacity:0; transform:translate(-220px, -160px) rotate(-18deg); }
  100% { opacity:.7; transform:translate(0, 0) rotate(0deg); }
}
img.decor-diag{ opacity:0; transform:translate(-220px, -160px) rotate(-18deg); }
img.decor-diag.in{
  animation: decorDiagIn 1.5s cubic-bezier(.16,1,.3,1) forwards,
             decorFloat 5s ease-in-out infinite 1.5s;
}
@keyframes decorDropDiagIn{
  0%   { opacity:0; transform:translate(200px, -420px); }
  100% { opacity:0.9; transform:translate(0, 0); }
}
img.decor-drop-diag, div.decor-drop-diag{ opacity:0; transform:translate(200px, -420px); }
img.decor-drop-diag.in, div.decor-drop-diag.in{
  animation: decorDropDiagIn 2.6s cubic-bezier(.22,.61,.36,1) forwards,
             decorFloat 5s ease-in-out infinite 2.6s;
}
.decor-idle-float{
  opacity:1;
  animation: decorFloat 5s ease-in-out infinite;
}

/* ---------- Decor Pojok Kanan Atas - Pilih Kavling ---------- */
@keyframes decorDropInXL{
  0%   { opacity:0; transform:translateY(-600px); }
  100% { opacity:.35; transform:translateY(0); }
}
.decor-drop.decor-kavling-corner{ opacity:0; transform:translateY(-600px); }
.decor-drop.decor-kavling-corner.in{
  animation: decorDropInXL 2.8s cubic-bezier(.16,1,.3,1) forwards,
             decorFloat 5s ease-in-out infinite 2.8s;
}
/* ---------- Animasi khusus H3/lead: jarak lebih jauh, sedikit lebih pelan ---------- */
.reveal.reveal-h3{
  transform:translateY(48px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}

/* ---------- Reveal-slow dengan jarak lebih jauh (khusus paragraf legalitas) ---------- */
#legalitas .lead.reveal-slow{
  transform:translateY(80px);
  transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
#legalitas .lead.reveal-slow.in{
  transform:translateY(0);
}

/* ---------- Reveal-slow dengan jarak lebih jauh (khusus paragraf legalitas) ---------- */
#legalitas .lead.reveal-slow{
  transform:translateY(80px);
  transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
#legalitas .lead.reveal-slow.in{
  transform:translateY(0);
}