/* Just override shit I wanna do later */

:root {
  --bg-0: #000000;
  --bg-1: #0d0d0d;
  --glass: #0f0f12cc;
  --txt-0: #eaeff6;
  --txt-dim: #a6adbb;
  --teal: #00ffcc;
  --blue: #4f9dff;
  --pink: #ff4fd8;
  --green: #39ff14;
  --grad-1: linear-gradient(135deg, var(--teal), var(--pink));
  --grad-2: linear-gradient(135deg, var(--blue), var(--pink));
  --grad-3: linear-gradient(135deg, var(--teal), var(--blue));
  --card-blur: 14px;
  --radius-2xl: 1.25rem;
  --radius-xl: 0.9rem;
  --ring: 1px solid #ffffff1f;
  --shadow-neon: 0 0 30px #00ffcc22, 0 0 60px #ff4fd81a;
  --container: 1200px;
  --speed-quick: 220ms;
}
/* a touch of vertical breathing room so card glows don't touch the edges */
.skills-carousel {
  padding-block: 0.25rem;
}

/* slightly larger gaps so glows don't overlap */
.skills-track {
  gap: 1.25rem; /* was 1rem */
}

/* uniform card sizing + thinner, tighter shadows only for carousel items */
.skills-track .skill {
  position: relative;          /* for ::after halo */
  isolation: isolate;          /* keep effects self-contained */
  width: 240px;                /* uniform width for neat rhythm */
  min-height: 84px;            /* consistent height */
  padding: 0.9rem;             /* balanced padding */

  /* replace heavy neon with a crisp ring + compact drop shadow */
  box-shadow:
    0 0 0 1px #ffffff1a,       /* subtle ring */
    0 8px 14px rgba(0,0,0,0.45);/* tight, non-bleeding depth */
}

/* very soft, contained neon aura that won't bleed into neighbors */
.skills-track .skill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  box-shadow: 0 0 22px rgba(0,255,204,0.08);
}

/* uniform icon sizing so every card aligns cleanly */
.skills-track .skill .skill-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
}

h3 > span {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.25em;
  padding-left: 10px;
}

h3 > span > span {
  display: block;
  animation: anim 22s infinite ease;

  /* Gradient text */
  background: var(--grad-3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes anim {
  0%   { transform: translateY(0%); }
  10%  { transform: translateY(-100%); }
  20%  { transform: translateY(-200%); }
  30%  { transform: translateY(-300%); }
  40%  { transform: translateY(-400%); }
  50%  { transform: translateY(-500%); }
  60%  { transform: translateY(-600%); }
  70%  { transform: translateY(-700%); }
  80%  { transform: translateY(-800%); }
  90%  { transform: translateY(-900%); }
  100% { transform: translateY(0%); } /* Keep adjusting as more skills are added, keep diving total skills evenly */
}