/* ============ WORK — carousel 3D loop (mekanisme diport dari hero OCULAR / garis keturunan huyml.co) ============ */
/* Fallback tanpa JS: grid statis (lihat noscript + default di bawah). */

body.work-page{overflow:hidden}
#wapp{position:fixed;inset:0;z-index:1;background:#060607}

/* --- carousel layer --- */
.carousel-container{position:absolute;inset:0;pointer-events:none;z-index:5;perspective:1400px;perspective-origin:50% 46%}
.slide{position:absolute;top:0;left:0;display:block;pointer-events:auto;cursor:pointer;
  will-change:transform,clip-path,opacity,filter;contain:layout paint;
  transform-origin:top left;transform:translate3d(0,0,0);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* fallback grid */
  opacity:1;clip-path:none;filter:none}
.slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transform:translateZ(0)}
.parallax-wrap{display:block;width:100%;height:100%;transform-origin:center;will-change:transform;transition:transform .1s ease-out}

/* --- scroll container (snap native, klik tembus) --- */
.scroll-container{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:10;pointer-events:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll-container::-webkit-scrollbar{display:none}
.snap-point{width:100%;height:100vh;pointer-events:auto;touch-action:pan-y}

/* --- UI layer --- */
.wui{position:fixed;inset:0;pointer-events:none;z-index:20;display:flex;flex-direction:column;justify-content:space-between;will-change:filter;padding:96px 6vw 7vh}
.wcounter{display:flex;align-items:baseline;gap:10px}
.text-mask{display:block;overflow:hidden}
.counter-num{display:block;font-weight:700;font-size:clamp(56px,8.4vw,132px);line-height:.9;letter-spacing:-.04em;color:#e9e9ea}
.counter-total{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;color:#9a9a9e}
.counter-total b{font-weight:500;color:#f0d9a0}
.wtext{position:absolute;left:50%;transform:translateX(-50%);bottom:6.5vh;text-align:center;width:min(92vw,760px)}
.w-cat{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9e;margin-bottom:12px}
.w-title{display:block;font-weight:700;font-size:clamp(30px,5.2vw,76px);line-height:.95;letter-spacing:-.04em;color:#e9e9ea}
.w-desc{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.7;color:#9a9a9e;margin-top:12px;max-width:52ch;margin-left:auto;margin-right:auto}
/* fallback no-js / reduced: grid dibaca normal */
html.no-wn .carousel-container{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:120px 6vw 40px}
html.no-wn .slide{position:relative;aspect-ratio:16/9;width:auto;height:auto}
html.no-wn .scroll-container,html.no-wn .wui{display:none}
html.no-wn body.work-page{overflow:auto}
html.no-wn #wapp{position:static}

@media (max-width:820px){
  .wui{padding:84px 5vw 6vh}
  .wtext{bottom:5vh}
}
@media (prefers-reduced-motion:reduce){
  .parallax-wrap{transition:none}
}
/* drag mouse (desktop): kursor grab; saat menyeret jadi grabbing + tanpa seleksi */
@media (pointer:fine){
  #wapp{cursor:grab}
  body.w-drag,body.w-drag #wapp,body.w-drag #wapp *{cursor:grabbing !important;user-select:none !important}
}
/* intro status + full index link */
.wload{position:absolute;left:50%;transform:translateX(-50%);bottom:6.5vh;z-index:21;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9e;white-space:nowrap}
html.no-wn .wload{display:none}
.wfull{position:absolute;right:6vw;bottom:6.5vh;z-index:21;pointer-events:auto;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#9a9a9e;text-decoration:none;transition:color .25s}
.wfull:hover{color:#e9e9ea}
@media (max-width:820px){
  .wfull{top:84px;bottom:auto;right:5vw}
}
/* toggle list overlay + chromatic fly-by */
.wtog{position:absolute;left:6vw;bottom:6.5vh;z-index:21;pointer-events:auto;background:none;border:0;cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9a9a9e}
.wtog:hover{color:#e9e9ea}
html.no-wn .wtog{display:none}
.wlist{position:fixed;inset:0;z-index:60;background:rgba(6,6,7,.96);overflow-y:auto;padding:96px 6vw 60px}
.wlist[hidden]{display:none}
.wl-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:8px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9e}
.wl-head button{background:none;border:0;cursor:pointer;font:inherit;letter-spacing:.2em;text-transform:uppercase;color:#e9e9ea}
.wl-head button:hover{color:#f0d9a0}
.wl-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.wl-code{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:#9a9a9e}
.wl-t{text-decoration:none}
.wl-t b{display:block;font-weight:600;font-size:clamp(17px,2.2vw,24px);letter-spacing:-.02em;color:#e9e9ea}
.wl-t span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9e}
.wl-t:hover b{color:#f0d9a0}
.wl-live{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;color:#e9e9ea;text-decoration:none;white-space:nowrap}
.wl-live:hover{color:#f0d9a0}
@media (max-width:820px){
  .wtog{top:122px;bottom:auto;left:auto;right:5vw}
  .wlist{padding:120px 6vw 48px}
  .wl-row{grid-template-columns:52px 1fr;gap:6px 14px}
  .wl-live{grid-column:2;justify-self:start}
}
#wapp.chro .slide.is-c img{filter:drop-shadow(3px 0 0 rgba(255,45,85,.45)) drop-shadow(-3px 0 0 rgba(0,229,255,.45))}
#wapp.chro .counter-num,#wapp.chro .w-title{text-shadow:2px 0 rgba(255,45,85,.55),-2px 0 rgba(0,229,255,.55)}