/* ── HOBBY CARD ── */
.hobby-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.hobby-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
}

.hobby-emoji {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.hobby-emoji img {
  width: 50px;
  height: auto;
}

.hobby-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.hobby-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ─────────────────────────────
   FLOATING GLASS HOBBY CARDS
───────────────────────────── */

.hobby-card {
  position: relative;

  padding: 1.6rem;

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.015)
    );

  border: 1px solid rgba(255,255,255,0.06);

  backdrop-filter: blur(14px);

  text-align: center;

  overflow: hidden;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* floating effect */

.hobby-card:hover {
  transform:
    translateY(-12px)
    rotateX(8deg)
    rotateY(-4deg);

  border-color: rgba(124,92,255,0.2);

  background:
    linear-gradient(
      180deg,
      rgba(124,92,255,0.08),
      rgba(255,255,255,0.02)
    );

  box-shadow:
    0 18px 40px rgba(0,0,0,0.24),
    0 0 24px rgba(124,92,255,0.08);
}

/* animated top line */

.hobby-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(124,92,255,0.95),
    transparent
  );

  transition: left 0.6s ease;
}

/* move line */

.hobby-card:hover::before {
  left: 100%;
}

/* subtle radial glow */

.hobby-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top,
      rgba(124,92,255,0.12),
      transparent 70%
    );

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;
}

/* reveal glow */

.hobby-card:hover::after {
  opacity: 1;
}

/* ─────────────────────────────
   ICON EFFECT
───────────────────────────── */

.hobby-emoji {
  position: relative;

  margin-bottom: 0.9rem;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* floating icon */

.hobby-card:hover .hobby-emoji {
  transform:
    translateY(-8px)
    scale(1.08);
}

/* icon image */

.hobby-emoji img {
  width: 54px;
  height: auto;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

/* icon glow */

.hobby-card:hover .hobby-emoji img {
  transform: rotate(-6deg);

  filter:
    drop-shadow(0 0 10px rgba(124,92,255,0.28))
    drop-shadow(0 0 20px rgba(0,212,255,0.14));
}

/* ─────────────────────────────
   TITLE
───────────────────────────── */

.hobby-name {
  font-size: 0.92rem;
  font-weight: 600;

  color: var(--text);

  transition:
    transform 0.35s ease,
    letter-spacing 0.35s ease,
    color 0.35s ease;
}

/* title hover */

.hobby-card:hover .hobby-name {
  transform: translateY(-2px);

  letter-spacing: 0.02em;

  color: white;
}

/* ─────────────────────────────
   DESCRIPTION
───────────────────────────── */

.hobby-desc {
  font-size: 0.82rem;

  line-height: 1.65;

  color: var(--muted);

  margin-top: 0.45rem;

  transition:
    transform 0.35s ease,
    color 0.35s ease;
}

/* description hover */

.hobby-card:hover .hobby-desc {
  transform: translateY(-1px);

  color: rgba(255,255,255,0.78);
}