/* ===== Variabel warna utama (design tokens) ===== */
:root{
  --brand:#1c6a8f;
  --forest:#1f5a3d;
  --sun:#f59e0b;
  --brown:#ba8b5f;
}

/* Gulir halus saat berpindah bagian halaman */
html{scroll-behavior:smooth;}

/* Cegah overflow horizontal pada body agar tidak ada scrollbar samping */
body{overflow-x:hidden;}

/* ===== Sembunyikan scrollbar (halaman tetap bisa di-scroll) ===== */
/* Menghilangkan tampilan scrollbar di sisi kanan/bawah agar tampilan lebih
   bersih, namun fungsi scroll tetap berjalan via roda mouse / gesekan layar.
   Dibuat redundan (html/body + semua elemen + pseudo thumb/track) agar tetap
   bekerja di berbagai browser (Chrome, Edge, Safari, Firefox). */
html,
body,
:root{scrollbar-width:none;                        /* Firefox */
      -ms-overflow-style:none;}                   /* IE / Edge lawas */
*::-webkit-scrollbar{width:0;height:0;display:none;background:transparent;} /* WebKit/Blink */
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:transparent;}

/* ===== Efek reveal saat scroll ===== */
/* Elemen .reveal awalnya transparan & tergeser ke bawah; saat masuk viewport
   diberi class .in-view (via JS) sehingga muncul halus. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1;transform:none;}
/* Penundaan bertingkat agar elemen muncul bergantian (nama sesuai urutan delay). */
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
.reveal-delay-4{transition-delay:.32s;}

/* ===== Efek flash masuk ===== */
/* Animasi muncul cepat (slide dari atas) untuk elemen berkelas .animate-flash,
   misalnya pesan notifikasi. */
@keyframes flashIn{0%{opacity:0;transform:translateY(-10px);}100%{opacity:1;transform:none;}}
.animate-flash{animation:flashIn .4s ease;}

/* ===== Carousel ===== */
/* Setiap slide ditebar di area hero (position absolute); hanya slide berkelas
   .active yang terlihat, sisanya transparan & tersembunyi. */
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;visibility:hidden;}
.carousel-slide.active{opacity:1;visibility:visible;}

/* Efek Ken Burns: zoom perlahan pada latar belakang slide aktif. */
@keyframes kenburns{
  0%{transform:scale(1);}
  100%{transform:scale(1.08);}
}
.carousel-slide.active .carousel-bg{animation:kenburns 7s ease-out forwards;}

/* ===== Animasi teks hero ===== */
/* Teks hero muncul bergiliran (slide ke atas) dengan penundaan berbeda per elemen. */
@keyframes heroUp{0%{opacity:0;transform:translateY(34px);}100%{opacity:1;transform:none;}}
.hero-anim-1{animation:heroUp .8s .1s ease both;}
.hero-anim-2{animation:heroUp .8s .25s ease both;}
.hero-anim-3{animation:heroUp .8s .4s ease both;}

/* Animasi melayang naik-turun (mengambang) untuk elemen dekoratif. */
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.float-anim{animation:floatY 6s ease-in-out infinite;}

/* ===== Chip ikon fasilitas ===== */
/* Chip ikon: menempatkan ikon di tengah secara horizontal & vertikal. */
.icon-chip{display:inline-flex;align-items:center;justify-content:center;}

/* ===== Efek hover kartu rumah ===== */
/* Kartu rumah terangkat ke atas + bayangan membesar saat hover, lalu gambar
   di dalamnya membesar perlahan (zoom). */
.house-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.house-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px -22px rgba(10,37,25,.4);}
.house-card:hover .card-img{transform:scale(1.06);}
.card-img{transition:transform .5s ease;}

/* ===== Logo teks bercahaya (khusus header frontend) ===== */
/* Menciptakan efek kilau (shine) yang bergerak melintasi teks logo secara looping.
   Lapisan ::after menduplikasi teks (via content:attr(data-text)) dengan gradien
   terang dan digabungkan lewat blend mode agar tampak menyala. */
.brand-glow{position:relative;}
.brand-glow::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(100deg,
    transparent 0%,
    transparent 42%,
    rgba(255,244,214,.95) 50%,
    transparent 58%,
    transparent 100%);
  background-size:200% auto;
  background-position:0% center;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  mix-blend-mode:soft-light;
  filter:drop-shadow(0 0 6px rgba(245,158,11,.35));
  animation:brandTextclip 3.2s linear infinite;
}
/* Menggeser posisi gradien kilau dari kiri ke kanan secara terus-menerus. */
@keyframes brandTextclip{
  0%{background-position:0% center;}
  100%{background-position:-200% center;}
}

/* ===== Pengurangan gerakan (aksesibilitas) ===== */
/* Untuk pengguna yang memilih 'reduce motion': matikan semua animasi/transisi
   dan tampilkan elemen reveal/carousel secara langsung tanpa efek. */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .carousel-slide{animation:none!important;}
}