/* ============================================================
   panels.css - the slanted black-glass UI. Only the SNS dock is
                left: the name and the profile copy now live on the
                diagonal scrim (see copy.css).
   ============================================================ */

/* ---------- shared skewed panel chrome ---------- */
/* .panel paints the gold border, .panel-inner the smoked glass fill. */
.panel{
  position:absolute;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  padding:2px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  z-index:var(--z-panel);
}

.panel-inner{
  background:var(--panel-bg);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}

/* skew the frame, un-skew the contents so text stays upright */
.skew{ transform:skewX(var(--skew-angle)); }
.skew .unskew{ transform:skewX(calc(var(--skew-angle) * -1)); }

/* ---------- SNS dock (always on screen) ---------- */
.sns-dock{ top:2.2vh; right:3vw; }

.sns-dock .panel-inner{
  flex-direction:row;
  align-items:center;
  gap:0.55em;
  padding:0.5em 1em;
}

.sns-dock .label{
  font-size:clamp(9px,1vw,11px);
  color:#fff;
  opacity:0.85;
  letter-spacing:0.05em;
  margin-right:0.15em;
}

.sns-dock a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(26px,2.6vw,34px);
  height:clamp(26px,2.6vw,34px);
  border-radius:50%;
  background:#fff;
  color:#111;
  transition:transform .15s ease, box-shadow .15s ease;
}

.sns-dock a:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 14px rgba(0,0,0,0.4);
}

.sns-dock svg{ width:56%; height:56%; }

/* brand tints on hover */
.sns-dock a.sns-youtube:hover{ background:#ff0033; color:#fff; }
.sns-dock a.sns-soundcloud:hover{ background:#ff5500; color:#fff; }
.sns-dock a.sns-x:hover{ background:#000; color:#fff; }