/* ===== GLOBAL VARIABLES ===== */
:root {
  /* ===== Base Colors ===== */
  --bg-dark: #0E0E11;
  /* Main background color for dark theme */
  --bg-gradient: linear-gradient(135deg, #101522 0%, #0E111A 100%);
  /* Alternative dark gradient */
  --card-bg: #14161A;
  /* Card/container background color */
  --card-bd: rgba(255, 255, 255, 0.10);
  /* Default card border color (subtle) */
  --card-bd-hover: #FFC20E;
  /* Card border color on hover (accent yellow) */
  --text: #E5E7EB;
  /* Primary text color (light gray) */
  --text-dim: #A3A3A3;
  /* Secondary/dimmed text color */

  /* ===== Tooltip Colors ===== */
  --tooltip-bg: #FFC20E;
  /* Tooltip background (accent yellow) */
  --tooltip-fg: #111827;
  /* Tooltip text color (dark) */
  --tooltip-font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ===== Layout & Spacing ===== */
  --section-gap: 24px;
  /* Standard gap between section elements */
  --card-radius: 16px;
  /* Standard border radius for cards and containers */
  --card-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  /* Standard card shadow effect */
  --card-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.6);
  /* Hover shadow effect */

  /* ===== Typography Scale ===== */
  --text-xs: 0.8rem;
  /* Extra small text */
  --text-sm: 0.9rem;
  /* Small text */
  --text-base: 1rem;
  /* Base text size */
  --text-lg: 1.1rem;
  /* Large text */
  --text-xl: 1.3rem;
  /* Extra large text */
  --text-2xl: 1.5rem;
  /* Section headings */
  --text-3xl: 2.5rem;
  /* Page titles (mobile) */
  --text-4xl: 3rem;
  /* Page titles (desktop) */

  /* ===== Section Title Variables ===== */
  --title-size: 2.4rem;
  /* Main section title font size */
  --title-weight: 800;
  /* Main section title font weight */
  --title-underline-color: var(--card-bd-hover);
  /* Title underline accent color */
  --title-underline-width: 60px;
  /* Title underline width */
  --title-underline-height: 3px;
  /* Title underline thickness */

  /* ===== Spacing Scale ===== */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 0.75rem;
  /* 12px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.25rem;
  /* 20px */
  --space-xl: 1.5rem;
  /* 24px */
  --space-2xl: 2rem;
  /* 32px */
  --space-3xl: 3rem;
  /* 48px */
  --space-4xl: 4rem;
  /* 64px */
  --space-5xl: 5rem;
  /* 80px */

  /* ===== Animation & Transitions (Global) ===== */
  --transition-base: all 0.3s ease;
  /* Base transition for most elements */
  --transition-hover: transform 0.3s ease, box-shadow 0.3s ease;
  /* Hover animations */
  --transition-entrance: opacity 0.6s ease, transform 0.6s ease;
  /* Section entrance animations */

  /* ===== Skills Section Specific Variables ===== */
  --skills-primary: #00AEEF;
  /* Primary brand color (blue) */
  --skills-secondary: #80BD41;
  /* Secondary brand color (green) */
  --progress-height: 24px;
  /* Height of progress bars */
  --progress-bg: #2a2a2a;
  /* Background color of progress track */
  --progress-radius: 12px;
  /* Border radius of progress bars */
  --progress-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Inner shadow for depth */
  --progress-glow: 0 0 10px rgba(0, 174, 239, 0.3);
  /* Glow effect for active progress */
  --transition-progress: width 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Progress bar animation */

  /* ===== Filter Chip Variables ===== */
  --chip-padding: 0.75rem 1.5rem;
  /* Padding for filter chips */
  --chip-radius: 25px;
  /* Border radius for chips */
  --chip-border: 2px solid var(--card-bd);
  /* Default chip border */
  --chip-bg-active: linear-gradient(135deg, var(--skills-primary), var(--skills-secondary));
  /* Active chip background */
}

/* ===== GLOBAL BASE STYLES ===== */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #1E1E20, #0E0E11);
  color: white;
}

/* ===== GLOBAL LAYOUT PATTERNS ===== */

/* Base section container - applies to all major sections */
.section {
  padding: var(--space-5xl) var(--space-lg);
  /* Standard 80px 20px padding */
  color: var(--text);
  overflow-x: clip;
  /* Prevent horizontal scrollbar on all sections */
  /* Global entrance animation setup */
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-entrance);
}

/* Section becomes visible when in view */
.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Standard container for content width control */
.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Section headers - consistent styling for all section titles */
.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Global section title styling */
.section-title {
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--text);
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-sm);
  margin: 0;
}

/* Underline decoration for section titles */
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: var(--title-underline-width);
  height: var(--title-underline-height);
  background: var(--title-underline-color);
  border-radius: 2px;
}

/* Section lead text - descriptive text below titles */
.section-lead {
  color: var(--text-dim);
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto var(--space-sm);
  text-align: center;
}

/* ===== BACKGROUND VARIANTS ===== */
.section--dark {
  background: var(--bg-dark);
}

.section--gradient {
  background: var(--bg-gradient);
}

.section--full-height {
  min-height: 100vh;
}

/* ===== LAYOUT CONTAINERS ===== */
.grid-container {
  display: grid;
  gap: var(--section-gap);
}

.flex-container {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 1024px) {
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== GLOBAL CARD PATTERNS ===== */

/* Base card styling used across sections 
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--card-radius);
  padding: var(--space-xl);
  transition: var(--transition-base);
  color: var(--text-dim);
}

/* Card hover effects 
.card:hover {
  border-color: var(--card-bd-hover);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

/* Card with enhanced hover effects 
.card--enhanced:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-5px);
}

/* Card header pattern 
.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.card__icon {
  font-size: 26px;
  line-height: 1;
}

.card__title {
  font-size: var(--text-xl);
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.card__meta {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin: var(--space-xs) 0;
}

.card__content {
  margin: var(--space-sm) 0;
  line-height: 1.7;
}

/* ===== GLOBAL TOOLTIP PATTERN ===== */
.tooltip-trigger {
  position: relative;
  cursor: pointer;
}

.tooltip-trigger::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + var(--space-sm));
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  border: 1px solid #B88600;
  border-radius: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-width: 260px;
  max-width: 340px;
  font: var(--tooltip-font);
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 3;
  pointer-events: none;
}

.tooltip-trigger::before {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: var(--tooltip-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 3;
  pointer-events: none;
}

.tooltip-trigger:hover::after,
.tooltip-trigger:hover::before,
.tooltip-trigger:focus-visible::after,
.tooltip-trigger:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Mobile tooltip - keep hover behavior but adjust positioning */
@media (max-width: 1024px) {
  .tooltip-trigger::after {
    left: 50%;
    top: auto;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    width: 250px;
    max-width: 280px;
    /* Keep the hover behavior - don't force visibility */
  }

  .tooltip-trigger::before {
    left: 50%;
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--tooltip-bg);
    border-right-color: transparent;
  }
}

/* ===== GLOBAL ANIMATION PATTERNS ===== */

/* Staggered card entrance animations */
.stagger-animation .card {
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-entrance);
}

.stagger-animation.in-view .card {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for up to 6 items */
.stagger-animation.in-view .card:nth-child(1) {
  transition-delay: 0.1s;
}

.stagger-animation.in-view .card:nth-child(2) {
  transition-delay: 0.2s;
}

.stagger-animation.in-view .card:nth-child(3) {
  transition-delay: 0.3s;
}

.stagger-animation.in-view .card:nth-child(4) {
  transition-delay: 0.4s;
}

.stagger-animation.in-view .card:nth-child(5) {
  transition-delay: 0.5s;
}

.stagger-animation.in-view .card:nth-child(6) {
  transition-delay: 0.6s;
}

/* Float in keyframes for legacy animations */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-left {
  animation: fadeInLeft 1s ease-out both;
}

.animate-right {
  animation: fadeInRight 1s ease-out both;
}

.animate-delay {
  animation: fadeInUp 1s ease-out 0.8s both;
}

/* ===== ACCESSIBILITY & REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

  .section,
  .card,
  .tooltip-trigger::after,
  .tooltip-trigger::before {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }

  .animate-left,
  .animate-right,
  .animate-delay {
    animation: none;
  }
}

/* ===== RESPONSIVE GLOBAL ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .section {
    padding: var(--space-4xl) var(--space-sm);
  }

  .card {
    padding: var(--space-lg);
  }

  .section-title {
    font-size: var(--text-3xl);
  }
}

@media (max-width: 480px) {
  .card {
    padding: var(--space-md);
  }

  .section-title {
    font-size: var(--text-2xl);
  }
}