@font-face { font-family:'SG'; src:url('../fonts/SpecialGothicExpandedOne.ttf') format('truetype'); }
@font-face { font-family:'GS'; src:url('../fonts/GoogleSans.ttf') format('truetype'); }

:root {
  --f1:'SG',system-ui,sans-serif;
  --f2:'GS',system-ui,sans-serif;
  --bg:#07070a;
  --glass:rgba(255,255,255,.035);
  --brd:rgba(255,255,255,.07);
  --dim:rgba(255,255,255,.35);
  --r:22px;
  --accent:#818cf8;
  --accent2:#c084fc;
  --green:#4ade80;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:#e4e4e7;font-family:var(--f2);overflow:hidden;-webkit-font-smoothing:antialiased;cursor:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:none}
img,svg{display:block}
::selection{background:var(--accent);color:#000}

/* === CURSOR === */
.cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:9999;
  background:radial-gradient(circle,rgba(129,140,248,.08),transparent 70%);
  transform:translate(-50%,-50%);transition:opacity .3s;opacity:0}
body:hover .cursor-glow{opacity:1}

/* === LOADER === */
.loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .6s,visibility .6s}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-text{font-family:var(--f1);font-size:3rem;color:var(--accent);animation:pulse-load 1.5s ease-in-out infinite}
.loader-bar{width:200px;height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.loader-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .3s}
@keyframes pulse-load{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}

/* === APP === */
.app{width:100vw;height:100dvh;position:relative;display:flex;align-items:center;justify-content:center;transition:opacity .8s}

/* === AURORA === */
.bg-aurora{position:fixed;inset:0;z-index:0;overflow:hidden;filter:blur(120px) saturate(1.6)}
.aurora-blob{position:absolute;border-radius:50%;opacity:.3}
.b1{width:55vmax;height:55vmax;background:radial-gradient(circle,#6366f1,transparent 70%);top:-20%;left:-15%;animation:d1 22s ease-in-out infinite alternate}
.b2{width:45vmax;height:45vmax;background:radial-gradient(circle,#06b6d4,transparent 70%);bottom:-10%;right:-15%;animation:d2 28s ease-in-out infinite alternate}
.b3{width:35vmax;height:35vmax;background:radial-gradient(circle,#a855f7,transparent 70%);top:50%;left:40%;animation:d3 19s ease-in-out infinite alternate}
.b4{width:30vmax;height:30vmax;background:radial-gradient(circle,#f43f5e,transparent 70%);top:10%;right:20%;opacity:.15;animation:d4 24s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes d2{to{transform:translate(-22vw,-18vh) scale(1.1)}}
@keyframes d3{to{transform:translate(-12vw,12vh) scale(.85)}}
@keyframes d4{to{transform:translate(-8vw,-10vh) scale(1.2)}}

.bg-grain{position:fixed;inset:0;z-index:1;background:url('../images/noise.svg');opacity:.05;pointer-events:none}
.bg-grid{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size:60px 60px}
.bg-particles{position:fixed;inset:0;z-index:2;pointer-events:none}

/* === STATUS BAR === */
.status-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:10px 24px;
  font-size:.65rem;color:var(--dim);letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(to bottom,rgba(7,7,10,.8),transparent);pointer-events:none}
.sb-center{font-family:var(--f1);font-size:.7rem;color:rgba(255,255,255,.15);letter-spacing:3px}

/* === PAGES === */
.pages{position:relative;z-index:10;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.page{position:absolute;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(50px) scale(.97);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.page.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.page.enter-up{opacity:0;transform:translateY(-50px) scale(.97)}
.page.enter-down{opacity:0;transform:translateY(50px) scale(.97)}
.page.exit-up{opacity:0;transform:translateY(-50px) scale(.97);pointer-events:none}
.page.exit-down{opacity:0;transform:translateY(50px) scale(.97);pointer-events:none}

/* === BENTO === */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;width:min(88vw,640px);height:min(88vw,640px)}
@media(min-width:768px){.bento{grid-template-columns:300px 300px;grid-template-rows:300px 300px;gap:18px;width:auto;height:auto}}

/* === CELL === */
.cell{position:relative;border-radius:var(--r);border:1px solid var(--brd);background:var(--glass);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);overflow:hidden;transition:border-color .4s,transform .3s,box-shadow .4s}
.cell:hover{border-color:rgba(255,255,255,.14);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.cell-glow{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 55%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}
.cell:hover .cell-glow{opacity:1}

/* === IDENTITY === */
.c-id-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.avatar{position:relative;width:68px;height:68px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-family:var(--f2);font-size:1.3rem;font-weight:700;color:#fff}
.avatar-ring{position:absolute;inset:-4px;border-radius:22px;border:2px solid transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent2)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ring-spin 4s linear infinite;opacity:.5}
@keyframes ring-spin{to{transform:rotate(360deg)}}

.glitch{font-family:var(--f1);font-size:1.7rem;font-weight:900;line-height:.95;text-transform:uppercase;letter-spacing:-1px;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.5) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glitch::before{animation:glitch-1 3s infinite;clip-path:inset(20% 0 60% 0)}
.glitch::after{animation:glitch-2 3s infinite;clip-path:inset(60% 0 10% 0)}
@keyframes glitch-1{0%,95%,100%{transform:none}96%{transform:translate(-3px,-1px)}97%{transform:translate(3px,1px)}}
@keyframes glitch-2{0%,95%,100%{transform:none}96%{transform:translate(3px,1px)}97%{transform:translate(-3px,-1px)}}

.id-sub{margin-top:4px;font-size:.8rem;color:var(--dim);letter-spacing:.5px}
.id-status{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.65rem;color:var(--green);letter-spacing:.5px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* === TERMINAL === */
.c-term{display:flex;flex-direction:column;padding:14px}
.term-chrome{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.term-dots{display:flex;gap:5px}
.term-dots i{width:9px;height:9px;border-radius:50%;display:block}
.term-dots i:nth-child(1){background:#ff5f57}
.term-dots i:nth-child(2){background:#febc2e}
.term-dots i:nth-child(3){background:#28c840}
.term-title{font-size:.6rem;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-left:auto}
.term-body{flex:1;overflow-y:auto;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.7rem;line-height:1.7;color:var(--green);position:relative;z-index:1}
.term-body::-webkit-scrollbar{display:none}
.t-line{white-space:pre-wrap}.t-sys{opacity:.5}.t-hl{color:var(--accent2)}.t-user{color:#34d399;font-weight:600}
.term-in{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05);position:relative;z-index:1}
.t-pr{color:var(--accent2);font-family:'JetBrains Mono',monospace;font-size:.75rem}
.term-in input{flex:1;background:none;border:none;outline:none;color:var(--green);font-family:'JetBrains Mono',monospace;font-size:.7rem;cursor:none}
.cursor-blink{color:var(--green);animation:cblink .8s step-end infinite}
@keyframes cblink{0%,100%{opacity:1}50%{opacity:0}}

/* === LINKS === */
.c-links{display:flex;align-items:center;justify-content:center;padding:16px}
.links-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;height:100%;position:relative;z-index:1}
.lnk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);color:var(--dim);transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}
.lnk svg{width:30px;height:30px;transition:transform .3s}
.lnk-label{font-size:.55rem;text-transform:uppercase;letter-spacing:1.5px;opacity:0;transform:translateY(4px);transition:all .3s}
.lnk:hover .lnk-label{opacity:.7;transform:translateY(0)}
.lnk:hover svg{transform:scale(1.15)}
.lnk::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;border-radius:inherit}
.lnk:hover::before{opacity:1}

/* === MUSIC === */
.c-music{display:flex;align-items:center;justify-content:center;position:relative}
.music-vis{position:absolute;bottom:0;left:0;right:0;height:60px;display:flex;align-items:flex-end;justify-content:center;gap:2px;z-index:0;opacity:.15;padding:0 20px}
.vis-bar{width:3px;background:linear-gradient(to top,var(--accent),var(--accent2));border-radius:2px;transition:height .15s ease}
.mus-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px;width:100%;height:100%;justify-content:space-between;position:relative;z-index:1}
.mus-disc{width:76px;height:76px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.08);flex-shrink:0;
  transition:transform .6s ease,box-shadow .4s;position:relative}
.mus-disc::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);pointer-events:none}
.mus-disc.spin{animation:spin 6s linear infinite;box-shadow:0 0 24px rgba(129,140,248,.25)}
.mus-disc img{width:100%;height:100%;object-fit:cover}
@keyframes spin{to{transform:rotate(360deg)}}
.mus-meta{margin:4px 0}
.mus-name{display:block;font-family:var(--f1);font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.mus-art{display:block;font-size:.7rem;color:var(--dim);margin-top:1px}
.mus-ctrl{display:flex;gap:18px;align-items:center;font-size:1.1rem}
.mus-ctrl button{opacity:.6;transition:opacity .2s,transform .2s;font-size:inherit;cursor:none}
.mus-ctrl button:hover{opacity:1;transform:scale(1.2)}
.mus-seek{display:flex;align-items:center;gap:6px;width:100%;font-size:.65rem;color:var(--dim)}
.seek-bar{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:4px;cursor:pointer;position:relative;overflow:visible}
.seek-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;width:0%;transition:width .15s linear}
.seek-thumb{position:absolute;top:50%;right:0;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(50%,-50%) scale(0);
  transition:transform .2s;box-shadow:0 0 6px rgba(255,255,255,.4)}
.seek-bar:hover .seek-thumb{transform:translate(50%,-50%) scale(1)}
.vol-bar{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:4px;height:70px;background:rgba(255,255,255,.08);
  border-radius:4px;overflow:hidden;z-index:5;opacity:0;transition:opacity .3s}
.vol-bar.show{opacity:1}
.vol-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(to top,var(--accent),var(--accent2));border-radius:4px;transition:height .1s}

/* === COMING SOON === */
.coming-soon{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cs-orb{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));filter:blur(0px);
  animation:orb-float 4s ease-in-out infinite;box-shadow:0 0 60px rgba(129,140,248,.3)}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-15px) scale(1.05)}}
.cs-title{font-family:var(--f1);font-size:2.2rem;font-weight:900;letter-spacing:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#06b6d4);background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:grad-shift 4s ease infinite}
@keyframes grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.cs-sub{font-size:.85rem;color:var(--dim);letter-spacing:1px}
.cs-dots{display:flex;gap:6px}
.cs-dots span{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:dot-bounce 1.4s ease-in-out infinite}
.cs-dots span:nth-child(2){animation-delay:.2s}
.cs-dots span:nth-child(3){animation-delay:.4s}
@keyframes dot-bounce{0%,80%,100%{transform:scale(1);opacity:.3}40%{transform:scale(1.5);opacity:1}}

/* === MINI PLAYER === */
.mini-player{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;background:rgba(10,10,15,.65);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--brd);border-radius:50px;
  padding:5px 14px 5px 5px;display:flex;align-items:center;gap:10px;transition:opacity .5s,transform .5s}
.mini-player.hidden{opacity:0;transform:translateX(-50%) translateY(-80px);pointer-events:none}
.mini-cover{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0}
.mini-cover img{width:100%;height:100%;object-fit:cover}
.mini-info{display:flex;flex-direction:column;max-width:100px}
.mini-t{font-size:.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-a{font-size:.6rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-btns{display:flex;gap:8px;font-size:.85rem}
.mini-btns button{opacity:.6;transition:opacity .2s;cursor:none}
.mini-btns button:hover{opacity:1}

/* === SCROLL HINT === */
.scroll-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .5s}
.scroll-hint.hidden{opacity:0;pointer-events:none}
.scroll-hint span{font-size:.6rem;text-transform:uppercase;letter-spacing:3px;color:var(--dim);animation:pulse 2.5s ease-in-out infinite}
.scroll-mouse{width:16px;height:26px;border:1.5px solid rgba(255,255,255,.2);border-radius:9px;display:flex;justify-content:center;padding-top:4px}
.scroll-dot{width:2px;height:4px;background:rgba(255,255,255,.5);border-radius:2px;animation:sdot 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sdot{0%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(5px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.55}}

/* === PAGE DOTS === */
.page-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:10px}
.pdot{width:6px;height:6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);background:transparent;cursor:pointer;padding:0;
  transition:all .3s}
.pdot.on{background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.3);height:18px;border-radius:4px}

/* === MOBILE === */
@media(max-width:767px){
  body{cursor:auto}
  .cursor-glow{display:none}
  button,.lnk,.term-in input,.mus-ctrl button,.mini-btns button{cursor:auto}
  .c-id-inner{padding:14px}
  .avatar{width:48px;height:48px;border-radius:14px;font-size:1rem}
  .glitch{font-size:1.1rem}
  .id-sub{font-size:.6rem}
  .id-status{font-size:.55rem}
  .c-term{padding:10px}
  .term-body{font-size:.58rem}
  .term-dots i{width:6px;height:6px}
  .lnk svg{width:22px;height:22px}
  .mus-disc{width:48px;height:48px}
  .mus-name{font-size:.8rem;max-width:120px}
  .mus-ctrl{gap:12px;font-size:.95rem}
  .cs-title{font-size:1.5rem}
  .status-bar{font-size:.55rem;padding:8px 16px}
  .page-dots{right:12px}
}