/* styles.css - dark theme with cursor-dependent effects */
:root{
  --bg:#0b0f14;
  --card:#0f1720;
  --muted:#9aa6b2;
  --accent:linear-gradient(135deg,#6dd3ff,#7b61ff);
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(110,86,255,0.08), transparent),
              radial-gradient(1000px 500px at 90% 90%, rgba(109,211,255,0.04), transparent),
              var(--bg);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
/* canvas layer for cursor-dependent lights */
#canvas-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* Card */
.card{
  width:min(920px,94%);
  margin:6vh auto;
  display:flex;
  gap:28px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  padding:28px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  transform-style:preserve-3d;
  transition:transform 300ms cubic-bezier(.2,.9,.3,1);
  backdrop-filter: blur(6px) saturate(110%);
}
.left{width:260px; display:flex; align-items:center; justify-content:center}
.avatar-wrap{
  width:220px; height:220px; border-radius:18px; overflow:hidden;
  background:var(--glass); padding:10px; display:flex; align-items:center; justify-content:center;
  transition:transform 300ms ease, box-shadow 300ms ease;
}
.avatar-wrap img{width:100%; height:100%; object-fit:cover; display:block; border-radius:12px}

/* Right column */
.right{flex:1; display:flex; flex-direction:column; gap:8px; justify-content:center}
h1{font-size:28px; margin:0 0 6px 0; letter-spacing:0.6px}
h2{font-size:20px; margin:0; color:var(--muted); font-weight:600}
.meta{margin:6px 0; color:var(--muted); font-size:14px}
.desc{margin-top:12px; font-size:16px; line-height:1.45; color:#dce9f6; max-width:60ch}

/* socials */
.social{display:flex; gap:12px; margin-top:14px}
.sbtn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03);
  color:inherit; text-decoration:none; font-size:14px; transition:transform 160ms ease, background 160ms ease;
}
.sbtn svg{width:18px;height:18px; display:block}

/* footer */
.footer{position:fixed; right:14px; bottom:10px; font-size:12px; color:var(--muted)}

/* responsive */
@media (max-width:700px){
  .card{flex-direction:column; align-items:center; text-align:center;padding:20px}
  .left{width:100%}
  .right{width:100%}
}

/* subtle hover */
.sbtn:hover{transform:translateY(-6px)}

/* animations */
@keyframes floaty { from{transform:translateY(0)} 50%{transform:translateY(-8px)} to{transform:translateY(0)}}
.avatar-wrap{animation:floaty 6s ease-in-out infinite}

/* interactive tilt for card via JS using transforms */