/* Theme */
:root{
  --bg:#0d0d0d;
  --card-bg:#161616;
  --fg:#EDEDED;
  --muted:#9a9a9a;
  --accent:#5865F2;

  /* iOS-like motion system */
  --ease-spring:cubic-bezier(.22,1,.36,1);      /* fast spring-out */
  --ease-smooth:cubic-bezier(.2,.8,.2,1);       /* gentle default */
  --dur-fast:160ms;
  --dur-med:240ms;
  --dur-slow:320ms;

  /* subtle distance and scale */
  --y-small:8px;
  --scale-small:.995;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--fg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
  background:var(--bg);
}

/* Blurred image background */
body::before{
  content:""; position:fixed; inset:0;
  background:url('background.jpg') center/cover no-repeat;
  filter:blur(14px) brightness(0.4);
  transform:scale(1.15);
  z-index:-3;
}
body::after{
  content:""; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); z-index:-2;
}

/* Glass util */
.glass{
  background:rgba(22,22,22,0.78);
  border:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  will-change:transform,opacity;
}

/* Nav */
nav{display:flex; gap:1.5rem; justify-content:center;}
nav a{
  color:var(--fg); text-decoration:none; font-weight:600;
  position:relative; font-size:.95rem;
}
nav a::after{
  content:""; position:absolute; bottom:-4px; left:0; width:0; height:2px;
  background:var(--accent);
  transition:width var(--dur-fast) var(--ease-spring);
}
nav a:hover::after{width:100%;}
.topbar{
  position:sticky; top:0; z-index:5;
  padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06);
}

/* Layout */
.center-wrap{
  max-width:1200px; margin:5vh auto 6vh; padding:0 1rem;
  display:grid; grid-template-columns:360px minmax(0,1fr);
  gap:2rem; align-items:start;
  transition:transform var(--dur-med) var(--ease-smooth);
}

/* Left column */
.left-col{display:grid; gap:1rem; justify-items:center;}
.profile-card{
  width:100%; max-width:360px;
  padding:2rem 1.5rem 2.25rem; border-radius:20px; text-align:center;
  animation:panelIn var(--dur-med) var(--ease-spring) .1s both;
}
.avatar{
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; border:3px solid var(--accent); margin-bottom:1rem;
  transition:transform var(--dur-med) var(--ease-smooth);
}
.profile-card:hover .avatar{transform:scale(1.02);}

.name{font-size:2rem; font-weight:700; margin:0;}
.role{font-size:1.1rem; color:var(--muted); margin:.25rem 0 0;}
.skill-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; margin-top:.6rem; color:var(--fg);
}
.pin{font-size:18px; line-height:1;}

/* Presence */
.presence{display:flex; justify-content:center; align-items:center; gap:.45rem; margin-top:1rem;}
.status-indicator{width:10px; height:10px; border-radius:50%; background:var(--muted);}
.online{background:#3BA55D;} .idle{background:#FAA61A;} .dnd{background:#ED4245;} .offline{background:var(--muted);}

/* Left buttons */
.left-actions{width:100%; display:grid; gap:.8rem; max-width:360px;}
a.button{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.65rem 1.1rem; border-radius:10px; text-decoration:none;
  font-weight:600;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth);
  will-change:transform;
}
a.button:hover{transform:translateY(-2px); background:#4752C4;}
a.button:active{transform:translateY(0) scale(.985);}
a.button.wide{display:block; text-align:center; width:100%;}
a.button.secondary{background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,0.14);}
a.button.secondary:hover{background:rgba(255,255,255,0.06);}
.tab-btn.tab-active{
  outline:2px solid rgba(88,101,242,.55);
  background:rgba(88,101,242,.1);
}

/* Right column panel */
.panel{border-radius:24px; padding:1.25rem 1.25rem 2rem;}
.right-col{min-height:70vh;}
.panel-sub{color:var(--muted); text-align:center; margin:-.25rem auto 1.25rem;}
.muted{color:var(--muted);}
.empty-msg{padding:1rem 0; text-align:center;}

/* Tabs - animate in on activation */
.tab-panel{display:none;}
.tab-panel.active{
  display:block;
  animation:panelIn var(--dur-med) var(--ease-spring);
}

/* Cards and grids */
.games-grid, .contribs-grid{
  display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  position:relative; background:var(--card-bg);
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  transform:translateY(var(--y-small)); opacity:0;
  transition:
    transform var(--dur-med) var(--ease-spring),
    opacity var(--dur-med) var(--ease-smooth),
    box-shadow var(--dur-med) var(--ease-smooth);
  will-change:transform,opacity;
}
.card.visible{transform:translateY(0); opacity:1;}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.75);}
.card:active{transform:translateY(0) scale(.992);}
.card img{width:100%; aspect-ratio:16/9; object-fit:cover; background:#0f0f0f; transform:translateZ(0);}
.card-content{padding:1rem;}
.card-content h3{margin:0 0 .25rem;}
.card-content p{margin:.4rem 0 0;}
.card-content .meta{font-size:.8rem; color:var(--muted); margin-top:.15rem;}

/* Badge */
.badge{
  position:absolute; top:8px; left:8px;
  padding:.25rem .6rem; border-radius:6px;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease-smooth);
}
.card.visible .badge{transform:translateY(0); opacity:1;}
.status-online{background:#3BA55D;}
.status-dev{background:#FAA61A;}
.status-paused{background:#FEE75C; color:#000;}
.status-cancelled{background:#ED4245;}

/* Showcase grid */
.showcase-grid{
  display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.video{
  background:#0f0f0f; border-radius:12px; overflow:hidden;
  aspect-ratio:16/9;
  transform:translateY(var(--y-small)) scale(var(--scale-small)); opacity:0;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  transition:
    transform var(--dur-med) var(--ease-spring),
    opacity var(--dur-med) var(--ease-smooth),
    box-shadow var(--dur-med) var(--ease-smooth);
  will-change:transform,opacity;
}
.video.visible{transform:translateY(0) scale(1); opacity:1;}
.video:hover{transform:translateY(-2px) scale(1.01);}
.video iframe{width:100%; height:100%; border:0; display:block;}

/* Footer */
footer{text-align:center; padding:2rem 1rem; color:var(--muted); font-size:.875rem;}

/* Keyframes */
@keyframes panelIn{
  from{opacity:0; transform:translateY(var(--y-small)) scale(var(--scale-small));}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
  
/* Responsive */
@media (max-width: 900px){
  .center-wrap{grid-template-columns:1fr; gap:1.25rem; margin-top:3.5vh;}
  .right-col{min-height:auto;}
}