/* =========================================================
   NINZY CORE — intro.css  ("Halaman Terbelah")
   Animasi masuk bergaya halaman manga:
   screentone halftone → garis fokus → stempel hanko menghantam →
   wordmark naik per huruf → tebasan diagonal → halaman terbelah
   dan aplikasi muncul dari baliknya.
   Murni CSS; JS hanya untuk skip/cleanup. Total ±16,5 dtk, sekali per sesi.
   ========================================================= */

#nzIntro{display:none;}
html.nz-intro #nzIntro{
  display:block; position:fixed; inset:0; z-index:99999; overflow:hidden;
  pointer-events:auto; cursor:pointer; contain:strict;
  /* failsafe: kalau JS gagal, overlay tetap hilang sendiri */
  animation:nzGone 0s linear 19s forwards;
}
@keyframes nzGone{to{visibility:hidden; pointer-events:none;}}
#nzIntro.nz-out{visibility:hidden; pointer-events:none;}

/* ---------- dua belahan halaman (dipotong diagonal) ---------- */
.nz-half{
  position:absolute; inset:0; will-change:transform;
  background:
    radial-gradient(120% 90% at 50% 45%, #1b1850 0%, #12103a 45%, #090722 100%);
}
.nz-half--a{clip-path:polygon(0 0,100% 0,0 100%);   animation:nzPartA 1.15s cubic-bezier(.76,0,.2,1) 15.55s forwards;}
.nz-half--b{clip-path:polygon(100% 0,100% 100%,0 100%); animation:nzPartB 1.15s cubic-bezier(.76,0,.2,1) 15.55s forwards;}
@keyframes nzPartA{to{transform:translate(-105%,-105%);}}
@keyframes nzPartB{to{transform:translate(105%,105%);}}

/* screentone halftone — tiap belahan punya titik sendiri */
.nz-half::before{
  content:""; position:absolute; inset:-10%;
  background-image:radial-gradient(circle, rgba(148,85,255,.5) 0 1.5px, transparent 2px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
  opacity:0; transform:scale(1.5);
  animation:nzTone 5s cubic-bezier(.2,.7,.2,1) .05s forwards;
}
.nz-half--b::before{background-position:6px 6px;}
@keyframes nzTone{to{opacity:.85; transform:scale(1);}}

/* ---------- garis fokus ala manga ---------- */
.nz-focus{
  position:absolute; left:50%; top:50%; width:230vmax; height:230vmax; margin:-115vmax 0 0 -115vmax;
  background:repeating-conic-gradient(from 3deg, rgba(241,239,255,.9) 0 .5deg, transparent .5deg 3.4deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 9%, #000 24%, transparent 62%);
          mask-image:radial-gradient(circle, transparent 0 9%, #000 24%, transparent 62%);
  opacity:0; transform:scale(.35) rotate(-6deg);
  animation:nzFocus 1s cubic-bezier(.1,.8,.2,1) 4.4s forwards;
}
@keyframes nzFocus{
  0%{opacity:0; transform:scale(.35) rotate(-6deg);}
  25%{opacity:.8;}
  100%{opacity:0; transform:scale(1) rotate(3deg);}
}

/* ---------- panggung tengah ---------- */
.nz-stage{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  animation:nzShake .42s linear 4.6s, nzStageOut .5s cubic-bezier(.5,0,.9,.4) 14.9s forwards;
}
@keyframes nzShake{
  0%,100%{transform:translate(0,0);}
  15%{transform:translate(-7px,5px);} 30%{transform:translate(6px,-5px);}
  45%{transform:translate(-4px,-3px);} 60%{transform:translate(3px,3px);} 80%{transform:translate(-1px,1px);}
}
@keyframes nzStageOut{to{opacity:0; transform:scale(1.22); filter:blur(5px);}}

/* stempel */
.nz-seal{position:relative; width:clamp(92px,24vmin,150px); aspect-ratio:1;}
.nz-seal img{
  width:100%; height:100%; border-radius:24%; object-fit:cover; display:block;
  box-shadow:0 0 0 1px rgba(139,108,255,.55), 0 14px 46px rgba(124,58,237,.65);
  opacity:0; transform:scale(2.8) rotate(-16deg);
  animation:nzStamp .5s cubic-bezier(.2,1.5,.35,1) 4.56s forwards;
}
@keyframes nzStamp{
  0%{opacity:0; transform:scale(2.8) rotate(-16deg);}
  35%{opacity:1;}
  62%{transform:scale(.9) rotate(2.5deg);}
  100%{opacity:1; transform:scale(1) rotate(0);}
}
/* gelombang kejut + cipratan tinta */
.nz-seal::before,.nz-seal::after{
  content:""; position:absolute; inset:-6%; border-radius:30%; pointer-events:none; opacity:0;
}
.nz-seal::before{
  border:2px solid rgba(190,160,255,.9);
  animation:nzRing .9s cubic-bezier(.1,.7,.2,1) 4.88s forwards;
}
.nz-seal::after{
  inset:-34%; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.55) 0%, rgba(124,58,237,.18) 38%, transparent 66%);
  animation:nzInk 1.1s ease-out 4.86s forwards;
}
@keyframes nzRing{
  0%{opacity:.95; transform:scale(.9);}
  100%{opacity:0; transform:scale(2.7);}
}
@keyframes nzInk{
  0%{opacity:0; transform:scale(.4);}
  30%{opacity:1;}
  100%{opacity:.0; transform:scale(1.6);}
}

/* wordmark — huruf naik dari balik topeng */
.nz-word{
  display:flex; font:800 clamp(24px,7.2vmin,44px)/1 Poppins,Inter,system-ui,sans-serif;
  letter-spacing:.28em; margin-right:-.28em; color:#f1efff; overflow:hidden; padding:.12em 0 .16em;
}
.nz-word span{display:block; transform:translateY(120%) skewY(8deg); animation:nzLetter .9s cubic-bezier(.2,.9,.2,1) forwards; animation-delay:calc(6s + var(--i) * 130ms);}
.nz-word .nz-gap{width:.5em;}
.nz-word em{font-style:normal; color:#a87dff; display:flex;}
.nz-word em span{animation-delay:calc(6s + var(--i) * 130ms);}
@keyframes nzLetter{to{transform:none;}}

/* garis tipis di bawah wordmark */
.nz-rule{
  height:2px; width:min(220px,48vw); border-radius:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, transparent, #9455ff 30%, #cdb6ff 50%, #9455ff 70%, transparent);
  animation:nzRule 1.1s cubic-bezier(.3,.9,.2,1) 7.5s forwards;
}
@keyframes nzRule{to{transform:scaleX(1);}}

/* ---------- tebasan diagonal (tepat sebelum belah) ---------- */
.nz-slash{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.nz-slash line{
  vector-effect:non-scaling-stroke; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
}
.nz-slash .nz-slash__glow{stroke:rgba(148,85,255,.9); stroke-width:14; filter:blur(7px); animation:nzSlash .45s cubic-bezier(.4,0,.2,1) 15.1s forwards, nzSlashFade .4s ease-out 15.75s forwards;}
.nz-slash .nz-slash__core{stroke:#fff; stroke-width:2.5; animation:nzSlash .45s cubic-bezier(.4,0,.2,1) 15.1s forwards, nzSlashFade .4s ease-out 15.75s forwards;}
@keyframes nzSlash{
  0%{stroke-dashoffset:1; opacity:1;}
  100%{stroke-dashoffset:0; opacity:1;}
}
@keyframes nzSlashFade{to{opacity:0;}}

/* petunjuk skip */
.nz-skip{
  position:absolute; left:0; right:0; text-align:center; bottom:calc(14px + env(safe-area-inset-bottom,0px));
  font:600 11px/1 Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,239,255,.45); opacity:0; animation:nzFadeIn .5s ease 1s forwards, nzSkipOut .3s ease 14.8s forwards;
}
@keyframes nzFadeIn{to{opacity:1;}}
@keyframes nzSkipOut{to{opacity:0;}}

/* ---------- aplikasi muncul dari balik halaman ---------- */
html.nz-intro .topbar{animation:nzTopbar .7s cubic-bezier(.2,.9,.2,1) 15.95s backwards;}
html.nz-intro #app{animation:nzApp 1s cubic-bezier(.2,.85,.2,1) 15.85s backwards;}
html.nz-intro .bottomnav{animation:nzBottom .7s cubic-bezier(.2,.9,.2,1) 16.1s backwards;}
@keyframes nzTopbar{from{transform:translateY(-100%); opacity:0;}}
@keyframes nzApp{from{opacity:0; transform:translateY(34px) scale(.975); filter:blur(4px);}}
@keyframes nzBottom{from{transform:translateY(100%); opacity:0;}}

/* ---------- fase tegang: lingkaran tinta digambar sebelum stempel ---------- */
.nz-circle{position:absolute; inset:-22%; width:144%; height:144%; overflow:visible; pointer-events:none;}
.nz-circle circle{
  fill:none; stroke:rgba(168,125,255,.85); stroke-width:.9; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transform-origin:50% 50%; transform:rotate(-90deg);
  animation:nzCircle 3.4s cubic-bezier(.5,.1,.2,1) .8s forwards, nzCircleOut .3s ease-out 4.25s forwards;
}
.nz-circle circle:nth-child(2){stroke:rgba(241,239,255,.35); stroke-width:.6; animation-delay:1.3s,4.25s; transform:rotate(90deg) scale(.86);}
@keyframes nzCircle{to{stroke-dashoffset:0;}}
@keyframes nzCircleOut{to{opacity:0;}}

/* tagline */
.nz-tag{
  font:600 clamp(10px,2.6vmin,13px)/1 Inter,system-ui,sans-serif; letter-spacing:.42em; margin-right:-.42em; text-transform:uppercase;
  color:rgba(241,239,255,.62); opacity:0; transform:translateY(8px);
  animation:nzTag .9s cubic-bezier(.2,.9,.2,1) 8.1s forwards;
}
@keyframes nzTag{to{opacity:1; transform:none;}}

/* progress "membuka halaman" */
.nz-load{
  position:absolute; left:50%; transform:translateX(-50%); bottom:calc(44px + env(safe-area-inset-bottom,0px));
  width:min(240px,60vw); display:flex; flex-direction:column; gap:8px; align-items:center; opacity:0;
  font:600 10px/1 Inter,system-ui,sans-serif; letter-spacing:.3em; text-transform:uppercase; color:rgba(241,239,255,.4);
  animation:nzFadeIn .5s ease .3s forwards, nzSkipOut .3s ease 14.8s forwards;
}
.nz-load i{display:block; width:100%; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden;}
.nz-load i::after{
  content:""; display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,#7c3aed,#cdb6ff); animation:nzLoad 14.3s cubic-bezier(.4,.1,.3,1) .3s forwards;
}
@keyframes nzLoad{to{transform:scaleX(1);}}

/* ---------- ambient: partikel tinta & sinar halus (mengisi jeda panjang) ---------- */
.nz-dust,.nz-rays{position:absolute; inset:0; pointer-events:none; opacity:0; animation:nzFadeIn 2.5s ease 3.2s forwards, nzSkipOut .4s ease 14.9s forwards;}
.nz-dust{
  background-image:
    radial-gradient(circle, rgba(205,182,255,.55) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(148,85,255,.45) 0 2.2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.6px);
  background-size:97px 131px, 173px 211px, 59px 83px; background-position:0 0, 40px 60px, 20px 10px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%); mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%);
  animation:nzFadeIn 2.5s ease 3.2s forwards, nzDrift 40s linear infinite, nzSkipOut .4s ease 14.9s forwards;
}
@keyframes nzDrift{to{background-position:0 -131px, 40px -151px, 20px -73px;}}
.nz-rays{
  left:50%; top:50%; right:auto; bottom:auto; width:200vmax; height:200vmax; margin:-100vmax 0 0 -100vmax;
  background:repeating-conic-gradient(from 0deg, rgba(148,85,255,.12) 0 2deg, transparent 2deg 9deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 4%, #000 14%, transparent 44%); mask-image:radial-gradient(circle, transparent 0 4%, #000 14%, transparent 44%);
  animation:nzFadeIn 3s ease 5.2s forwards, nzSpin 70s linear infinite, nzSkipOut .4s ease 14.9s forwards;
}
@keyframes nzSpin{to{transform:rotate(360deg);}}

/* denyut cahaya setelah stempel & wordmark mendarat */
.nz-seal{animation:nzBreathe 3.4s ease-in-out 5.7s infinite;}
@keyframes nzBreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.045);}}
.nz-word{animation:nzGlow 3.4s ease-in-out 7.6s infinite;}
@keyframes nzGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(148,85,255,0));} 50%{filter:drop-shadow(0 0 14px rgba(148,85,255,.8));}}

/* kalimat sambutan yang bergantian di bawah tagline */
.nz-swap{position:relative; width:min(86vw,420px); height:1.5em; font:600 clamp(12px,3.2vmin,15px)/1.5 Inter,system-ui,sans-serif; color:#cdb6ff;}
.nz-swap span{position:absolute; inset:0; text-align:center; opacity:0; transform:translateY(10px); animation:nzSwap 1.5s cubic-bezier(.2,.9,.2,1) both; animation-delay:calc(9.4s + var(--k) * 1.45s);}
.nz-swap span:last-child{animation-name:nzSwapIn; animation-duration:.5s; animation-fill-mode:forwards;}
@keyframes nzSwap{0%{opacity:0; transform:translateY(10px);} 14%,82%{opacity:1; transform:none;} 100%{opacity:0; transform:translateY(-10px);}}
@keyframes nzSwapIn{to{opacity:1; transform:none;}}

/* teks status bar loading (dekoratif) */
.nz-load__txt{position:relative; display:block; width:100%; height:12px; text-align:center;}
.nz-load__txt span{position:absolute; inset:0; opacity:0; animation:nzStatus 3.7s ease both; animation-delay:calc(.5s + var(--k) * 3.6s);}
.nz-load__txt span:last-child{animation-name:nzStatusIn; animation-duration:.4s; animation-fill-mode:forwards;}
@keyframes nzStatus{0%{opacity:0;} 10%,88%{opacity:1;} 100%{opacity:0;}}
@keyframes nzStatusIn{to{opacity:1;}}

/* ---------- skip: dipercepat & dipotong ---------- */
#nzIntro.nz-skipping{transition:opacity .22s ease; opacity:0;}

/* ---------- hormati preferensi kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce){
  #nzIntro{display:none !important;}
  html.nz-intro .topbar, html.nz-intro #app, html.nz-intro .bottomnav{animation:none !important;}
}
body.cx-reduce #nzIntro{display:none !important;}