/* ===== core vars & reset ===== */
:root{
  --bg:#080808;--fg:#ededed;--accent:#764CFF;
  --font:"JetBrains Mono",monospace;--radius:12px;--glow:0 0 12px var(--accent);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;font-family:var(--font);color:var(--fg);background:var(--bg);scroll-behavior:smooth}

/* ===== animated halo along edges ===== */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-4;
  background:radial-gradient(circle at top left ,#764cff55 0%,transparent 70%),
             radial-gradient(circle at bottom right,#764cff55 0%,transparent 70%);
  mask:linear-gradient(#000 30%,transparent 60%);
  animation:halo 12s linear infinite alternate
}
@keyframes halo{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* main gradient */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:linear-gradient(130deg,#0d0d0d 0%,#22227b 40%,#413faa 70%,#151515 100%);
  background-size:260% 260%;animation:bg 26s ease-in-out infinite
}
@keyframes bg{0%{background-position:0 0}100%{background-position:100% 100%}}

.container{width:min(92%,1150px);margin:auto}
.section{padding:5rem 0}.section.alt{background:#0f0f0f}
.section-title{font-size:clamp(1.6rem,5vw,2.1rem);margin:0 0 1.4rem}

/* ===== header ===== */
header{position:fixed;inset:0 0 auto;height:56px;backdrop-filter:blur(8px);z-index:1000}
nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:clamp(1.4rem,5vw,1.9rem);margin:0;white-space:nowrap}
.link-btn{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}
#themeToggle,.burger{background:none;border:none;color:var(--fg);font-size:1.3rem;cursor:pointer}
.burger{display:none}
.nav-links{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-links a,.nav-links .link-btn{color:inherit;text-decoration:none;font-size:.95rem;transition:opacity .3s}
.nav-links a:hover,.nav-links .link-btn:hover{opacity:.7}

/* burger ≤ 767 */
@media(max-width:767px){
  .burger{display:block}
  .nav-links{
    position:fixed;top:56px;right:-100%;height:calc(100% - 56px);width:70%;
    flex-direction:column;gap:1.4rem;padding:2rem 1rem;background:#000c;backdrop-filter:blur(8px);transition:right .3s
  }
  .nav-links.open{right:0}
}

/* glitch logo */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  text-shadow:var(--glow);animation:gl 3s steps(10) infinite
}
.glitch::before{left:2px}.glitch::after{left:-2px}
@keyframes gl{0%,100%{clip-path:inset(0 0 80% 0)}50%{clip-path:inset(60% 0 0 0)}}

/* ===== hero ===== */
.hero{height:100vh;display:grid;place-items:center;position:relative;text-align:center}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.35)}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;border:2px solid #ffffff33;transition:transform 1s}
.avatar:hover{transform:rotate(360deg)}
.tagline{font-size:clamp(1.6rem,6vw,3.6rem);line-height:1.1;margin:0}
.btn{display:inline-block;padding:1rem 2rem;border-radius:var(--radius);background:var(--accent);
     color:#fff;text-decoration:none;font-weight:700;box-shadow:var(--glow);transition:transform .2s}
.btn:hover{transform:scale(1.05)}

/* ===== cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.4rem;border-radius:var(--radius);
      background:#111;border:1px solid #222;transition:transform .25s,box-shadow .25s;text-decoration:none;color:inherit}
.card i{font-size:2.1rem}.card:hover{transform:translateY(-6px);box-shadow:var(--glow)}

/* ===== player ===== */
.player iframe{width:100%;height:120px;border-radius:var(--radius)}

/* ===== telegram footer ===== */
.tg-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.tg-btn{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.2rem;border:1px solid var(--accent);
        border-radius:var(--radius);text-decoration:none;color:inherit;transition:background .3s,transform .3s}
.tg-btn img{width:28px;height:28px;border-radius:50%}.tg-btn:hover{background:var(--accent);transform:translateY(-2px)}
footer{padding:3rem 0;font-size:.85rem}

/* ===== now-playing widget ===== */
.now-playing{
  position:fixed;left:0;right:0;top:72px;display:flex;justify-content:space-between;
  align-items:center;padding:0 18px;pointer-events:none;z-index:905
}
.track-box{
  display:flex;align-items:center;gap:.8rem;pointer-events:auto;
  min-width:260px;max-width:330px;background:#111e;border:1px solid #444;border-radius:12px;
  padding:.7rem 1rem;backdrop-filter:blur(6px);transition:transform .25s,box-shadow .25s
}
.track-box:hover{transform:translateY(-3px);box-shadow:0 0 14px var(--accent)}
.cover{width:56px;height:56px;border-radius:8px;object-fit:cover}
.t-info{min-width:0}.t-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-plat{font-size:.75rem;opacity:.8;display:flex;align-items:center;gap:.25rem}
.t-plat i{animation:pulse 2s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.card-progress{height:3px;width:0;margin-top:.5rem;border-radius:2px;background:linear-gradient(90deg,var(--accent),#fff)}

@media(max-width:767px){
  .now-playing{flex-direction:column;gap:.8rem;top:auto;bottom:1rem;padding:0}
  .track-box{min-width:92%;max-width:92%}
}

/* ===== BIO PANEL ===== */
.bio-panel{
  position:fixed;inset:0;background:#000b;backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s;
  z-index:920
}
.bio-panel.active{opacity:1;pointer-events:auto}
.bio-content{
  max-width:650px;width:90%;background:#111c;border:1px solid #333;border-radius:18px;
  padding:2rem 1.4rem 2.5rem;overflow-y:auto;max-height:90vh;box-shadow:0 0 18px #000c
}
.bio-content h2{margin-top:0;font-size:clamp(1.4rem,4.8vw,2.2rem)}
.bio-content h3{margin-top:1.5rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.5px}
.bio-content p,.bio-content ul{font-size:.92rem;line-height:1.5}
.bio-content ul{padding-left:1.1rem}
.bio-content table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.6rem}
.bio-content td{padding:.35rem .4rem;border-bottom:1px solid #2a2a2a}
.close{
  position:absolute;top:.6rem;right:1.1rem;background:none;border:none;
  font-size:1.8rem;color:var(--fg);cursor:pointer;opacity:.7
}
.close:hover{opacity:1}

/* ===== light override ===== */
body.light .bio-content{background:#ffffffeb;border-color:#ddd;color:#111}
body.light .bio-panel{background:#00000070}

/* ---------- END ---------- */