#skills {
  background-color: transparent; /* Blend naturally with surrounding gradients */
  position: relative;
  padding-top: var(--space-16);
  padding-bottom: 2rem;
}

.seamless-tree {
  /* The tree is a direct child of the section, so its width is direction-safe. */
  width: 100vw;
  max-width: 100%;
  margin-top: var(--space-8);
  overflow: hidden; /* No scrolling - everything fits */
}

/* Inner Canvas - fits viewport exactly */
.skill-tree-container {
  --skill-tree-scale: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 680px;
  background: transparent;
  border: none;
  cursor: default;
  /* Padding keeps nodes from touching edges */
  padding: 40px;
  box-sizing: border-box;
}

/* Groups are transparent to the desktop graph and become real stacks on mobile. */
.skill-group {
  display: contents;
}

.skill-branches {
  display: contents;
}

/* Base Node Styling */
.skill-node {
  position: absolute;
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  font-weight: 500;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  transition: opacity 0.5s ease, filter 0.5s ease, background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  z-index: 10;
  /* They are centered on their left/top coordinates via transform in JS */
}

.node-core,
.node-major {
  cursor: pointer;
  touch-action: manipulation;
}

/* Core / Major Nodes */
.node-core {
  font-size: var(--text-2xl);
  padding: var(--space-4) var(--space-8);
  font-weight: 800;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(251, 191, 36, 0.08));
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.node-major {
  font-size: var(--text-lg);
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Flow logic: Node Hovering */
.skill-tree-container.node-hovered .skill-node {
  opacity: 0.38;
  filter: blur(0.5px);
}

.skill-tree-container.node-hovered .skill-node.active-node,
.skill-tree-container.node-hovered .skill-node.active-connected {
  opacity: 1;
  filter: none;
  color: var(--color-text);
}

.skill-node.active-node {
  background: var(--color-primary);
  color: var(--color-text-on-accent) !important;
  border-color: var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary);
}

.skill-node.active-connected {
  border-color: var(--color-accent);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.skill-node.reveal-glow {
  background: var(--color-primary);
  color: var(--color-text-on-accent);
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.75);
}

.skill-node:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Keep the desktop graph readable at the browser's normal 100% zoom. */
@media (min-width: 1051px) {
  /* Match the compact visual density of browser zoom without shrinking the rest of the page. */
  .seamless-tree {
    height: 476px;
  }

  .skill-tree-container {
    --skill-tree-scale: 0.7;
    width: 142.857143%;
    max-width: none;
    margin-inline: -21.4285715%;
    transform: scale(0.7);
    transform-origin: top center;
  }

  .skill-node:not(.node-major):not(.node-core) {
    font-size: .9rem;
    padding-inline: 1rem;
  }

  .node-major {
    font-size: 1.05rem;
    padding-inline: 1.15rem;
  }

  .node-core {
    font-size: clamp(1.65rem, 2.1vw, 2.35rem);
    padding: .9rem 1.7rem;
  }
}

/* SVG Lines */
.tree-connections {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}

.skill-connection {
  stroke: var(--color-border);
  stroke-width: 2;
  transition: stroke 0.5s ease, stroke-width 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
}

.skill-connection.is-drawing {
  transition: stroke 1s ease, stroke-width 1s ease, opacity 1s ease, filter 1s ease, stroke-dashoffset 0.9s ease var(--draw-delay, 0ms);
}

.skill-connection.is-glowing {
  stroke: var(--color-accent);
  stroke-width: 4;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.8));
}

.skill-tree-container.node-hovered .skill-connection {
  opacity: 0.1;
}

.skill-tree-container.node-hovered .skill-connection.active-line {
  opacity: 1;
  stroke: var(--color-accent);
  stroke-width: 4;
}

/* Use the mobile neural layout by width or by touch-device capability.
   The latter keeps Chrome DevTools phone emulation responsive even when zoom changes the CSS viewport width. */
@media (max-width: 1050px), (hover: none), (pointer: coarse), (any-hover: none), (any-pointer: coarse) {
  .seamless-tree { width: 100%; max-width: 100%; height: auto; overflow: visible; }
  .skill-tree-container {
    --skill-tree-scale: 1;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    height: auto;
    min-height: 0;
    padding: .8rem 0 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    isolation: isolate;
    transform: none;
    transform-origin: top center;
  }
  .skill-tree-container::before {
    content: '';
    position: absolute;
    top: 1.1rem;
    bottom: 2rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--color-primary) 10%, var(--color-accent) 50%, var(--color-primary) 90%, transparent);
    opacity: .55;
    z-index: 0;
  }
  .tree-connections { display: block; }
  .skill-group {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    z-index: 2;
  }
  .skill-branches {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    z-index: 2;
  }
  .skill-node {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-height: 46px;
    padding: .65rem .7rem;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
    font-size: var(--text-sm);
    transform: none !important;
    z-index: 2;
  }
  .skill-node > span { display: block; }
  .node-core, .node-major { grid-column: 1 / -1; }
  .node-core { font-size: var(--text-base); padding: .8rem 1rem; }
  .node-major { font-size: var(--text-sm); padding: .7rem .8rem; }
  .skill-group[data-group="sw-eng"] > .skill-node:last-child {
    grid-column: 1 / -1;
  }
  .skill-group:not([data-group="backend"]) .node-major::before {
    content: '';
    position: absolute;
    top: -.95rem;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-bg);
    box-shadow: 0 0 12px var(--color-accent);
  }
  .skill-tree-container.node-hovered .skill-node { opacity: .38; filter: blur(.5px); }
  .skill-tree-container.node-hovered .skill-node.active-node,
  .skill-tree-container.node-hovered .skill-node.active-connected { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-node,
  .skill-connection,
  .skill-connection.is-drawing {
    transition: none;
  }
}

.skill-tree-container.tree-reveal-pending .skill-node {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.56s ease, visibility 0s linear 0.56s;
}

.skill-tree-container.tree-reveal-pending .skill-node.is-revealed {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.56s ease;
}

@media (prefers-reduced-motion: reduce) {
  .skill-tree-container.tree-reveal-pending .skill-node,
  .skill-tree-container.tree-reveal-pending .skill-node.is-revealed {
    transition: none;
  }
}