/* ===== FUNGPAO — SEGEL ENERGI ===== */
:root{
  --void:#04030a; --ungu:#7b2ff7; --nila:#3b0f9e; --cyan:#22d3ee;
  --magenta:#ff2e88; --emas:#ffd166; --putih:#eef2ff;
  --gutter:clamp(18px,4.5vw,56px);
  --judul:"Shippori Mincho B1",serif;
  --badan:"Zen Kaku Gothic New",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--putih);font-family:var(--badan);
  font-size:16px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.terkunci{overflow:hidden;height:100%;position:fixed;width:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--magenta);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

/* ---- header: tersembunyi sampai segel pecah ---- */
.header{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;
  align-items:center;justify-content:space-between;gap:20px;padding:16px var(--gutter);
  background:rgba(4,3,10,.42);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(123,47,247,.35);
  transform:translateY(-110%);opacity:0;pointer-events:none;
  transition:transform 1s var(--ease) .25s,opacity .7s var(--ease) .25s,background .4s}
body.masuk .header{transform:none;opacity:1;pointer-events:auto}
.header.padat{background:rgba(4,3,10,.88)}
.logo{display:flex;align-items:center;gap:12px}
.logo__tanda{width:40px;height:40px;flex:0 0 40px;transition:transform .6s var(--ease);
  filter:drop-shadow(0 0 8px rgba(34,211,238,.8))}
.logo:hover .logo__tanda{transform:rotate(180deg)}
.logo__nama{font-family:var(--judul);font-size:1.34rem;line-height:1;letter-spacing:.04em}
.logo__kana{display:block;margin-top:5px;font-size:.6rem;letter-spacing:.42em;color:var(--cyan)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{position:relative;padding:9px 15px;font-size:.85rem;font-weight:500;
  color:rgba(238,242,255,.7);transition:color .3s,text-shadow .3s}
.nav a::before{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transition:left .4s var(--ease),right .4s var(--ease)}
.nav a:hover{color:#fff;text-shadow:0 0 14px rgba(34,211,238,.9)}
.nav a:hover::before{left:15px;right:15px}
.nav a.aktif{color:#fff}
.nav a.aktif::before{left:15px;right:15px}
.nav a.mati{opacity:.35;cursor:default}
.nav a.mati:hover{text-shadow:none}
.nav a.mati:hover::before{left:50%;right:50%}
.burger{display:none;width:42px;height:42px;border:1px solid rgba(123,47,247,.5);
  background:none;border-radius:4px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:18px;height:2px;background:var(--putih);
  transition:.35s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:24px}
.burger.buka span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.buka span:nth-child(2){top:20px;transform:rotate(-45deg)}
.laci{position:fixed;inset:0;z-index:590;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#150a2e,var(--void));
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease)}
.laci.buka{clip-path:inset(0 0 0 0)}
.laci nav{display:grid;gap:4px;text-align:center}
.laci a{font-family:var(--judul);font-size:clamp(1.9rem,8vw,2.8rem);line-height:1.5;
  color:rgba(238,242,255,.6);transition:color .3s,letter-spacing .45s var(--ease)}
.laci a:hover,.laci a.aktif{color:var(--cyan);letter-spacing:.06em}
.laci a.mati{color:rgba(238,242,255,.25)}

/* ---- isi: benar-benar tidak terlihat sebelum segel pecah ---- */
.isi{opacity:0;visibility:hidden;transform:scale(1.14);
  transition:opacity 1.1s var(--ease),transform 1.4s var(--ease),visibility 0s 1.1s}
body.masuk .isi{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panggung{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}




.kelopak{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kelopak i{position:absolute;top:-8%;width:11px;height:11px;border-radius:12px 1px 12px 1px;
  opacity:.85;animation:gugur linear infinite}
@keyframes gugur{
  0%{transform:translate3d(0,-10vh,0) rotate(0)}
  100%{transform:translate3d(14vw,112vh,0) rotate(540deg)}
}
.tengah{position:absolute;inset:0;z-index:4;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 var(--gutter)}




/* ================= SEGEL ENERGI ================= */
.segel{position:fixed;inset:0;z-index:800;background:var(--void);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s}
.segel.hilang{opacity:0;visibility:hidden;pointer-events:none}
.segel.goyang{animation:goyang .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes goyang{
  0%,100%{transform:translate3d(0,0,0)}
  10%{transform:translate3d(-6px,3px,0)}25%{transform:translate3d(7px,-5px,0)}
  40%{transform:translate3d(-9px,-3px,0)}55%{transform:translate3d(9px,6px,0)}
  70%{transform:translate3d(-11px,4px,0)}85%{transform:translate3d(10px,-6px,0)}
}

.bola{position:absolute;width:min(22vh,30vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff 0%,var(--cyan) 26%,var(--ungu) 58%,rgba(59,15,158,0) 78%);
  box-shadow:0 0 70px 18px rgba(123,47,247,.75),0 0 160px 60px rgba(34,211,238,.35);
  animation:napas 2.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes napas{50%{transform:scale(1.1);filter:brightness(1.25)}}
.cincin{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.cincin--a{width:min(40vh,58vw);aspect-ratio:1;border:2px dashed rgba(34,211,238,.7);
  animation:putarKanan 16s linear infinite}
.cincin--b{width:min(30vh,44vw);aspect-ratio:1;border:3px solid rgba(123,47,247,.65);
  border-left-color:transparent;border-right-color:transparent;
  animation:putarKiri 9s linear infinite}
@keyframes putarKanan{to{transform:rotate(360deg)}}
@keyframes putarKiri{to{transform:rotate(-360deg)}}

.serap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.serap b{position:absolute;left:50%;top:50%;width:0;height:0;display:block}
.serap b i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 14px 4px rgba(34,211,238,.85);opacity:0}
.segel.mengisi .serap b i{animation:sedot 1s cubic-bezier(.5,0,.75,0) forwards}
@keyframes sedot{
  0%{transform:translateX(58vmax) scale(1.4);opacity:0}
  25%{opacity:1}
  100%{transform:translateX(0) scale(.2);opacity:0}
}
.segel.mengisi .bola{animation:mengisi 1s cubic-bezier(.55,0,.9,.3) forwards}
@keyframes mengisi{
  0%{transform:scale(1)}
  70%{transform:scale(2.4);filter:brightness(1.7)}
  100%{transform:scale(1.6);filter:brightness(2.4)}
}
.segel.mengisi .cincin{animation-duration:1.1s}

.gelombang{position:absolute;width:min(24vh,32vw);aspect-ratio:1;border-radius:50%;
  border:3px solid rgba(255,255,255,.9);opacity:0;pointer-events:none}
.segel.menembak .gelombang{animation:ledak .75s cubic-bezier(.2,.8,.3,1) forwards}
.segel.menembak .gelombang:nth-of-type(2){animation-delay:.1s}
.segel.menembak .gelombang:nth-of-type(3){animation-delay:.2s}
@keyframes ledak{
  0%{transform:scale(.4);opacity:1;border-width:6px}
  100%{transform:scale(14);opacity:0;border-width:1px}
}
.sinar{position:absolute;width:min(26vh,34vw);aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0%,#dffaff 30%,var(--cyan) 52%,var(--ungu) 72%,transparent 82%);
  pointer-events:none;will-change:transform,opacity}
.segel.menembak .sinar{animation:tembak .6s cubic-bezier(.6,0,.85,0) forwards}
@keyframes tembak{
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(26);opacity:1}
}
.segel.menembak .bola{animation:lenyap .3s ease-in forwards}
@keyframes lenyap{to{transform:scale(.1);opacity:0}}
.segel.menembak .cincin{animation:lewat .5s cubic-bezier(.6,0,.85,0) forwards}
@keyframes lewat{to{transform:scale(9);opacity:0}}

.putih{position:fixed;inset:0;z-index:900;background:#fff;opacity:0;
  pointer-events:none;visibility:hidden}
.putih.nyala{visibility:visible;animation:silau 1.1s ease-out forwards}
@keyframes silau{
  0%{opacity:0}12%{opacity:1}45%{opacity:1}100%{opacity:0;visibility:hidden}
}

.ajakan{position:absolute;bottom:12vh;left:0;right:0;text-align:center;margin:0;
  font-size:.72rem;letter-spacing:.38em;padding-left:.38em;color:rgba(238,242,255,.8);
  animation:kedip 2.6s ease-in-out infinite}
@keyframes kedip{50%{opacity:.32}}
.segel.mengisi .ajakan{opacity:0;transition:opacity .3s}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .kelopak,.serap{display:none}
}


/* ================= RUANG ANGKASA ================= */
.langit{position:absolute;inset:0;background:
  radial-gradient(90vmax 60vmax at 78% 12%, rgba(90,40,190,.30), transparent 60%),
  radial-gradient(70vmax 50vmax at 14% 82%, rgba(20,110,190,.26), transparent 62%),
  radial-gradient(50vmax 40vmax at 50% 50%, rgba(140,50,200,.14), transparent 70%),
  #02020a}
.bintang{position:absolute;inset:0;pointer-events:none}
.bintang i{position:absolute;border-radius:50%;background:#fff;
  animation:kelip 4s ease-in-out infinite}
@keyframes kelip{0%,100%{opacity:.25}50%{opacity:1}}
.debu{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.debu i{position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(180,210,255,.9);box-shadow:0 0 8px 2px rgba(120,170,255,.5);
  animation:hanyut linear infinite}
@keyframes hanyut{
  0%{transform:translate3d(0,110vh,0);opacity:0}
  10%{opacity:1}90%{opacity:1}
  100%{transform:translate3d(8vw,-20vh,0);opacity:0}
}
.planet{position:absolute;left:50%;bottom:-38vmin;width:min(96vmin,150vw);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 26%, #4c2b8f 0%, #2a1358 42%, #120629 70%, #08031a 100%);
  box-shadow:inset -40px -30px 90px rgba(0,0,0,.85), 0 0 120px 20px rgba(110,60,220,.28)}
.planet::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 60px 40px 120px rgba(120,180,255,.16)}

/* teks melayang tanpa gravitasi */
.tajuk{font-family:var(--judul);font-weight:500;margin:0;color:#fff;
  font-size:clamp(2.6rem,11vw,7.5rem);line-height:.95;letter-spacing:.04em;
  text-shadow:0 0 30px rgba(120,90,255,.85),0 0 90px rgba(60,140,255,.45);
  animation:melayang 7s ease-in-out infinite}
@keyframes melayang{
  0%,100%{transform:translate3d(0,0,0) rotate(-.6deg)}
  50%{transform:translate3d(0,-18px,0) rotate(.6deg)}
}


/* ================= SILUET PENYALUR ================= */
.adegan{position:absolute;bottom:0;left:50%;translate:-50% 0;
  width:min(72vh,96vw);aspect-ratio:1;z-index:2;pointer-events:none}
.sosok{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 -6px 40px rgba(90,50,220,.55));
  transition:filter .3s ease}
.segel.mengisi .sosok{filter:drop-shadow(0 -6px 70px rgba(34,211,238,.9))}
.segel.menembak .sosok{filter:drop-shadow(0 -6px 90px rgba(200,235,255,1)) brightness(1.5)}

/* titik lahir energi: di antara kedua telapak tangan */
.sumber{position:absolute;left:42%;top:66%}
.sumber > *{position:absolute;left:0;top:0;translate:-50% -50%}
.sumber .serap{inset:auto;left:0;top:0;width:0;height:0;overflow:visible}

/* cahaya latar yang menyorot punggung saat menembak */
.halo{position:absolute;left:42%;top:66%}
.segel.mengisi .halo{opacity:.5;transition:opacity 1s ease}
.segel.menembak .halo{opacity:1;transition:opacity .2s ease}


/* === STYLE WALLPAPER GAMBAR === */


/* Sesuaikan warna pita agar selaras dengan aura biru-hijau di gambar */
.pita {
    border-top-color: rgba(0, 255, 170, 0.7);
    border-bottom-color: rgba(0, 140, 255, 0.5);
    box-shadow: 0 0 40px rgba(0, 255, 170, 0.4);
}




/* ============ BINTANG YANG MELEDAK ============ */
.bintang-inti{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3}
.bintang-inti > *{position:absolute;left:0;top:0;translate:-50% -50%}
.serap b{left:50%;top:50%}

.bola{width:min(20vh,28vw);height:min(20vh,28vw);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff 0%,#fff3c4 22%,#ffb03a 46%,#ff5e1a 68%,rgba(255,60,0,0) 82%);
  box-shadow:0 0 80px 24px rgba(255,150,40,.75),0 0 200px 70px rgba(255,90,20,.4);
  animation:napas 2.4s ease-in-out infinite;will-change:transform,opacity}

.plasma{width:min(21vh,29vw);height:min(21vh,29vw);border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,220,.95),transparent 42%),
    radial-gradient(circle at 68% 64%,rgba(255,140,40,.85),transparent 46%),
    radial-gradient(circle at 46% 78%,rgba(255,200,90,.75),transparent 40%);
  filter:blur(6px);animation:gejolak 7s ease-in-out infinite}
@keyframes gejolak{
  0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}
  33%{transform:translate(-50%,-50%) rotate(120deg) scale(1.08)}
  66%{transform:translate(-50%,-50%) rotate(240deg) scale(.95)}
}

.korona{width:min(30vh,42vw);height:min(30vh,42vw);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,170,60,.55) 24deg,transparent 48deg,
    rgba(255,110,30,.5) 96deg,transparent 132deg,rgba(255,210,120,.55) 210deg,transparent 250deg,
    rgba(255,140,40,.5) 310deg,transparent 350deg);
  filter:blur(14px);animation:putarKanan 11s linear infinite}
.korona--2{width:min(38vh,54vw);height:min(38vh,54vw);filter:blur(22px);opacity:.7;
  animation:putarKiri 17s linear infinite}

.flare{width:min(58vh,80vw);height:min(58vh,80vw);pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 3deg,rgba(255,190,90,.5) 3deg 4deg,transparent 4deg 30deg);
  -webkit-mask-image:radial-gradient(circle,transparent 16%,#000 26%,#000 44%,transparent 62%);
  mask-image:radial-gradient(circle,transparent 16%,#000 26%,#000 44%,transparent 62%);
  animation:putarKanan 26s linear infinite;opacity:.8}

.cincin--a{width:min(34vh,48vw);height:min(34vh,48vw);border-color:rgba(255,190,90,.55)}
.cincin--b{width:min(26vh,36vw);height:min(26vh,36vw);border-top-color:rgba(255,120,40,.7);
  border-bottom-color:rgba(255,120,40,.7)}
.serap b i{background:#ffb03a;box-shadow:0 0 14px 4px rgba(255,160,50,.9)}

.sinar{background:radial-gradient(circle,#fff 0%,#fff6d8 28%,#ffb03a 50%,#ff4d1a 70%,transparent 82%)}
.gelombang{border-color:rgba(255,220,170,.95)}

.segel.mengisi .korona,.segel.mengisi .flare{animation-duration:2.2s}
.segel.mengisi .plasma{animation-duration:1.4s;filter:blur(3px) brightness(1.6)}
.segel.menembak .korona,.segel.menembak .flare,.segel.menembak .plasma{
  animation:lewat .5s cubic-bezier(.6,0,.85,0) forwards}

/* buang sisa siluet */
.adegan,.sosok,.halo,.pita,.sumber{display:none !important}