@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dasar: latar krem hangat, teks cokelat tua agar kontrasnya kuat (WCAG AA). */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #fffbf3;
  color: #2b1a12;
  -webkit-font-smoothing: antialiased;
  /* Pengaman mobile: elemen lebar (cahaya blur, kartu) tidak boleh
     membuat halaman bisa digeser menyamping. overflow-x: clip (bukan
     hidden) supaya navigasi sticky tetap menempel saat digulir. */
  overflow-x: clip;
}

/* Kartu kaca: latar putih semi-transparan, blur, dan border terang.
   Dipakai di semua kartu agar bahasanya konsisten, variasinya ada di
   warna cahaya dan ornamen tiap templat, bukan di gaya kartu yang seragam. */
.kartu-kaca {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 45px rgba(110, 42, 24, 0.12);
}

.kartu-kaca-gelap {
  background: rgba(43, 26, 18, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff8ee;
}

/* Cahaya ambient hangat di belakang kartu. Bukan orbs acak:
   tiap cahaya menandai satu area (hero, harga, penutup) dan warnanya
   selalu emas, persik, atau terakota. */
.cahaya-hangat {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
}

/* Fokus keyboard yang jelas untuk aksesibilitas. */
:focus-visible {
  outline: 3px solid #c08a2b;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Tombol utama: tinggi minimal 48px agar nyaman disentuh di ponsel. */
.tombol-utama {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.8rem 1.5rem;
}

/* Animasi masuk yang halus. Dihormati penuh oleh aturan di bawah
   untuk pengguna yang mengaktifkan pengurangan gerak. */
@keyframes naik-halus {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animasi-masuk {
  animation: naik-halus 0.5s ease-out both;
}

/* Reveal saat seksi masuk layar (templat Zamrud): fade lembut saja,
   tanpa geser — meniru referensi yang gerakannya kalem dan tidak
   dramatis. IntersectionObserver di komponen menambahkan kelas
   tampil-aktif. Efek ini butuh JavaScript — wajar untuk halaman
   undangan interaktif penuh (sampul, musik, hitung mundur, dan
   lightbox juga begitu). */
.tampil {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.tampil.tampil-aktif {
  opacity: 1;
  transform: none;
}

/* Kemunculan kolom bersyarat (jumlah tamu RSVP saat memilih Hadir):
   fade + geser turun sedikit, supaya kolom tidak sekadar pop. */
@keyframes muncul-halus {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.muncul-halus {
  animation: muncul-halus 0.3s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}