/* ═══════════════════════════════════════════════════════════════
   FLOATING CARDS
═══════════════════════════════════════════════════════════════ */

#card-stack {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.card {
  width: clamp(296px, 34vw, 440px);
  max-width: calc(100vw - 24px);
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--cc, rgba(20,20,20,0.18));
  box-shadow: 0 10px 30px rgba(10,10,10,0.08);
  backdrop-filter: blur(3px);
  position: absolute;
  overflow: hidden;
  pointer-events: all;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(18px);
  animation:
    floatIn  0.55s cubic-bezier(0.2, 1, 0.3, 1) forwards,
    bob      var(--bob-dur, 4s) ease-in-out var(--bob-delay, 0s) infinite;
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0px); }
}

@keyframes bob {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(var(--bob-amp, -8px)); }
}

.card.out { animation: floatOut 0.35s cubic-bezier(0.6, 0, 1, 0.4) forwards; }
@keyframes floatOut {
  from { opacity: 1; transform: translateY(0px); }
  to   { opacity: 0; transform: translateY(-14px); }
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 10px,
    rgba(20,20,20,0.018) 10px,
    rgba(20,20,20,0.018) 11px
  );
}

.card-bar { height: 2px; background: linear-gradient(90deg, var(--cc, var(--cyan)), transparent 75%); }

.card-drain {
  position: absolute; bottom: 0; left: 0;
  height: 1px; width: 100%;
  background: var(--cc, var(--cyan));
  opacity: 0.35;
  transform-origin: left;
  animation: drain var(--ttl, 9s) linear forwards;
}

@keyframes drain { to { transform: scaleX(0); } }

.card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 0;
}

.card-type { font-size: 0.58rem; letter-spacing: 0.32em; color: var(--text-dim); }

.card-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 0.88rem;
  font-family: 'Share Tech Mono', monospace;
  padding: 0 2px; transition: color 0.15s;
  z-index: 60; position: relative;
}
.card-x:hover { color: var(--magenta); }

.card-body { padding: 10px 16px 18px; position: relative; z-index: 1; }

.c-title {
  font-family: 'Orbitron', sans-serif; font-weight: 700;
  font-size: 1.08rem; letter-spacing: 0.08em;
  color: var(--cc, var(--cyan));
  text-shadow: 0 0 12px var(--cc, var(--cyan-glow));
}

.c-sub {
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--text-dim); margin-top: 2px; margin-bottom: 8px;
  line-height: 1.45;
}

.link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-top: 7px;
  border: 1px solid rgba(20,20,20,0.08);
  background: rgba(255,255,255,0.5);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.link-row:hover { background: rgba(0,0,0,0.03); border-color: var(--cc, rgba(20,20,20,0.2)); }

.link-row .lr-icon  { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.link-row .lr-text  { flex: 1; min-width: 0; }
.link-row .lr-label { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--text-dim); margin-bottom: 2px; }
.link-row .lr-val   { font-size: 0.82rem; letter-spacing: 0.05em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .lr-arrow { font-size: 0.74rem; color: var(--cc, var(--cyan)); opacity: 0.6; flex-shrink: 0; transition: transform 0.15s; }
.link-row:hover .lr-arrow { transform: translateX(3px); }

/* About */
.about-row { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.about-avatar {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--cc, var(--cyan-glow));
  object-fit: cover; background: #e4e6eb;
}
.about-bio {
  font-size: 0.8rem; letter-spacing: 0.05em;
  color: var(--text-dim); line-height: 1.7; margin-top: 6px;
}

/* Projects */
.proj-row {
  display: flex; flex-direction: column;
  padding: 10px 12px; margin-top: 7px;
  border: 1px solid rgba(20,20,20,0.08);
  background: rgba(255,255,255,0.5);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  gap: 4px;
}
.proj-row:hover { background: rgba(0,0,0,0.03); border-color: var(--cc, rgba(20,20,20,0.2)); }
.proj-row.hl    { border-color: var(--cc, rgba(20,20,20,0.25)); background: rgba(0,0,0,0.04); }

.proj-header { display: flex; align-items: center; justify-content: space-between; }
.proj-name   { font-size: 0.86rem; letter-spacing: 0.06em; color: var(--text); }
.proj-arrow  { font-size: 0.72rem; color: var(--cc, var(--cyan)); opacity: 0.55; transition: transform 0.15s; }
.proj-row:hover .proj-arrow { transform: translateX(3px); }
.proj-desc   { font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-dim); line-height: 1.55; }
.proj-tags   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.proj-tag    { font-size: 0.56rem; letter-spacing: 0.08em; padding: 4px 7px; border: 1px solid rgba(20,20,20,0.12); color: var(--text-dim); }
.proj-tag.hl { border-color: var(--cc, var(--cyan)); color: var(--cc, var(--cyan)); }

/* Skills */
.skill-group { margin-top: 8px; }
.skill-group:first-child { margin-top: 0; }

.sg-label {
  font-size: 0.62rem; letter-spacing: 0.2em; color: var(--text-dim);
  margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.sg-label::after { content: ''; flex: 1; height: 1px; background: rgba(20,20,20,0.12); }

.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  font-size: 0.64rem; letter-spacing: 0.07em; padding: 5px 9px;
  border: 1px solid rgba(20,20,20,0.12); color: var(--text-dim);
  transition: border-color 0.2s, color 0.2s;
}
.chip.hl { border-color: var(--cc, var(--text)); color: var(--cc, var(--text)); box-shadow: none; }

@media (max-width: 520px) {
  .card {
    font-size: 14px;
    line-height: 1.45;
  }
  .card-type { letter-spacing: 0.22em; }
  .c-title { font-size: 0.96rem; }
  .c-sub { font-size: 0.68rem; }
  .about-avatar { width: 60px; height: 60px; }
}