/* =====================================================
   SKILLS PAGE – FLOATING BUBBLE ORB CLOUD
===================================================== */

.skills-page {
  max-width: 1300px;
  width: 92%;
  margin: auto;
  padding-top: 150px;
  padding-bottom: 100px;
  text-align: center;
}

.page-title {
  font-size: 48px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -1px;
}

.page-title span {
  background: linear-gradient(135deg, var(--primary-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  color: var(--text-muted);
  margin-bottom: 40px;
  font-size: 16px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================
   SKILLS CONTAINER (GLASS ORB BOX)
===================================================== */
.skills-container {
  position: relative;
  padding: 80px 40px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
              0 0 60px rgba(56, 189, 248, 0.1);
  overflow: hidden;
}

.skills-grid {
  position: relative;
  height: 520px;
}

/* =====================================================
   SKILL BUBBLE CIRCLE
===================================================== */
.skill-circle {
  position: absolute;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%,
              rgba(30, 41, 59, 0.95),
              rgba(3, 7, 18, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--text-main);
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15),
              0 10px 30px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(56, 189, 248, 0.1);
  animation: floatSkill var(--speed, 4s) ease-in-out infinite;
}

.skill-circle i {
  font-size: 32px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
}

.skill-circle span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.2;
}

.skill-circle:hover {
  transform: translateY(-12px) scale(1.15) !important;
  border-color: var(--primary-cyan);
  box-shadow: inset 0 0 25px rgba(56, 189, 248, 0.3),
              0 20px 40px rgba(0, 0, 0, 0.8),
              0 0 50px rgba(56, 189, 248, 0.4);
  z-index: 10;
}

.skill-circle:hover span {
  color: var(--primary-cyan);
}

/* Float speeds */
.skill-circle:nth-child(1) { --speed: 4.2s; }
.skill-circle:nth-child(2) { --speed: 3.5s; }
.skill-circle:nth-child(3) { --speed: 4.8s; }
.skill-circle:nth-child(4) { --speed: 3.8s; }
.skill-circle:nth-child(5) { --speed: 4.5s; }
.skill-circle:nth-child(6) { --speed: 3.2s; }
.skill-circle:nth-child(7) { --speed: 4.6s; }
.skill-circle:nth-child(8) { --speed: 3.9s; }
.skill-circle:nth-child(9) { --speed: 4.1s; }
.skill-circle:nth-child(10) { --speed: 3.6s; }
.skill-circle:nth-child(11) { --speed: 4.4s; }
.skill-circle:nth-child(12) { --speed: 3.7s; }
.skill-circle:nth-child(13) { --speed: 4.9s; }
.skill-circle:nth-child(14) { --speed: 3.4s; }
.skill-circle:nth-child(15) { --speed: 4.3s; }
.skill-circle:nth-child(16) { --speed: 3.3s; }
.skill-circle:nth-child(17) { --speed: 4.7s; }
.skill-circle:nth-child(18) { --speed: 4.0s; }

/* =====================================================
   BUBBLE POSITIONS (ORGANIC 3-ROW CLOUD)
===================================================== */
/* Row 1 */
.skill-circle:nth-child(1)  { top: 20px;  left: 6%; }
.skill-circle:nth-child(2)  { top: 10px;  left: 22%; }
.skill-circle:nth-child(3)  { top: 30px;  left: 38%; }
.skill-circle:nth-child(4)  { top: 10px;  left: 54%; }
.skill-circle:nth-child(5)  { top: 25px;  left: 70%; }
.skill-circle:nth-child(6)  { top: 15px;  left: 84%; }

/* Row 2 */
.skill-circle:nth-child(7)  { top: 180px; left: 12%; }
.skill-circle:nth-child(8)  { top: 195px; left: 28%; }
.skill-circle:nth-child(9)  { top: 175px; left: 44%; }
.skill-circle:nth-child(10) { top: 190px; left: 60%; }
.skill-circle:nth-child(11) { top: 170px; left: 76%; }

/* Row 3 */
.skill-circle:nth-child(12) { top: 345px; left: 5%; }
.skill-circle:nth-child(13) { top: 360px; left: 20%; }
.skill-circle:nth-child(14) { top: 340px; left: 36%; }
.skill-circle:nth-child(15) { top: 365px; left: 52%; }
.skill-circle:nth-child(16) { top: 345px; left: 68%; }
.skill-circle:nth-child(17) { top: 360px; left: 83%; }
.skill-circle:nth-child(18) { top: 200px; left: 88%; }

@keyframes floatSkill {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-16px);
  }
}

/* =====================================================
   RESPONSIVE (AUTO FLEX BUBBLES ON MOBILE)
===================================================== */
@media (max-width: 1024px) {
  .skills-grid {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .skill-circle {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

@media (max-width: 600px) {
  .skill-circle {
    width: 100px;
    height: 100px;
  }

  .skill-circle i {
    font-size: 24px;
  }

  .skill-circle span {
    font-size: 11px;
  }

  .skills-container {
    padding: 40px 16px;
  }

  .page-title {
    font-size: 36px;
  }
}