/* =========================================================
   ANIMASI PEMBUKA (logo → riak → teks pecah → garis → oranye)
   Total ±4 detik, sekali per kunjungan.
   ========================================================= */
.bd-intro { display: none; }
.bd-intro-jalan body { overflow: hidden; }
.bd-intro-jalan .bd-intro {
    display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #FBFBFB 0%, #ECECEC 55%, #DADADA 100%);
    animation: in-hilang .5s ease 3.9s forwards;
}
.in-panggung { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.in-logo { position: relative; width: min(64vw, 560px); aspect-ratio: 600 / 226; animation: in-masuk .6s cubic-bezier(.2, .8, .2, 1) both; }
.in-logo img, .in-garis { position: absolute; inset: 0; width: 100%; height: 100%; }
.in-tanda { position: absolute; inset: 0; transform-origin: 44.2% 38.9%; animation: in-tanda 1s cubic-bezier(.6, 0, .2, 1) .95s both; }
.in-simbol { animation: in-simbol-pudar .5s ease 1.75s both; }
.in-telkom { animation: in-pecah-kiri .55s steps(1) .85s both; }
.in-property { animation: in-pecah-kanan .55s steps(1) .85s both; }
.in-garis path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in-garis-merah path { stroke: #E3262C; stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(227, 38, 44, .55)); animation: in-gambar .7s ease-out 1.45s forwards, in-hapus .7s ease-in 2.75s forwards; }
.in-garis-kuning path { stroke: #F5C518; stroke-width: 1.6; animation: in-gambar .7s ease-out 1.6s forwards, in-hapus .7s ease-in 2.85s forwards; }
.in-kata { position: absolute; font-weight: 800; font-size: clamp(8px, 1.5vw, 13px); letter-spacing: .14em; color: #3A3536; opacity: 0; white-space: nowrap; }
.in-kata-1 { left: 52%; top: -4%; animation: in-kata 0.75s ease 1.85s both; }
.in-kata-2 { left: 20%; top: 20%; animation: in-kata 0.75s ease 2.25s both; }
.in-kata-3 { left: 37%; top: 60%; animation: in-kata 0.9s ease 2.65s both; }
.in-riak { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 30px rgba(0, 0, 0, .10), inset 0 6px 24px rgba(0, 0, 0, .08); opacity: 0; animation: in-riak 1.2s ease-out .55s; }
.in-riak-2 { animation-delay: .75s; }
.in-oranye { position: absolute; inset: 0; background: linear-gradient(180deg, #E5622A, #EF8A2C 60%, #F6B061); clip-path: circle(0 at 50% 45%); animation: in-oranye .7s cubic-bezier(.7, 0, .3, 1) 3.25s forwards; }
.in-lewati { position: absolute; right: 22px; bottom: 22px; z-index: 2; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(35, 31, 32, .25); background: rgba(255, 255, 255, .7); color: #231F20; font: 600 13px "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.in-lewati:hover { background: #fff; }

@keyframes in-masuk { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes in-riak { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes in-tanda { from { transform: none; } to { transform: translate(5.8%, 11%) scale(2.15); } }
@keyframes in-simbol-pudar { to { opacity: 0; } }
@keyframes in-gambar { to { stroke-dashoffset: 0; } }
@keyframes in-hapus { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes in-kata { 0% { opacity: 0; transform: translateY(6px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes in-oranye { to { clip-path: circle(150% at 50% 45%); } }
@keyframes in-hilang { to { opacity: 0; visibility: hidden; } }
@keyframes in-pecah-kiri {
    0% { clip-path: none; transform: none; opacity: 1; }
    15% { clip-path: inset(10% 0 55% 0); transform: translateX(-8px); }
    30% { clip-path: inset(48% 0 12% 0); transform: translateX(10px); filter: drop-shadow(-4px 0 0 rgba(227, 38, 44, .7)); }
    45% { clip-path: inset(25% 0 35% 0); transform: translateX(-18px); }
    60% { clip-path: inset(62% 0 0 0); transform: translateX(-40px); opacity: .7; }
    80% { clip-path: inset(0 0 70% 0); transform: translateX(-90px); opacity: .35; }
    100% { opacity: 0; transform: translateX(-140px); }
}
@keyframes in-pecah-kanan {
    0% { clip-path: none; transform: none; opacity: 1; }
    15% { clip-path: inset(45% 0 20% 0); transform: translateX(9px); }
    30% { clip-path: inset(5% 0 60% 0); transform: translateX(-10px); filter: drop-shadow(4px 0 0 rgba(245, 197, 24, .8)); }
    45% { clip-path: inset(30% 0 30% 0); transform: translateX(20px); }
    60% { clip-path: inset(0 0 62% 0); transform: translateX(44px); opacity: .7; }
    80% { clip-path: inset(70% 0 0 0); transform: translateX(95px); opacity: .35; }
    100% { opacity: 0; transform: translateX(150px); }
}