/**
 * Tasqif Theme — Custom CSS
 * Berisi efek visual yang tidak bisa dibentuk murni dari utility class Tailwind:
 * scroll reveal, tekstur geometris, efek 3D buku, ribbon badge, tab aktif,
 * grain paper texture, dan penyesuaian typography plugin.
 *
 * @package TasqifTheme
 */

/* ==========================================================
   1. SCROLL REVEAL
   Dipakai lewat class .reveal di banyak section. Dipicu oleh
   initScrollReveal() di main.js (IntersectionObserver).
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ==========================================================
   2. GEO PATTERN — tekstur kisi geometris (nuansa ukiran Islami
   kontemporer), dua lapis kepadatan supaya ada kedalaman tapi
   tetap sangat halus. Murni CSS, tanpa file gambar (ringan).
   ========================================================== */
.geo-pattern {
  background-image:
    repeating-linear-gradient(45deg,  rgba(14,59,44,0.05) 0, rgba(14,59,44,0.05) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(-45deg, rgba(14,59,44,0.05) 0, rgba(14,59,44,0.05) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(45deg,  rgba(184,134,47,0.035) 0, rgba(184,134,47,0.035) 1px, transparent 1px, transparent 136px),
    repeating-linear-gradient(-45deg, rgba(184,134,47,0.035) 0, rgba(184,134,47,0.035) 1px, transparent 1px, transparent 136px);
}

/* ==========================================================
   3. GRAIN OVERLAY — tekstur butiran kertas halus di background
   body. Efek "mahal" ala kertas kitab, cuma radial-gradient
   diulang, tanpa asset gambar sama sekali.
   ========================================================== */
body.grain-overlay {
  background-image: radial-gradient(rgba(33,30,24,0.55) 0.6px, transparent 0.6px);
  background-size: 3.5px 3.5px;
}

/* ==========================================================
   4. HERO GLOW — spotlight lembut di belakang visual hero
   ========================================================== */
.hero-glow { position: relative; }
.hero-glow::before {
  content: '';
  position: absolute;
  inset: -16%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(184,134,47,0.18), rgba(14,59,44,0.12) 55%, transparent 76%);
  filter: blur(34px);
}

/* ==========================================================
   5. BOOK 3D EFFECT — lapisan "halaman" di belakang cover buku
   ========================================================== */
.book-spine-pages {
  position: absolute;
  inset: 0;
  transform: translate(6px, 7px);
  border-radius: 0.5rem;
  background: repeating-linear-gradient(90deg, #F1E9D8 0, #F1E9D8 1.5px, #E3D7BC 1.5px, #E3D7BC 3px);
  box-shadow: 0 12px 22px -8px rgba(33,30,24,0.4);
}

/* ==========================================================
   6. RIBBON TAG — bentuk pita pembatas buku (signature motif)
   ========================================================== */
.ribbon-tag {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.15);
}

/* ==========================================================
   7. TAB AKTIF — Level Kurikulum (dikontrol oleh switchLevelTab()
   di main.js, menambah/menghapus class ini)
   ========================================================== */
.tab-active {
  background-color: #0E3B2C;
  color: #FAF6EC;
  box-shadow: 0 10px 30px -10px rgba(14,59,44,0.22);
}

/* ==========================================================
   8. HEADER — bayangan halus saat halaman discroll
   ========================================================== */
#site-header.header-scrolled {
  box-shadow: 0 8px 30px -14px rgba(33,30,24,0.20);
}

/* ==========================================================
   9. TYPOGRAPHY PLUGIN OVERRIDE — supaya warna prose (artikel)
   ikut identitas brand, bukan abu-abu default plugin
   ========================================================== */
.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: #0E3B2C;
  text-decoration-color: rgba(14,59,44,0.35);
  font-weight: 600;
}
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  border-left-color: #B8862F;
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: #211E18;
}
.prose :where(h2, h3, h4):not(:where([class~="not-prose"] *)) {
  font-family: 'Fraunces', serif;
  color: #211E18;
}
.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: #211E18;
}

/* ==========================================================
   10. AKSESIBILITAS — focus ring konsisten untuk elemen interaktif
   ========================================================== */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #0E3B2C;
  outline-offset: 2px;
  border-radius: 4px;
}