/* =========================================================
=======================  SKILLS SECTION  ===================
=========================================================
Styles for Skills Section including titles, groups,
skill cards, icons, progress bars, and hover effects.

Table of Content (Skills):
1. Base Layout
2. Section Titles
3. Groups Wrapper
4. Group Title
5. Skill Items Grid
6. Skill Card
    6.1 Glow Effect
    6.2 Hover Interactions
7. Skill Icon
8. Skill Name
9. Progress Bar
========================================================= */


/* =========================================================
1. BASE LAYOUT
========================================================= */
.skills {
  position: relative;
  z-index: 1;
}


/* =========================================================
2. SECTION TITLES
========================================================= */
.skills__title {
  text-align: center;
  font-size: var(--font-size-xxl);
  color: var(--color-text-inverse);
  margin-bottom: var(--spacing-sm);
}

.skills__subtitle {
  text-align: center;
  font-size: var(--font-size-lg);
  color: #e6e6e6;
  max-width: 650px;
  margin: 0 auto var(--spacing-xxl);
}


/* =========================================================
3. GROUPS WRAPPER
========================================================= */
.skills__groups {
  display: grid;
  gap: var(--spacing-xxl);
}


/* =========================================================
4. GROUP TITLE
========================================================= */
.skills__group-title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-inverse);
  position: relative;
  padding-left: 1rem;
}

/* Vertical highlight bar */
.skills__group-title::before {
  content: "";
  width: 6px;
  height: 100%;
  background: var(--color-tertiary);
  border-radius: var(--radius-full);
  position: absolute;
  left: 0;
  top: 0;
}

/* RTL Fix */
html[dir="rtl"] .skills__group-title {
  padding-right: 1rem;
}

html[dir="rtl"] .skills__group-title::before {
  left: auto;
  right: 0;
}


/* =========================================================
5. SKILL ITEMS GRID
========================================================= */
.skills__items {
  display: grid;
  gap: var(--spacing-lg);
}

@media (min-width: 600px) {
  .skills__items {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}


/* =========================================================
6. SKILL CARD
========================================================= */
.skill__card {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-lg);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
  cursor: default;
}

/* 6.1 Glow Circle Inside Card */
.skill__card::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--color-secondary), transparent 70%);
  border-radius: var(--radius-full);
  top: -60px;
  right: -60px;
  filter: blur(40px);
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}

/* 6.2 Hover Interactions */
.skill__card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0px 0px 20px rgba(0, 200, 255, 0.35),
    0px 0px 25px rgba(0, 100, 255, 0.4);
}

.skill__card:hover::before {
  opacity: 0.6;
}


/* =========================================================
7. SKILL ICON
========================================================= */
.skill__icon i {
  font-size: 2.2rem;
  color: var(--color-tertiary);
  margin-bottom: var(--spacing-sm);
  display: inline-block;
  transition: color var(--transition-fast),
    transform var(--transition-fast);
}

.skill__card:hover .skill__icon i {
  color: var( --color-bg-light);
  transform: scale(1.15);
}


/* =========================================================
8. SKILL NAME
========================================================= */
.skill__card h4 {
  color: var(--color-text-inverse);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
}


/* =========================================================
9. PROGRESS BAR
========================================================= */
.skill__bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.skill__bar span {
  display: block;
  height: 100%;
  width: 0%;
  /* Start from 0% */
  background: linear-gradient(90deg,
      var(--color-tertiary),
      var(--color-primary));
  border-radius: var(--radius-full);
  transition: width 1.2s ease-out;
}