/* ============================================================
   SMOOTH — anti salah-seleksi, performa mobile, foto fursuit
   ============================================================ */

/* ---------- 1. elemen UI jangan ikut ke-select / muncul popup copy ---------- */
#nav,.side-index,.page-menu,.ticker,
h1,h2,.sec-label,.sec-title,.hero-eyebrow,.hero-lede,
.hm-row,.pm-list a,.si-list a,.menu-btn,.btn,.chip,.badge,
.view-next,.suit-tag,.suit-serial,.suit-chips span,.sp-state,
.pc-mark,.pc-id,.pc-live,.hero-card,.suit-photo,.view-next span{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
/* teks panjang tetap bisa diseleksi */
.bio,.suit-copy p,.suit-p,.qa-item p,.music-copy p,.now-card p,.hero-lede p{ -webkit-user-select:text; user-select:text; }

/* tap terasa lebih responsif */
.btn,.hm-row,.pm-list a,.si-list a,.menu-btn,.chip,.view-next,.repo,.soc,.qa-item summary,
.suit-tabs button,.rv-btn,.repo-sort button{touch-action:manipulation}

/* ---------- 2. animasi lebih ringan (tanpa blur full-page) ---------- */
@keyframes viewIn{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}
.view{animation-duration:.4s!important}
#page-wipe{transition-duration:.36s}

/* di HP: buang layer berat supaya scroll tidak ngeleg */
@media (max-width:820px){
  .bg-grid,.aurora,.spot,.grain{display:none!important}
  body::before,body::after{display:none!important}
  #nav,.pm-head,.terminal-note,.hero-card,.page-menu{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  #nav{background:rgba(8,8,10,.97)!important}
  .page-menu{background:rgba(6,6,7,.99)!important}
  .hero-card,.repo,.fact,.tool,.now-card,.qa-item,.music-card,.soc,.bio,.suit-plan,.suit-file{
    box-shadow:none!important;
  }
  .view{animation-duration:.3s!important}
  .card,.repo,.hero-card{contain:paint}
}

/* ---------- 3. foto fursuit: slot "Soon" di kartu crest ---------- */
.suit-art{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:34px 22px!important;
  min-height:390px;
}
.suit-photo-slot{
  width:100%;
  max-width:286px;
  aspect-ratio:4/5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:26px 20px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.075),transparent 66%),
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  -webkit-user-select:none;user-select:none;
}
.sps-badge{
  font-family:var(--mono,monospace);
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--faint,#6e6e79);
}
.sps-soon{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:clamp(46px,11vw,64px);
  line-height:1;
  color:#fff;
  letter-spacing:-.01em;
}
.sps-note{
  font-size:8.5px;
  line-height:1.9;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  color:var(--faint,#6e6e79);
}
@media (max-width:760px){
  .suit-art{min-height:0!important;padding:26px 18px!important}
  .suit-photo-slot{max-width:240px;aspect-ratio:4/5;padding:20px 16px}
  .sps-soon{font-size:52px}
}
@media (prefers-reduced-motion:reduce){ .suit-photo-slot{animation:none} }

/* ---------- 4. sisa aksen ungu/cyan jadi monokrom ---------- */
#nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.10),0 12px 40px rgba(0,0,0,.35)!important}
#totop .ring .fg{stroke:#fff!important}
#totop .ring .bg{stroke:rgba(255,255,255,.16)!important}
.suit-hero::before{background:#fff!important;opacity:.75!important}

/* ---------- 5. kartu Discord rapi di layar sempit ---------- */
@media (max-width:600px){
  .dc-card{padding:18px;gap:12px}
  .dc-top{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:10px 14px;
  }
  .dc-top img{width:56px;height:56px;grid-row:1;grid-column:1}
  .dc-id{grid-column:2;min-width:0}
  .dc-id b{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
  .dc-id small{font-size:10px}
  .dc-status{grid-column:1 / -1;justify-self:start;font-size:9px;letter-spacing:.18em;padding:6px 12px}
  .dc-activity{font-size:11.5px;padding-left:12px}
  .dc-actions{gap:8px}
  .dc-actions .chip{flex:1 1 100%;justify-content:center;text-align:center}
}

/* ---------- 6. sudut dekoratif kartu Discord jangan melar ---------- */
.dc-card i.c-tl,.dc-card i.c-br{
  width:14px!important;height:14px!important;
  inset:auto!important;background:none!important;opacity:1!important;
}
.dc-card i.c-tl{
  top:-1px!important;left:-1px!important;
  border:0!important;border-top:1px solid rgba(255,255,255,.45)!important;border-left:1px solid rgba(255,255,255,.45)!important;
}
.dc-card i.c-br{
  bottom:-1px!important;right:-1px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.45)!important;border-right:1px solid rgba(255,255,255,.45)!important;
}
@media (max-width:820px){
  .suit-photo-tag{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(8,8,10,.82)!important}
}

/* ---------- 7. rapikan sisa detail kartu Discord ---------- */
.dc-card .c-tl,.dc-card .c-br{display:none!important}
.dc-status{border-radius:999px!important}

/* serial jangan numpuk di border dashed */
.suit-art{position:relative;padding-bottom:26px!important}
.suit-serial{position:static!important;align-self:flex-end;margin-top:2px!important;right:auto!important;bottom:auto!important}

/* ---------- hero tampil instan di mobile (jangan kosong saat boot) ---------- */
@media(max-width:820px){
  #home .hero-eyebrow,#home .hero-lede,#home .hero-cta,#home .hero-quote,#home .hero-stats{
    animation:none!important;opacity:1!important;transform:none!important
  }
}