/* src/styles/skills-tree.css */
:root {
  --tree-surface:     #0f172a;
  --tree-surface-2:   #1e293b;
  --tree-cyan:        #00dcff;
  --tree-gold:        #FFD700;
  --tree-gold-soft:   #FFF9AA;
  --tree-text:        #F8FAFC;
  --tree-text-muted:  #94A3B8;
  --tree-glow-cyan:   rgba(0,220,255,.32);
  --tree-glow-gold:   rgba(255,215,0,.4);
  --tree-line-idle:   rgba(255,255,255,.09);
  --tree-radius:      16px;
  --tree-dur:         .3s;
}

.skills-section {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 80px auto;
  position: relative;
  z-index: 10;
}

/* ══════════════════════════════════════════
   DESKTOP TREE
══════════════════════════════════════════ */
.tree-wrap {
  position: relative;
  width: 900px;
  height: 640px;
}

/* SVG canvas for all branch lines */
.tree-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Branch paths ── */
.branch {
  fill: none;
  stroke: var(--tree-line-idle);
  stroke-width: 1.6;
  transition: stroke var(--tree-dur), stroke-width var(--tree-dur), filter var(--tree-dur);
}
.branch.lit {
  stroke: var(--tree-cyan);
  stroke-width: 2px;
  filter: drop-shadow(0 0 5px rgba(0,220,255,.7));
}

/* travelling light bead */
.bead {
  r: 3.5;
  fill: var(--tree-cyan);
  filter: drop-shadow(0 0 5px var(--tree-cyan));
  opacity: 0;
}

/* junction dots where lines meet */
.jdot {
  r: 3;
  fill: var(--tree-line-idle);
  transition: fill var(--tree-dur), filter var(--tree-dur);
}
.jdot.lit {
  fill: var(--tree-cyan);
  filter: drop-shadow(0 0 4px var(--tree-cyan));
}

/* ── CENTER NODE ── */
.center-node {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 22px;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid rgba(255,215,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  z-index: 10;
  box-shadow:
    0 0 0 14px rgba(255,215,0,.05),
    0 0 0 28px rgba(255,215,0,.025),
    0 0 50px var(--tree-glow-gold);
}
.center-node svg,
.center-logo-mask { width: 34px; height: 34px; color: var(--tree-gold-soft); }
.center-logo-mask {
  display: block;
  background-color: var(--tree-gold-soft);
  -webkit-mask: url('/src/assets/logo-gnia.svg') no-repeat center / contain;
  mask: url('/src/assets/logo-gnia.svg') no-repeat center / contain;
}
.center-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tree-gold-soft);
  opacity: .8;
}
/* rotating orbit ring */
.orbit {
  position: absolute;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1px dashed rgba(255,215,0,.25);
  animation: spin 20s linear infinite;
  pointer-events: none;
}
.orbit::before {
  content: '';
  position: absolute;
  top: -3.5px; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tree-gold);
  box-shadow: 0 0 10px var(--tree-gold);
  transform: translateX(-50%);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SKILL NODES ── */
.skill-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 20;
  outline: none;
}

.node-btn {
  width: 90px; height: 90px;
  border-radius: var(--tree-radius);
  background: var(--tree-surface);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition:
    transform var(--tree-dur) cubic-bezier(.34,1.56,.64,1),
    border-color var(--tree-dur),
    box-shadow var(--tree-dur),
    background var(--tree-dur);
  -webkit-tap-highlight-color: transparent;
}
.node-btn svg,
.node-btn .custom-mask-icon { width: 36px; height: 36px; color: var(--tree-text-muted); transition: color var(--tree-dur); }

/* corner pip */
.node-btn::after {
  content: '';
  position: absolute;
  top: 7px; right: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tree-text-muted);
  transition: background var(--tree-dur), box-shadow var(--tree-dur);
}

.skill-node:hover .node-btn,
.skill-node.on    .node-btn {
  transform: scale(1.15);
  background: var(--tree-surface-2);
  border-color: var(--tree-cyan);
  box-shadow: 0 0 0 1px var(--tree-cyan), 0 0 28px var(--tree-glow-cyan);
}
.skill-node:hover .node-btn svg,
.skill-node.on    .node-btn svg,
.skill-node:hover .node-btn .custom-mask-icon,
.skill-node.on    .node-btn .custom-mask-icon { color: var(--tree-cyan); }
.skill-node:hover .node-btn::after,
.skill-node.on    .node-btn::after { background: var(--tree-cyan); box-shadow: 0 0 6px var(--tree-cyan); }

/* ── INFO CARD ── */
.info-card {
  position: absolute;
  width: 196px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(0,220,255,.2);
  border-radius: 14px;
  padding: 13px 15px 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  box-shadow: 0 12px 48px rgba(0,0,0,.8), 0 0 0 1px rgba(0,220,255,.08);
  backdrop-filter: blur(16px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.skill-node:hover .info-card,
.skill-node.on    .info-card { opacity: 1; pointer-events: auto; }

/* Position cards based on which side of the canvas the node lives */
.info-card.pos-left   { right: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.88) translateX(10px); }
.info-card.pos-right  { left:  calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.88) translateX(-10px); }
.info-card.pos-top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) scale(.88) translateY(10px); }
.info-card.pos-bottom { top:    calc(100% + 12px); left: 50%; transform: translateX(-50%) scale(.88) translateY(-10px); }

.skill-node:hover .info-card.pos-left,
.skill-node.on    .info-card.pos-left  { transform: translateY(-50%) scale(1) translateX(0); }
.skill-node:hover .info-card.pos-right,
.skill-node.on    .info-card.pos-right { transform: translateY(-50%) scale(1) translateX(0); }
.skill-node:hover .info-card.pos-top,
.skill-node.on    .info-card.pos-top   { transform: translateX(-50%) scale(1) translateY(0); }
.skill-node:hover .info-card.pos-bottom,
.skill-node.on    .info-card.pos-bottom{ transform: translateX(-50%) scale(1) translateY(0); }

.card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.card-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tree-cyan);
  box-shadow: 0 0 6px var(--tree-cyan);
  flex-shrink: 0;
}
.card-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--tree-text);
}
.card-desc {
  font-family: var(--font-main);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tree-text-muted);
  margin-bottom: 10px;
}
.card-tag {
  font-family: var(--font-main);
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tree-cyan);
  background: rgba(0,220,255,.07);
  border: 1px solid rgba(0,220,255,.18);
  border-radius: 100px;
  padding: 2px 9px;
}

/* ══════════════════════════════════════════
   MOBILE GRID
══════════════════════════════════════════ */
.mobile-grid {
  display: none;
  width: 100%;
  max-width: 540px;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.m-card {
  background: var(--tree-surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--tree-radius);
  padding: 18px 15px;
  cursor: pointer;
  transition: border-color var(--tree-dur), box-shadow var(--tree-dur), background var(--tree-dur);
  -webkit-tap-highlight-color: transparent;
}
.m-card.on {
  border-color: var(--tree-cyan);
  background: var(--tree-surface-2);
  box-shadow: 0 0 18px var(--tree-glow-cyan);
}
.m-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(0,220,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
}
.m-icon svg,
.m-icon .custom-mask-icon { width: 20px; height: 20px; color: var(--tree-cyan); }
.m-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--tree-text);
  margin-bottom: 5px;
}
.m-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.m-card.on .m-detail { max-height: 100px; }
.m-desc { font-family: var(--font-main); font-size: 11.5px; line-height: 1.6; color: var(--tree-text-muted); }

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .tree-wrap { display: none; }
  .mobile-grid { display: grid; padding: 0 16px; }
}

/* ── AMBIENT ── */
.ambient {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.amb-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .045;
  animation: blob-float var(--t,14s) ease-in-out infinite alternate;
}
@keyframes blob-float {
  from { transform: translate(0,0); }
  to   { transform: translate(var(--dx,20px), var(--dy,-40px)); }
}

/* Custom icon masking for raster image icons */
.custom-mask-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--mask-url) no-repeat center / contain;
  mask: var(--mask-url) no-repeat center / contain;
}