/* popcat-cronos/style.css */
:root{
  --bg:#0a0b10; --fg:#e8eefc; --muted:#9aa3b2; --accent:#2dd4bf; --card:#11131a;
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow:hidden}   /* single screen, no scroll */

body{
  margin:0;
  /* radial dasar + warna base */
  background:
    radial-gradient(1200px 600px at 50% -10%, #171925 0%, var(--bg) 60%),
    var(--bg);
  color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* layer bg.png/svg aman di mobile (tidak intercept klik) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background: url('assets/bg1.png') center / cover no-repeat;
  pointer-events:none;
  opacity:1;
}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; height:56px; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(10,11,16,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:10px; align-items:center; font-family:Bangers, cursive; letter-spacing:1px}
.brand .name{font-size:28px; line-height:1}
.nav{display:flex; gap:10px}
.nav a{
  color:var(--fg); text-decoration:none; font-weight:800; font-size:14px;
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08)
}
.nav a:hover{background:rgba(255,255,255,.06)}

/* Layout – center content vertically */
.main{
  position:fixed; inset:56px 0 150px 0;   /* sisakan bawah untuk pile */
  display:grid; place-items:center;
  padding:12px;
}
.hero{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  width:min(92vw,1100px);
}

/* Stats */
.stats{display:flex; gap:16px}
.stat{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  padding:10px 16px; border-radius:14px; text-align:center; min-width:130px;
  box-shadow:0 6px 16px rgba(0,0,0,.30);
}
.stat .label{color:var(--muted); font-size:11px; letter-spacing:1.4px}
.stat .value{font-family:Bangers, cursive; font-size:48px; line-height:1}

/* breathe animation on numbers */
.breathe{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{
  0%,100%{ transform: translateZ(0) scale(1) }
  50%{ transform: translateZ(0) scale(1.03) }
}

/* Pop area */
.popzone{
  position:relative; width:min(90vw,600px); height:min(90vw,600px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.08); border-radius:28px;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 0 60px rgba(255,255,255,.04);
  cursor:pointer;
}
/* pastikan area klik tidak ketutup overlay */
.popzone, .popzone * { pointer-events:auto; }

.popcat{
  position:absolute; width:84%; max-width:520px;
  transition:transform .06s ease;
  user-select:none; -webkit-user-drag:none; image-rendering:-webkit-optimize-contrast;
}
.popcat.visible{opacity:1}
.popcat:not(.visible){opacity:0}
.bursts{position:absolute; inset:0; pointer-events:none; overflow:visible}

/* aura animation (jangan intercept klik) */
.aura::before{
  content:""; position:absolute; inset:-2px; border-radius:30px; z-index:-1;
  background: radial-gradient(400px 200px at 50% 0%, rgba(45,212,191,.18), rgba(96,165,250,.14), transparent 70%);
  filter: blur(18px);
  animation:auraPulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes auraPulse{
  0%,100%{opacity:.55; transform:scale(1)}
  50%{opacity:.85; transform:scale(1.03)}
}

/* Cronos coin */
.cronos{
  position:fixed;
  width:65px; height:65px;
  transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1);
  will-change: transform, top, left, filter;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)) brightness(1.03);
  z-index:15;
}
.cronos.resting{ animation: landPop .22s cubic-bezier(.2,1.1,.2,1) }
@keyframes landPop{
  0%{ transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1.18) }
  100%{ transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1) }
}

/* Sparks */
.spark{
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #8debdc 40%, transparent 70%);
  pointer-events:none; filter: blur(.4px);
  animation: sparkOut .5s ease-out forwards;
  z-index:16;
}
@keyframes sparkOut{
  to{ transform: translate(var(--dx,0), var(--dy,0)) scale(0.1); opacity:0 }
}

/* CTA */
.cta{display:flex; gap:12px}
.btn{
  position:relative;
  background:var(--accent); color:#00221b; font-weight:900; letter-spacing:.3px;
  text-decoration:none; padding:12px 18px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,.18) }
.btn:hover{ filter:brightness(1.05) }
.shine::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 20%, transparent 40%);
  transform: translateX(-120%); animation: btnShine 3s linear infinite;
}
@keyframes btnShine{ to{ transform: translateX(120%) } }

/* Pile */
.pile{
  position:fixed; left:0; right:0; bottom:0; height:140px; pointer-events:none; z-index:10;
  background:linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,0));
  border-top:1px solid rgba(255,255,255,.06);
}

/* Responsive */
@media(max-width:560px){
  .stat .value{font-size:40px}
  .stat{min-width:118px}
  .popzone{ width:min(92vw,520px); height:min(92vw,520px) }
  .cronos{ width:54px; height:54px }
  .pile{height:120px}
}