/* ===== Full-screen orbital background page (oval rings + labels) ===== */

:root{
  --gold: #ffd400;
  --gold-soft: rgba(255,212,0,.10);
  --gold-line: rgba(255,212,0,.16);
}

.skills-orbit{
  background: radial-gradient(120% 120% at 70% 20%, rgba(255,212,0,.06), rgba(0,0,0,0) 60%) #070707;
  min-height: 100dvh;
  overflow: hidden;
  cursor: default;
}

/* Canvas */
#orbit-bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Overlay header chip */
.orbit-overlay{
  position: relative;
  z-index: 2;
  text-align: center;
  margin: clamp(16px, 3.5vh, 28px) auto 8px;
  padding: 8px 14px;
  width: fit-content;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,212,0,.08), rgba(0,0,0,.18));
  border: 1px solid rgba(255,212,0,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,212,0,.08);
}
.orbit-overlay h1{
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: .3px;
  color: #f6f2d8;
}
.orbit-overlay .hint{
  margin: 4px 0 0;
  color: #d5d0b6;
  font-size: .95rem;
}

/* keep header/footer above the canvas */
.site-header, .site-footer{ position: relative; z-index: 2; }
.skills-orbit .nav, .skills-orbit .site-footer{ backdrop-filter: blur(2px); }
/* ===== Golden Grid Background (full page) ===== */
.bg-gold-grid{
  position: fixed;
  inset: 0;
  z-index: 0; /* sits behind everything */
  background:
    /* soft spotlight */
    radial-gradient(120% 120% at 70% 20%, rgba(255,212,0,.06), rgba(0,0,0,0) 60%),
    /* horizontal lines */
    linear-gradient(rgba(255,212,0,.10) 1px, transparent 1px),
    /* vertical lines */
    linear-gradient(90deg, rgba(255,212,0,.10) 1px, transparent 1px);
  background-size:
    100% 100%,
    48px 48px,
    48px 48px;
  background-position: center;
  animation: gridFloat 22s linear infinite;
  pointer-events: none;
}

@keyframes gridFloat{
  0%   { background-position: center, 0 0, 0 0; }
  50%  { background-position: center, 0 24px, 24px 0; }
  100% { background-position: center, 0 0, 0 0; }
}

/* make sure main content sits above the grid */
.site-header, main, .site-footer { position: relative; z-index: 1; }
/* full-bleed canvas behind everything */
#gold-grid{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;      /* never block clicks */
}

/* lift content above the grid */
.site-header, main, .site-footer{
  position: relative;
  z-index: 1;
}

/* optional: slight vignette so cards pop */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 10%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
  z-index: 0;
  pointer-events: none;
}
/* === Glowier category headings === */
.skill-section .category{
  margin: 18px auto 10px;
  text-align: center;
  font-weight: 300;
  letter-spacing: .3px;

  /* size: subtle bump, responsive */
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 2rem);

  /* gold gradient text + glow */
  background: linear-gradient(135deg, #dededdff, #ddc95aff 60%, #d7d1c0c4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  text-shadow:
    0 0 10px rgba(255,212,0,.30),
    0 0 24px rgba(255,212,0,.18);
}

/* subtle glowing underline */
.skill-section .category::after{
  content:"";
  display:block;
  width: 76px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(255,212,0,0),
    rgba(255,212,0,.85),
    rgba(255,212,0,0));
  filter: drop-shadow(0 0 6px rgba(255,212,0,.55));
}

/* gentle pulse if motion allowed */
@media (prefers-reduced-motion: no-preference){
  @keyframes catGlow {
    0%   { text-shadow: 0 0 8px rgba(255,212,0,.18), 0 0 20px rgba(255,212,0,.08); }
    100% { text-shadow: 0 0 16px rgba(255,212,0,.42), 0 0 34px rgba(255,212,0,.22); }
  }
  .skill-section .category{
    animation: catGlow 3.2s ease-in-out infinite alternate;
  }
}