/* GRAMMAR single-scene-cursor — KAUM Studio.
   Hitam / tinta / satu aksen lime. Radius 0 di semua elemen.
   TIDAK ADA scroll: satu layar 100dvh, overflow hidden.
   Satu token easing untuk seluruh halaman (--ease), sengaja keras. */
:root {
  --hitam: #050505;
  --tinta: #F5F5F5;
  --lime:  #C6FF3D;
  --garis: rgba(245, 245, 245, .18);
  --display: "Unbounded", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --ease-brand: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 3.2vw, 44px);
}
* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0;
  overflow: hidden;                 /* tulang: halaman ini memang tanpa scroll */
  overscroll-behavior: none;
}
body {
  background: var(--hitam); color: var(--tinta);
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase; letter-spacing: .06em;
}
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ---------- panggung ---------- */
#panggung {
  position: fixed; inset: 0;
  height: 100dvh; width: 100vw;
  overflow: hidden;                 /* yang memotong huruf KAUM di tepi */
  /* Poster dipasang sebagai latar, bukan cuma fallback: sebelum frame pertama
     video ter-decode, VideoTexture masih kosong dan layar sempat hitam.
     Tidak ada loader di halaman ini, jadi celah itu harus ditutup di sini. */
  background: var(--hitam) url("assets/img/latar.webp") center / cover no-repeat;
  touch-action: none;               /* drag horizontal tidak boleh jadi scroll/pull-refresh */
  cursor: grab;                     /* seluruh layar bisa ditarik, bukan cuma piksel hoodie */
}
#panggung.is-tarik { cursor: grabbing; }
#panggung .tiga, #panggung .merek { cursor: default; }
#panggung > canvas { z-index: 0; }  /* canvas three disisipkan otomatis oleh three-scenes.js */
#panggung [data-fallback] {
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Hanya pita atas dan bawah, untuk keterbacaan HUD. Tengah dibiarkan bersih:
   versi pertama memakai radial gradient sampai .5 dan itu membunuh seluruh
   terowongan — lampu sodium dan lantai basahnya hilang sama sekali. */
.scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,5,5,.68) 0%, rgba(5,5,5,.22) 13%, rgba(5,5,5,0) 27%,
    rgba(5,5,5,0) 63%, rgba(5,5,5,.32) 82%, rgba(5,5,5,.82) 100%);
}

/* ---------- KAUM raksasa, terpotong tepi ---------- */
.kaum {
  position: absolute; z-index: 2; margin: 0;
  left: 50%; top: 47%; transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(5.5rem, 31vw, 27rem);
  line-height: .78; letter-spacing: -.045em;
  white-space: nowrap; text-transform: none;
  color: var(--tinta);
  pointer-events: none; user-select: none;
}
.kaum::before, .kaum::after {
  content: attr(data-teks);
  position: absolute; left: 0; top: 0;
  opacity: 0;
}
.kaum::before { color: var(--lime); }
.kaum::after  { color: var(--hitam); }

/* Glitch SEKALI saat load — ini cara halaman ini "masuk". Tanpa loader angka persen. */
.kaum::before { animation: robekA .62s steps(2, jump-none) 1 both; }
.kaum::after  { animation: robekB .62s steps(2, jump-none) 1 both; }
.kaum         { animation: tegak .62s var(--ease-brand) 1 both; }
@keyframes robekA {
  0%   { opacity: 1; clip-path: inset(0 0 74% 0);   transform: translateX(-2.4%); }
  22%  { opacity: 1; clip-path: inset(46% 0 28% 0); transform: translateX(3.2%); }
  46%  { opacity: 1; clip-path: inset(10% 0 62% 0); transform: translateX(-1.6%); }
  70%  { opacity: 1; clip-path: inset(68% 0 6% 0);  transform: translateX(2.1%); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0);  transform: none; }
}
@keyframes robekB {
  0%   { opacity: 1; clip-path: inset(30% 0 52% 0); transform: translateX(2.8%); }
  26%  { opacity: 1; clip-path: inset(6% 0 78% 0);  transform: translateX(-3.4%); }
  54%  { opacity: 1; clip-path: inset(58% 0 20% 0); transform: translateX(1.8%); }
  78%  { opacity: 1; clip-path: inset(24% 0 58% 0); transform: translateX(-1.2%); }
  100% { opacity: 0; clip-path: inset(0 0 100% 0);  transform: none; }
}
@keyframes tegak {
  0%   { opacity: 0; transform: translate(-50%, -50%) scaleY(1.06); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scaleY(1); }
}

/* ---------- hoodie 360 ---------- */
.putar {
  position: absolute; z-index: 3; left: 50%; top: 53%;
  transform: translate(-50%, -50%);
  cursor: grab; touch-action: none;
}
.putar.is-tarik { cursor: grabbing; }
#hoodie {
  display: block; height: 58dvh; width: auto;
  opacity: 0; transition: opacity 420ms var(--ease-brand);
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, .55));
  user-select: none; -webkit-user-drag: none;
}
#hoodie.siap { opacity: 1; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; z-index: 4; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: var(--pad);
}
.hud--atas { top: 0; }
.merek { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; }
.mark { width: 19px; height: 19px; flex: none; fill: currentColor; }
.hitung { margin: 0; text-align: right; display: grid; gap: 3px; }
.hitung__label { opacity: .62; }
.hitung__jam {
  font-weight: 700; font-size: 15px; color: var(--lime);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

.petunjuk {
  position: absolute; z-index: 4; left: var(--pad); bottom: var(--pad); margin: 0;
  opacity: .7; transition: opacity 260ms var(--ease-brand);
  display: flex; gap: .55rem; pointer-events: none;
}
.petunjuk span { color: var(--lime); }
.petunjuk.pergi { opacity: 0; }

.tiga {
  position: absolute; z-index: 4; right: var(--pad); bottom: var(--pad);
  display: flex; gap: 2px;
}
.tiga__tombol {
  border: 1px solid var(--garis); padding: 11px 15px; font-weight: 700;
  background: rgba(5, 5, 5, .58); backdrop-filter: blur(4px);
  transition: transform 150ms var(--ease-brand), background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.tiga__tombol:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tiga__tombol:hover { background: var(--lime); color: var(--hitam); border-color: var(--lime); }
}

/* ---------- panel ---------- */
.panel {
  position: fixed; inset: 0; z-index: 20;
  display: grid; align-items: end;
  background: rgba(5, 5, 5, 0);
  transition: background-color 160ms ease, visibility 0s linear 160ms;
  visibility: hidden;
}
.panel[hidden] { display: grid; }   /* visibility yang mengatur, bukan display */
.panel.is-buka {
  visibility: visible; background: rgba(5, 5, 5, .72);
  transition: background-color 220ms ease, visibility 0s;
}
.panel__isi {
  position: relative; background: var(--hitam);
  border-top: 1px solid var(--lime);
  padding: clamp(20px, 3.4vw, 40px) var(--pad) calc(var(--pad) + 6px);
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 160ms var(--ease-brand);   /* keluar 160 ms */
}
.panel.is-buka .panel__isi {
  transform: translateY(0);
  transition: transform 220ms var(--ease-brand);   /* masuk 220 ms — sengaja asimetris */
}
.panel__tutup { position: absolute; top: 14px; right: var(--pad); opacity: .72; font-weight: 700; }
.panel__tutup:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .panel__tutup:hover { opacity: 1; color: var(--lime); } }
.panel__judul {
  margin: 0 0 22px; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: .9; letter-spacing: -.035em; text-transform: none;
}
.panel__catatan { margin: 18px 0 0; opacity: .55; }
.contoh { opacity: .5; }

/* Drop — tiga kolom di layar lebar supaya sisi kanan tidak menganga kosong */
.drop { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; max-width: 1180px; }
@media (min-width: 980px) { .drop { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 280px); } }
.drop__aksi { margin: 0; display: grid; gap: 10px; justify-items: start; align-content: start; }
.drop__kecil { opacity: .5; max-width: 26ch; }
.drop__foto { width: 100%; height: auto; display: block; }
.fakta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; align-content: start; }
.fakta dt { opacity: .5; }
.fakta dd { margin: 0; }
.ukuran { display: flex; flex-wrap: wrap; gap: 4px; }
.ukuran span { border: 1px solid var(--garis); padding: 5px 10px; min-width: 38px; text-align: center; }
.ukuran .habis { opacity: .3; text-decoration: line-through; }

/* Lookbook */
/* Dibatasi lebarnya supaya keempat sel muat dalam satu panel tanpa di-scroll. */
.kisi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 880px; }
.sel { margin: 0; aspect-ratio: 16 / 9; background: #0e0e0e; overflow: hidden; }
.sel img, .sel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sel--video { position: relative; }
.sel--video::after {
  content: "LOOP"; position: absolute; left: 8px; bottom: 8px;
  font-size: 10px; color: var(--lime); letter-spacing: .1em;
}

.beli__lede {
  margin: 0 0 22px; max-width: 46ch; opacity: .8;
  text-transform: none; letter-spacing: .02em; font-size: 14px; line-height: 1.6;
}

/* Satu intent CTA: satu label, dipakai di dua panel */
.cta {
  display: inline-block; margin-top: 26px;
  text-align: center;
  background: var(--lime); color: var(--hitam);
  font-weight: 700; text-decoration: none; padding: 15px 22px;
  transition: transform 150ms var(--ease-brand), filter 150ms ease;
}
.cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover { filter: brightness(1.08); } }

/* ---------- layar kecil ---------- */
@media (max-width: 720px) {
  #panggung { background-image: url("assets/img/latar-hp.webp"); }
  .kaum { font-size: clamp(3.6rem, 33vw, 12rem); top: 44%; }
  /* Di portrait hoodie diikat ke LEBAR, bukan tinggi: dengan height 46dvh dia
     jadi 336 px di layar 390 px dan menutupi hampir seluruh kata KAUM. */
  #hoodie { height: auto; width: 67vw; max-height: 54dvh; }
  .putar { top: 54%; }
  .hud--atas { flex-direction: column; gap: 10px; }
  .hitung { text-align: left; }
  .tiga { left: var(--pad); right: var(--pad); justify-content: space-between; }
  .tiga__tombol { flex: 1; text-align: center; padding: 12px 6px; }
  .petunjuk { bottom: calc(var(--pad) + 52px); }
  .drop { grid-template-columns: 1fr; }
  .drop__foto { max-width: 190px; }
}
@media (max-width: 380px) { .tiga__tombol { font-size: 11px; letter-spacing: .03em; } }

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .kaum, .kaum::before, .kaum::after { animation: none; }
  .kaum::before, .kaum::after { display: none; }
  #hoodie, .panel, .panel__isi, .tiga__tombol, .cta, .petunjuk, .panel__tutup { transition: none; }
}

.drop__aksi .cta { margin-top: 0; }
@media (max-width: 979px) { .drop__aksi { margin-top: 8px; } }