/* Animasi pembuka (hanya beranda): video layar penuh, lalu zoom masuk ke layar laptop dan memudar ke website. */
#intro { display: none; }
html.has-intro { overflow: hidden; }
html.has-intro #intro { display: block; position: fixed; inset: 0; z-index: 9999; background: #e9e9ea; opacity: 1; }
html.has-intro #intro.leaving { opacity: 0; pointer-events: none; }
#intro .vwrap { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
#intro video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* layar potret (ponsel): tampilkan seluruh adegan, bukan potongan tengahnya */
@media (max-aspect-ratio: 1/1) { #intro video { object-fit: contain; } }
/* kotak putih yang menutup isi layar laptop di akhir video */
#intro .screenfill { position: absolute; background: #fff; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
#intro .screenfill.on { opacity: 1; }
#intro .ctrl { position: absolute; z-index: 3; top: 22px; right: 22px; display: flex; gap: 10px; transition: opacity .4s; }
#intro.zooming .ctrl { opacity: 0; pointer-events: none; }
#intro .ctrl button {
  border: 0; cursor: pointer; background: rgba(255, 255, 255, .85); color: var(--ink);
  font: 700 .72rem var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px; border-radius: 999px; backdrop-filter: blur(6px);
}
#intro .ctrl button:hover { background: var(--lime); }
#intro .ctrl button[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { html.has-intro #intro { display: none; } html.has-intro { overflow: auto; } }

/* Gerbang suara: tombol besar di tengah bila browser memblokir suara otomatis */
#intro .gate { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; justify-items: center; text-align: center; background: rgba(11, 11, 12, .72); color: #fff; border: 0; border-radius: 28px; padding: 22px 30px 20px; cursor: pointer; font: inherit; max-width: min(86vw, 420px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
#intro .gate-main { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
#intro .gate-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: #0b0b0c; display: grid; place-items: center; font-size: 1rem; padding-left: 3px; }
#intro .gate small { font-size: .82rem; opacity: .85; line-height: 1.4; }
#intro .gate:hover .gate-ic { transform: scale(1.06); }
#intro .gate-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lime); transform-origin: 0 50%; animation: gate-run linear forwards; }
@keyframes gate-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { #intro .gate-bar { animation: none; } }