/* ════════════════════════════════════════
   DEV CARD — src/css/devcard.css
════════════════════════════════════════ */

.devcard-scene {
  perspective: 1100px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.devcard {
  width: 100%;
  max-width: 272px;
  border-radius: 20px;
  animation: dc-float 7s ease-in-out infinite;
  transform-style: preserve-3d;
  cursor: default;
  position: relative;
}

@keyframes dc-float {
  0%,100% { transform: translateY(0)    rotateX(2deg)  rotateY(-2.5deg); }
  50%      { transform: translateY(-8px) rotateX(-2deg) rotateY(2.5deg);  }
}
.devcard:hover { animation-play-state: paused; }

/* ── CARD FACE — aspect ratio like reference ~1:1.42 ── */
.devcard-face {
  width: 100%;
  aspect-ratio: 1 / 1.42;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;

  background: linear-gradient(160deg,
    #2a2a2a 0%,
    #1f1f1f 20%,
    #161616 50%,
    #121212 78%,
    #1c1c1c 100%
  );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 24px 48px rgba(0,0,0,.75),
    0 8px 18px rgba(0,0,0,.4);
}

/* brushed metal texture */
.devcard-face::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -48deg,
    transparent 0px, transparent 2px,
    rgba(255,255,255,.011) 2px, rgba(255,255,255,.011) 3px
  );
  pointer-events: none; z-index: 0;
}

/* top chrome shine */
.devcard-face::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.45) 28%,
    rgba(255,255,255,1)   50%,
    rgba(255,255,255,.45) 72%,
    transparent
  );
  z-index: 10;
}

/* mouse light layer */
.dc-light {
  position: absolute; inset: 0;
  border-radius: 20px;
  pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity .3s;
}

/* left chrome edge */
.dc-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,.20) 20%,
    rgba(255,255,255,.44) 50%,
    rgba(255,255,255,.20) 80%,
    transparent
  );
  z-index: 7; pointer-events: none;
}

/* ── CONTENT — fills card fully, no dc-spacer needed ── */
.dc-content {
  position: relative; z-index: 2;
  padding: 7% 7% 6%;
  display: flex;
  flex-direction: column;
  /* justify space between all sections evenly */
  justify-content: space-between;
  height: 100%;
}

/* ── TOP ── */
.dc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.dc-logo svg {
  width: 38px; height: 22px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.22));
}

.dc-title-block { text-align: right; }
.dc-title-main {
  font-size: 8px; font-weight: 700;
  letter-spacing: 2.5px; color: rgba(255,255,255,.48);
  text-transform: uppercase;
}
.dc-title-sub {
  font-size: 6px; letter-spacing: 2px;
  color: rgba(255,255,255,.18);
  text-transform: uppercase; margin-top: 2px;
  font-family: 'Courier New', monospace;
}

/* ── PHOTO + NAME ── */
.dc-photo-row {
  display: flex; gap: 12px;
  align-items: center;
}

.dc-photo {
  width: 68px; height: 68px;
  border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
  background: #1e1e1e;
  border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
}
.dc-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}

.dc-info {}
.dc-member-tag {
  font-size: 7px; letter-spacing: 2.5px;
  color: rgba(255,255,255,.25);
  text-transform: uppercase; margin-bottom: 5px;
  font-family: 'Courier New', monospace;
}
.dc-name {
  font-size: 17px; font-weight: 700;
  color: #fff; letter-spacing: -.3px;
  line-height: 1.1; margin-bottom: 4px;
}
.dc-role {
  font-size: 7.5px; letter-spacing: 1.5px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

/* ── DIVIDER ── */
.dc-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.15), transparent);
}

/* ── INFO GRID ── */
.dc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 8px;
}
.dc-item-label {
  font-size: 6.5px; letter-spacing: 2px;
  color: rgba(255,255,255,.22);
  text-transform: uppercase; margin-bottom: 3px;
  font-family: 'Courier New', monospace;
}
.dc-item-val {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.72);
}
.dc-item-val.dc-avail {
  color: rgba(255,255,255,.82);
  padding-left: 11px; position: relative;
}
.dc-item-val.dc-avail::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #d0d0d0;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
  animation: dc-blink 2.5s ease-in-out infinite;
}
@keyframes dc-blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* ── BOTTOM ── */
.dc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.dc-bottom-left {}
.dc-dev-type {
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; color: rgba(255,255,255,.30);
  text-transform: uppercase; margin-bottom: 3px;
}
.dc-id {
  font-size: 7.5px; letter-spacing: 2px;
  color: rgba(255,255,255,.18);
  font-family: 'Courier New', monospace;
}

/* ── QR ── */
.dc-qr-wrap {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px;
}
.dc-qr {
  border-radius: 4px; overflow: hidden;
  filter: invert(1) opacity(.25);
  transition: filter .2s;
}
.dc-qr:hover { filter: invert(1) opacity(.44); }
.dc-qr canvas, .dc-qr img {
  width: 48px !important; height: 48px !important;
  display: block;
}
.dc-qr-label {
  font-size: 5.5px; letter-spacing: 1.5px;
  color: rgba(255,255,255,.15);
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}