/* Projects Section Styles */

.project-filters {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-justify-content: center; /* Safari justify-content prefix */
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.filter-btn {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: border-color var(--transition-hover), color var(--transition-hover), transform var(--transition-hover);
  /* Mobile touch optimization */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
}

.filter-btn * {
  pointer-events: auto;
  touch-action: manipulation;
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  -webkit-transform: translateY(-2px); /* Safari transform prefix */
  transform: translateY(-2px);
}

.filter-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.projects-grid {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: repeat(2, 1fr); /* Safari grid-template-columns prefix - Fixed to 2 columns */
  grid-template-columns: repeat(2, 1fr); /* Fixed to 2 columns for 2x2 layout */
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.project-card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-hover), box-shadow var(--transition-hover), border-color var(--transition-hover);
  position: relative;
  border: 1px solid var(--border-color);
  /* Performance optimization for immediate hover response */
  will-change: transform, box-shadow;
}

.project-card:hover {
  -webkit-transform: translateY(-8px); /* Safari transform prefix */
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.project-card.featured-project {
  border: 2px solid var(--accent-color);
  position: relative;
  /* Allow stars to overflow the border - they need to be visible outside the card */
  overflow: visible;
}

.project-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
}

.project-image {
  position: relative;
  height: 160px; /* Reduced by 20% from 200px */
  overflow: hidden; /* Image clipping still works even if parent has overflow: visible */
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-hover); /* Fast hover response */
  will-change: transform; /* Performance optimization */
}

.project-card:hover .project-image img {
  -webkit-transform: scale(1.05); /* Reduced from 1.1 to 1.05 for less text shift */
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  top: 10%; /* Reduced vertical size by 20% - 10% from top and bottom */
  left: 0;
  right: 0;
  bottom: 10%; /* Reduced vertical size by 20% */
  background: linear-gradient(135deg, rgba(136, 192, 208, 0.7), rgba(235, 203, 139, 0.7));
  opacity: 0;
  transition: opacity var(--transition-hover);
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari flexbox prefix */
  align-items: center;
  -webkit-justify-content: center; /* Safari flexbox prefix */
  justify-content: center;
  will-change: opacity; /* Performance optimization */
}

.project-card:hover .project-overlay {
  opacity: 0.6; /* Reduced from 1 to 0.6 for better text readability */
}

.project-links {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  gap: var(--space-4);
}

.project-link {
  position: relative;
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-base);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: background-color var(--transition-hover), transform var(--transition-hover);
  -webkit-backdrop-filter: blur(10px); /* Safari backdrop-filter prefix */
  backdrop-filter: blur(10px);
}

.project-link::after {
  content: '';
  position: absolute;
  right: var(--space-3);
  top: calc(50% - 5px); /* Moved up by 5px for proper alignment */
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.project-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transform: translateY(-2px); /* Safari transform prefix */
  transform: translateY(-2px);
}

/* Flickering animation on hover - Project GitHub and Live Demo Links */
.project-link:hover::after {
  opacity: 1;
  -webkit-animation: rapidFlicker 0.3s ease-in-out infinite;
  -moz-animation: rapidFlicker 0.3s ease-in-out infinite;
  -ms-animation: rapidFlicker 0.3s ease-in-out infinite;
  -o-animation: rapidFlicker 0.3s ease-in-out infinite;
  animation: rapidFlicker 0.3s ease-in-out infinite;
}

/* Import rapidFlicker keyframes */
@keyframes rapidFlicker {
  0%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  25% {
    opacity: 0.3;
    transform: translateY(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
  75% {
    opacity: 0.5;
    transform: translateY(-50%) scale(0.9);
  }
}

@-webkit-keyframes rapidFlicker {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
  }
  25% {
    opacity: 0.3;
    -webkit-transform: translateY(-50%) scale(0.8);
    transform: translateY(-50%) scale(0.8);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1.2);
    transform: translateY(-50%) scale(1.2);
  }
  75% {
    opacity: 0.5;
    -webkit-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
  }
}

.project-content {
  /* Adjust padding to accommodate increased title spacing while keeping card size same */
  padding-top: calc(var(--space-8) * 0.85); /* Reduce by 15% to compensate for title margin-top */
  padding-right: var(--space-8); /* Right stays same */
  padding-bottom: var(--space-8);
  padding-left: var(--space-8); /* Left stays same - gap increase comes from title margin-left */
}

.project-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  /* Increase gap around title text by 15% on top, left, and bottom (right stays same) */
  /* To achieve 15% increase: reduce padding by 15%, add margin of 30% (15% restore + 15% increase) */
  margin-top: calc(var(--space-8) * 0.30); /* 30% of original: 32px * 0.30 = 9.6px (restores 4.8px + adds 4.8px) */
  margin-left: calc(var(--space-8) * 0.15); /* 15% increase: 32px * 0.15 = 4.8px */
  margin-right: 0; /* No change on right side */
  margin-bottom: calc(var(--space-4) * 1.15); /* Increased by 15%: 16px * 1.15 = 18.4px */
  line-height: var(--leading-tight);
}

.project-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.project-impact {
  margin-bottom: var(--space-6);
}

.project-impact h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.impact-list {
  list-style: none;
}

.impact-list li {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.impact-list li::before {
  content: '✓';
  color: var(--accent-color);
  font-weight: var(--font-bold);
  transition: transform var(--transition-hover); /* Fast hover response */
  font-size: var(--text-base);
}

.tech-stack {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari flex-wrap prefix */
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tech-stack .tech-tag {
  background: linear-gradient(135deg, var(--primary-light), var(--accent-color));
  color: var(--primary-color);
  font-weight: var(--font-medium);
  transition: transform var(--transition-hover), box-shadow var(--transition-hover);
}

.tech-stack .tech-tag:hover {
  -webkit-transform: translateY(-2px); /* Safari transform prefix */
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.projects-cta {
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .project-filters {
    gap: var(--space-2);
  }
  
  .filter-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* Keep 2 columns on mobile */
    gap: var(--space-4); /* Smaller gap on mobile */
  }
  
  .project-content {
    /* Adjust padding to accommodate increased title spacing while keeping card size same */
    padding-top: calc(var(--space-6) * 0.85); /* Reduce by 15% to compensate for title margin-top */
    padding-right: var(--space-6); /* Right stays same */
    padding-bottom: var(--space-6);
    padding-left: var(--space-6); /* Left stays same - gap increase comes from title margin-left */
  }
  
  /* Increase project title spacing by 15% on tablet - based on space-6 padding */
  .project-title {
    margin-top: calc(var(--space-6) * 0.30); /* 30% of original: 24px * 0.30 = 7.2px (restores 3.6px + adds 3.6px) */
    margin-left: calc(var(--space-6) * 0.15); /* 15% increase from tablet content padding */
    margin-right: 0; /* No change on right side */
    margin-bottom: calc(var(--space-4) * 1.15); /* Increased by 15% */
  }
  
  .project-image {
    height: 144px; /* Reduced by 20% from 180px (160px base * 0.9 = 144px for tablets) */
  }
  
  .project-links {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .project-link {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .project-content {
    /* Adjust padding to accommodate increased title spacing while keeping card size same */
    padding-top: calc(var(--space-4) * 0.85); /* Reduce by 15% to compensate for title margin-top */
    padding-right: var(--space-4); /* Right stays same */
    padding-bottom: var(--space-4);
    padding-left: var(--space-4); /* Left stays same - gap increase comes from title margin-left */
  }
  
  .project-title {
    font-size: var(--text-base); /* Smaller on very small screens */
    /* Increase project title spacing by 15% on mobile - based on space-4 padding */
    margin-top: calc(var(--space-4) * 0.30); /* 30% of original: 16px * 0.30 = 4.8px (restores 2.4px + adds 2.4px) */
    margin-left: calc(var(--space-4) * 0.15); /* 15% increase from mobile content padding */
    margin-right: 0; /* No change on right side */
    margin-bottom: calc(var(--space-4) * 1.15); /* Increased by 15% */
  }
  
  .project-image {
    height: 112px; /* Reduced by 20% from 140px (160px base * 0.7 = 112px for mobile) */
  }
  
  .filter-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* Still 2 columns */
    gap: var(--space-3); /* Even smaller gap */
  }
}

/* Animation for project cards */
.project-card {
  opacity: 0;
  -webkit-transform: translateY(30px); /* Safari transform prefix */
  transform: translateY(30px);
  -webkit-animation: fadeInUp 0.6s ease-out forwards; /* Safari animation prefix */
  animation: fadeInUp 0.6s ease-out forwards;
}

.project-card:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.project-card:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.project-card:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.project-card:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

/* Filter animation */
.project-card.filtered-out {
  opacity: 0;
  -webkit-transform: scale(0.8); /* Safari transform prefix */
  transform: scale(0.8);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.project-card.filtered-in {
  opacity: 1;
  -webkit-transform: scale(1); /* Safari transform prefix */
  transform: scale(1);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Featured project special effects - Float/Bounce animation to make it stand out */
/* Combined animation: fade in first, then float continuously - faster speed */
.project-card.featured-project {
  /* Same background as other cards */
  background-color: var(--bg-primary);
  /* Override the base fadeInUp animation - combine both effects */
  -webkit-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDown 2s ease-in-out 0.8s infinite;
  -moz-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDown 2s ease-in-out 0.8s infinite;
  -ms-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDown 2s ease-in-out 0.8s infinite;
  animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDown 2s ease-in-out 0.8s infinite;
  will-change: transform;
  /* Ensure it's visible and can animate */
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* First featured project with delay */
.project-card.featured-project:nth-child(1) { 
  -webkit-animation: featuredProjectEntry 0.8s ease-out 0.1s forwards, floatUpDown 2s ease-in-out 0.9s infinite;
  -moz-animation: featuredProjectEntry 0.8s ease-out 0.1s forwards, floatUpDown 2s ease-in-out 0.9s infinite;
  -ms-animation: featuredProjectEntry 0.8s ease-out 0.1s forwards, floatUpDown 2s ease-in-out 0.9s infinite;
  animation: featuredProjectEntry 0.8s ease-out 0.1s forwards, floatUpDown 2s ease-in-out 0.9s infinite;
}

/* Combined entry animation for featured project */
@-webkit-keyframes featuredProjectEntry {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px) translateZ(0);
    transform: translateY(30px) translateZ(0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }
}

@keyframes featuredProjectEntry {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* Keyframes with all browser prefixes */
@-webkit-keyframes floatUpDown {
  0%, 100% {
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
  }
  50% {
    -webkit-transform: translateY(-10px) translateZ(0);
    transform: translateY(-10px) translateZ(0);
  }
}

@-moz-keyframes floatUpDown {
  0%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@-ms-keyframes floatUpDown {
  0%, 100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-10px) translateZ(0);
  }
}

/* Pause animation on hover for better interaction - cross-browser */
/* Ensure hover transform works alongside paused animation */
.project-card.featured-project:hover {
  /* Stars continue animating - no pause */
  /* Maintain hover effect from parent .project-card:hover */
  -webkit-transform: translateY(-8px) translateZ(0);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px) translateZ(0);
  /* Ensure immediate hover response */
  will-change: transform;
}

/* Responsive adjustments for float animation */
@media (max-width: 768px) {
  .project-card.featured-project {
    /* Faster animation on tablets too */
    -webkit-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownMobile 2.5s ease-in-out 0.8s infinite;
    -moz-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownMobile 2.5s ease-in-out 0.8s infinite;
    -ms-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownMobile 2.5s ease-in-out 0.8s infinite;
    animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownMobile 2.5s ease-in-out 0.8s infinite;
  }
  
  /* Adjust star sizes for tablets - 60% larger (18px * 1.6 = 28.8px) */
  .project-card.featured-project::before,
  .project-card.featured-project::after {
    width: 28.8px;
    height: 28.8px;
    font-size: 22px;
    top: -15.4px; /* Border centered: -1px - 14.4px */
  }
  
  .project-card.featured-project::before {
    left: -15.4px;
  }
  
  .project-card.featured-project::after {
    left: calc(-15.4px + 35px); /* Offset for side-by-side */
  }
  
  /* Tablet orbit keyframes - centered on border */
  @-webkit-keyframes starOrbit1 {
    0% { top: -15.4px; left: -15.4px; }
    25% { top: -15.4px; left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px); }
    75% { top: calc(100% - 13.4px); left: -15.4px; }
    100% { top: -15.4px; left: -15.4px; }
  }
  
  @-moz-keyframes starOrbit1 {
    0% { top: -15.4px; left: -15.4px; }
    25% { top: -15.4px; left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px); }
    75% { top: calc(100% - 13.4px); left: -15.4px; }
    100% { top: -15.4px; left: -15.4px; }
  }
  
  @-webkit-keyframes starOrbit2 {
    0% { top: -15.4px; left: calc(-15.4px + 35px); }
    25% { top: calc(-15.4px + 35px); left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px - 35px); }
    75% { top: calc(100% - 13.4px - 35px); left: -15.4px; }
    100% { top: -15.4px; left: calc(-15.4px + 35px); }
  }
  
  @-moz-keyframes starOrbit2 {
    0% { top: -15.4px; left: calc(-15.4px + 35px); }
    25% { top: calc(-15.4px + 35px); left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px - 35px); }
    75% { top: calc(100% - 13.4px - 35px); left: -15.4px; }
    100% { top: -15.4px; left: calc(-15.4px + 35px); }
  }
  
  @keyframes starOrbit1 {
    0% { top: -15.4px; left: -15.4px; }
    25% { top: -15.4px; left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px); }
    75% { top: calc(100% - 13.4px); left: -15.4px; }
    100% { top: -15.4px; left: -15.4px; }
  }
  
  @keyframes starOrbit2 {
    0% { top: -15.4px; left: calc(-15.4px + 35px); }
    25% { top: calc(-15.4px + 35px); left: calc(100% - 13.4px); }
    50% { top: calc(100% - 13.4px); left: calc(100% - 13.4px - 35px); }
    75% { top: calc(100% - 13.4px - 35px); left: -15.4px; }
    100% { top: -15.4px; left: calc(-15.4px + 35px); }
  }
  
  @-webkit-keyframes floatUpDownMobile {
    0%, 100% {
      -webkit-transform: translateY(0) translateZ(0);
      transform: translateY(0) translateZ(0);
    }
    50% {
      -webkit-transform: translateY(-6px) translateZ(0);
      transform: translateY(-6px) translateZ(0);
    }
  }
  
  @-moz-keyframes floatUpDownMobile {
    0%, 100% {
      -moz-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -moz-transform: translateY(-6px);
      transform: translateY(-6px);
    }
  }
  
  @-ms-keyframes floatUpDownMobile {
    0%, 100% {
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
    }
  }
  
  @keyframes floatUpDownMobile {
    0%, 100% {
      transform: translateY(0) translateZ(0);
    }
    50% {
      transform: translateY(-6px) translateZ(0);
    }
  }
}

@media (max-width: 480px) {
  .project-card.featured-project {
    /* Faster animation on mobile too */
    -webkit-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownSmall 2.5s ease-in-out 0.8s infinite;
    -moz-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownSmall 2.5s ease-in-out 0.8s infinite;
    -ms-animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownSmall 2.5s ease-in-out 0.8s infinite;
    animation: featuredProjectEntry 0.8s ease-out forwards, floatUpDownSmall 2.5s ease-in-out 0.8s infinite;
  }
  
  /* Adjust star sizes for mobile - 60% larger (16px * 1.6 = 25.6px) */
  .project-card.featured-project::before,
  .project-card.featured-project::after {
    width: 25.6px;
    height: 25.6px;
    font-size: 19px;
    top: -13.8px; /* Border centered: -1px - 12.8px */
  }
  
  .project-card.featured-project::before {
    left: -13.8px;
  }
  
  .project-card.featured-project::after {
    left: calc(-13.8px + 30px); /* Offset for side-by-side */
  }
  
  /* Mobile orbit keyframes - centered on border */
  @-webkit-keyframes starOrbit1 {
    0% { top: -13.8px; left: -13.8px; }
    25% { top: -13.8px; left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px); }
    75% { top: calc(100% - 11.8px); left: -13.8px; }
    100% { top: -13.8px; left: -13.8px; }
  }
  
  @-moz-keyframes starOrbit1 {
    0% { top: -13.8px; left: -13.8px; }
    25% { top: -13.8px; left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px); }
    75% { top: calc(100% - 11.8px); left: -13.8px; }
    100% { top: -13.8px; left: -13.8px; }
  }
  
  @-webkit-keyframes starOrbit2 {
    0% { top: -13.8px; left: calc(-13.8px + 30px); }
    25% { top: calc(-13.8px + 30px); left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px - 30px); }
    75% { top: calc(100% - 11.8px - 30px); left: -13.8px; }
    100% { top: -13.8px; left: calc(-13.8px + 30px); }
  }
  
  @-moz-keyframes starOrbit2 {
    0% { top: -13.8px; left: calc(-13.8px + 30px); }
    25% { top: calc(-13.8px + 30px); left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px - 30px); }
    75% { top: calc(100% - 11.8px - 30px); left: -13.8px; }
    100% { top: -13.8px; left: calc(-13.8px + 30px); }
  }
  
  @keyframes starOrbit1 {
    0% { top: -13.8px; left: -13.8px; }
    25% { top: -13.8px; left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px); }
    75% { top: calc(100% - 11.8px); left: -13.8px; }
    100% { top: -13.8px; left: -13.8px; }
  }
  
  @keyframes starOrbit2 {
    0% { top: -13.8px; left: calc(-13.8px + 30px); }
    25% { top: calc(-13.8px + 30px); left: calc(100% - 11.8px); }
    50% { top: calc(100% - 11.8px); left: calc(100% - 11.8px - 30px); }
    75% { top: calc(100% - 11.8px - 30px); left: -13.8px; }
    100% { top: -13.8px; left: calc(-13.8px + 30px); }
  }
  
  @-webkit-keyframes floatUpDownSmall {
    0%, 100% {
      -webkit-transform: translateY(0) translateZ(0);
      transform: translateY(0) translateZ(0);
    }
    50% {
      -webkit-transform: translateY(-4px) translateZ(0);
      transform: translateY(-4px) translateZ(0);
    }
  }
  
  @-moz-keyframes floatUpDownSmall {
    0%, 100% {
      -moz-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -moz-transform: translateY(-4px);
      transform: translateY(-4px);
    }
  }
  
  @-ms-keyframes floatUpDownSmall {
    0%, 100% {
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    50% {
      -ms-transform: translateY(-4px);
      transform: translateY(-4px);
    }
  }
  
  @keyframes floatUpDownSmall {
    0%, 100% {
      transform: translateY(0) translateZ(0);
    }
    50% {
      transform: translateY(-4px) translateZ(0);
    }
  }
}

/* Stars continue animating on hover - do not pause */
/* Removed pause on hover - stars should continue running */

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  .project-card.featured-project {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
  }
  
  .project-card.featured-project::before,
  .project-card.featured-project::after {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
  }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
  .project-card.featured-project {
    /* Faster animation on touch devices too */
    -webkit-animation-duration: 0.8s, 2.5s;
    -moz-animation-duration: 0.8s, 2.5s;
    -ms-animation-duration: 0.8s, 2.5s;
    -o-animation-duration: 0.8s, 2.5s;
    animation-duration: 0.8s, 2.5s;
  }
}

/* Accent border for featured project - no background, just border */
/* Background removed to match other cards - keeping only the border accent */
.project-card.featured-project::before {
  /* First star - Amber color, 60% larger (20.8px * 1.6 = 33.3px) */
  content: '★';
  position: absolute;
  /* Centered on 2px border: border center at -1px, star center at -1px, corner at -1px - 16.65px = -17.65px */
  top: -17.65px;
  left: -17.65px;
  width: 33.3px; /* 60% larger (20.8px * 1.6 = 33.3px) */
  height: 33.3px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 25px; /* Scaled proportionally */
  color: var(--accent-color); /* Amber */
  z-index: 10;
  pointer-events: none;
  /* Shining/glow effect - enhanced for larger size */
  text-shadow: 
    0 0 12px var(--accent-color),
    0 0 18px var(--accent-color),
    0 0 24px var(--accent-color);
  filter: drop-shadow(0 0 6px var(--accent-color));
  /* Animation - runs around the border */
  -webkit-animation: starOrbit1 4s linear infinite, starShine 1.5s ease-in-out infinite;
  -moz-animation: starOrbit1 4s linear infinite, starShine 1.5s ease-in-out infinite;
  -ms-animation: starOrbit1 4s linear infinite, starShine 1.5s ease-in-out infinite;
  animation: starOrbit1 4s linear infinite, starShine 1.5s ease-in-out infinite;
}

/* Second star - Cyan color, runs parallel to first star along border */
.project-card.featured-project::after {
  content: '★';
  position: absolute;
  /* Starting position: top border, offset to the right */
  top: -17.65px;
  left: calc(-17.65px + 40px);
  width: 33.3px; /* Same size as first star */
  height: 33.3px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  font-size: 25px;
  color: var(--primary-color); /* Cyan */
  z-index: 10;
  pointer-events: none;
  /* Shining/glow effect - cyan */
  text-shadow: 
    0 0 12px var(--primary-color),
    0 0 18px var(--primary-color),
    0 0 24px var(--primary-color);
  filter: drop-shadow(0 0 6px var(--primary-color));
  /* Animation - parallel orbit path with proper offset on all sides */
  -webkit-animation: starOrbit2 4s linear infinite, starShine 1.5s ease-in-out 0.75s infinite;
  -moz-animation: starOrbit2 4s linear infinite, starShine 1.5s ease-in-out 0.75s infinite;
  -ms-animation: starOrbit2 4s linear infinite, starShine 1.5s ease-in-out 0.75s infinite;
  animation: starOrbit2 4s linear infinite, starShine 1.5s ease-in-out 0.75s infinite;
}

/* First star orbit (Amber) - centered on 2px border line */
@-webkit-keyframes starOrbit1 {
  0% {
    top: -17.65px; /* Top border center: -1px - 16.65px */
    left: -17.65px; /* Left border center: -1px - 16.65px */
  }
  25% {
    top: -17.65px; /* Top border center */
    left: calc(100% - 15.65px); /* Right border center: 100% + 1px - 16.65px */
  }
  50% {
    top: calc(100% - 15.65px); /* Bottom border center: 100% + 1px - 16.65px */
    left: calc(100% - 15.65px); /* Right border center */
  }
  75% {
    top: calc(100% - 15.65px); /* Bottom border center */
    left: -17.65px; /* Left border center */
  }
  100% {
    top: -17.65px;
    left: -17.65px;
  }
}

@-moz-keyframes starOrbit1 {
  0% {
    top: -17.65px;
    left: -17.65px;
  }
  25% {
    top: -17.65px;
    left: calc(100% - 15.65px);
  }
  50% {
    top: calc(100% - 15.65px);
    left: calc(100% - 15.65px);
  }
  75% {
    top: calc(100% - 15.65px);
    left: -17.65px;
  }
  100% {
    top: -17.65px;
    left: -17.65px;
  }
}

@keyframes starOrbit1 {
  0% {
    top: -17.65px;
    left: -17.65px;
  }
  25% {
    top: -17.65px;
    left: calc(100% - 15.65px);
  }
  50% { 
    top: calc(100% - 15.65px);
    left: calc(100% - 15.65px);
  }
  75% {
    top: calc(100% - 15.65px);
    left: -17.65px;
  }
  100% {
    top: -17.65px;
    left: -17.65px;
  }
}

/* Second star orbit (Cyan) - parallel path with proper offset on all sides */
@-webkit-keyframes starOrbit2 {
  0% {
    /* Top border - offset horizontally to the right */
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
  25% {
    /* Right border - offset vertically downward */
    top: calc(-17.65px + 40px);
    left: calc(100% - 15.65px);
  }
  50% {
    /* Bottom border - offset horizontally to the left */
    top: calc(100% - 15.65px);
    left: calc(100% - 15.65px - 40px);
  }
  75% {
    /* Left border - offset vertically upward */
    top: calc(100% - 15.65px - 40px);
    left: -17.65px;
  }
  100% { 
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
}

@-moz-keyframes starOrbit2 {
  0% {
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
  25% {
    top: calc(-17.65px + 40px);
    left: calc(100% - 15.65px);
  }
  50% {
    top: calc(100% - 15.65px);
    left: calc(100% - 15.65px - 40px);
  }
  75% {
    top: calc(100% - 15.65px - 40px);
    left: -17.65px;
  }
  100% {
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
}

@keyframes starOrbit2 {
  0% {
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
  25% {
    top: calc(-17.65px + 40px);
    left: calc(100% - 15.65px);
  }
  50% { 
    top: calc(100% - 15.65px);
    left: calc(100% - 15.65px - 40px);
  }
  75% {
    top: calc(100% - 15.65px - 40px);
    left: -17.65px;
  }
  100% {
    top: -17.65px;
    left: calc(-17.65px + 40px);
  }
}

/* Shining/glowing effect - all browser prefixes */
@-webkit-keyframes starShine {
  0%, 100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

@-moz-keyframes starShine {
  0%, 100% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    -moz-transform: scale(1.3);
    transform: scale(1.3);
  }
}

@keyframes starShine {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}

/* Hover effects */
.project-card:hover .tech-stack .tech-tag {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
}

.project-card:hover .impact-list li::before {
  -webkit-transform: scale(1.2); /* Safari transform prefix */
  transform: scale(1.2);
}

/* Focus states for accessibility */
.project-card:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.filter-btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.project-link:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}