/* Halaman contoh rumah: pengalaman 3D digerakkan gulir (urutan frame di kanvas). Memakai token dari ../assets/css/style.css */
.hal-rumah { background: #000; }
.hal-rumah .merek { opacity: 1; }
.nav__kembali { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-2); padding: 10px 0; transition: color .4s; }
.nav__kembali:hover { color: var(--ivory); }
.hal-rumah .nav { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); box-shadow: none; backdrop-filter: none; }

.seq { position: relative; height: 760vh; }
.seq__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; }
.seq__poster, .seq__poster img, .seq__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.seq__poster img { object-fit: cover; }
.seq__canvas { opacity: 0; transition: opacity .5s; }
.seq__canvas.is-on { opacity: 1; }
.seq__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, .66) 100%); }

.seq__buka { background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 100%); position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: calc(var(--nav-h) + 12px) var(--gutter) 40px; }
.seq__buka h1 { font: 400 clamp(2.4rem, 6.2vw, 5.8rem)/1.06 var(--f-display); max-width: 14ch; text-shadow: 0 2px 40px rgba(0, 0, 0, .55); }
.seq__buka p { color: rgba(231, 222, 211, .85); font-size: clamp(1rem, 1.3vw, 1.15rem); letter-spacing: .04em; text-shadow: 0 1px 20px rgba(0, 0, 0, .6); }
.seq__buka .btn { margin-top: 10px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }

.seq__bab { position: absolute; left: var(--gutter); bottom: clamp(64px, 12vh, 130px); max-width: min(620px, 82vw); opacity: 0; pointer-events: none; }
.seq__bab span { display: block; font: 400 .68rem/1 var(--f-text); letter-spacing: .3em; text-transform: uppercase; color: var(--champ); margin-bottom: 16px; }
.seq__bab h2 { font-size: clamp(1.7rem, 3.6vw, 3.1rem); line-height: 1.12; text-shadow: 0 2px 36px rgba(0, 0, 0, .7); }

.seq__akhir { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding: 0 var(--gutter); opacity: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 100%); }
.seq__akhir h2 { max-width: 17ch; font-size: clamp(2.2rem, 5.2vw, 4.6rem); text-shadow: 0 2px 40px rgba(0, 0, 0, .6); }
.seq__akhir p { max-width: 46ch; color: rgba(231, 222, 211, .85); }
.seq__akhir.is-on { pointer-events: auto; }
.seq__balik { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-2); padding: 12px 0; transition: color .4s; }
.seq__balik:hover { color: var(--ivory); }

.seq__ket { position: absolute; right: var(--gutter); bottom: 18px; font-size: .74rem; letter-spacing: .08em; color: rgba(231, 222, 211, .6); }
.seq__cue { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 52px; background: rgba(231, 222, 211, .25); overflow: hidden; transition: opacity .5s; }
.seq__cue i { position: absolute; left: 0; top: 0; width: 1px; height: 22px; background: var(--ivory); animation: turun 2s var(--ease) infinite; }
@keyframes turun { from { transform: translateY(-24px); } to { transform: translateY(54px); } }
.seq__bar { position: absolute; right: clamp(14px, 2vw, 28px); top: 50%; width: 1px; height: 120px; margin-top: -60px; background: rgba(231, 222, 211, .2); }
.seq__bar i { position: absolute; inset: 0; background: var(--ivory); transform: scaleY(0); transform-origin: top; }

@media (max-width: 760px) {
  .nav__kembali { display: none; }
  .seq { height: 640vh; }
  .seq__ket { left: var(--gutter); right: auto; bottom: 84px; }
  .seq__bab { bottom: 112px; }
  .seq__bar { display: none; }
}

/* Gerak dikurangi / tanpa JS: tanpa gulir-sekuens, tampil statis */
html:not(.js) .seq, html.diam .seq { height: auto; }
html:not(.js) .seq__stage, html.diam .seq__stage { position: relative; height: auto; min-height: 100svh; display: grid; gap: 40px; padding: calc(var(--nav-h) + 24px) var(--gutter) 80px; align-content: start; }
html:not(.js) .seq__buka, html:not(.js) .seq__bab, html:not(.js) .seq__akhir, html.diam .seq__buka, html.diam .seq__bab, html.diam .seq__akhir { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto; padding: 0; place-content: start; text-align: left; justify-items: start; bottom: auto; left: auto; }
html:not(.js) .seq__cue, html.diam .seq__cue, html:not(.js) .seq__bar, html.diam .seq__bar { display: none; }
html.diam .seq__canvas { display: none; }
html.diam .seq__poster { z-index: 0; }
@media (prefers-reduced-motion: reduce) { .seq__cue i { animation: none; } }