/* ============================================================
   Lixy Store — landing page.
   Struktur: hero dengan banner 3D (canvas WebGL di belakang teks),
   strip metrik, grid fitur, penutup. Login pindah ke modal yang
   dipicu tombol di nav dan hero.
   ============================================================ */

/* Landing mengambil alih seluruh viewport, jadi padding body
   dinetralkan saat halaman ini aktif. */
body.on-landing{padding:0;overflow-x:hidden}
body.on-landing::before{display:none}

.lp{position:relative;width:100%}

/* ---------- NAV ---------- */
.lp-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 26px;
  transition:background-color var(--t-med) var(--ease),border-color var(--t-med) var(--ease),
    backdrop-filter var(--t-med) var(--ease),padding var(--t-med) var(--ease);
  border-bottom:1px solid transparent}
/* Nav mengeras setelah scroll: sebelum itu ia mengapung di atas hero. */
.lp-nav.stuck{background:rgba(19,22,25,.88);backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom-color:var(--brd);padding:11px 26px}
.lp-nav .lp-brand{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;color:var(--tx)}
.lp-nav .lp-brand svg{width:29px;height:29px;flex-shrink:0;transition:transform .6s var(--spring);will-change:transform}
.lp-nav .lp-brand:hover svg{transform:rotate(-10deg) scale(1.06)}
.lp-nav .wm{letter-spacing:var(--track);text-transform:uppercase;white-space:nowrap}
.lp-nav .wm i{font-style:normal;color:var(--brand)}
.lp-nav-r{display:flex;align-items:center;gap:8px}

/* ---------- HERO ---------- */
.lp-hero{position:relative;min-height:100vh;display:grid;place-items:center;
  padding:120px 24px 80px;overflow:hidden}
@supports(min-height:100dvh){.lp-hero{min-height:100dvh}}

/* Canvas 3D: lapisan paling bawah, tidak menerima pointer supaya
   tombol di atasnya tetap bisa diklik. Interaksi pointer dibaca
   dari elemen induk oleh hero3d.js. WebGL saat ini dimatikan di
   index.html — canvas display:none sampai .is-live/.is-static. */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;
  z-index:0;pointer-events:none;opacity:0;transition:opacity .6s var(--out-expo);contain:strict}
.hero-canvas.is-live,.hero-canvas.is-static{display:block;opacity:1}
.hero-canvas.is-static{background:
  radial-gradient(circle at 74% 34%,rgba(84,171,155,.22),transparent 52%),
  radial-gradient(circle at 26% 72%,rgba(78,131,121,.14),transparent 56%),
  linear-gradient(180deg,#0D0F11,#14171A)}

/* Peredam kontras di antara canvas dan teks. Scrim tengah dijaga tipis
   supaya mark tetap terbaca; keterbacaan headline sebagian besar
   ditopang text-shadow di .lp-h1, bukan dengan menggelapkan banner. */
.lp-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 34% at 50% 52%,rgba(13,15,17,.62),rgba(13,15,17,.22) 62%,transparent 80%),
    linear-gradient(180deg,rgba(13,15,17,.58),transparent 24%,transparent 78%,rgba(13,15,17,.72))}
@media(max-width:700px){.lp-hero::after{background:radial-gradient(ellipse 70% 40% at 50% 46%,rgba(13,15,17,.56),rgba(13,15,17,.22) 58%,transparent 78%),linear-gradient(180deg,rgba(13,15,17,.5),transparent 28%,transparent 82%,rgba(13,15,17,.6))}}

.lp-hero-in{position:relative;z-index:2;width:100%;max-width:760px;text-align:center}
@media(max-width:700px){
.lp-hero-in{max-width:none}
.lp-hero::after{background:radial-gradient(ellipse 70% 40% at 50% 46%,rgba(13,15,17,.58),rgba(13,15,17,.24) 58%,transparent 78%),linear-gradient(180deg,rgba(13,15,17,.48),transparent 28%,transparent 82%,rgba(13,15,17,.6))}
}

/* ---------- ENTRANCE HERO ----------
   Konten hero berada di atas lipatan sejak paint pertama, jadi
   IntersectionObserver [data-reveal] tidak cocok: ia sudah
   intersecting sebelum observer terpasang, sehingga transisinya
   tidak pernah terlihat berjalan. Di sini urutannya dikunci ke
   satu class .ready yang dipasang landing.js setelah satu frame.

   Nilai awal dideklarasikan di .lp-hero.hero-anim saja — kalau JS
   mati, class itu tidak pernah ada dan konten tampil normal
   tanpa perlu fallback terpisah. */
.lp-hero.hero-anim .lp-eyebrow,
.lp-hero.hero-anim .lp-h1,
.lp-hero.hero-anim .lp-sub,
.lp-hero.hero-anim .lp-cta,
.lp-hero.hero-anim .lp-scroll{opacity:0;transform:translateY(18px);
  transition:opacity .72s var(--out-expo),transform .72s var(--out-expo)}
.lp-hero.hero-anim.ready .lp-eyebrow,
.lp-hero.hero-anim.ready .lp-h1,
.lp-hero.hero-anim.ready .lp-sub,
.lp-hero.hero-anim.ready .lp-cta,
.lp-hero.hero-anim.ready .lp-scroll{opacity:1;transform:none}
/* Eyebrow lebih dulu, scroll cue paling akhir: mata dituntun
   turun mengikuti arah baca, bukan semuanya muncul serempak. */
.lp-hero.hero-anim .lp-eyebrow{transition-delay:.06s}
.lp-hero.hero-anim .lp-h1{transition-delay:.16s}
.lp-hero.hero-anim .lp-sub{transition-delay:.28s}
.lp-hero.hero-anim .lp-cta{transition-delay:.38s}
.lp-hero.hero-anim .lp-scroll{transition-delay:.62s}
/* Scroll cue punya translateX sendiri untuk centering, jadi
   transform-nya harus menggabungkan keduanya. */
.lp-hero.hero-anim .lp-scroll{transform:translateX(-50%) translateY(18px)}
.lp-hero.hero-anim.ready .lp-scroll{transform:translateX(-50%)}

.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;margin-bottom:22px;
  font-size:9px;font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--accent);
  background:rgba(13,15,17,.82);border:1px solid rgba(84,171,155,.30);border-radius:var(--rp)}
.lp-eyebrow .pip{width:5px;height:5px;border-radius:50%;background:var(--cr);
  animation:halo 2.4s var(--ease) infinite}

.lp-h1{font-size:clamp(34px,7vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.03em;
  color:var(--tx);margin-bottom:18px;text-shadow:0 2px 30px rgba(9,11,12,.72)}
/* Gradien hanya pada satu kata kunci; seluruh heading bergradien
   justru menurunkan keterbacaan pada teks sebesar ini. */
.lp-h1 em{font-style:normal;background:linear-gradient(103deg,var(--accent),var(--cr) 46%,var(--brand));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lp-sub{font-size:clamp(14px,1.9vw,17px);line-height:1.62;color:var(--tx2);
  max-width:540px;margin:0 auto 30px}
.lp-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.lp-cta button{padding:13px 26px;font-size:14px;border-radius:var(--r2)}

/* Petunjuk scroll. Menghilang begitu user mulai menggulir.
   Elemen <button> supaya bisa diklik dan dijangkau keyboard —
   sebelumnya <div aria-hidden> yang cuma dekorasi, padahal
   posisinya persis di tempat orang mengharapkan tombol. */
.lp-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:6px 12px;background:0;border:0;font-family:inherit;font-weight:600;cursor:pointer;
  font-size:9px;letter-spacing:var(--track);text-transform:uppercase;color:var(--mu);
  transition:opacity var(--t-slow) var(--ease),color var(--t-fast) var(--ease)}
.lp-scroll:hover{color:var(--tx2)}
/* ui.css memberi semua <button> lift + shadow saat hover/active.
   Di sini transform sudah dipakai untuk centering, jadi lift itu
   akan menggeser tombol keluar dari tengah. Dua rule berikut
   menyamai specificity rule generik tersebut (0,4,1) dan menang
   karena landing.css dimuat setelah ui.css. */
.lp-hero button.lp-scroll:hover:not(:disabled){transform:translateX(-50%);box-shadow:none}
.lp-hero button.lp-scroll:active:not(:disabled){transform:translateX(-50%) translateY(1px);box-shadow:none}
/* pointer-events dimatikan setelah menghilang: tombol tembus pandang
   di tengah bawah layar tidak boleh tetap menangkap klik. */
.lp-scroll.gone{opacity:0;pointer-events:none}
.lp-scroll .rail{width:1px;height:34px;background:linear-gradient(var(--brd2),transparent);position:relative;overflow:hidden}
.lp-scroll .rail::after{content:'';position:absolute;top:0;left:0;width:1px;height:11px;
  background:var(--cr);animation:railRun 1.9s var(--in-out) infinite}
@keyframes railRun{0%{transform:translateY(-12px)}100%{transform:translateY(34px)}}

/* ---------- SECTION ---------- */
/* Nav fixed setinggi ~61px menutupi bagian atas target anchor.
   Tanpa scroll-margin, scrollToId('fitur') mendarat dengan judul
   section tersembunyi di balik nav. */
.lp-sec{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:88px 24px;scroll-margin-top:78px}
.lp-sec-h{text-align:center;margin-bottom:44px}
.lp-sec-h .k{display:block;font-size:9px;font-weight:700;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--cr);margin-bottom:11px}
.lp-sec-h h2{font-size:clamp(22px,3.4vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.lp-sec-h p{font-size:14px;color:var(--mu);max-width:480px;margin:11px auto 0;line-height:1.6}

/* ---------- METRIK ---------- */
.lp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--brd);border:1px solid var(--brd);border-radius:var(--r3);overflow:hidden}
.lp-stat{background:var(--card);padding:26px 20px;text-align:center;
  transition:background-color var(--t-med) var(--ease)}
.lp-stat:hover{background:var(--raised)}
.lp-stat b{display:block;font-size:clamp(24px,3.6vw,34px);font-weight:800;letter-spacing:-.02em;
  color:var(--tx);font-variant-numeric:tabular-nums}
.lp-stat span{display:block;font-size:9px;font-weight:600;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--mu);margin-top:7px}

/* ---------- FITUR ---------- */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.lp-card{position:relative;background:var(--card);border:1px solid var(--brd);border-radius:var(--r3);
  padding:24px 22px;overflow:hidden;
  transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--out-expo),
    box-shadow var(--t-med) var(--ease)}
/* Sorotan mengikuti kursor. --mx/--my diisi JS; kalau JS mati,
   nilai default menempatkannya di tengah dan efeknya cuma tak terlihat. */
.lp-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(84,171,155,.13),transparent 68%);
  transition:opacity var(--t-med) var(--ease)}
.lp-card:hover{border-color:var(--brd2);transform:translateY(-4px);box-shadow:var(--el2)}
.lp-card:hover::before{opacity:1}
.lp-card .ic{width:38px;height:38px;display:grid;place-items:center;margin-bottom:15px;
  border-radius:var(--r2);background:rgba(84,171,155,.11);border:1px solid rgba(84,171,155,.24);
  color:var(--cr);transition:transform var(--t-med) var(--spring),background-color var(--t-med) var(--ease)}
.lp-card:hover .ic{transform:translateY(-2px) rotate(-6deg);background:rgba(84,171,155,.18)}
.lp-card .ic svg{width:19px;height:19px}
.lp-card h3{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:7px;letter-spacing:-.01em}
.lp-card p{font-size:12.5px;line-height:1.62;color:var(--mu)}

/* ---------- PENUTUP ---------- */
.lp-final{text-align:center;padding:96px 24px 104px}
.lp-final h2{font-size:clamp(24px,4vw,38px);font-weight:800;letter-spacing:-.025em;
  color:var(--tx);margin-bottom:14px}
.lp-final p{font-size:14px;color:var(--tx2);max-width:430px;margin:0 auto 26px;line-height:1.6}

.lp-foot{border-top:1px solid var(--brd);padding:24px;text-align:center;
  font-size:11px;color:var(--mu)}
.lp-foot .sep{color:var(--brd2);margin:0 9px}
/* .lnk di app.css di-scope ke .login-wrap, jadi tautan footer ini
   sebelumnya hanya diwarnai inline style tanpa state hover/fokus. */
.lp-foot .lnk{color:var(--cr);text-decoration:none;font-weight:600;
  transition:color var(--t-fast) var(--ease)}
/* inline-block + padding: teks 11px hanya setinggi ~14px, di bawah
   target sentuh minimum. Margin negatif menahan supaya barisan footer
   tidak ikut melebar. */
.lp-foot .lnk{display:inline-block;padding:6px 8px;margin:-6px -8px}
.lp-foot .lnk:hover{color:var(--accent);text-decoration:underline}
.lp-foot .lnk:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- MODAL AUTH ---------- */
/* Panel auth lama dipakai ulang di dalam overlay ini, jadi seluruh
   markup form (login/register/forgot) tidak perlu ditulis dua kali. */
.auth-ov{position:fixed;inset:0;z-index:10002;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(9,11,12,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.auth-ov.open{display:flex}
.auth-ov .login-wrap{position:relative;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin}
.auth-x{position:absolute;top:12px;right:12px;background:0;border:0;padding:6px;line-height:0;
  color:var(--mu);cursor:pointer;border-radius:6px;
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.auth-x svg{width:14px;height:14px}
.auth-x:hover{color:var(--tx);background:var(--raised)}

/* ---------- MOBILE NAV ---------- */
.lp-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 8px;background:transparent;border:1px solid transparent;border-radius:8px}
.lp-nav-toggle span{display:block;height:2px;background:var(--tx);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}
@media(max-width:760px){
.lp-nav{padding:12px 16px;flex-wrap:wrap}
.lp-nav.stuck{padding:9px 16px}
.lp-nav .wm{display:none}
.lp-nav-toggle{display:flex}
.lp-nav-r{width:100%;flex-direction:column;align-items:stretch;display:none;padding-top:10px}
.lp-nav-r.open{display:flex}
.lp-nav-r .btn4,.lp-nav-r .btn1{width:100%;justify-content:center}
.lp-hero{padding:104px 18px 72px}
.lp-sec{padding:64px 18px}
.lp-final{padding:72px 18px 80px}
.lp-cta button{width:100%}
.lp-card:hover{transform:translateY(-2px)}
}

/* Dikunci ke .calm, bukan ke media query — lihat catatan di app.css. */
html.calm .lp-eyebrow .pip,html.calm .lp-scroll .rail::after{animation:none}
html.calm .lp-card:hover{transform:none}
html.calm .lp-card:hover .ic{transform:none}
/* Jaring pengaman: landing.js tidak memasang .hero-anim saat gerak
   dimatikan, tapi kalau class itu sampai ada (mis. user menyalakan
   gerak lalu mematikannya lagi di tengah sesi) konten hero tidak boleh
   tertinggal di opacity:0 menunggu transisi yang sudah dinetralkan. */
html.calm .lp-hero.hero-anim .lp-eyebrow,
html.calm .lp-hero.hero-anim .lp-h1,
html.calm .lp-hero.hero-anim .lp-sub,
html.calm .lp-hero.hero-anim .lp-cta{opacity:1;transform:none}
html.calm .lp-hero.hero-anim .lp-scroll{opacity:1;transform:translateX(-50%)}