/* ========================================================
   Portfolio Stylesheet - Zain Ghias Portfolio
   ========================================================
   
   This stylesheet contains all custom styling for the Quarto
   portfolio website using the Trestles theme.
   
   Sections:
   1. Global Styles & Animations
   2. Navigation Bar
   3. Profile Section (Left Sidebar)
   4. Layout & Sidebar
   5. Table of Contents
   6. KPI Section
   7. Experience Section
   8. About Section Cards
   9. Project Cards (Index Page)
   10. Projects Listing Page (Quarto Grid)
   11. Tools Section
   12. Dark Mode Styles
   13. Responsive Design
   ======================================================== */

/* ========================================================
   1. Global Styles & Animations
   ======================================================== */

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* Account for sticky header */
}

/* Enhanced smooth scrolling with momentum and page load animation */
body {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  overscroll-behavior: contain; /* Prevent scroll chaining */
  animation: fadeIn 0.6s ease-in-out;
  position: relative; /* For background pattern positioning */
}

/* ========================================================
   Background Pattern - Modern Grid with Radial Gradient
   ======================================================== */

/* Enhanced background design - diagonal lines with subtle corner gradients */
/* Using a single neutral blue-grey color that works well in both light and dark modes */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Radial gradient from top-left corner - balanced for both themes */
    radial-gradient(ellipse at top left, rgba(96, 165, 250, 0.035) 0%, transparent 50%),
    /* Radial gradient from top-right corner - balanced for both themes */
    radial-gradient(ellipse at top right, rgba(96, 165, 250, 0.035) 0%, transparent 50%),
    /* Radial gradient from bottom-left corner - balanced for both themes */
    radial-gradient(ellipse at bottom left, rgba(96, 165, 250, 0.035) 0%, transparent 50%),
    /* Radial gradient from bottom-right corner - balanced for both themes */
    radial-gradient(ellipse at bottom right, rgba(96, 165, 250, 0.035) 0%, transparent 50%),
    /* Diagonal lines - neutral grey-blue that works in both light and dark modes */
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(100, 116, 139, 0.08) 2px, rgba(100, 116, 139, 0.08) 4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  /* Ensure no animation or transition */
  animation: none !important;
  transition: none !important;
  will-change: auto;
}

/* Mobile optimization - less dense diagonal lines and lighter gradients */
@media (max-width: 768px) {
  body::before {
    background-image: 
      /* Lighter corner gradients on mobile */
      radial-gradient(ellipse at top left, rgba(96, 165, 250, 0.025) 0%, transparent 50%),
      radial-gradient(ellipse at top right, rgba(96, 165, 250, 0.025) 0%, transparent 50%),
      radial-gradient(ellipse at bottom left, rgba(96, 165, 250, 0.025) 0%, transparent 50%),
      radial-gradient(ellipse at bottom right, rgba(96, 165, 250, 0.025) 0%, transparent 50%),
      /* Less dense diagonal lines for mobile */
      repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(100, 116, 139, 0.06) 3px, rgba(100, 116, 139, 0.06) 6px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    /* Ensure no animation on mobile */
    animation: none !important;
    transition: none !important;
  }
}

/* Ensure content is above background */
#quarto-content,
main,
.quarto-layout-panel {
  position: relative;
  z-index: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Text fade-in animation with staggered timing */
.about-contents h1,
.about-contents h2,
.about-contents p,
.about-contents .callout-note {
  opacity: 0;
  animation: textFadeIn 0.8s ease-out forwards;
}

/* Stagger the text animations */
.about-contents h1 {
  animation-delay: 0.2s;
}

.about-contents h2 {
  animation-delay: 0.4s;
}

.about-contents p {
  animation-delay: 0.6s;
}

.about-contents .callout-note {
  animation-delay: 0.8s;
}

@keyframes textFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================
   2. Navigation Bar Styling - Modern Design
   ======================================================== */

/* Navbar background with glassmorphism effect */
.navbar {
  background: rgba(35, 39, 47, 0.95) !important;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Navbar brand/title styling */
.navbar .navbar-brand {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.navbar .navbar-brand:hover {
  color: #60a5fa !important;
  transform: translateY(-1px);
}

/* Navbar links - modern styling */
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

/* Active page indicator */
.navbar-nav .nav-link.active {
  color: #ffffff !important;
  background: rgba(0, 123, 255, 0.15) !important;
}

.navbar-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #007bff, #60a5fa);
  border-radius: 2px;
}

/* Navbar link hover effects */
.navbar-nav .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px);
}

/* Social icons - enhanced styling */
.navbar-nav .nav-item.compact .nav-link {
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.navbar-nav .nav-item.compact .nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) scale(1.1);
}

/* LinkedIn icon hover */
.navbar-nav .nav-link[href*="linkedin"]:hover {
  background: rgba(10, 102, 194, 0.2) !important;
}

.navbar-nav .nav-link[href*="linkedin"]:hover i {
  color: #0A66C2 !important;
}

/* GitHub icon hover */
.navbar-nav .nav-link[href*="github"]:hover {
  background: rgba(255, 152, 0, 0.2) !important;
}

.navbar-nav .nav-link[href*="github"]:hover i {
  color: #ff9800 !important;
}

/* Dark mode navbar - enhanced */
html[data-theme='dark'] .navbar {
  background: rgba(24, 24, 24, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme='dark'] .navbar .navbar-brand {
  color: #ffffff !important;
}

html[data-theme='dark'] .navbar .navbar-brand:hover {
  color: #60a5fa !important;
}

html[data-theme='dark'] .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme='dark'] .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme='dark'] .navbar-nav .nav-link.active {
  background: rgba(96, 165, 250, 0.2) !important;
}

html[data-theme='dark'] .navbar-nav .nav-link.active::after {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

/* Navbar toggle button (mobile) */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  transition: all 0.3s ease;
}

.navbar-toggler:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dark mode toggle button - enhanced visibility and modern styling */
.navbar .quarto-color-scheme-toggle,
.navbar button[title*="dark"],
.navbar button[title*="light"],
.navbar button[aria-label*="dark"],
.navbar button[aria-label*="light"],
.navbar button[onclick*="quartoToggleColorScheme"] {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.8rem !important;
  color: #ffffff !important;
  font-size: 1.15rem !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.navbar .quarto-color-scheme-toggle:hover,
.navbar button[title*="dark"]:hover,
.navbar button[title*="light"]:hover,
.navbar button[aria-label*="dark"]:hover,
.navbar button[aria-label*="light"]:hover,
.navbar button[onclick*="quartoToggleColorScheme"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.navbar .quarto-color-scheme-toggle i,
.navbar button[title*="dark"] i,
.navbar button[title*="light"] i,
.navbar button[aria-label*="dark"] i,
.navbar button[aria-label*="light"] i,
.navbar button[onclick*="quartoToggleColorScheme"] i {
  color: #ffd700 !important;
  font-size: 1.25rem !important;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

.navbar .quarto-color-scheme-toggle:hover i,
.navbar button[title*="dark"]:hover i,
.navbar button[title*="light"]:hover i,
.navbar button[aria-label*="dark"]:hover i,
.navbar button[aria-label*="light"]:hover i,
.navbar button[onclick*="quartoToggleColorScheme"]:hover i {
  transform: rotate(20deg) scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

html[data-theme='dark'] .navbar .quarto-color-scheme-toggle i,
html[data-theme='dark'] .navbar button[title*="dark"] i,
html[data-theme='dark'] .navbar button[title*="light"] i,
html[data-theme='dark'] .navbar button[aria-label*="dark"] i,
html[data-theme='dark'] .navbar button[aria-label*="light"] i,
html[data-theme='dark'] .navbar button[onclick*="quartoToggleColorScheme"] i {
  color: #ffd700 !important;
}

/* Dark mode toggle button - enhanced visibility */
.navbar .quarto-color-scheme-toggle,
.navbar button[title*="dark"],
.navbar button[title*="light"],
.navbar button[aria-label*="dark"],
.navbar button[aria-label*="light"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar .quarto-color-scheme-toggle:hover,
.navbar button[title*="dark"]:hover,
.navbar button[title*="light"]:hover,
.navbar button[aria-label*="dark"]:hover,
.navbar button[aria-label*="light"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.navbar .quarto-color-scheme-toggle i,
.navbar button[title*="dark"] i,
.navbar button[title*="light"] i,
.navbar button[aria-label*="dark"] i,
.navbar button[aria-label*="light"] i {
  color: #ffd700 !important;
  font-size: 1.2rem !important;
  transition: transform 0.3s ease;
}

.navbar .quarto-color-scheme-toggle:hover i,
.navbar button[title*="dark"]:hover i,
.navbar button[title*="light"]:hover i,
.navbar button[aria-label*="dark"]:hover i,
.navbar button[aria-label*="light"]:hover i {
  transform: rotate(15deg) scale(1.1);
}

html[data-theme='dark'] .navbar .quarto-color-scheme-toggle i,
html[data-theme='dark'] .navbar button[title*="dark"] i,
html[data-theme='dark'] .navbar button[title*="light"] i,
html[data-theme='dark'] .navbar button[aria-label*="dark"] i,
html[data-theme='dark'] .navbar button[aria-label*="light"] i {
  color: #ffd700 !important;
}

/* ========================================================
   3. Profile Section (Left Sidebar) - Social Links & Image
   ======================================================== */

/* Profile headline/subtitle styling - LinkedIn-style */
/* Ensure entire about-entity container centers its content */
.about-entity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.quarto-title-block {
  text-align: center !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quarto-title {
  text-align: center !important;
  width: 100%;
  display: block;
}

.quarto-title h1.title {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Letter-by-letter animation for name */
.name-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}

/* Letter fade-in animation - smooth and elegant */
@keyframes letterFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.quarto-title-meta {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Override any Quarto column-page styles */
.quarto-title-meta.column-page {
  text-align: center !important;
  align-items: center !important;
}

/* Left-align headers for non-index pages (resume, projects, blog) */
/* Override center alignment for pages that aren't the main index */
.quarto-title-block:not(.about-entity .quarto-title-block) {
  text-align: left !important;
  align-items: flex-start !important;
}

.quarto-title-block:not(.about-entity .quarto-title-block) .quarto-title,
.quarto-title-block:not(.about-entity .quarto-title-block) .quarto-title h1.title {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.quarto-title-block:not(.about-entity .quarto-title-block) .quarto-title-meta {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Force headline centering with maximum specificity */
.about-entity .quarto-title-meta .about-headline,
.quarto-title-meta .about-headline,
.about-headline {
  font-size: 0.95rem;
  color: #6c757d; /* Medium gray - readable in both light and dark mode */
  font-weight: 500; /* Medium weight for better readability */
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  clear: both !important;
}

/* Ensure line breaks display properly in headline */
.about-headline br {
  display: block;
  content: "";
  margin-top: 0.2rem;
}

/* Headline line styling with icons */
.headline-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  flex-wrap: nowrap;
  color: #6c757d; /* Medium gray - readable in both light and dark mode */
  /* Slide in from left animation */
  opacity: 0;
  transform: translateX(-18px);
  animation: headlineSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered animation for subtitle lines - appear after name completes */
/* Use nth-of-type to ignore the <br> element between lines */
.headline-line:nth-of-type(1) {
  animation-delay: 1.4s;
}

.headline-line:nth-of-type(2) {
  animation-delay: 1.55s;
}

/* Headline slide-in animation - smooth and elegant */
@keyframes headlineSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.headline-icon {
  display: inline-block;
  width: 20px; /* Increased from 16px */
  height: 20px; /* Increased from 16px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1; /* Full opacity for better visibility */
  flex-shrink: 0;
  margin-right: 0.5rem; /* Slightly increased spacing */
}

html[data-theme='dark'] .headline-icon {
  opacity: 1; /* Full opacity in dark mode too */
}

/* Work icon (briefcase) - blue color for better visibility */
.work-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
}

/* Education icon (graduation cap) - purple/indigo color for better visibility */
.education-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236633cc'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
}

html[data-theme='dark'] .headline-icon {
  opacity: 1;
}

/* Work icon - subtle blue tint in dark mode for better visibility */
html[data-theme='dark'] .work-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.3));
}

/* Education icon - subtle purple/indigo tint in dark mode for better visibility */
html[data-theme='dark'] .education-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.3));
}

/* Dark mode - use a lighter gray that's visible on dark background */
html[data-theme='dark'] .about-headline,
html[data-theme='dark'] .headline-line {
  color: #cbd5e1 !important; /* Light gray - visible on dark background, readable */
}

@media (max-width: 768px) {
  .about-headline {
    font-size: 0.85rem;
    margin-top: 0.4rem;
  }
  
  .headline-line {
    gap: 0.3rem;
    white-space: normal;
    font-size: 0.85rem;
  }
  
  .headline-icon {
    margin-right: 0.35rem;
    flex-shrink: 0;
    width: 18px; /* Slightly smaller on tablet but still larger than before */
    height: 18px;
  }
}

@media (max-width: 480px) {
  .about-headline {
    font-size: 0.75rem;
    margin-top: 0.3rem;
    line-height: 1.5;
  }
  
  .headline-line {
    gap: 0.25rem;
    font-size: 0.75rem;
  }
  
  .headline-icon {
    width: 16px; /* Larger on phone too */
    height: 16px;
    margin-right: 0.3rem;
  }
  
  /* KPI cards - phone optimizations */
  .kpi-section-top .kpi-grid {
    gap: 0.5rem; /* Tighter gap on phones */
  }
  
  .kpi-section-top .kpi-card {
    padding: 0.6rem 0.5rem; /* Reduced padding */
    min-height: 110px; /* Slightly smaller min-height */
  }
  
  .kpi-section-top .kpi-value {
    font-size: 1.5rem; /* Smaller value font */
    margin-bottom: 0.2rem;
  }
  
  .kpi-section-top .kpi-label {
    font-size: 0.7rem; /* Smaller label font */
    margin-top: 0.2rem;
    line-height: 1.2;
  }
  
  .kpi-section-top .kpi-card:first-child {
    padding-top: 0.8rem; /* Reduced top padding for first card */
  }
  
  /* Section header icons - mobile adjustments */
  .cert-icon,
  .projects-icon,
  .experience-icon,
  .tools-icon {
    padding-left: 1.5rem; /* Reduced padding on mobile */
    display: inline-flex; /* Better alignment */
    align-items: center; /* Center align icon with text */
  }
  
  .cert-icon::before,
  .projects-icon::before,
  .experience-icon::before,
  .tools-icon::before {
    width: 1.2rem; /* Slightly smaller icon on mobile */
    height: 1.2rem;
  }
  
  .section-header h2 {
    min-width: auto; /* Remove min-width constraint on mobile */
  }
}

/* Mobile navbar active indicator adjustments */
@media (max-width: 768px) {
  .navbar-nav .nav-link.active::after {
    width: 80%; /* Wider on mobile for better visibility */
    bottom: 0.15rem; /* Slightly higher */
    height: 2.5px; /* Slightly thicker */
  }
}

@media (max-width: 480px) {
  .navbar-nav .nav-link.active::after {
    width: 90%; /* Even wider on small phones */
    bottom: 0.1rem;
    height: 2.5px;
  }
}

/* Remove default green outline on social icon hover/focus */
.about-link:focus, .about-link:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* Smooth color and border transitions for about links and icons */
.about-link,
.about-link i {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.3s ease,
              border-color 0.3s ease;
}

/* Modern social media buttons - solid background in light mode, glassmorphism in dark */
.about-link {
  font-size: 1.3em !important;
  padding: 0.4em !important;
  display: inline-block;
  will-change: transform;
  border-radius: 12px !important;
  /* Solid background in light mode to block diagonal lines */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1.5px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  position: relative;
  z-index: 2; /* Ensure buttons are above background */
  /* Initial state for cool entrance animation */
  opacity: 0;
  transform: translateY(15px) scale(0.8);
  animation: iconCoolEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered animation for social icons - appear after subtitles complete */
.about-link:nth-child(1) {
  animation-delay: 1.9s;
}

.about-link:nth-child(2) {
  animation-delay: 2.0s;
}

.about-link:nth-child(3) {
  animation-delay: 2.1s;
}

/* Icon cool entrance animation - slide up with scale and fade */
@keyframes iconCoolEntrance {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.8);
  }
  60% {
    opacity: 0.9;
    transform: translateY(-3px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dark mode - transparent glassmorphism (lines look good in dark mode) */
body.quarto-dark .about-link {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* LinkedIn: blue icon with subtle border glow */
.about-link[href*="linkedin"] {
  border-color: rgba(10, 102, 194, 0.4) !important;
}
.about-link[href*="linkedin"] i {
  color: #0A66C2 !important;
}

/* LinkedIn: enhanced hover effect with glow - smooth transitions */
.about-link[href*="linkedin"]:hover, .about-link[href*="linkedin"]:focus {
  border-color: rgba(10, 102, 194, 0.8);
  background: rgba(10, 102, 194, 0.1);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 102, 194, 0.25), 0 2px 8px rgba(10, 102, 194, 0.15);
}
.about-link[href*="linkedin"]:hover i, .about-link[href*="linkedin"]:focus i {
  color: #004182 !important;
}

/* GitHub: orange icon with subtle border glow */
.about-link[href*="github"] {
  border-color: rgba(255, 152, 0, 0.4) !important;
}
.about-link[href*="github"] i {
  color: #ff9800 !important;
}

/* GitHub: enhanced hover effect with glow - smooth transitions */
.about-link[href*="github"]:hover, .about-link[href*="github"]:focus {
  border-color: rgba(255, 152, 0, 0.8);
  background: rgba(255, 152, 0, 0.1);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.25), 0 2px 8px rgba(255, 152, 0, 0.15);
}
.about-link[href*="github"]:hover i, .about-link[href*="github"]:focus i {
  color: #e68900 !important;
}

/* Email: green icon with subtle border glow */
.about-link[href^="mailto"] {
  border-color: rgba(46, 204, 64, 0.4) !important;
}
.about-link[href^="mailto"] i {
  color: #2ecc40 !important;
}

/* Email: enhanced hover effect with glow - smooth transitions */
.about-link[href^="mailto"]:hover, .about-link[href^="mailto"]:focus {
  border-color: rgba(46, 204, 64, 0.8);
  background: rgba(46, 204, 64, 0.1);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 204, 64, 0.25), 0 2px 8px rgba(46, 204, 64, 0.15);
}
.about-link[href^="mailto"]:hover i, .about-link[href^="mailto"]:focus i {
  color: #25a035 !important;
}


/* Desktop profile image sizing */
.about-image {
  width: 375px !important;
  height: 375px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.3s ease;
  cursor: pointer;
  will-change: transform;
  object-fit: cover;
  object-position: center 75%;
  /* Initial state for animation */
  opacity: 0;
  transform: scale(0.95);
  animation: profileImageFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

/* Once image is loaded, make it fully opaque */
.about-image.loaded {
  opacity: 1;
}

/* Profile image fade-in animation - smooth and elegant */
@keyframes profileImageFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.about-image:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18), 0 5px 18px rgba(0, 0, 0, 0.12) !important;
}

/* Responsive profile image sizing */
@media (max-width: 768px) {
  .about-image {
    width: 190px !important;
    height: 190px !important;
    margin-top: 2rem !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Make social icons horizontal on mobile */
  .about-links {
    display: flex !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    flex-direction: row !important;
  }
  
  /* Ensure name letters animate smoothly on mobile */
  .name-letter {
    display: inline-block;
  }
  
  .quarto-title h1.title {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .about-image {
    width: 160px !important;
    height: 160px !important;
    margin-top: 1.5rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Adjust spacing for smaller screens */
  .about-links {
    gap: 1rem !important;
  }
}

/* ========================================================
   Projects Listing Page (Quarto Grid Cards)
   ======================================================== */

/* Projects listing page card styling - modern design */
.quarto-listing .card,
.quarto-grid-item .card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 16px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden;
  position: relative;
}

.quarto-listing .card:hover,
.quarto-grid-item .card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0, 123, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: #007bff !important;
}

/* Listing page images */
.quarto-listing .card img,
.quarto-grid-item .card img {
  width: 100%;
  object-fit: contain;
  padding: 1rem;
  background: #f8f9fa;
  transform: scale(0.95);
  transform-origin: center;
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  border-radius: 8px 8px 0 0;
}

.quarto-listing .card:hover img,
.quarto-grid-item .card:hover img {
  transform: scale(1);
}

/* Listing page card body */
.quarto-listing .card-body,
.quarto-grid-item .card-body {
  padding: 1.5rem !important;
}

/* Listing page typography */
.quarto-listing .card-title,
.quarto-grid-item .card-title {
  margin-bottom: 0.5rem !important;
  color: #2c3e50 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
}

.quarto-listing .card-text,
.quarto-grid-item .card-text {
  color: #495057 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.75rem !important;
}

/* Date/attribution styling */
.quarto-listing .card-attribution,
.quarto-grid-item .card-attribution,
.quarto-listing .listing-date,
.quarto-grid-item .listing-date {
  color: #6c757d !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Dark mode - Projects listing page - enhanced visibility */
html[data-theme='dark'] .quarto-listing .card,
html[data-theme='dark'] .quarto-grid-item .card {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
  border-color: #4a5568 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme='dark'] .quarto-listing .card:hover,
html[data-theme='dark'] .quarto-grid-item .card:hover {
  box-shadow: 0 12px 32px rgba(96, 165, 250, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border-color: #60a5fa !important;
}

html[data-theme='dark'] .quarto-listing .card-title,
html[data-theme='dark'] .quarto-grid-item .card-title,
html[data-theme='dark'] .listing-title {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .quarto-listing .card-text,
html[data-theme='dark'] .quarto-grid-item .card-text,
html[data-theme='dark'] .listing-description,
html[data-theme='dark'] .listing-description p {
  color: #cbd5e0 !important;
}

html[data-theme='dark'] .card-attribution,
html[data-theme='dark'] .listing-date,
html[data-theme='dark'] .card-text-small {
  color: #a0aec0 !important;
}

html[data-theme='dark'] .quarto-listing .card img,
html[data-theme='dark'] .quarto-grid-item .card img {
  background: #1a202c !important;
  padding: 1rem !important;
}

html[data-theme='dark'] .quarto-listing .card:hover img,
html[data-theme='dark'] .quarto-grid-item .card:hover img {
  background: #2d3748 !important;
}

/* Responsive grid adjustments for projects page */
@media (max-width: 992px) {
  .quarto-listing,
  .quarto-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .quarto-listing,
  .quarto-grid {
    grid-template-columns: 1fr !important;
  }
  
  .quarto-listing .card-body,
  .quarto-grid-item .card-body {
    padding: 1.25rem !important;
  }
}

/* ========================================================
   Fixed Left Sidebar for Trestles Template
   ======================================================== */

/* Make the left sidebar (about-entity) sticky with smooth transitions */
/* Keep centering from earlier definition */
.about-entity {
  position: sticky !important;
  top: 120px !important;
  height: fit-content;
  z-index: 10;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateZ(0); /* Force hardware acceleration */
  /* Maintain centering */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Modern sidebar divider - gradient line with subtle glow */
.about-entity::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 123, 255, 0.2) 20%,
    rgba(0, 123, 255, 0.4) 50%,
    rgba(0, 123, 255, 0.2) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.15);
  z-index: 1;
  pointer-events: none;
}

/* Dark mode divider - blue tint */
html[data-theme='dark'] .about-entity::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(96, 165, 250, 0.3) 20%,
    rgba(96, 165, 250, 0.5) 50%,
    rgba(96, 165, 250, 0.3) 80%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.2);
}

/* Ensure the right content area can scroll independently with smooth transitions */
.about-contents {
  flex: 1;
  min-height: 100vh;
  position: relative;
  transition: opacity 0.3s ease;
}

/* Smooth transitions for content elements */
.about-contents p,
.about-contents h2,
.about-contents .callout-note {
  transition: opacity 0.3s ease;
}

/* Responsive: disable sticky on mobile */
@media (max-width: 768px) {
  .about-entity {
    position: static !important;
    top: auto !important;
  }
  
  /* Hide divider on mobile */
  .about-entity::after {
    display: none;
  }
  
  /* Ensure content has proper spacing on mobile */
  .about-contents {
    margin-top: 1rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Hide footer on mobile for cleaner look */
  .footer {
    display: none !important;
  }
  
  /* Remove extra bottom margin since footer is hidden */
  .about-contents > *:last-child {
    margin-bottom: 1rem !important;
  }
}

/* --- Trestles mobile/stacking fixes --- */

/* 1) Desktop: allow sticky, but keep z-index low so it doesn't layer over footer */
@media (min-width: 993px) {
  .about-entity {
    position: sticky !important;
    top: 96px !important;     /* a bit tighter than 120px */
    z-index: 1 !important;    /* keep it beneath content/footer layers */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
    /* Maintain centering */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* 2) Tablet + mobile: turn OFF sticky completely so stacking is clean */
@media (max-width: 992px) {
  .about-entity {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }
}

/* ========================================================
   Smooth Table of Contents Navigation (All Pages)
   ======================================================== */

/* TOC sidebar container */
.quarto-sidebar {
  transition: opacity 0.3s ease;
}

/* TOC listing container */
.quarto-sidebar .quarto-listing {
  transition: all 0.3s ease;
  overflow: hidden;
}

/* TOC items - smooth appearance animation */
.quarto-sidebar .quarto-listing-item {
  opacity: 0;
  transform: translateY(-10px);
  animation: tocItemAppear 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Staggered animation delays for smooth cascading */
.quarto-sidebar .quarto-listing-item:nth-child(1) { animation-delay: 0.1s; }
.quarto-sidebar .quarto-listing-item:nth-child(2) { animation-delay: 0.15s; }
.quarto-sidebar .quarto-listing-item:nth-child(3) { animation-delay: 0.2s; }
.quarto-sidebar .quarto-listing-item:nth-child(4) { animation-delay: 0.25s; }
.quarto-sidebar .quarto-listing-item:nth-child(5) { animation-delay: 0.3s; }
.quarto-sidebar .quarto-listing-item:nth-child(6) { animation-delay: 0.35s; }
.quarto-sidebar .quarto-listing-item:nth-child(7) { animation-delay: 0.4s; }
.quarto-sidebar .quarto-listing-item:nth-child(8) { animation-delay: 0.45s; }

/* TOC item appearance animation */
@keyframes tocItemAppear {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-5px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* TOC links styling */
.quarto-sidebar .quarto-listing-item a {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  margin: 0.15rem 0;
  display: block;
  position: relative;
  overflow: hidden;
}

/* Hover effects for TOC links */
.quarto-sidebar .quarto-listing-item a:hover {
  background-color: rgba(0, 123, 255, 0.1);
  transform: translateX(3px);
  transition: all 0.2s ease;
}

/* Active TOC item highlighting */
.quarto-sidebar .quarto-listing-item.active a {
  background-color: rgba(0, 123, 255, 0.15);
  color: #007bff;
  font-weight: 500;
}

/* ========================================================
   KPI Section Styling
   ======================================================== */

.kpi-section {
  margin: 2.5rem 0;
}

.kpi-section-top {
  margin: 0 0 0.5rem 0;
}

/* Subtle Key Metrics title */
.kpi-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html[data-theme='dark'] .kpi-section-title {
  color: #a0aec0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.kpi-section-top .kpi-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: 1rem;
  align-items: stretch;
  width: 100%;
  display: grid;
}

.kpi-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}

/* Initial animation state - cards start invisible and slightly below */
.kpi-card.kpi-initial {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}

/* Automatic entrance animation - triggered when card becomes visible */
.kpi-card.kpi-animating {
  animation: kpiEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes kpiEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  60% {
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Shimmer effect during entrance animation - override transition */
/* Delay shimmer to start after fade-in completes with more delay */
/* Base delay: 0.6s (card animation) + 0.5s (extra delay) = 1.1s, then staggered */
.kpi-card.kpi-animating::before {
  animation: kpiShimmerEntrance 0.8s ease-out 1.1s;
  transition: none !important;
}

@keyframes kpiShimmerEntrance {
  0% {
    left: -100%;
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0.8;
  }
}

.kpi-section-top .kpi-card {
  padding: 0.75rem 0.7rem;
  min-height: 130px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}


.kpi-section-top .kpi-card:first-child {
  padding-top: 1.1rem;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.2), transparent);
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

/* Disable transition during entrance animation to allow keyframe animation */
.kpi-card.kpi-animating::before {
  transition: none;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.25), transparent);
}

/* Hover effect - only applies after initial animation completes */
.kpi-card:not(.kpi-animating):hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15);
  border-color: #007bff;
  z-index: 10;
  position: relative;
}

.kpi-card:not(.kpi-animating):hover::before {
  left: 100%;
}

.kpi-card:not(.kpi-animating):hover .kpi-value {
  transform: scale(1.1);
  color: #0056b3;
  position: relative;
  z-index: 2;
}

.kpi-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #007bff;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Subtle glow pulse animation */
  animation: kpiGlowPulse 4s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.3));
}

@keyframes kpiGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.5));
  }
}

.kpi-section-top .kpi-value {
  font-size: 1.85rem;
  margin-bottom: 0.3rem;
  line-height: 1.1;
  margin-top: 0.5rem;
}

.kpi-label {
  font-size: 0.95rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 1rem;
  line-height: 1.3;
  min-height: 2.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kpi-section-top .kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.3rem;
  margin-bottom: 0;
  line-height: 1.3;
  flex-shrink: 0;
  color: #495057;
  letter-spacing: 0.01em;
}

.kpi-section-top .kpi-card:first-child .kpi-label {
  margin-bottom: 0.25rem;
}

/* Align labels at same height for all cards (accounting for progress bar on first card) */
.kpi-section-top .kpi-card:not(:first-child) .kpi-label {
  margin-bottom: 0.4rem;
}

/* Degree type indicator */
.kpi-degree-type {
  display: block;
  font-size: 0.6rem;
  color: #007bff;
  font-weight: 600;
  margin-top: 0.15rem;
  opacity: 0.8;
  line-height: 1.1;
}

html[data-theme='dark'] .kpi-degree-type {
  color: #60a5fa;
}

/* KPI Value Wrapper for badge positioning */
.kpi-value-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  flex-shrink: 0;
}

/* KPI Badge for degree year indicator - subtle style */
.kpi-badge {
  position: absolute;
  top: -0.6rem;
  right: 0;
  background: transparent;
  color: #6c757d;
  padding: 0.15rem 0.5rem;
  border: none;
  border-radius: 0;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 1;
}

.kpi-section-top .kpi-badge {
  top: -0.55rem;
  padding: 0.12rem 0.4rem;
  font-size: 0.6rem;
}

html[data-theme='dark'] .kpi-badge {
  color: #a0aec0;
  background: transparent;
}

/* Progress Bar Styling */
.progress-bar-container {
  margin-top: 1rem;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.kpi-section-top .progress-bar-container {
  margin-top: 0.25rem;
  margin-bottom: 0;
  height: 6px;
  flex-shrink: 0;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: block;
  min-height: 6px;
  visibility: visible;
  opacity: 1;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
  border-radius: 4px;
  width: 0%;
  transition: width 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  display: block;
  visibility: visible;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6), transparent);
  width: 30%;
  animation: shimmer 1.5s infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes shimmer {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(400%); }
}

/* Dark mode KPI cards */
html[data-theme='dark'] .kpi-card {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .kpi-value {
  color: #60a5fa;
  animation: kpiGlowPulseDark 4s ease-in-out infinite;
}

@keyframes kpiGlowPulseDark {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
  }
}

html[data-theme='dark'] .kpi-label {
  color: #e2e8f0;
}

html[data-theme='dark'] .kpi-section-top .kpi-label {
  color: #e2e8f0;
  font-weight: 600;
}

html[data-theme='dark'] .progress-bar-container {
  background: #4a5568;
}

html[data-theme='dark'] .kpi-card:not(.kpi-animating):hover {
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25);
  border-color: #007bff;
}

html[data-theme='dark'] .kpi-card:not(.kpi-animating):hover .kpi-value {
  color: #60a5fa;
}


/* Section Header with Badge */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.section-header h2 {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* Professional section icons */
.cert-icon,
.projects-icon,
.experience-icon,
.tools-icon {
  position: relative;
  padding-left: 1.8rem;
}

.cert-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}

.projects-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}

.experience-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23007bff' d='M 26 6 C 23.81506 6 22 7.8150603 22 10 L 22 12 L 5 12 L 5 29 C 5 31.21 6.79 33 9 33 L 28 33 L 28 29 L 36 29 L 36 33 L 55 33 C 57.21 33 59 31.21 59 29 L 59 12 L 42 12 L 42 10 C 42 7.8150603 40.18494 6 38 6 L 26 6 z M 26 10 L 38 10 L 38 12 L 26 12 L 26 10 z M 30 31 L 30 37 L 34 37 L 34 31 L 30 31 z M 5 35 L 5 50 C 5 52.21 6.79 54 9 54 L 55 54 C 57.21 54 59 52.21 59 50 L 59 36 L 36 35.570312 L 36 39 L 28 39 L 28 35.429688 L 5 35 z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}

.tools-icon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}

html[data-theme='dark'] .cert-icon::before,
html[data-theme='dark'] .projects-icon::before,
html[data-theme='dark'] .experience-icon::before,
html[data-theme='dark'] .tools-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E");
}

html[data-theme='dark'] .projects-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath d='M10 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

html[data-theme='dark'] .experience-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%2360a5fa' d='M 26 6 C 23.81506 6 22 7.8150603 22 10 L 22 12 L 5 12 L 5 29 C 5 31.21 6.79 33 9 33 L 28 33 L 28 29 L 36 29 L 36 33 L 55 33 C 57.21 33 59 31.21 59 29 L 59 12 L 42 12 L 42 10 C 42 7.8150603 40.18494 6 38 6 L 26 6 z M 26 10 L 38 10 L 38 12 L 26 12 L 26 10 z M 30 31 L 30 37 L 34 37 L 34 31 L 30 31 z M 5 35 L 5 50 C 5 52.21 6.79 54 9 54 L 55 54 C 57.21 54 59 52.21 59 50 L 59 36 L 36 35.570312 L 36 39 L 28 39 L 28 35.429688 L 5 35 z'/%3E%3C/svg%3E");
}

html[data-theme='dark'] .tools-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2360a5fa'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}

/* Python icon in tools section - embedded SVG allows animations */
.tool-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

.python-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.python-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.section-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  white-space: nowrap;
}

html[data-theme='dark'] .section-badge {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
  color: #a0aec0;
}

/* KPI Carousel Styling */
.kpi-carousel-container {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.kpi-carousel-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.kpi-carousel-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.kpi-carousel-page {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  display: block;
}

.kpi-carousel-btn {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dee2e6;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #007bff;
  font-size: 1.2rem;
}

.kpi-carousel-btn.hidden {
  display: none;
}

.kpi-carousel-btn:hover {
  background: #ffffff;
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.kpi-carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.kpi-carousel-prev {
  left: -18px;
}

.kpi-carousel-next {
  right: -18px;
}

.kpi-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  position: relative;
  z-index: 5;
}

.kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dee2e6;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.kpi-dot:hover {
  background: #adb5bd;
  transform: scale(1.2);
}

.kpi-dot.active {
  background: #007bff;
  width: 24px;
  border-radius: 4px;
}

html[data-theme='dark'] .kpi-carousel-btn {
  background: rgba(45, 55, 72, 0.9);
  border-color: #4a5568;
  color: #60a5fa;
}

html[data-theme='dark'] .kpi-carousel-btn:hover {
  background: #2d3748;
  border-color: #007bff;
}

html[data-theme='dark'] .kpi-dot {
  background: #4a5568;
}

html[data-theme='dark'] .kpi-dot:hover {
  background: #6c757d;
}

html[data-theme='dark'] .kpi-dot.active {
  background: #007bff;
}

/* Responsive KPI section */
@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .kpi-card {
    padding: 1.25rem;
  }
  
  .kpi-value {
    font-size: 2rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .kpi-carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .kpi-carousel-prev {
    left: -16px;
  }
  
  .kpi-carousel-next {
    right: -16px;
  }
}

/* ========================================================
   Experience Section Styling
   ======================================================== */

/* Experience grid - two-column layout */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

/* Experience card styling - 3D flip container */
.experience-card {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0;
  position: relative;
  perspective: 1000px; /* 3D perspective for flip effect */
  /* Fixed height to prevent layout shifts - taller for more content */
  height: 280px;
  min-height: 280px;
  /* Initial hidden state - will be animated by JavaScript */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  will-change: transform, opacity;
}

/* Card visible state - applied by JavaScript */
.experience-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inner container that flips */
.experience-card .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); /* Smooth, slightly bouncy flip */
  transform-style: preserve-3d;
  height: 280px; /* Match parent height exactly */
  pointer-events: none; /* Allow clicks to pass through to parent */
}

/* Flipped state */
.experience-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Front and back faces */
.experience-card .card-front,
.experience-card .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Front face */
.experience-card .card-front {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  border-left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: auto; /* Re-enable pointer events for content */
}

/* Active experience indicator - subtle pulsing green dot */
.experience-card.experience-active .card-front::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  animation: activePulse 2s ease-in-out infinite;
}

html[data-theme='dark'] .experience-card.experience-active .card-front::after {
  background: #48bb78;
  box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
  animation: activePulseDark 2s ease-in-out infinite;
}

@keyframes activePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

@keyframes activePulseDark {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(72, 187, 120, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
  }
}

/* Back face - rotated 180deg initially */
.experience-card .card-back {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #dee2e6;
  border-left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  z-index: 1;
  pointer-events: auto; /* Re-enable pointer events for content */
  overflow-y: auto;
  overflow-x: hidden;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 123, 255, 0.3) transparent;
}

/* Modern custom scrollbar for webkit browsers */
.experience-card .card-back::-webkit-scrollbar {
  width: 6px;
}

.experience-card .card-back::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.experience-card .card-back::-webkit-scrollbar-thumb {
  background: rgba(0, 123, 255, 0.3);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.experience-card .card-back::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 123, 255, 0.5);
}

/* Flip hint text */
.flip-hint {
  font-size: 0.7rem;
  color: #6c757d;
  opacity: 0.6;
  margin-top: 0.5rem;
  font-style: italic;
  text-align: right;
  transition: opacity 0.2s ease;
}

.experience-card:hover .flip-hint {
  opacity: 0.8;
}

/* Top-right flip indicator - appears once when card becomes visible */
.flip-indicator {
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  width: auto;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(0, 123, 255, 0.08);
  border-radius: 10px;
  padding: 0 0.4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 3;
}

.flip-indicator::before {
  content: '↻';
  font-size: 0.75rem;
  color: #007bff;
  font-weight: 600;
}

.flip-indicator::after {
  content: 'Click to flip';
  font-size: 0.58rem;
  color: #007bff;
  font-weight: 400;
  opacity: 0.7;
  white-space: nowrap;
}

/* For certificate cards, move indicator slightly left to avoid green dot */
.experience-card.certificate-card .flip-indicator {
  right: 2.5rem;
}

/* Certification status indicators - completed ones: higher opacity, lighter green */
.experience-card.certificate-card.certificate-completed .card-front::after {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  opacity: 0.75 !important;
}

html[data-theme='dark'] .experience-card.certificate-card.certificate-completed .card-front::after {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  opacity: 0.8 !important;
}

/* Ongoing certifications: lower opacity */
.experience-card.certificate-card.certificate-ongoing .card-front::after {
  opacity: 0.25 !important;
}

html[data-theme='dark'] .experience-card.certificate-card.certificate-ongoing .card-front::after {
  opacity: 0.3 !important;
}

/* Show indicator when card becomes visible - one-time animation */
.experience-card.card-visible .flip-indicator {
  animation: pulse-indicator 3.5s ease-in-out;
}

@keyframes pulse-indicator {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1.1);
  }
  30% {
    opacity: 0.85;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.05);
  }
  60% {
    opacity: 0.8;
    transform: scale(1);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.02);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Hide indicator after animation or when card is flipped */
.experience-card.flipped .flip-indicator,
.experience-card.card-interacted .flip-indicator {
  opacity: 0;
  animation: none;
}

/* Dark mode flip indicator */
html[data-theme='dark'] .flip-indicator {
  background: rgba(0, 123, 255, 0.15);
}

html[data-theme='dark'] .flip-indicator::before,
html[data-theme='dark'] .flip-indicator::after {
  color: #4da3ff;
}

/* Border animation on front face */
.experience-card .card-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
  z-index: 1;
  /* Border animation delayed - starts after card appears */
  transition: height 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

/* Border animation only starts after card is visible */
.experience-card.card-visible.border-animated .card-front::before {
  height: 100%;
}

.experience-card.certificate-card.card-visible.border-animated .card-front::before {
  background: linear-gradient(180deg, #28a745 0%, #20c997 100%);
}

/* Hover effects - subtle shadow and border only, no transform to avoid conflicts */
.experience-card:not(.flipped):hover .card-front {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.12);
  border-color: #007bff;
  border-left-width: 4px;
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.experience-card:not(.flipped):hover .card-front::before {
  width: 4px;
  height: 100%;
}

/* Smooth hover for back face when flipped - subtle shadow only */
.experience-card.flipped:hover .card-back {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.12);
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* Certificate card - different color scheme */
.experience-card.certificate-card .card-front {
  background: linear-gradient(135deg, #f8fff9 0%, #f0f9f4 100%);
  border-left-color: #28a745;
}

.experience-card.certificate-card .card-front::before {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.experience-card.certificate-card:not(.flipped):hover .card-front {
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.15);
  border-left-color: #28a745;
}

.experience-card.certificate-card .card-front::after {
  content: '';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-radius: 50%;
  opacity: 0.3;
  z-index: 1;
}

/* Typography for both front and back */
.experience-card .card-front strong,
.experience-card .card-back strong {
  display: block;
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.experience-card .card-front em,
.experience-card .card-back em {
  display: block;
  color: #6c757d;
  font-size: 0.9rem;
  font-style: normal;
  margin-bottom: 0.2rem;
}

.experience-card .card-front p,
.experience-card .card-back p {
  color: #495057;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.6rem 0 0 0;
}

/* Back card specific styling */
.experience-card .card-back {
  padding-top: 1.1rem;
}

.experience-card .card-back strong {
  margin-bottom: 0.6rem;
  margin-top: 0;
  font-size: 0.95rem;
  color: #2c3e50;
  display: block;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.experience-card .card-back strong:first-of-type {
  margin-top: 0;
}

.experience-card .card-back p {
  margin: 0 0 0.8rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #495057;
}

.experience-card .card-back p:last-of-type {
  margin-bottom: 0;
}

/* Technologies section on back */
.experience-card .card-back strong:last-of-type {
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

/* Remove any list styling if present */
.experience-card .card-back ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Flip hint removed - now shown in top indicator */

/* Dark mode experience cards - lighter background for contrast */
html[data-theme='dark'] .experience-card .card-front,
html[data-theme='dark'] .experience-card .card-back {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  border-color: #4b5563 !important;
  border-left-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .experience-card:not(.flipped):hover .card-front {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}

html[data-theme='dark'] .experience-card.certificate-card .card-front {
  background: linear-gradient(135deg, #1e3a2e 0%, #1a2e24 100%);
  border-left-color: #28a745;
}

html[data-theme='dark'] .experience-card.certificate-card:not(.flipped):hover .card-front {
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.2);
}

html[data-theme='dark'] .experience-card .card-front strong,
html[data-theme='dark'] .experience-card .card-back strong {
  color: #ffffff !important;
}

html[data-theme='dark'] .experience-card .card-front em,
html[data-theme='dark'] .experience-card .card-back em {
  color: #e0e0e0 !important;
}

html[data-theme='dark'] .experience-card .card-front p,
html[data-theme='dark'] .experience-card .card-back p,
html[data-theme='dark'] .experience-card .card-back ul {
  color: #ffffff !important;
}

html[data-theme='dark'] .flip-hint {
  color: #a0aec0;
}

/* Dark mode scrollbar */
html[data-theme='dark'] .experience-card .card-back {
  scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
}

html[data-theme='dark'] .experience-card .card-back::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.3);
}

html[data-theme='dark'] .experience-card .card-back::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.5);
}


/* ========================================================
   About Section Cards
   ======================================================== */

.about-intro-card,
.about-section-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  border-left: 0;
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
              0 2px 4px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow, opacity;
  /* Initial hidden state - will be animated by JavaScript */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Subtle background pattern overlay */
.about-intro-card::after,
.about-section-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 123, 255, 0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-intro-card:hover::after,
.about-section-card:hover::after {
  opacity: 1;
}

/* Card visible state - applied by JavaScript */
.about-intro-card.card-visible,
.about-section-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-intro-card::before,
.about-section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
  z-index: 0;
  /* Border animation delayed - starts after card appears, slower animation */
  transition: height 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

/* Border animation only starts after card is visible */
.about-intro-card.card-visible.border-animated::before,
.about-section-card.card-visible.border-animated::before {
  height: 100%;
}

.about-intro-card:hover,
.about-section-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15),
              0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-intro-card.border-animated:hover::before,
.about-section-card.border-animated:hover::before {
  width: 4px;
  height: 100%;
}

.about-intro-card h2,
.about-section-card h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #2c3e50 0%, #007bff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Add subtle accent line under headers - enhanced with individual animation */
.about-intro-card h2::after,
.about-section-card h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #007bff 0%, rgba(0, 123, 255, 0.5) 50%, rgba(0, 123, 255, 0.3) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  /* Individual animation - will be triggered by JavaScript with staggered delays */
}

/* Animated shimmer on accent lines after they expand */
.about-intro-card.card-visible h2::after,
.about-section-card.card-visible h3::after {
  animation: accentLineExpandEnhanced 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards,
             accentLineShimmer 3s ease-in-out 1.6s infinite;
}

@keyframes accentLineShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Animation is now combined above with shimmer */

@keyframes accentLineExpandEnhanced {
  0% {
    width: 0;
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 60px;
    opacity: 1;
    transform: scaleX(1);
  }
}

.about-intro-card p,
.about-section-card p {
  color: #495057;
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* Enhanced bold text with subtle gradient highlight */
.about-intro-card p strong,
.about-section-card p strong {
  color: #007bff;
  font-weight: 700;
  position: relative;
  background: linear-gradient(120deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
  padding: 0 2px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.about-intro-card:hover p strong,
.about-section-card:hover p strong {
  background: linear-gradient(120deg, rgba(0, 123, 255, 0.15) 0%, rgba(0, 123, 255, 0.08) 100%);
}

/* Dark mode about cards */
html[data-theme='dark'] .about-intro-card,
html[data-theme='dark'] .about-section-card {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
  border-left-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .about-intro-card h2,
html[data-theme='dark'] .about-section-card h3 {
  background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme='dark'] .about-intro-card h2::after,
html[data-theme='dark'] .about-section-card h3::after {
  background: linear-gradient(90deg, #60a5fa 0%, rgba(96, 165, 250, 0.3) 100%);
}

html[data-theme='dark'] .about-intro-card p,
html[data-theme='dark'] .about-section-card p {
  color: #e2e8f0 !important;
}

html[data-theme='dark'] .about-intro-card p strong,
html[data-theme='dark'] .about-section-card p strong {
  color: #60a5fa;
  background: linear-gradient(120deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.08) 100%);
}

html[data-theme='dark'] .about-intro-card:hover p strong,
html[data-theme='dark'] .about-section-card:hover p strong {
  background: linear-gradient(120deg, rgba(96, 165, 250, 0.2) 0%, rgba(96, 165, 250, 0.12) 100%);
}

/* ========================================================
   Projects Section Styling
   ======================================================== */

/* Projects grid - two-column layout */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

/* Project card styling */
.project-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  border-left: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  will-change: box-shadow, opacity;
  /* Initial hidden state - will be animated by JavaScript */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card visible state */
.project-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Border animation */
.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
  z-index: 1;
  transition: height 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.project-card.card-visible.border-animated::before {
  height: 100%;
}

/* Project image container */
.project-image-container {
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.5rem;
  box-sizing: border-box;
}

.project-placeholder {
  font-size: 4rem;
  opacity: 0.3;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-image {
  max-width: 70%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  display: block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

/* Project content */
.project-content {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.project-content strong {
  display: block;
  color: #2c3e50;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.project-content p {
  color: #495057;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.5rem 0 0.75rem 0;
  flex-grow: 1;
}

.project-content em {
  display: block;
  color: #6c757d;
  font-size: 0.8rem;
  font-style: normal;
  margin-top: 0.5rem;
}

/* Project button - styled as button but uses anchor for accessibility */
.project-btn {
  margin-top: auto;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
  width: 100%;
  margin-top: 1rem;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.project-btn:hover:not(.project-btn-disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

.project-btn:active:not(.project-btn-disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* Disabled button for coming soon */
.project-btn-disabled,
button.project-btn-disabled {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  color: #6c757d;
  cursor: not-allowed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.project-btn-disabled:hover,
button.project-btn-disabled:hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

/* Hover effects */
.project-card:hover {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.12);
  border-color: #007bff;
  border-left-width: 4px;
}

.project-card:hover::before {
  width: 4px;
  height: 100%;
}

/* Dark mode project cards */
html[data-theme='dark'] .project-card {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
  border-left-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .project-image-container {
  background: #1a202c;
}

html[data-theme='dark'] .project-content strong {
  color: #ffffff !important;
}

html[data-theme='dark'] .project-content p {
  color: #ffffff !important;
}

html[data-theme='dark'] .project-content em {
  color: #e0e0e0 !important;
}

html[data-theme='dark'] .project-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

html[data-theme='dark'] .project-btn:hover:not(.project-btn-disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

html[data-theme='dark'] .project-btn-disabled {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  color: #a0aec0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .project-card:hover {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2);
  border-color: #007bff;
}

/* Projects page main content text - dark mode */
html[data-theme='dark'] #quarto-document-content,
html[data-theme='dark'] #quarto-document-content p,
html[data-theme='dark'] #quarto-document-content h1,
html[data-theme='dark'] #quarto-document-content h2 {
  color: #ffffff !important;
}

html[data-theme='dark'] .text-muted {
  color: #e0e0e0 !important;
  opacity: 0.9;
}

/* Dashboard preview image - slightly larger but uniform with other card */
.project-image.dashboard-preview {
  max-width: 85% !important;
  max-height: 90% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  object-position: center right;
  transform: translateX(5%);
}

.project-card:hover .project-image.dashboard-preview {
  transform: translateX(5%) scale(1.05);
}

/* Keep container height same as other cards for uniformity */
.project-card:has(.project-image.dashboard-preview) .project-image-container {
  height: 190px !important;
  padding: 1rem !important;
  overflow: hidden;
}

/* ========================================================
   Dark Mode - Main Index Page Text Colors
   ======================================================== */

/* All text elements - bright white for readability */
html[data-theme='dark'] .about-contents,
html[data-theme='dark'] main,
html[data-theme='dark'] .about-contents p,
html[data-theme='dark'] .about-contents li,
html[data-theme='dark'] .about-contents span,
html[data-theme='dark'] .section-header,
html[data-theme='dark'] .section-header h2,
html[data-theme='dark'] body,
html[data-theme='dark'] body p,
html[data-theme='dark'] body li,
html[data-theme='dark'] .quarto-title-meta {
  color: #ffffff !important;
}

/* Headings - white */
html[data-theme='dark'] .about-contents h2,
html[data-theme='dark'] .about-contents h3,
html[data-theme='dark'] .about-contents h4,
html[data-theme='dark'] main h2,
html[data-theme='dark'] main h3,
html[data-theme='dark'] main h4,
html[data-theme='dark'] .section-header h2 {
  color: #ffffff !important;
}

/* Strong text - white */
html[data-theme='dark'] .about-contents strong,
html[data-theme='dark'] .project-content strong,
html[data-theme='dark'] .experience-card strong {
  color: #ffffff !important;
}

/* Emphasized text - light gray */
html[data-theme='dark'] .about-contents em,
html[data-theme='dark'] .project-content em,
html[data-theme='dark'] .experience-card em {
  color: #e0e0e0 !important;
}

/* Links - bright cyan */
html[data-theme='dark'] .about-contents a,
html[data-theme='dark'] .project-content a {
  color: #7dd3fc !important;
}

html[data-theme='dark'] .about-contents a:hover,
html[data-theme='dark'] .project-content a:hover {
  color: #4da3ff !important;
}

/* Card backgrounds - lighter for better contrast */
html[data-theme='dark'] .about-intro-card,
html[data-theme='dark'] .about-section-card {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  border-color: #4b5563 !important;
}

html[data-theme='dark'] .project-card {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  border-color: #4b5563 !important;
}

html[data-theme='dark'] .experience-card .card-front,
html[data-theme='dark'] .experience-card .card-back {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  border-color: #4b5563 !important;
}

/* ========================================================
   Callout Note Styling (Legacy Support)
   ======================================================== */

.about-contents .callout-note {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #dee2e6;
  border-left: 0;
  border-radius: 12px;
  padding: 1.75rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow, opacity;
  /* Initial hidden state - will be animated by JavaScript */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card visible state - applied by JavaScript */
.about-contents .callout-note.card-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-contents .callout-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
  z-index: 0;
  /* Border animation delayed - starts after card appears */
  transition: height 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

/* Border animation only starts after card is visible */
.about-contents .callout-note.card-visible.border-animated::before {
  height: 100%;
}

.about-contents .callout-note h3 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.4rem;
}

.about-contents .callout-note p {
  color: #495057;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.about-contents .callout-note img {
  border-radius: 8px;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.about-contents .callout-note:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15);
}

.about-contents .callout-note.border-animated:hover::before {
  width: 4px;
  height: 100%;
}

/* Dark mode callout note */
html[data-theme='dark'] .about-contents .callout-note {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
  border-color: #4b5563 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .about-contents .callout-note h3 {
  color: #ffffff !important;
}

html[data-theme='dark'] .about-contents .callout-note p {
  color: #ffffff !important;
}

/* ========================================================
   Professional Animated Callout for About Page
   ======================================================== */

.about-contents .callout-tip {
  position: relative;
  animation: professionalPulse 3.5s ease-in-out infinite;
  border-left: 4px solid #ffb800 !important;
  box-shadow: 0 3px 16px rgba(255, 184, 0, 0.25);
  margin: 1.5rem 0 !important;
  overflow: visible;
  transition: box-shadow 0.3s ease;
}

.about-contents .callout-tip .callout-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.about-contents .callout-tip .callout-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.about-contents .callout-tip .callout-icon-container::before {
  content: '💡';
  font-size: 1.5rem;
  line-height: 1;
  animation: professionalBulbGlow 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.5));
  display: block;
}

.about-contents .callout-tip .callout-icon-container i {
  display: none;
}

@keyframes professionalPulse {
  0%, 100% {
    box-shadow: 0 3px 16px rgba(255, 184, 0, 0.25);
  }
  50% {
    box-shadow: 0 5px 24px rgba(255, 184, 0, 0.4);
  }
}

@keyframes professionalBulbGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(255, 184, 0, 0.5));
  }
  25% {
    opacity: 0.85;
    transform: scale(0.97);
    filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.65));
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    filter: drop-shadow(0 0 14px rgba(255, 184, 0, 0.8));
  }
  75% {
    opacity: 0.92;
    transform: scale(1.01);
    filter: drop-shadow(0 0 11px rgba(255, 184, 0, 0.7));
  }
}

html[data-theme='dark'] .about-contents .callout-tip {
  border-left-color: #ffb800 !important;
  box-shadow: 0 3px 16px rgba(255, 184, 0, 0.35);
}

html[data-theme='dark'] .about-contents .callout-tip .callout-icon-container::before {
  filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.6));
}

html[data-theme='dark'] .about-contents .callout-note:hover {
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25);
}

/* ========================================================
   Tools Section Styling
   ======================================================== */

.tools-section {
  margin: 2rem 0;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #495057;
  text-align: center;
}

html[data-theme='dark'] .tools-section {
  color: #cbd5e0;
}

/* Modern tools list with icons */
.tools-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  font-size: 0.95rem;
}

/* Visible state - applied by JavaScript */
/* Individual tool items will animate when parent has .tools-visible class */

/* Pop-up animation keyframes for tool items */
@keyframes toolPopUp {
  0% {
    opacity: 0;
    transform: scale(0) translateY(20px);
  }
  60% {
    transform: scale(1.1) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Pop and twist animation for tool icons */
@keyframes toolIconPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-10deg);
  }
  50% {
    transform: scale(1.3) rotate(8deg);
  }
  70% {
    transform: scale(0.95) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.tool-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1.5px solid #e9ecef;
  border-radius: 12px;
  color: #495057;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  user-select: none;
  /* Initial hidden state for pop-up animation */
  opacity: 0;
  transform: scale(0);
}

/* Only animate when parent is visible */
.tools-list.tools-visible .tool-item {
  animation: toolPopUp 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered animation delays - each item pops up slightly after the previous (slower, more noticeable pace) */
.tools-list.tools-visible .tool-item:nth-child(1) { animation-delay: 0s; }
.tools-list.tools-visible .tool-item:nth-child(2) { animation-delay: 0.1s; }
.tools-list.tools-visible .tool-item:nth-child(3) { animation-delay: 0.2s; }
.tools-list.tools-visible .tool-item:nth-child(4) { animation-delay: 0.3s; }
.tools-list.tools-visible .tool-item:nth-child(5) { animation-delay: 0.4s; }
.tools-list.tools-visible .tool-item:nth-child(6) { animation-delay: 0.5s; }
.tools-list.tools-visible .tool-item:nth-child(7) { animation-delay: 0.6s; }
.tools-list.tools-visible .tool-item:nth-child(8) { animation-delay: 0.7s; }
.tools-list.tools-visible .tool-item:nth-child(9) { animation-delay: 0.8s; }
.tools-list.tools-visible .tool-item:nth-child(10) { animation-delay: 0.9s; }
.tools-list.tools-visible .tool-item:nth-child(11) { animation-delay: 1.0s; }
.tools-list.tools-visible .tool-item:nth-child(12) { animation-delay: 1.1s; }
.tools-list.tools-visible .tool-item:nth-child(13) { animation-delay: 1.2s; }
.tools-list.tools-visible .tool-item:nth-child(14) { animation-delay: 1.3s; }
.tools-list.tools-visible .tool-item:nth-child(15) { animation-delay: 1.4s; }
.tools-list.tools-visible .tool-item:nth-child(16) { animation-delay: 1.5s; }
.tools-list.tools-visible .tool-item:nth-child(17) { animation-delay: 1.6s; }
.tools-list.tools-visible .tool-item:nth-child(18) { animation-delay: 1.7s; }

.tool-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.4), rgba(96, 165, 250, 0.5), transparent);
  transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tool-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.25);
  border-color: #007bff;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.tool-item:hover::before {
  left: 100%;
}

.tool-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  /* Initial hidden state for pop-up animation */
  opacity: 0;
  transform: scale(0);
}

/* Animate icon when parent tool item becomes visible */
.tools-list.tools-visible .tool-item .tool-icon {
  animation: toolIconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Match the staggered delays with the parent tool items (slower, more noticeable pace) */
.tools-list.tools-visible .tool-item:nth-child(1) .tool-icon { animation-delay: 0s; }
.tools-list.tools-visible .tool-item:nth-child(2) .tool-icon { animation-delay: 0.1s; }
.tools-list.tools-visible .tool-item:nth-child(3) .tool-icon { animation-delay: 0.2s; }
.tools-list.tools-visible .tool-item:nth-child(4) .tool-icon { animation-delay: 0.3s; }
.tools-list.tools-visible .tool-item:nth-child(5) .tool-icon { animation-delay: 0.4s; }
.tools-list.tools-visible .tool-item:nth-child(6) .tool-icon { animation-delay: 0.5s; }
.tools-list.tools-visible .tool-item:nth-child(7) .tool-icon { animation-delay: 0.6s; }
.tools-list.tools-visible .tool-item:nth-child(8) .tool-icon { animation-delay: 0.7s; }
.tools-list.tools-visible .tool-item:nth-child(9) .tool-icon { animation-delay: 0.8s; }
.tools-list.tools-visible .tool-item:nth-child(10) .tool-icon { animation-delay: 0.9s; }
.tools-list.tools-visible .tool-item:nth-child(11) .tool-icon { animation-delay: 1.0s; }
.tools-list.tools-visible .tool-item:nth-child(12) .tool-icon { animation-delay: 1.1s; }
.tools-list.tools-visible .tool-item:nth-child(13) .tool-icon { animation-delay: 1.2s; }
.tools-list.tools-visible .tool-item:nth-child(14) .tool-icon { animation-delay: 1.3s; }
.tools-list.tools-visible .tool-item:nth-child(15) .tool-icon { animation-delay: 1.4s; }
.tools-list.tools-visible .tool-item:nth-child(16) .tool-icon { animation-delay: 1.5s; }
.tools-list.tools-visible .tool-item:nth-child(17) .tool-icon { animation-delay: 1.6s; }
.tools-list.tools-visible .tool-item:nth-child(18) .tool-icon { animation-delay: 1.7s; }

/* Make MySQL/SQL icon slightly larger */
.tool-item:has(img[alt="SQL"]) .tool-icon,
.tool-item img[alt="SQL"] {
  width: 32px;
  height: 32px;
}

/* Tool icon hover - smooth twist independent of pop-in animation */
.tool-item:hover .tool-icon {
  transform: scale(1.2) rotate(8deg);
}

html[data-theme='dark'] .tool-item {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
  color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme='dark'] .tool-item:hover {
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25);
  border-color: #60a5fa;
  background: linear-gradient(135deg, #1e3a5f 0%, #1a2f4a 100%);
}

html[data-theme='dark'] .tool-item::before {
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.5), rgba(147, 197, 253, 0.6), transparent);
}

html[data-theme='dark'] .tool-icon {
  opacity: 0.95;
}



/* Responsive adjustments for Experience, Projects, and Tools */
@media (max-width: 768px) {
  .experience-grid,
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .project-image-container {
    height: 160px;
    padding: 1rem;
  }
  
  .experience-card {
    height: auto;
    min-height: 240px;
  }
  
  .experience-card .card-inner {
    height: auto;
    min-height: 240px;
  }
  
  .experience-card .card-front,
  .experience-card .card-back {
    position: absolute;
    height: 100%;
    min-height: 240px;
  }
  
}

@media (max-width: 480px) {
  .experience-card {
    padding: 1rem;
  }
  
  .experience-card strong {
    font-size: 1rem;
  }
  
}

