/* ============================================================
   about-cards.css — Bubble navigation card styles
   Tech Cartographer About Page
   ============================================================ */

/* ── Bubble Card ──────────────────────────────────────────── */
.bubble-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  width:  clamp(130px, 11vw, 175px);
  height: clamp(130px, 11vw, 175px);
  border-radius: 50%;

  background: radial-gradient(
    ellipse at 35% 35%,
    hsla(220, 22%, 14%, 0.95) 0%,
    hsla(220, 22%, 9%, 0.98) 70%
  );
  border: 1px solid var(--color-border);

  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.4),
    0 4px 24px rgba(0, 0, 0, 0.5);

  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: inherit;

  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity       0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform     0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color  var(--transition-base),
    box-shadow    var(--transition-base),
    background    var(--transition-base);

  transform-style: preserve-3d;
}

.bubble-card--visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Hover / Focus ────────────────────────────────────────── */
.bubble-card:hover,
.bubble-card:focus-visible {
  border-color: var(--color-accent-cyan);
  background: radial-gradient(
    ellipse at 35% 35%,
    hsla(200, 80%, 60%, 0.08) 0%,
    hsla(220, 22%, 9%, 0.98) 70%
  );
  box-shadow:
    inset 0 0 30px hsla(200, 80%, 60%, 0.06),
    0 0 0 1px var(--color-accent-cyan),
    0 0 28px var(--color-glow-cyan),
    0 0 60px hsla(200, 80%, 60%, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}

/* ── Orbit ring decoration ────────────────────────────────── */
.bubble-card::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed hsla(200, 80%, 60%, 0.12);
  transition: border-color var(--transition-base), inset var(--transition-base);
  pointer-events: none;
}

.bubble-card:hover::before,
.bubble-card:focus-visible::before {
  border-color: hsla(200, 80%, 60%, 0.3);
  inset: -12px;
}

/* ── Icon ─────────────────────────────────────────────────── */
.bubble-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-cyan);
  opacity: 0.75;
  transition: opacity var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.bubble-card__icon svg { width: 28px; height: 28px; }

.bubble-card:hover .bubble-card__icon {
  opacity: 1;
  transform: scale(1.15);
}

/* ── Label ────────────────────────────────────────────────── */
.bubble-card__label {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.2;
  transition: color var(--transition-fast);
  padding: 0 var(--space-sm);
}

.bubble-card:hover .bubble-card__label {
  color: var(--color-accent-cyan);
}

/* ── Teaser ───────────────────────────────────────────────── */
.bubble-card__teaser {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.65vw, 0.6rem);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
  padding: 0 var(--space-md);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.bubble-card:hover .bubble-card__teaser {
  opacity: 1;
  transform: translateY(0);
}

/* ── SVG Connector Lines ──────────────────────────────────── */
.connector-line {
  stroke: var(--color-accent-cyan);
  stroke-width: 1;
  stroke-opacity: 0.18;
  fill: none;
  stroke-dasharray: 4 6;
  transition: stroke-opacity var(--transition-base);
}

.connector-line--active {
  stroke-opacity: 0.45;
  stroke-dasharray: none;
}

/* ── Mobile: pill rows ────────────────────────────────────── */
@media (max-width: 700px) {
  .bubble-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }

  .bubble-card {
    width:  110px;
    height: 110px;
  }

  .bubble-card__teaser { display: none; }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 701px) {
  .bubble-card {
    width:  clamp(110px, 9vw, 145px);
    height: clamp(110px, 9vw, 145px);
  }

  .bubble-card__icon svg { width: 22px; height: 22px; }
}