/* Rihlah Sakinah: lapisan interaksi "quake"
   Dimuat setelah bundle utama (index-*.css). Untuk mengembalikan tampilan lama,
   hapus <link> quake.css dan <script> quake.js dari index.php / index.html. */

/* ---------- Hero: headline bergetar, terbelah perlahan, lalu tiga kata muncul ---------- */
.qk-on .hero-scene{height:400vh}
@media (max-width:900px){.qk-on .hero-scene{height:340vh}}

/* h1 asli tetap ada untuk SEO dan pembaca layar; yang terlihat adalah salinan berlapis */
.qk-on .hero-copy>h1{opacity:0}
.qk-on .hero-copy .eyebrow,
.qk-on .hero-copy>p,
.qk-on .hero-topline,
.qk-on .hero-bottomline{opacity:calc(1 - var(--qk-fade,0))}

.qk-title,.qk-words{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none}
.qk-title{will-change:transform}
.qk-slice{position:absolute;inset:0;margin:0;will-change:transform,opacity}
.qk-slice span{display:block}

/* tiga potongan dengan tepi bergerigi; tepi dalamnya sengaja saling tumpang tindih
   2% supaya tidak ada garis tipis di sambungan saat diam */
.qk-s1{clip-path:polygon(-30% -60%,130% -60%,130% 36%,100% 33%,88% 40%,74% 33%,62% 41%,48% 34%,36% 42%,22% 35%,10% 41%,-30% 35%)}
.qk-s2{clip-path:polygon(-30% 33%,10% 39%,22% 33%,36% 40%,48% 32%,62% 39%,74% 31%,88% 38%,100% 31%,130% 35%,130% 69%,100% 66%,88% 72%,74% 65%,62% 73%,48% 66%,36% 72%,22% 65%,10% 71%,-30% 67%)}
.qk-s3{clip-path:polygon(-30% 65%,10% 69%,22% 63%,36% 70%,48% 64%,62% 71%,74% 63%,88% 70%,100% 64%,130% 67%,130% 160%,-30% 160%)}

/* tiga kata yang muncul setelah potongan menghilang (diambil dari teks hero) */
.qk-words{display:flex;flex-direction:column;justify-content:center;color:var(--white,#f7f7f2);font-weight:700;letter-spacing:-.085em;line-height:.86;font-size:clamp(34px,9.4vw,150px);white-space:nowrap;text-shadow:0 6px 40px rgba(8,10,8,.55)}
.qk-w{display:block;opacity:0;will-change:transform,opacity}
.qk-w:nth-child(2){margin-left:8vw}
.qk-words em{font-family:"Cormorant Garamond",serif;font-weight:400;letter-spacing:-.06em;color:var(--gold-light,#d9bd7c)}
@media (max-width:900px){
  .qk-words{white-space:normal;font-size:clamp(46px,15vw,100px)}
  .qk-w:nth-child(2){margin-left:6vw}
}

/* cahaya emas lembut yang mengikuti kursor di atas foto hero */
.qk-light{--qk-radius:360px;position:absolute;left:0;top:0;width:calc(var(--qk-radius)*2);height:calc(var(--qk-radius)*2);z-index:-2;pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;background:radial-gradient(circle var(--qk-radius),rgba(217,189,124,.22),transparent 62%)}
@media (max-width:900px){.qk-light{--qk-radius:240px}}
@media (hover:none),(pointer:coarse){.qk-light{display:none;will-change:auto}}

/* ---------- Muncul saat di-scroll ---------- */
.qk-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-soft,cubic-bezier(.22,1,.36,1)),transform 1.1s var(--ease-soft,cubic-bezier(.22,1,.36,1));transition-delay:calc(var(--qk-i,0) * 90ms)}
.qk-reveal.qk-in{opacity:1;transform:none}

/* ---------- Kartu manfaat: cahaya mengikuti kursor ---------- */
.benefit-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(280px circle at var(--qk-sx,50%) var(--qk-sy,50%),rgba(181,139,70,.17),transparent 70%)}
.benefit-item:hover::after{opacity:1}

/* ---------- Galeri: miring 3D mengikuti kursor ---------- */
.gallery-grid figure{transform-style:preserve-3d;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .qk-reveal{opacity:1;transform:none;transition:none}
}

/* Pertahankan warna navbar awal saat class scroll aktif. */
.site-header-scrolled{color:var(--white);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header-scrolled .brand em{color:var(--gold-light)}

/* Kurangi repaint besar pada background hero saat halaman digulir. */
.hero-image{transform:scale(1.04)!important;filter:none!important}
.hero-grain{display:none!important}