/* Efek typing teks Visi di hero beranda.
   Diadaptasi dari contoh "Typing Text Effect" (CodingNepal), disesuaikan konteks:
   - Font Muli/Mulish (Google) — ramping & tipis.
   - Warna gradasi biru→hijau→orange yang mengalir, bergelombang lembut.
   - Posisi absolute (tengah→kanan, di atas goals-slider) → TIDAK menggeser layout.
   Dimuat hanya di beranda (di-push dari site/home.php). */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&display=swap');

.hero-visi-type {
  position: absolute;
  /* Blok dimulai ~30% dari kiri lalu melebar ke kanan → cukup lebar supaya
     teks jatuh 2–3 baris saja (tidak menjulang naik ke atas). */
  left: 30%;
  right: clamp(24px, 5vw, 80px);
  /* Naikkan supaya seluruh 2–3 baris berada DI ATAS card kecil goals-slider. */
  bottom: clamp(190px, 24vh, 260px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
  text-align: left;
  font-family: 'Mulish', 'Muli', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  /* Hanya awal kata yang kapital — bukan semua huruf besar. */
  text-transform: capitalize;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: .01em;
  color: #12a374; /* fallback bila background-clip:text tak didukung */
  /* Tinggi minimal supaya band tidak "meloncat" saat teks kosong (fase hapus). */
  min-height: 1.28em;
}

/* Huruf tampil dengan gradasi HIJAU khas UM Pontianak (bukan warna gelap),
   bayangan sangat tipis (tidak terlalu timbul), dan gelombang lembut: pita
   hijau terang mengalir bolak-balik menembus teks. */
.hero-visi-type .hvt-text {
  display: inline-block;
  /* Gradasi BIRU → HIJAU pekat → ORANGE, mengalir menembus tiap kalimat. */
  background: linear-gradient(100deg,
    #0a5dc2 0%, #12a374 30%, #0e6e4e 52%, #f7a01a 78%, #ff9500 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(14, 110, 78, .18));
  /* Dua lapis: warna gradasi mengalir (hvtWave) + badan teks bergelombang lembut (hvtSway). */
  animation: hvtWave 7s ease-in-out infinite, hvtSway 4.5s ease-in-out infinite;
}
@keyframes hvtWave {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes hvtSway {
  0%, 100% { transform: translateY(0) skewX(0deg); }
  25%      { transform: translateY(-2px) skewX(-1.2deg); }
  75%      { transform: translateY(2px) skewX(1.2deg); }
}

/* Kursor ketik: batang tipis warna aksen brand, berkedip halus saat idle. */
.hero-visi-type .hvt-text::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .95em;
  margin-left: .06em;
  vertical-align: -0.1em;
  background: #12a374;
  border-radius: 2px;
  animation: hvtBlink .7s steps(1) infinite;
}
/* Saat sedang mengetik / menghapus → kursor solid (tidak berkedip) = lebih mulus. */
.hero-visi-type.is-typing .hvt-text::after { animation: none; opacity: 1; }

@keyframes hvtBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 900px) { .hero-visi-type { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-visi-type .hvt-text,
  .hero-visi-type .hvt-text::after { animation: none; }
}