/* Bukaan TEROWONG (functions/_lib/render/bukaan/terowong.ts, koreografi terowong.js). Warna HANYA token /t/raya/tema.css.
   Susunan lapisan cover (bawah ke atas): latar krim --bk-bg, .tw-latar (terowong + cahaya, dimask radial di pusat lubang),
   .tw-pentas (jambak + pecah), .tw-depan (dinding + pelekat terbang), teks. Jambak 846x900, pecah 1120x769 (140% lebar
   jambak, berpusat), dinding/terowong 941x1672 object-fit cover. --mx --my --tr --tf --cx --cy --cr ditulis terowong.js. */
.bk--terowong{justify-content:space-between;padding:clamp(2.4rem,8svh,5rem) 0 calc(3svh + env(safe-area-inset-bottom))}
.bk--terowong .bk__atas{z-index:5;gap:.3rem}
.tw-cta{position:relative;z-index:5;padding-inline:var(--gutter)}
.tw-cta .bk__hint{color:var(--ink-soft)}

/* latar: terowong + cahaya (tersembunyi sampai 1.85 s) */
.tw-latar,.tw-depan{position:absolute;inset:0;pointer-events:none}
.tw-latar{z-index:0}
.tw-depan{z-index:3;overflow:hidden}
.tw-terowong{position:absolute;inset:0;opacity:0;overflow:hidden;--mx:50%;--my:50%;--tr:0px;--tf:0px;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),var(--topeng-0) calc(var(--tr) - var(--tf)),var(--topeng) var(--tr));
  mask-image:radial-gradient(circle at var(--mx) var(--my),var(--topeng-0) calc(var(--tr) - var(--tf)),var(--topeng) var(--tr))}
.tw-terowong__img,.tw-dinding__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.tw-cahaya{position:absolute;left:calc(var(--cx,50%) - var(--cr,60px));top:calc(var(--cy,50%) - var(--cr,60px));width:calc(var(--cr,60px) * 2);
  aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,var(--cahaya) 0%,var(--cahaya) 34%,var(--cahaya-mid) 62%,var(--cahaya-0) 100%)}
.tw-dinding{position:absolute;inset:0;opacity:0;overflow:hidden}

/* jambak: saiz ikut ruang sebenar antara teks atas dan petunjuk (container query), ~78vw maks 420px */
.tw-pentas{position:relative;z-index:2;flex:1;display:grid;place-items:center;width:100%;min-height:0;padding-block:.4rem;container-type:size}
/* semasa bukaan GSAP pegang opacity [data-rv] (cta, atas, pentas): matikan transition masuk kad.css (.9s + tunda) supaya
   pentas pudar tepat 1.6-1.8 s, bukan terseret atas terowong */
.bk--terowong.tw-jalan [data-rv]{transition:none}
.tw-jambak{--jb:min(78vw,420px,calc(100cqh * .94));position:relative;display:block;width:var(--jb);aspect-ratio:846/900;padding:0;border:0;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tw-jambak__bob,.tw-jambak__skala{position:absolute;inset:0}
.tw-jambak__skala{will-change:transform}
.tw-jambak__img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.tw-pecah{position:absolute;left:-20%;top:-1.5%;width:140%;max-width:none;opacity:0}

/* pelekat terbang (dibina terowong.js) */
.tw-terbang{position:absolute;inset:0}
.tw-pelekat{position:absolute;left:0;top:0;max-width:none;opacity:0;will-change:transform}

html:not(.js) .tw-latar,html:not(.js) .tw-depan{display:none}

@supports not (width:1cqh){
  .tw-jambak{--jb:min(78vw,420px,calc((100vh - 22rem) * .94))}
}

@media (prefers-reduced-motion:no-preference){
  .tw-jambak__bob{animation:tw-nafas 3s var(--ease-inout) infinite alternate}
  .is-opening .tw-jambak__bob{animation-play-state:paused}
}
@keyframes tw-nafas{from{scale:1;rotate:-1deg}to{scale:1.02;rotate:1deg}}