/* =====================================================================
   COMING SOON / TEASER PAGE
   ---------------------------------------------------------------------
   Efek yang diimplementasikan (sesuai brief):
   1. Latar hitam pekat + faint back light di belakang logo.
   2. Contour scan  : kilasan perak tipis berjalan di tepi/outline logo,
                      terbelah dua tepat dari titik kursor menyentuh.
   3. Fill wave scan: inner glow LINEAR VERTIKAL dari BAWAH ke ATAS,
                      berbentuk gelombang/ombak (multi-harmonic sine),
                      di-clip ke siluet masing-masing bagian.
   4. Ekor (tail) dan badan (body) benar-benar independen: masing-masing
      punya clip, hit-area, dan timeline animasi sendiri.
   5. Animasi dimulai PERSIS saat pointer masuk ke bagian logo tsb.
   6. Password entry dengan custom blinking caret.
   ===================================================================== */

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  color-scheme:dark;

  --bg:#050505;
  --silver:#e9eef7;
  --silver-dim:#9aa3b2;
  --logo-top:#4d545e;
  --logo-bottom:#262a31;
  --term-green:#3dff7a;
  --term-green-dim:rgba(61,255,122,.45);
  --term-glow:rgba(61,255,122,.28);
}
html{ height:100%; scroll-padding-top:env(safe-area-inset-top, 0px); }
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

body{
  height:100%;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
/* ============================ BACKGROUND TEXTURE ======================
   Panel gelap dengan serat halus (crosshatch) + vignette, terinspirasi
   dari tekstur dinding pada referensi klien -- tetap sangat redup supaya
   tidak bersaing dengan logo. */
body::before{
  content:'';
  position:absolute; inset:-2px;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(62deg,  rgba(255,255,255,0.016) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0a0a0b 0%, #000000 55%, #000000 100%);
  z-index:0;
  pointer-events:none;
}

/* ============================ FAINT BACK LIGHT ======================== */
.backlight{
  display:none;  /* default: nonaktif, diaktifkan via JS saat logo siap */
  position:absolute;
  top:50%; left:50%;
  width:min(168vmin,980px);
  aspect-ratio:1;
  transform:translate(-50%,-52%);
  background:radial-gradient(circle,
    rgba(225,232,245,0.10) 0%,
    rgba(200,212,232,0.05) 30%,
    rgba(160,175,200,0.02) 52%,
    rgba(0,0,0,0) 70%);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.6; transform:translate(-50%,-52%) scale(0.965); }
  50%    { opacity:.85; transform:translate(-50%,-52%) scale(1.035); }
}

.stage{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 60px;
  padding: 70px;
  padding-bottom:100px;
}

/* ================================ LOGO ================================ */
.logo-wrap{
  width:clamp(190px,42vw,360px);
  aspect-ratio:1;
  position:relative;
}
.logo-wrap svg{
  width:100%; height:100%;
  display:block;
  overflow:visible;
  isolation:isolate;            /* agar mix-blend-mode hanya kena logo */
  /*filter:
    drop-shadow(0 0 16px rgba(233,238,247,.4))
    drop-shadow(0 0 42px rgba(186,199,224,.3))
    drop-shadow(0 0 92px rgba(140,160,196,.18));*/
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}

/* Hit-area: tak terlihat, TIDAK ikut animasi, stroke tebal dipakai untuk
   "menjembatani" garis-garis pemisah tipis di dalam logo supaya hover
   tidak berkedip saat kursor melewatinya. */
.hit{
  fill:#000; fill-opacity:0;
  stroke:#000; stroke-opacity:0; stroke-width:9;
  pointer-events:none;
}

/* Isi logo. fill-rule evenodd WAJIB: tanpa ini mata, garis ekor dan
   detail biji ikut tertutup (bug pada versi sebelumnya). */
.fill{
  fill:url(#logoGrad);
  fill-rule:evenodd;
  /* Warna sudah diambil persis dari foto referensi stainless steel klien --
     filter dibuat netral (nyaris tanpa distorsi) supaya warnanya tetap
     akurat, bukan diproses ulang lagi. */
  filter:brightness(1) contrast(1.03) saturate(.98);
  transition:filter .4s ease;
}
.part.active .fill{ filter:brightness(1.05) contrast(1.03) saturate(.98); }

/* Kilau metal statis (brushed-metal specular), selalu terlihat lembut
   di atas fill utama supaya logo terbaca sebagai material metal walau
   tanpa animasi berjalan. */
.sheen{
  fill:url(#metalSheen);
  fill-rule:evenodd;
  mix-blend-mode:overlay;
  opacity:.85;
  pointer-events:none;
}

/* Highlight kedua di TENGAH logo (radial, lembut) -- ditambahkan di atas
   .sheen diagonal yang sudah ada (tetap dipertahankan di ujung kiri atas),
   supaya permukaan metal punya dua titik pantulan cahaya seperti logam
   dipoles yang menangkap dua sumber cahaya berbeda. */
.sheen-center{
  fill:url(#metalSheenCenter);
  fill-rule:evenodd;
  mix-blend-mode:overlay;
  opacity:.85;
  pointer-events:none;
}

/* Sheen diagonal ketiga, band pendek yang berpusat di tengah logo */
.sheen-center-diag{
  fill:url(#metalSheenCenterDiag);
  fill-rule:evenodd;
  mix-blend-mode:overlay;
  opacity:.9;
  pointer-events:none;
}

/* Serat halus (brushed-metal texture) -- garis tipis berulang yang
   menirukan pantulan lingkungan pada logam disikat, terlihat permanen
   di balik gradient supaya "metal"-nya kerasa di visual diam. */
.brushed{
  fill:url(#brushedTex);
  fill-rule:evenodd;
  mix-blend-mode:soft-light;
  opacity:.6;
  pointer-events:none;
}

/* ---------- LIFT: scale saat hover ----------
   Skala diambil dari TITIK PUSAT viewBox (bukan pusat tiap bagian) supaya
   ekor & badan terangkat ke arah yang benar, dan hanya elemen visual yang
   ikut diskalakan -- .hit sengaja berada di luar .lift agar area hover
   tidak ikut bergeser (penyebab hover berkedip). */
.lift{
  transform-box:view-box;
  transform-origin:173px 175px;
  transform:scale(1);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.part.active .lift{ transform:none; }

/* Rim halus supaya mark tetap terbaca saat idle */
.rim{
  fill:none;
  fill-rule:evenodd;
  stroke:var(--silver);
  stroke-width:1.1;
  opacity:.17;
  transition:opacity .4s ease;
}
.part.active .rim{ opacity:.18; }

/* Serat mikro (noise) dari feTurbulence -- detail butiran halus khas
   permukaan stainless steel, tidak terlihat di visual flat/vector biasa.
   Dibentuk mengikuti siluet lewat SourceAlpha (lihat filter #steelGrain). */
.grain{
  mix-blend-mode:overlay;
  opacity:.28;
  pointer-events:none;
}

/* =====================================================================
   URUTAN ANIMASI (sesuai revisi klien):
     inner glow --> halo kontur --> jeda 5 detik --> inner glow lagi
   Dua fase dipisah tegas lewat class berbeda supaya TIDAK tumpang
   tindih: .glowing untuk fase gelombang, .haloing untuk fase kontur.
   .active sendiri menyala sepanjang KEDUA fase (mengatur brightness
   fill, rim, dan sedikit scale lift), lihat coming-soon.js.
   ===================================================================== */

/* ---------- 1. CONTOUR SCAN: halo tepi/outline ----------
   TIGA lapis konsentris (lebar+redup, sedang, inti+terang) yang bergerak
   BERSAMAAN -- teknik yang sama seperti pita gelombang di bawah -- supaya
   halo terbaca sebagai satu sapuan cahaya lembut dengan tepi yang landai
   (natural), bukan satu blok pekat bertepi tajam. */
.edge-trace{
  fill:none;
  stroke:url(#silverSweep);
  stroke-linecap:butt;
  stroke-linejoin:round;
  filter:url(#edgeGlow);
  opacity:0;
}
.edge-wide{ stroke-width:10;  stroke-dasharray:0.25 0.75;  }
.edge-mid { stroke-width:3; stroke-dasharray:0.25 0.75; }
.edge-core{ stroke-width:1; stroke-dasharray:0.25 0.75; }

/* Muncul & hilang landai (ease-out saat masuk, ease-in saat keluar),
   dengan jeda antar-lapis sangat kecil supaya terasa "mekar" alami.
   Opacity dinaikkan supaya halo terasa cerah/mengkilap, bukan abu-abu. */
.part.haloing .edge-wide{ opacity:.1;  transition:opacity 6.0s ease-out; transition-delay:.05s; }
.part.haloing .edge-mid { opacity:.3;  transition:opacity 5.8s  ease-out; transition-delay:.10s; }
.part.haloing .edge-core{ opacity:.4; transition:opacity 5.0s ease-out; transition-delay:.15s; }
.part.halo-leaving .edge-trace{ opacity:0; transition:opacity .6s ease-in; transition-delay:0s; }

@keyframes trace{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-1; } }

/* ---------- 2. FILL WAVE SCAN: inner glow vertikal bergelombang ----------
   .shimmer-clip: HANYA clip-path (tanpa blend) -- membungkus .shimmer
                  supaya blend-mode tidak pernah dipasangkan pada elemen
                  yang sama dengan clip-path (penyebab garis kotak di
                  tepi kanvas pada versi sebelumnya).
   .shimmer     : blend overlay (menyalakan pita metal saat dilewati)
   .rise        : translateY dari BAWAH logo ke ATAS logo (arah vertikal)
   .drift       : translateX terus-menerus -> puncak ombak ikut merambat
   .wv          : pita (ribbon) sinus bertumpuk -> glow lembut tanpa filter */
.shimmer-clip{ pointer-events:none; }

.shimmer{
  mix-blend-mode:overlay;
  opacity:0;
  transition:opacity .3s ease;
}
.part.glowing      .shimmer{ opacity:1; transition:opacity .18s ease; }
.part.glow-leaving .shimmer{ opacity:0; transition:opacity .3s ease; }

/* Lapisan tambahan tipis dengan blend "screen" -- menambah sedikit bloom
   ambient di atas efek overlay supaya gelombang tetap terlihat jelas
   meski melintasi pita paling gelap pada gradient metal. */
.shimmer-glow{
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .3s ease;
}
.part.glowing      .shimmer-glow{ opacity:.55; transition:opacity .18s ease; }
.part.glow-leaving .shimmer-glow{ opacity:0; transition:opacity .3s ease; }

.rise,.drift{ transform-box:view-box; transform-origin:0 0; }
.wv{ fill:#ffffff; }
.rise{ transform:translateY(340px); }   /* posisi diam: di bawah logo */

/* sekali jalan saja (forwards), tidak looping */
.part.glowing .rise-a{ animation:riseA 4.5s cubic-bezier(.32,0,.5,1) forwards; }
.part.glowing .rise-b{ animation:riseB 5.5s cubic-bezier(.32,0,.5,1) .26s forwards; }

.part.glowing .drift-a{ animation:driftA 10s linear infinite; }
.part.glowing .drift-b{ animation:driftB 7s linear infinite reverse; }

@keyframes riseA{
  0%  { transform:translateY(330px); opacity:0; }
  12% { opacity:1; }
  78% { opacity:1; }
  100%{ transform:translateY(22px);  opacity:0; }
}
@keyframes riseB{
  0%  { transform:translateY(336px); opacity:0; }
  16% { opacity:1; }
  74% { opacity:1; }
  100%{ transform:translateY(16px);  opacity:0; }
}
/* jarak geser = tepat 1 panjang gelombang -> loop tanpa sambungan */
@keyframes driftA{ from{ transform:translateX(0); } to{ transform:translateX(-150px); } }
@keyframes driftB{ from{ transform:translateX(0); } to{ transform:translateX(-96px);  } }

@media (prefers-reduced-motion: reduce){
  .backlight{ animation:none; }
  .part.glowing .rise-a,.part.glowing .rise-b,
  .part.glowing .drift-a,.part.glowing .drift-b{ animation:none; }
  .part.active .lift{ transform:none; }
  .rise{ transform:translateY(178px); }         /* glow statis di tengah */
  .edge-trace{ animation:none !important; }
  /* Fallback statis: hanya .active yang dipasang JS saat reduced-motion,
     jadi visibilitas glow & halo digantung ke class itu saja. */
  .part.active .shimmer{ opacity:1; }
  .part.active .shimmer-glow{ opacity:.5; }
  .part.active .edge-core{ opacity:.82; }
  .part.active .edge-mid{ opacity:.4; }
  .part.active .edge-wide{ opacity:.2; }
}

/* =========================== PASSWORD ENTRY =========================== */
.password-container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(61,255,122,0.035);
  border:1px solid rgba(61,255,122,0.32);
  border-radius:8px;
  padding:9px 14px;
  width:min(64vw,190px);
  cursor:text;
  box-shadow:0 0 14px rgba(61,255,122,0.08);
  transition:border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.password-container:focus-within{
  border-color:rgba(61,255,122,0.8);
  box-shadow:0 0 20px rgba(61,255,122,0.24);
  background:rgba(61,255,122,0.06);
}

/* Input asli: transparan penuh, tetap fokusabel & menerima ketikan.
   Tampilan titik + caret digambar sendiri agar posisinya selalu presisi
   (versi lama memakai lebar karakter hardcoded 13px -> meleset). */
.password-input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:none; outline:none;
  background:transparent;
  color:transparent;
  caret-color:transparent;
  font-size:16px;               /* cegah auto-zoom iOS */
  text-align:center;
  border-radius:11px;
}
.password-display{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:18px;
  pointer-events:none;
}
.dots{
  color:var(--term-green);
  font-size:13px;
  letter-spacing:3px;
  font-family:ui-monospace,SFMono-Regular,"Courier New",Menlo,Consolas,monospace;
  line-height:1;
  white-space:pre;
  margin-right:-3px;
  text-shadow:0 0 6px rgba(61,255,122,.55);
}
/* teks bantu; tampil bersama caret saat kolom masih kosong */
.ghost{
  font-size:10px;
  letter-spacing:2px;
  color:rgba(61,255,122,0.42);
  font-family:ui-monospace,SFMono-Regular,"Courier New",Menlo,Consolas,monospace;
  line-height:1;
  margin-right:3px;
  white-space:nowrap;
}
.ghost.hide{ display:none; }
/* Blok solid berkedip, seperti text cursor terminal Apple II era 1980-an
   -- bukan garis tipis. */
.custom-caret{
  display:inline-block;
  width:8px; height:15px;
  background:var(--term-green);
  box-shadow:0 0 8px rgba(61,255,122,.8);
  margin-left:2px;
  animation:blink 1s step-end infinite;
}
.custom-caret.solid{ animation:none; opacity:1; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }

.status-msg{
  position:absolute;
  bottom:-21px; left:0; right:0;
  text-align:center;
  font-size:10px;
  letter-spacing:1.6px;
  font-family:ui-monospace,SFMono-Regular,"Courier New",Menlo,Consolas,monospace;
  color:var(--term-green);
  text-shadow:0 0 6px rgba(61,255,122,.6);
  opacity:0;
  transition:opacity .25s ease;
}
.status-msg.show{ opacity:1; }

@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.password-container.shake{ animation:shake .4s ease; border-color:rgba(61,255,122,0.9); box-shadow:0 0 22px rgba(61,255,122,.4); }
.password-container.success{
  border-color:rgba(61,255,122,0.9);
  box-shadow:0 0 26px rgba(61,255,122,0.35);
}
.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}