*{box-sizing:border-box}html,body{height:100%}

/* ===== Color palette ===== */
:root{
  --bg:#37353E;           /* rgb(55,53,62)   */
  --bg2:#44444E;          /* rgb(68,68,78)   */
  --card:#44444E99;       /* bg2 with alpha  */
  --border:#715A5A;       /* accent/border   */
  --text:#D3DAD9;         /* rgb(211,218,217)*/
  --muted:rgba(211,218,217,.72);
  --accent:#715A5A;
  --accent2:#D3DAD9;      /* secondary for sheen */
  --ok:#22c55e;--idle:#eab308;--dnd:#ef4444;--off:#64748b;
}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 32% 12%, rgba(0,0,0,.30), transparent 60%),
    linear-gradient(140deg,
      color-mix(in oklab, var(--bg2) 70%, var(--accent) 30%) 0%,
      color-mix(in oklab, var(--bg) 70%, var(--accent) 30%) 44%,
      color-mix(in oklab, var(--bg2) 85%, var(--text) 8%) 100%
    );
  background-attachment: fixed,fixed;
  font: 500 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

main{max-width:980px;margin:0 auto;padding:80px 16px 40px}

.hero{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.avatar.sm{width:56px;height:56px}
.title h1{margin:0;font-size:28px}
.title p{margin:2px 0 0;color:var(--muted)}
.center{text-align:center}.muted{color:var(--muted)}

/* Cards */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin:16px 0;
  backdrop-filter: blur(8px);
}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card-icon{width:22px;height:22px;fill:var(--text);opacity:.9}

/* Social grid */
.socials{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.social{
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background: color-mix(in oklab, var(--bg) 85%, black 15%);
}
.social:hover{border-color: color-mix(in oklab, var(--border) 70%, white 30%); transform:translateY(-1px)}
.social .icon{width:24px;height:24px;flex:0 0 auto}

/* Presence */
.presence{display:flex;align-items:center;gap:12px}
.presence-left{position:relative}
.status-dot{
  position:absolute; right:-2px; bottom:-2px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--bg);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
  animation: status-halo 2.8s ease-in-out infinite;
}
.status-dot.online{background:var(--ok); box-shadow:0 0 10px 2px rgba(34,197,94,.35)}
.status-dot.idle  {background:var(--idle); box-shadow:0 0 10px 2px rgba(234,179,8,.35)}
.status-dot.dnd   {background:var(--dnd); box-shadow:0 0 10px 2px rgba(239,68,68,.35)}
.status-dot.offline{background:var(--off)}
@keyframes status-halo{
  0%,100%{ filter: brightness(1); }
  50%    { filter: brightness(1.25); }
}
.presence-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background: color-mix(in oklab, var(--bg) 85%, black 15%);color:var(--text); position:relative; overflow:hidden; cursor:pointer;  background: color-mix(in oklab, var(--bg) 85%, black 15%);  border:1px solid var(--border); color:var(--text); }


/* Spotify embed */
.embed iframe{width:100%;border:0;border-radius:12px}

/* Footer */
footer{margin-top:24px}

/* Music bar */
.music-bar{
  position:fixed;top:20px;left:20px;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--border);
  backdrop-filter: blur(8px);padding:8px 10px;border-radius:12px;z-index:10
}
.vol{display:flex;align-items:center;gap:10px}
#vol-label{font-variant-numeric: tabular-nums;min-width:42px;text-align:right}

/* Sleek range slider */
.range{
  -webkit-appearance:none;appearance:none;height:10px;width:150px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--val,10%), var(--bg) var(--val,10%), var(--bg) 100%);
  border:1px solid color-mix(in oklab, var(--border) 80%, black 20%); outline:none
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background: var(--bg); border:2px solid var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent 70%);
}
.range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background: var(--bg); border:2px solid var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent 70%);
}
.range:active::-webkit-slider-thumb{transform:scale(1.03)}
.range:active::-moz-range-thumb{transform:scale(1.03)}

/* Gate overlay */
#gate{
  position:fixed;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.45);backdrop-filter: blur(12px);
  z-index:100;transition:opacity .35s ease, visibility .35s ease
}
#gate.hide{opacity:0;visibility:hidden}
.gate-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:24px 28px;text-align:center
}
.blurred{filter: blur(6px);transition: filter .35s ease}
.blurred.ready{filter:none}

/* ===== Option A: gradient shimmer border on cards ===== */
.card::before{
  content:"";
  position:absolute; inset:0;
  padding:1px;
  border-radius:16px;
  background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; /* Chrome/Safari */
          mask-composite: exclude; /* Firefox */
  pointer-events:none;
  animation: card-border-sheen 7s linear infinite;
}
@keyframes card-border-sheen{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ===== Option D: hover sweep on social cards ===== */
.social::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .45s ease;
  pointer-events:none;
}
.social:hover::after{ transform: translateX(120%); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card::before{ animation: none; }
  .status-dot{ animation: none; }
}

/* Embossed rim for warm iron plate */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  border-radius:10px;
  margin:12px;
  box-shadow:
    inset 0 0 0 2px color-mix(in oklab, var(--accent) 55%, var(--bg2) 45%),
    inset 0 0 24px rgba(0,0,0,.33),
    inset 0 1px 0 rgba(255,255,255,.07);
}


/* Visually hidden utility for screen readers */
.visually-hidden{
  position:absolute !important;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
}

/* Hover/focus reveal for the volume range slider */
.music-bar .range{
  opacity:1; /* default visible for non-hover devices */
  transition:width .2s ease, opacity .2s ease;
}
@media (hover:hover){
  .music-bar .range{opacity:0; width:0; pointer-events:none}
  .music-bar:hover .range,
  .music-bar:focus-within .range{opacity:1; width:150px; pointer-events:auto}
}