/*
 * premium.css — Global premium polish layer (editorial monokrom (Konsep A): scroll & motion)
 * Dimuat SETELAH inline <style> di index.html, SEBELUM hero-scene.css.
 * Bekerja bersama premium.js (hooks: scroll-progress, nav-hidden,
 * data-parallax, tilt, data-scrub, magnetic .btn-primary) dan
 * lapisan sinematik (data-fill .wf, body.loaded blur entrance,
 * border beam, .scroll-hint, button shine).
 * Tidak menyentuh sistem .reveal yang sudah ada.
 */

/* ───── Hook 1: Scroll progress bar ───── */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:0; /* diatur premium.js (0–100%) */
  height:2px;
  background:#111;
  z-index:200;
  pointer-events:none;
  border-radius:0 2px 2px 0;
  box-shadow:none;
  opacity:.72; /* samar — indikator, bukan dekorasi */
}

/* ───── Hook 2: Nav auto-hide ───── */
nav{
  transition:transform .4s cubic-bezier(0.22,1,0.36,1),background .3s ease,border-color .3s ease;
  will-change:transform;
}
nav.nav-hidden{transform:translateY(-100%)}

/* ───── Hook 4: Parallax hint (transform di-set JS via rAF) ───── */
[data-parallax]{will-change:transform}

/* ───── Parallax megah: hero scroll-out (P1) ─────
   JS (premium.js) men-set --hero-out (0–1) pada .hero saat hero
   meninggalkan viewport. Default 0 → semua nilai netral, jadi aman
   sebelum JS jalan. .reveal/.reveal-stagger mentransform ANAK
   container, bukan container itu sendiri — tidak ada konflik.
   Tidak ada transition di sini: nilai digerakkan scroll via rAF. */
.hero .container{
  transform:translateY(calc(var(--hero-out,0)*140px));
  opacity:calc(1 - var(--hero-out,0)*1);
  filter:blur(calc(var(--hero-out,0)*6px));
  will-change:transform,opacity,filter;
}
/* Stats bergerak lebih lambat dari container → kesan kedalaman */
.hero .hero-stats{
  transform:translateY(calc(var(--hero-out,0)*100px));
  will-change:transform;
}

/* ───── P4: Zoom background saat scroll (var --zp 0–1 dari premium.js) ─────
   Section dengan .zoom-bg mendapat dekorasi radial emas di ::before yang
   membesar + bergerak pelan saat section melintasi viewport.
   isolation:isolate membuat section jadi stacking context agar ::before
   (z-index:-1) tampil DI ATAS background section tapi DI BAWAH konten. */
.zoom-bg{isolation:isolate}
.zoom-bg::before{
  content:'';
  position:absolute;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(42% 55% at 50% 45%,rgba(17,17,17,0.08),rgba(17,17,17,0.03) 55%,transparent 72%);
  transform:scale(calc(0.85 + var(--zp,0)*0.35)) translateY(calc((0.5 - var(--zp,0))*90px));
  opacity:calc(0.35 + var(--zp,0)*0.65);
  will-change:transform,opacity;
}

/* ───── Parallax megah: kolom diferensial (P2) ─────
   Kartu .tilt yang juga [data-parallax] menerima transform gabungan
   (parallax + tilt) dari JS setiap frame scroll. Transition transform
   .5s milik .tilt akan membuat parallax tertinggal jauh di belakang
   scroll; solusinya durasi transform dipercepat khusus kombinasi ini
   (.18s ease-out) — cukup untuk menghaluskan jitter antar-frame rAF
   tanpa lag terasa, dan reset tilt saat mouseleave tetap mulus.
   box-shadow & border-color dibiarkan .5s seperti .tilt biasa. */
.tilt[data-parallax]{
  transition:transform .18s ease-out,box-shadow .5s cubic-bezier(0.22,1,0.36,1),border-color .4s;
}

/* ───── Hook 5: 3D tilt + sheen mengikuti kursor (--mx/--my 0–1) ───── */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(0.22,1,0.36,1),box-shadow .5s cubic-bezier(0.22,1,0.36,1),border-color .4s;
  overflow:hidden; /* klip sheen ke radius card (rev-card belum punya overflow:hidden) */
}
.tilt::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(
    620px circle at calc(var(--mx,0.5)*100%) calc(var(--my,0.5)*100%),
    rgba(252,252,255,0.46) 0%,
    rgba(250,250,255,0.20) 26%,
    rgba(248,248,255,0.07) 48%,
    transparent 72%
  );
  opacity:0;
  transition:opacity .5s cubic-bezier(0.22,1,0.36,1);
  z-index:1;
}
.tilt:hover::after{opacity:1}

/* ───── Hook 6: Text scrub ala Apple (--p 0–1 di-set JS) ───── */
[data-scrub]{
  opacity:calc(.15 + var(--p,0)*.85);
  transform:scale(calc(.94 + var(--p,0)*.06));
  will-change:transform,opacity;
}

/* ───── Hook 7: Magnetic button (translate di-set JS) ───── */
.btn-primary{
  transition:transform .35s cubic-bezier(0.22,1,0.36,1),background .25s,box-shadow .25s,opacity .25s;
  will-change:transform;
}

/* ───── Polish: gradient text — statis abu editorial (Konsep A) ───── */
.grad-text{color:#8A8A8A}

/* ───── Polish: hover lift — dimatikan di Konsep A (hairline sebagai
     struktur, bukan kartu ber-shadow); rule lama dihapus agar tidak
     menimpa box-shadow:none dari inline <style> (file ini dimuat setelahnya). ───── */

/* ───── Polish: selection lebih halus ───── */
::selection{background:#111;color:#fff}

/* ───── Reduced motion: matikan semua efek motion ───── */
@media (prefers-reduced-motion: reduce){
  .scroll-progress{display:none}
  nav{transition:background .3s ease,border-color .3s ease}
  nav.nav-hidden{transform:none}
  [data-parallax]{will-change:auto}
  .tilt{transition:box-shadow .3s ease,border-color .3s ease;transform:none!important}
  .tilt::after{display:none}
  [data-scrub]{opacity:1;transform:none;will-change:auto}
  .btn-primary{transition:background .25s,box-shadow .25s,opacity .25s;will-change:auto}
  /* Hero scroll-out netral total — walau --hero-out tak di-set JS,
     paksa agar tidak ada sisa state */
  .hero .container{transform:none!important;opacity:1!important;filter:none!important;will-change:auto}
  .hero .hero-stats{transform:none!important;will-change:auto}
  /* Spesifisitas .tilt[data-parallax] (0,2,0) mengalahkan .tilt (0,1,0)
     di atas — transition-nya perlu dikembalikan eksplisit */
  .tilt[data-parallax]{transition:box-shadow .3s ease,border-color .3s ease}
}

/* ───── Mobile: sederhanakan efek berat ───── */
@media (max-width:768px){
  .scroll-progress{height:2px}
  .zoom-bg::before{will-change:auto}
  .tilt{transition:transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s}
  .tilt::after{display:none} /* sheen hanya masuk akal untuk pointer:fine */
  [data-scrub]{opacity:1;transform:none;will-change:auto}
  /* Hero scroll-out: blur di-GPU mobile mahal — matikan blur, tapi
     pertahankan translate+opacity (murah, transform saja) agar efek
     kedalaman tetap terasa. will-change dilepas untuk hemat memori
     layer komposit. */
  .hero .container{filter:none!important;will-change:auto}
  .hero .hero-stats{will-change:auto}
  /* Spesifisitas (0,2,0) > .tilt (0,1,0) — samakan durasi mobile */
  .tilt[data-parallax]{transition:transform .18s ease-out,box-shadow .3s,border-color .3s}
}

/* ════════════════════════════════════════════════════════════
   Cinematic layer (Hooks 8–12 + button shine)
   Bekerja bersama premium.js v2: data-fill (.wf), body.loaded,
   .ambient-layer, border beam, .scroll-hint, .hero-glow.
   ════════════════════════════════════════════════════════════ */

/* ───── Hook 8: Word-by-word text fill saat scroll ───── */
.wf{
  color:rgba(17,17,17,0.28); /* off-state: abu netral yang lebih halus */
  transition:color .7s cubic-bezier(0.22,1,0.36,1);
  transition-delay:var(--wd,0s); /* stagger opsional; 0s jika --wd tak di-set */
}
.wf.on{color:inherit}
/* Varian di dalam .grad-text: parent pakai background-clip:text
   (color:transparent), jadi .wf.on harus meng-clip gradient-nya
   sendiri — kalau hanya color:inherit, katanya ikut transparan. */
.grad-text .wf.on{color:#8A8A8A;background:none}

/* ───── Hook 9: Hero entrance — blur-to-sharp ─────
   Menempel pada sistem .reveal yang ada: filter ditambahkan ke
   daftar transition, opacity/transform tidak disentuh. */
.hero .reveal{
  filter:blur(12px);
  transition:opacity 1s cubic-bezier(0.22,1,0.36,1),
             transform 1s cubic-bezier(0.22,1,0.36,1),
             filter 1.1s cubic-bezier(0.22,1,0.36,1);
}
.hero .reveal.in{filter:blur(0)}

/* ───── Hook 11: Border beam — arc cahaya berjalan di tepi saat hover ─────
   Catatan implementasi: .tilt punya overflow:hidden (untuk klip
   sheen), sehingga pseudo outset (inset:-1.5px; z-index:-1) akan
   ter-clip total. Beam dipasang sebagai ring 1px via mask-composite
   di inset:0 — efek visual sama (highlight di tepi kartu) tanpa
   mengubah overflow yang sudah ada. z-index:0 agar di bawah sheen
   ::after (z-index:1). Gradient berupa arc parsial (bukan ring penuh)
   dengan alpha rendah — terbaca seperti cahaya yang menyapu tepi
   material, bukan ring neon/gaming. */
@property --beam-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.tilt::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px; /* tebal ring */
  background:conic-gradient(
    from var(--beam-angle,0deg),
    transparent 0deg,
    rgba(17,17,17,0) 24deg,
    rgba(17,17,17,0.62) 72deg,
    rgba(80,80,80,0.72) 108deg,
    rgba(150,150,150,0.55) 148deg,
    rgba(150,150,150,0) 188deg,
    transparent 216deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0;
  transition:opacity .6s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none;
  z-index:0;
}
.tilt:hover::before{
  opacity:.85; /* arc parsial — aman tampil lebih hadir */
  animation:beam-spin 6s linear infinite;
}
/* Rotasi utama via @property (--beam-angle). Browser tanpa @property
   (Safari <16.4) mendapat ring statis — degradasi graceful. */
@keyframes beam-spin{
  to{--beam-angle:1turn}
}

/* ───── Hook 12: Scroll hint di bawah hero ───── */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-3);
  text-decoration:none;
  z-index:2;
  opacity:1;
  transition:opacity .6s ease;
}
.scroll-hint svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:1.6; /* garis lebih tipis & presisi */
  animation:hint-bounce 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
/* Garis vertikal tipis memudar — aksen editorial di bawah chevron */
.scroll-hint::after{
  content:'';
  width:1px;
  height:38px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.22),rgba(0,0,0,0));
}
@keyframes hint-bounce{
  0%,100%{transform:translateY(0);opacity:.85}
  50%{transform:translateY(4px);opacity:.55}
}
.scroll-hint.gone{opacity:0;pointer-events:none}
/* Ikut entrance: sembunyi sampai body.loaded */
body:not(.loaded) .scroll-hint{opacity:0}

/* ───── Polish: Button depth + shine sweep ───── */
.btn-primary{
  position:relative;
  overflow:hidden;
  /* depth halus: inner highlight atas + bayangan berlapis lembut */
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 1px 2px rgba(0,0,0,0.08),0 6px 16px rgba(0,0,0,0.12);
}
.btn-primary:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.20),0 2px 4px rgba(0,0,0,0.08),0 14px 32px rgba(0,0,0,0.18);
}
.btn-ghost{
  box-shadow:0 1px 2px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.85);
}
.btn-ghost:hover{
  box-shadow:0 4px 16px rgba(0,0,0,0.07),inset 0 1px 0 rgba(255,255,255,0.85);
}
.btn-primary::after{
  content:'';
  position:absolute;
  top:0;
  left:-90%;
  width:60%;
  height:100%;
  /* falloff multi-stop — sapuan cahaya lebih halus, seperti kaca */
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.05) 28%,rgba(255,255,255,0.22) 50%,rgba(255,255,255,0.05) 72%,transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
}
.btn-primary:hover::after{
  left:140%;
  transition:left .9s cubic-bezier(0.22,1,0.36,1);
}

/* ───── Reduced motion: semua efek baru mati total ───── */
@media (prefers-reduced-motion: reduce){
  .wf{transition:none;color:inherit}
  .grad-text .wf.on{background:none;color:inherit}
  .hero .reveal{filter:none}
  .tilt::before{display:none}
  .scroll-hint svg{animation:none}
  .btn-primary{overflow:visible}
  .btn-primary::after{display:none}
}

/* ───── Mobile: sederhanakan efek baru ───── */
@media (max-width:768px){
  .hero .reveal{filter:none}
  .tilt::before{display:none} /* beam hanya untuk pointer:fine */
  .scroll-hint{bottom:20px}
  .scroll-hint svg{animation:none}
  .btn-primary::after{display:none}
}

/* ───── P5b: Latar hidup sepanjang halaman ─────
   .hero-frags kini position:fixed (z-index:0) dan perakitan logo
   dihitung dari scroll halaman (utuh di 65%). Background section
   dibuat transparan agar logo terlihat di balik konten sampai
   bawah — ritme visual tetap dibawa hairline, kartu putih, dan
   glow .zoom-bg. Contact + footer tetap hitam solid (penutup). */
section:not(.contact){background:transparent}
.wordmark{background:transparent}

/* ───── Hook P7: Grid spotlight kursor ─────
   Grid kotak-kotak halus di balik konten, hanya terlihat di sekitar
   kursor via radial mask (--gx/--gy di-lerp dari premium.js). Muncul
   saat mouse bergerak (.on), menghilang saat kursor keluar halaman.
   Mati total di layar sentuh & reduced-motion. */
.grid-fx{
  position:fixed;
  inset:0;
  z-index:0;                  /* di balik konten; section sudah transparan */
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(17,17,17,0.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(17,17,17,0.10) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),#000 0%,transparent 72%);
          mask-image:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),#000 0%,transparent 72%);
  opacity:0;
  transition:opacity .6s ease;
}
.grid-fx.on{opacity:1}
@media (pointer:coarse){.grid-fx{display:none}}
@media (prefers-reduced-motion:reduce){.grid-fx{display:none}}