/* Rihlah Sakinah: interaksi untuk halaman server-rendered (/paket/ dan /articles/)
   Dimuat bersama quake-pages.js. Hapus <link> dan <script>-nya untuk mencopot. */

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

/* ---------- Kartu: cahaya mengikuti kursor ---------- */
.card,.article-card{position:relative}
.card::after,.article-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(300px circle at var(--qk-sx,50%) var(--qk-sy,50%),rgba(182,142,85,.17),transparent 70%)}
.card:hover::after,.article-card:hover::after{opacity:1}

/* ---------- Bilah progres baca (halaman artikel) ---------- */
.qk-bar{position:fixed;left:0;top:0;width:100%;height:3px;background:#b68e55;transform-origin:0 50%;transform:scaleX(0);z-index:9999;pointer-events:none}

/* ---------- Jendela detail paket: hentakan kecil saat terbuka ---------- */
@keyframes qkThud{
  0%{translate:0 0;rotate:0deg}
  15%{translate:-6px 3px;rotate:-.25deg}
  30%{translate:5px -3px;rotate:.2deg}
  45%{translate:-3px 2px;rotate:-.1deg}
  60%{translate:2px -1px;rotate:0deg}
  100%{translate:0 0;rotate:0deg}
}
.qk-thud{animation:qkThud .55s cubic-bezier(.2,.7,.2,1)}

/* ---------- Hero paket: judul terbelah perlahan saat hero digulir keluar ---------- */
.qk-on .hero-copy{position:relative}
.qk-on .hero-copy>h1{opacity:0}
.qk-title{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;will-change:transform}
.qk-slice{position:absolute;inset:0;margin:0;will-change:transform,opacity}
.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%)}

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