/* =====================================================================
   Hero sinematik /travel/haji/ (9 Nov 2026)
   Tiga klip slow-mo (Masjidil Haram, Kaabah, Masjid Nabawi) bersilih dengan
   crossfade dan zoom perlahan. Fail ini halaman haji sahaja; /travel tidak
   memuatnya. .hero, .hero video dan .hero::before asal dari /travel/styles.css.
   ===================================================================== */

/* Lapisan video. Latar = poster klip pertama: kelihatan sebelum video sampai,
   bila autoplay disekat (iOS Low Power Mode) dan bila pergerakan dikurangkan. */
.hs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0b0b0b url(/assets/video/haji/haji-1-masjidilharam-1080.jpg) center / cover no-repeat;
}
@media (max-aspect-ratio: 1/1) {
    .hs { background-image: url(/assets/video/haji/haji-1-masjidilharam-potret.jpg); }
}

/* Klip yang tidak aktif telus. Zoom ialah TRANSITION, bukan keyframe: bila
   klip keluar, ia pudar dari skala semasa tanpa melompat balik. hero-sinema.js
   set semula skala selepas pudar selesai (.hs-reset). */
.hs .hs-klip {
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.6s ease, transform 14s linear;
    will-change: opacity, transform;
}
.hs .hs-klip.is-aktif {
    opacity: 1;
    transform: scale(1.12);
}
.hs .hs-klip.hs-reset { transition: none; }

/* Arah zoom berbeza setiap klip: ke Kaabah dan menara, ke pintu Kaabah, ke Kubah Hijau. */
.hs .hs-klip:nth-child(1) { transform-origin: 52% 62%; }
.hs .hs-klip:nth-child(2) { transform-origin: 50% 55%; }
.hs .hs-klip:nth-child(3) { transform-origin: 48% 35%; }

/* Tirai sinematik: vignette + gelap di atas (navbar) dan di bawah (peralihan ke
   seksyen putih), tengah cukup gelap untuk teks putih. Ganti overlay rata 0.5. */
.hero--sinema::before {
    background:
        radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.42) 65%, rgba(0, 0, 0, 0.7) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 22%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.78) 100%);
}
.hero--sinema .hero-content h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.hero--sinema .hero-content p  { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }

@media (prefers-reduced-motion: reduce) {
    .hs .hs-klip { display: none; }
}