/* ============================================================
   Skill Sphere — 3D Fibonacci constellation
   Replaces the orbital skill map in the About section.
   Namespaced under .about-skills .skill-sphere-section.
============================================================ */

/* Override the existing .about-skills warm-cream gradients so the
   sphere's own atmospheric layers read cleanly. */
.about-skills.has-skill-sphere {
  background:
    radial-gradient(ellipse 80% 70% at 28% 50%, rgba(255,235,190,.20), transparent 65%),
    #f4efe5 !important;
  color: #2a2724;
}
.about-skills.has-skill-sphere::before,
.about-skills.has-skill-sphere::after {
  display: none !important;
}

.skill-sphere-section {
  position: absolute;
  inset: 0;
  isolation: isolate;
  padding: clamp(48px, 6vh, 96px) clamp(28px, 5vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* sphere tuning */
  --ss-R: 270px;
  --ss-spin: 56s;
  --ss-tilt: -14deg;
  --ss-persp: 1600;

  /* palette aliases (resolved against the site's existing tokens) */
  --ss-bg: #f4efe5;
  --ss-cream: #fffdf8;
  --ss-ink: #181715;
  --ss-ink-muted: #6a645a;
  --ss-line: rgba(106, 100, 90, .32);
  --ss-line-soft: rgba(106, 100, 90, .22);
  --ss-terracotta: #b9633d;
  --ss-gold: #ffe7b2;
  --ss-gold-deep: #d8b46e;
  --ss-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif;
  --ss-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --ss-mono: "JetBrains Mono", "Courier New", Consolas, monospace;
}

/* ----- Atmospheric background layers ----- */
.skill-sphere-nebula {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 28% 50%, rgba(216,180,110,.30), transparent 65%),
    radial-gradient(ellipse 40% 35% at 70% 60%, rgba(185,99,61,.14), transparent 70%),
    radial-gradient(ellipse 70% 60% at 30% 55%, rgba(255,231,178,.18), transparent 70%);
  filter: blur(28px);
  animation: ssNebulaDrift 32s ease-in-out infinite alternate;
}
@keyframes ssNebulaDrift {
  from { transform: translate(-1%, 0%) scale(1); }
  to   { transform: translate(2%, -1%) scale(1.03); }
}

.skill-sphere-rays {
  position: absolute;
  left: calc(28% - 420px);
  top: calc(50% - 420px);
  width: 840px;
  height: 840px;
  z-index: -3;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(255,231,178,.10) 14deg, transparent 28deg,
    transparent 60deg,  rgba(255,231,178,.06) 70deg, transparent 80deg,
    transparent 120deg, rgba(255,231,178,.10) 132deg,transparent 144deg,
    transparent 180deg, rgba(255,231,178,.07) 192deg,transparent 204deg,
    transparent 240deg, rgba(255,231,178,.09) 252deg,transparent 264deg,
    transparent 300deg, rgba(255,231,178,.08) 312deg,transparent 324deg
  );
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle at center, transparent 15%, black 40%, black 62%, transparent 88%);
          mask: radial-gradient(circle at center, transparent 15%, black 40%, black 62%, transparent 88%);
  filter: blur(8px);
  animation: ssRayRotate 80s linear infinite;
  opacity: .9;
}
@keyframes ssRayRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.skill-sphere-halo {
  position: absolute;
  left: calc(28% - 380px);
  top: calc(50% - 380px);
  width: 760px;
  height: 760px;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(255,235,190,.55) 0%,
    rgba(216,180,110,.32) 22%,
    rgba(216,180,110,.12) 44%,
    transparent 68%);
  filter: blur(3px);
  animation: ssHaloBreath 9s ease-in-out infinite;
}
.skill-sphere-core-glow {
  position: absolute;
  left: calc(28% - 220px);
  top: calc(50% - 220px);
  width: 440px;
  height: 440px;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(255,225,170,.40) 0%,
    rgba(216,180,110,.22) 20%,
    transparent 55%);
  mix-blend-mode: plus-lighter;
  animation: ssHaloBreath 7s ease-in-out infinite;
}
@keyframes ssHaloBreath {
  0%,100% { opacity: .85; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.04); }
}

.skill-sphere-stars,
.skill-sphere-dust {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.skill-sphere-star {
  position: absolute;
  border-radius: 50%;
  background: var(--ss-gold-deep);
  animation: ssTwinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  box-shadow: 0 0 4px 1.5px rgba(216,180,110,.4);
}
.skill-sphere-star.cross::before,
.skill-sphere-star.cross::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.skill-sphere-star.cross::before {
  width: 1.5px; height: 18px;
  background: linear-gradient(to bottom, transparent, rgba(255,228,172,.7) 50%, transparent);
}
.skill-sphere-star.cross::after {
  width: 18px; height: 1.5px;
  background: linear-gradient(to right, transparent, rgba(255,228,172,.7) 50%, transparent);
}
@keyframes ssTwinkle {
  0%,100% { opacity: .25; transform: scale(.7); }
  50%     { opacity: 1;   transform: scale(1.15); }
}
.skill-sphere-mote {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(216,180,110,.7);
  box-shadow: 0 0 3px 1px rgba(216,180,110,.4);
  animation: ssDrift var(--dur, 18s) linear var(--delay, 0s) infinite;
}
@keyframes ssDrift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .6; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -80px)); opacity: 0; }
}

/* ----- Two-column grid: sphere left, info right ----- */
.skill-sphere-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  width: 100%;
  max-width: 1440px;
}

/* ----- Sphere stage ----- */
.skill-sphere-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 720px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.skill-sphere-globe {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Transform is driven by JS each frame, but provide a CSS fallback. */
  transform: rotateX(-14deg) rotateY(0deg);
  will-change: transform;
}
.skill-sphere-wire {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.skill-sphere-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--w, 540px);
  height: var(--w, 540px);
  margin-left: calc(var(--w, 540px) / -2);
  margin-top: calc(var(--w, 540px) / -2);
  border: 1px solid rgba(106, 100, 90, .22);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(216, 180, 110, .08);
}
.skill-sphere-ring.lat-eq { --w: 540px; transform: rotateX(90deg) translateZ(0); }
.skill-sphere-ring.lat-n1 { --w: 489.4px; transform: rotateX(90deg) translateZ(114.1px); }
.skill-sphere-ring.lat-s1 { --w: 489.4px; transform: rotateX(90deg) translateZ(-114.1px); }
.skill-sphere-ring.lat-n2 { --w: 347.1px; transform: rotateX(90deg) translateZ(206.8px); }
.skill-sphere-ring.lat-s2 { --w: 347.1px; transform: rotateX(90deg) translateZ(-206.8px); }
.skill-sphere-ring.lat-n3 { --w: 184.7px; transform: rotateX(90deg) translateZ(253.7px); }
.skill-sphere-ring.lat-s3 { --w: 184.7px; transform: rotateX(90deg) translateZ(-253.7px); }
.skill-sphere-ring.mer-0   { --w: 540px; transform: rotateY(0deg); }
.skill-sphere-ring.mer-30  { --w: 540px; transform: rotateY(30deg); }
.skill-sphere-ring.mer-60  { --w: 540px; transform: rotateY(60deg); }
.skill-sphere-ring.mer-90  { --w: 540px; transform: rotateY(90deg); }
.skill-sphere-ring.mer-120 { --w: 540px; transform: rotateY(120deg); }
.skill-sphere-ring.mer-150 { --w: 540px; transform: rotateY(150deg); }

/* Soft ground glow */
.skill-sphere-stage::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 26px;
  background: radial-gradient(ellipse at center, rgba(24,23,21,.18), transparent 70%);
  border-radius: 50%;
  z-index: -1;
}

/* ----- Pill nodes (dot + label as one unit, billboarded by JS) ----- */
.skill-sphere-pills {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.skill-pill {
  position: absolute;
  left: 50%; top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  background: rgba(247, 244, 238, .88);
  border: 0.5px solid var(--ss-line);
  border-radius: 999px;
  font-family: var(--ss-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ss-ink);
  white-space: nowrap;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    0 1px 0 rgba(216,180,110,.18),
    0 0 0 0.5px rgba(216,180,110,.18);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  opacity: calc(var(--depth-op, 1) * var(--dim-op, 1));
  transition:
    color .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}
.skill-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ss-ink);
  box-shadow: 0 0 6px 1.5px rgba(216,180,110,.5);
  flex-shrink: 0;
}
.skill-pill.zh { font-family: var(--ss-serif); font-weight: 700; }
.skill-pill.anchor,
.skill-pill.is-highlight {
  font-weight: 800;
  color: var(--ss-terracotta);
  border-color: var(--ss-terracotta);
  border-width: 1px;
  font-size: 12px;
  padding: 5px 13px 5px 9px;
  background: rgba(247, 244, 238, .96);
  box-shadow:
    0 0 0 1px rgba(185,99,61,.18),
    0 0 18px rgba(185,99,61,.22),
    0 0 36px rgba(216,180,110,.18);
}
.skill-pill.anchor::before,
.skill-pill.is-highlight::before {
  width: 8px; height: 8px;
  background: var(--ss-terracotta);
  box-shadow:
    0 0 0 2px rgba(247,244,238,.95),
    0 0 12px 2px rgba(185,99,61,.55),
    0 0 22px 8px rgba(216,180,110,.4);
  animation: ssAnchorPulse 2.6s ease-in-out infinite;
}
@keyframes ssAnchorPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.25); }
}
.skill-pill.is-dim { --dim-op: .28; filter: saturate(.3); }

/* ----- Right info column ----- */
.skill-sphere-info {
  max-width: 540px;
  pointer-events: auto;
}
.skill-sphere-eyebrow {
  font-family: var(--ss-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ss-ink-muted);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.skill-sphere-eyebrow b { color: var(--ss-terracotta); font-weight: 700; }
.skill-sphere-title {
  font-family: var(--ss-serif);
  font-weight: 900;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  color: var(--ss-ink);
}
.skill-sphere-title em {
  font-style: normal;
  color: var(--ss-terracotta);
}
.skill-sphere-sub {
  margin: 22px 0 0;
  font-family: var(--ss-sans);
  font-size: 15px;
  color: var(--ss-ink-muted);
  line-height: 1.75;
  max-width: 480px;
}
.skill-sphere-chips {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.skill-sphere-chip {
  font-family: var(--ss-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--ss-ink);
  border-radius: 999px;
  color: var(--ss-ink);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background .25s ease, color .25s ease;
}
.skill-sphere-chip:hover { background: rgba(24, 23, 21, .06); }
.skill-sphere-chip.active {
  background: var(--ss-ink);
  color: #fffdf8;
}
.skill-sphere-chip .count {
  opacity: .55;
  margin-left: 6px;
  font-weight: 500;
}
.skill-sphere-meta {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(106, 100, 90, .25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.skill-sphere-meta div {
  font-family: var(--ss-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ss-ink-muted);
  text-transform: uppercase;
}
.skill-sphere-meta strong {
  display: block;
  font-family: var(--ss-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--ss-ink);
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1;
  margin-bottom: 6px;
}
.skill-sphere-meta strong.accent { color: var(--ss-terracotta); }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .skill-sphere-section { padding: 48px clamp(20px, 5vw, 48px); }
  .skill-sphere-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-content: start;
  }
  .skill-sphere-stage { max-height: 60vh; }
  .skill-sphere-section { --ss-R: 220px; }
  .skill-sphere-meta strong { font-size: 28px; }
}
@media (max-width: 700px) {
  .skill-sphere-section { --ss-R: 170px; padding: 36px 16px; }
  .skill-sphere-stage { max-height: 56vh; }
  .skill-pill { font-size: 10.5px; padding: 3px 9px 3px 7px; }
  .skill-pill.anchor,
  .skill-pill.is-highlight { font-size: 11px; padding: 4px 10px 4px 8px; }
  .skill-sphere-chip { padding: 7px 12px; font-size: 10.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skill-sphere-nebula,
  .skill-sphere-rays,
  .skill-sphere-halo,
  .skill-sphere-core-glow,
  .skill-sphere-star,
  .skill-sphere-mote,
  .skill-sphere-globe { animation: none !important; }
}