/* Base styles and CSS custom properties */
:root {
  --dark-1: #0e0e0e;
  --dark-2: #1a1a1a;
  --dark-3: #262626;
  --dark-4: #333333;
  --dark-5: #4d4d4d;
  --white: #ffffff;
  --green: #00ff00;
  --shadow-glow: 0px 0px 25px 5px rgba(255, 255, 255, 0.1);
  --shadow-glow-hover: 0px 0px 35px 10px rgba(255, 255, 255, 0.15);
  --shadow-card: 0 0px 10px -2px rgba(255, 255, 255, 0.05);
  --shadow-card-hover: 0 0px 20px 0px rgba(255, 255, 255, 0.1);
  --background: #0e0e0e;
  --text: #ffffff;
  --primary: #58a6ff;
  --secondary: #8b949e;
  --border: rgba(255, 255, 255, 0.03);
  --border-hover: rgba(255, 255, 255, 0.08);
  --card-bg: #1a1a1a;
  --hover: #262626;
}

/* Global styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #0a0a0a;
  color: #fff;
  transition: background-color 0.3s, color 0.3s;
  font-display: block; /* CLS fix for font loading */
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

/* Font classes */
.font-mono {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.font-spaceGrotesk {
  font-family: 'Space Grotesk', sans-serif;
}

/* MagicUI Warp Background */
.warp-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.grid-lines {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 55px 55px;
  transform: rotateX(60deg);
  transform-origin: center;
  animation: moveGrid 90s linear infinite;
  will-change: transform, opacity;
}

/* Add subtle brightness wave */
.warp-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
  animation: pulseEffect 25s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Simple vignette overlay */
.warp-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, 
                          rgba(0, 0, 0, 0) 30%, 
                          rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

@keyframes moveGrid {
  0% {
    transform: rotateX(60deg) translateY(0);
  }
  100% {
    transform: rotateX(60deg) translateY(55px);
  }
}

@keyframes pulseEffect {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

/* Page Layout - Tighter and more symmetrical */
.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
}

/* Container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grid Layout - More consistent spacing */
.main-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr 0.7fr;
  grid-template-rows: auto;
  gap: 0.75rem;
  margin-bottom: 2rem;
  width: 100%;
}

/* Base NASA image styles with consistent transitions */
.nasa-image {
  padding: 4px;
  overflow: visible;
  background-color: transparent;
  border-radius: 18px;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  margin-bottom: 0.25rem;
  cursor: pointer;
  position: relative;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0.38, 1), box-shadow 0.4s cubic-bezier(0.2, 0, 0.38, 1) !important;
}

.space-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin: 2px;
  will-change: auto;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0.38, 1), box-shadow 0.4s cubic-bezier(0.2, 0, 0.38, 1) !important;
}

/* Hover effects for NASA images */
.nasa-image:hover {
  transform: none !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16) !important;
}

.nasa-image:hover .space-image {
  transform: scale(1.02) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
  filter: none !important;
}

/* Page load animation for tech stack NASA image */
@keyframes fadeInSlowly {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Left column NASA image - moved closer to tech stack */
.tech-stack-container + .nasa-image {
  margin-top: 0.5rem; /* Minimal top margin to create a small gap */
  grid-column: 1;
  grid-row: 3; /* Keep in row 3 */
  opacity: 0;
  animation: fadeInSlowly 1s cubic-bezier(0.2, 0, 0.38, 1) forwards;
  animation-delay: 0.3s;
}

.tech-stack-container + .nasa-image .space-image {
  height: 200px;
  background-image: url('assets/01.webp');
}

/* Third column NASA image */
.nasa-image.second-image {
  grid-column: 3;
  margin-top: 0.5rem;
}

.nasa-image.second-image .space-image {
  background-image: url('assets/02.webp');
  height: 200px;
}

/* Remove highlight flash for NASA images */
.nasa-image::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

.nasa-image:hover::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Override any inherited after effects */
.tech-stack-container + .nasa-image::after,
.nasa-image.second-image::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Smooth transitions for all states */
.nasa-image, .nasa-image .space-image {
  transition: all 0.2s cubic-bezier(0.2, 0, 0.38, 1) !important;
}

/* Smooth hover-off transitions */
.nasa-image:not(:hover), .nasa-image:not(:hover) .space-image {
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

/* Standardize section spacing */
.tech-stack-container,
.profile-card,
.daily-tools-header,
.tools-grid,
.quote-card,
.project-card {
  background-color: rgba(35, 35, 40, 0.45);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

/* Section-specific spacing adjustments */
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  grid-column: 2;
  grid-row: 1 / span 3;
}

.links-projects-container {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.links-projects-container > * {
  margin-bottom: 2.5rem !important;
}

/* Remove extra margin from the last child to avoid too much space at the bottom */
.links-projects-container > *:last-child {
  margin-bottom: 0 !important;
}

/* Tech stack container grid position - even smaller height */
.tech-stack-container {
  grid-column: 1;
  grid-row: 1;
}

/* Daily Tools Section - transparent background */
.daily-tools-section {
  background-color: transparent; /* Remove solid dark background */
  border-radius: 18px;
  border: none; /* Remove border */
  margin-top: -5px !important; /* Less negative margin */
  margin-bottom: 0 !important;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
  transition: none;
  padding-bottom: 0.5rem;
}

/* Prevent any hover effects on the daily tools section */
.daily-tools-section:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Fix Daily Tools header to have better spacing */
.daily-tools-header {
  padding-top: 1rem !important; /* Middle ground between 0.8rem and 1.75rem */
  padding-bottom: 1rem !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; /* Center align for better balance */
  border: none;
  background: transparent;
  box-shadow: none;
  transition: none;
  margin-bottom: 0;
}

/* Prevent hover effects on header */
.daily-tools-header:hover {
  transform: none;
  box-shadow: none;
}

/* Remove after pseudo-element hover effect for daily tools */
.daily-tools-header:hover::after,
.tools-grid.apple-style:hover::after {
  opacity: 0;
}

/* Remove animation on header h2 underline */
.daily-tools-header h2::after {
  transform: scaleX(1);
  transition: none;
}

/* Override any hover effects defined elsewhere */
.daily-tools-section:hover,
.daily-tools-header:hover,
.tools-grid.apple-style:hover {
  transform: none !important;
  box-shadow: none !important;
}

.daily-tools-header h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 2rem; /* Add space between title and grid */
}

/* Adjust tools grid to be on the right - sleeker look */
.tools-grid.apple-style {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  align-self: flex-start;
  padding: 0.9rem;
  margin-top: 0;
  width: auto;
  max-width: 280px; /* Increase width to prevent clipping */
  background: rgba(30, 30, 35, 0.4); /* More subtle background */
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Make tool icons more refined */
.apple-style .tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: none;
  padding: 0.2rem;
  margin: 0;
}

.apple-style .tool-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 2.1rem; /* Adjusted size */
  height: 2.1rem; /* Adjusted size */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  overflow: visible;
  margin: 0;
}

.apple-style .tool-icon img {
  width: 65%;
  height: 65%;
  /* filter: brightness(0) invert(1); */
  opacity: 0.9;
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

/* Remove tool rows, revert to flat grid */
.tools-grid.apple-style .tool-row {
  display: contents;
}

.tools-grid.apple-style:hover {
  transform: none;
  box-shadow: none;
}

/* Make tool icons smaller */
.apple-style .tool-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 2rem; /* Smaller size */
  height: 2rem; /* Smaller size */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  overflow: visible;
  margin: 0.15rem;
}

/* Fix tooltip to only show on hover */
.tool-tooltip {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%) scale(0);
  color: rgb(255, 255, 255);
  padding: 0.25rem 0.5rem;
  border-radius: 0 !important;
  font-size: 0.65rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: none !important;
  z-index: 10;
}

.tool-tooltip::after {
  display: none !important;
}

.tool-icon:hover .tool-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  bottom: -1.3rem;
}

/* Remove duplicate animations */
.tech-stack-container::before,
.profile-card::before,
.daily-tools-header::before,
.tools-grid::before,
.nasa-image::before,
.quote-card::before,
.project-card::before {
  display: none;
}

.tech-stack-container > *,
.profile-card > *,
.daily-tools-header > *,
.tools-grid > *,
.nasa-image > *,
.quote-card > *,
.project-card > * {
  position: relative;
  z-index: 2;
}

.tech-stack-container::after,
.profile-card::after,
.daily-tools-header::after,
.tools-grid::after,
.nasa-image::after,
.quote-card::after,
.project-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 19px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tech-stack-container:hover::after,
.profile-card:hover::after,
.daily-tools-header:hover::after,
.tools-grid:hover::after,
.nasa-image:hover::after,
.quote-card:hover::after,
.project-card:hover::after {
    opacity: 1;
}

/* Simplify hover effects */
.tech-stack-container:hover,
.profile-card:hover,
.nasa-image:hover,
.quote-card:hover {
  transform: none;
  box-shadow: none;
}

.tech-stack-container:active,
.profile-card:active,
.daily-tools-header:active,
.tools-grid:active,
.nasa-image:active,
.quote-card:active,
.project-card:active {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Scrollable elements */
.scrollable {
  overflow-y: auto !important;
  scrollbar-width: thin;
  position: relative;
  max-height: 100%;
  height: 100%;
}

/* Tech Stack Section - Greatly increased height */
.tech-stack-container {
  padding: 0.7rem !important;
  padding-bottom: 0.8rem !important;
  max-height: 700px; /* Reduced from 950px to better match the layout */
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  position: relative;
  margin-bottom: 0.25rem;
  background-color: rgba(35, 35, 40, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: none !important;
  transform: none !important;
  border: 1px solid rgba(255, 255, 255, 0.03);
  margin-right: 5px;
}

.tech-stack-container:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--dark-2) !important;
}

.tech-stack-container::after {
  display: none !important;
}

.tech-stack-container:hover::after {
  display: none !important;
}

.tech-stack-header {
  position: sticky;
  top: -20px;
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  margin-bottom: 0;
  z-index: 5;
  backdrop-filter: none; /* Remove blur from header */
  -webkit-backdrop-filter: none;
  border-bottom: none; /* Remove border */
}

.tech-stack-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  line-height: 1;
  border: none;
  text-decoration: none;
  position: relative;
  background-color: transparent;
}

.tech-stack-header h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.8);
  display: block;
  transform: scaleX(1);
  transition: none;
}

/* Space category sections properly - Remove all background colors */
.tech-categories {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Increased gap between categories */
  padding: 1.25rem;
  padding-top: 0.75rem;
  position: relative;
  z-index: 1;
  background-color: transparent;
  margin-top: 1rem; /* Added top margin */
  transition: none !important;
}

/* Remove fade at the top */
.tech-categories::before {
  display: none;
}

.tech-categories:hover {
  transform: none !important;
}

.category {
  margin-bottom: 1rem; /* Increased bottom margin */
}

.category h3 {
  font-size: 1.1rem; /* Slightly larger category headers */
  margin-bottom: 0.8rem; /* More space below headers */
  letter-spacing: -0.02em;
}

.tech-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* Slightly increased gap between pills */
}

.tech-pill {
  background-color: var(--dark-3) !important;
  color: var(--white);
  padding: 0.15rem 0.6rem;  /* Slightly increased padding */
  border-radius: 9999px;
  font-size: 0.75rem;  /* Slightly increased font size */
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  border: 1px solid transparent;
  transform: none !important;
  will-change: transform;
}

.tech-pill:hover {
  background-color: var(--dark-4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;  /* Reduced shadow */
  transform: none !important;
}

.tech-pill:active {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;  /* Reduced shadow */
}

/* Profile Section */
.profile-card {
  background-color: rgba(35, 35, 40, 0.45);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 0.7rem !important;
  padding-bottom: 0.8rem !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.3rem !important;
}

.profile-content {
  background-color: transparent;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.profile-content:hover {
  background-color: transparent;
  transform: none !important;
  box-shadow: none !important;
}

/* Remove the border and outline effect for profile-content */
.profile-content::after {
  display: none;
}

/* Remove all the conflicting hover effects */
.profile-card:hover,
.profile-content:hover {
  transform: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Remove the after pseudo-elements that are being disabled */
.profile-card::after,
.profile-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-card:hover::after,
.profile-content:hover::after {
  opacity: 0.5;
}

/* Remove any !important overrides at the bottom of the file */
.profile-content:hover {
  background-color: rgba(35, 35, 40, 0.4);
}

/* Ensure content is above the glass effect */
.profile-header,
.i-build,
.bio,
.profile-divider,
.availability-wrapper {
  position: relative;
  z-index: 2;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.profile-header img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
}

.profile-identity {
  position: relative;
}

.profile-identity h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1;
  padding-bottom: 4px;
  display: inline-block;
  border-bottom: none;
}

.profile-identity p {
  font-size: 0.85rem;
  color: var(--secondary);
  margin: 0;
  line-height: 1;
  padding: 0;
  position: absolute;
  left: 0;
  top: 28px;
}

.i-build {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.highlight {
  color: var(--white);
  font-weight: 700;
  position: relative;
  display: inline-block;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight.glitching {
  animation: enhancedGlitch 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes enhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
    filter: none;
  }
  15% {
    transform: translate(-2px, 1px);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: hue-rotate(0deg);
  }
  30% {
    transform: translate(1px, -1px);
    text-shadow: -2px 0 #ff0000, 2px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  45% {
    transform: translate(-1px, -1px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: hue-rotate(180deg);
  }
  60% {
    transform: translate(1px, 1px);
    text-shadow: -1px 1px #ff0080, 1px -1px #00ff00;
    filter: brightness(1.2);
  }
  75% {
    transform: translate(-1px, 0);
    text-shadow: 1px 0 #ff0000, -1px 0 #0000ff;
    filter: contrast(1.2);
  }
  90% {
    transform: translate(1px, 0);
    text-shadow: -1px 0 #00ff00, 1px 0 #ff0080;
    filter: none;
  }
}

.profile-card:hover .highlight {
  text-shadow: none;
}

.bio {
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  font-size: 0.95rem;
}

.bio-line {
  display: block;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

/* Bio line-by-line animation */
.bio-line {
  display: inline;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0, 0.38, 1) forwards;
}

.bio-line:nth-child(1) {
  animation-delay: 0.2s;
}

.bio-line:nth-child(2) {
  animation-delay: 0.4s;
}

.bio-line:nth-child(3) {
  animation-delay: 0.6s;
}

.bio-line:nth-child(4) {
  animation-delay: 0.8s;
}

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

.bio:hover {
  transform: none !important;
}

.profile-divider {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 1.25rem 0;
  position: relative;
  z-index: 1;
}

.availability-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.availability-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-direction: row-reverse;
}

.status-circle {
  display: inline-block;
  width: 6px; /* Smaller circle */
  height: 6px; /* Smaller circle */
  border-radius: 50%;
  background-color: var(--green);
}

.availability-text {
  color: var(--white);
  font-size: 0.8rem; /* Smaller text */
  font-weight: 400; /* Less bold */
}

.timestamp {
  font-size: 0.7rem;
  color: var(--secondary);
  margin-top: 2px;
  opacity: 0.85;
  text-align: right;
}

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

.main-grid > * {
  animation: none;
}

/* Utility Classes */
.size-full {
  width: 100%;
  height: 100%;
}

/* Section Headers */
.tech-stack-header h2,
.profile-header h2,
.daily-tools-header h2,
.links-section h2,
.project-card h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}

.tech-stack-header h2::after,
.daily-tools-header h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.3s ease;
}

.profile-header h2::after,
.links-section h2::after,
.project-card h2::after {
  display: none;
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulse-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.6s ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

.project-card:hover .pulse-line {
  animation: pulse 2s ease-in-out infinite;
}

.view-hint {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(0);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.view-hint .arrow {
  margin-left: 4px;
}

.project-card:hover .view-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

.project-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0;
}

.project-card h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  margin-bottom: 0;
  text-align: center;
  transition: opacity 0.4s;
}

.view-hint {
  position: absolute;
  bottom: 15%;
  left: 10%; /* Move from center (50%) to left side (10%) */
  transform: none; /* Remove the translateX(-50%) centering */
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.view-hint .arrow {
  margin-left: 4px;
}

.project-card:hover .view-hint {
  opacity: 1;
  transform: translateY(-5px); /* Remove the translateX, keep only the Y movement */
}

/* Footer */
footer {
  margin-top: 4rem;
  text-align: center;
  color: var(--secondary);
  font-size: 0.875rem;
  padding-bottom: 1rem;
}

/* Restore Project Card styles */
.project-card {
  background: transparent;
  padding: 2rem;
  height: 180px;
  display: block;
  text-decoration: none;
  color: var(--white);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
  margin-bottom: 0;
  will-change: transform;
  z-index: 1; /* Ensure proper stacking context */
  margin-left: 5px;
  margin-right: 5px;
}

/* Create a container for the rotating border to avoid conflicts */
.project-card .rotating-border {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  animation: rotate-outline 12s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* Add a pulsing animation to make it more eye-catching */
@keyframes pulse-border {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Make the dashed border also pulse */
.project-card .rotating-border {
  animation: rotate-outline 12s linear infinite, pulse-border 2s ease-in-out infinite;
}

.project-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.project-bg-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: blur(4px);
  transition: all 0.2s cubic-bezier(0.2, 0, 0.38, 1);
  will-change: transform, filter, opacity;
}

@keyframes slowGif {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.project-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0;
}

.project-card:hover {
  transform: none;
  box-shadow: none;
}

.project-card:hover .project-bg-gif {
  opacity: 1;
  filter: blur(0);
  transform: scale(1.05);
}

.project-card h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  margin-bottom: 0;
  text-align: center;
  transition: opacity 0.4s;
}

.view-hint {
  position: absolute;
  bottom: 15%;
  left: 10%; /* Move from center (50%) to left side (10%) */
  transform: none; /* Remove the translateX(-50%) centering */
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.view-hint .arrow {
  margin-left: 4px;
}

.project-card:hover .view-hint {
  opacity: 1;
  transform: translateY(-5px); /* Remove the translateX, keep only the Y movement */
}

/* Remove Spotify section background, keep only player - move closer to daily tools */
.spotify-section {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-top: -5px !important; /* Less negative margin */
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
  width: 100%;
  margin-bottom: 300px;
}

.spotify-section:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Make Spotify player take full width */
.spotify-card {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
}

.spotify-card iframe {
  display: block;
  width: 100%;
  box-shadow: none;
  border-radius: 12px;
  border: none;
  background-color: transparent;
  opacity: 1;
}

/* Media queries for responsive layout - update for fixed grid */
@media (max-width: 970px) {
  .main-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    gap: 1.5rem; /* Increased from 0.75rem to 1.5rem for better spacing */
  }

  .container {
    padding: 2rem 1rem; /* Increased padding for better spacing */
  }
  
  /* Reorganize sections in mobile view */
  .tech-stack-container,
  .nasa-image,
  .profile-container,
  .links-projects-container {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Profile section with social icons */
  .profile-container {
    order: 1;
    margin-bottom: 1.5rem;
  }

  /* Move social links to profile section */
  .social-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 100%;
  }

  /* First NASA image */
  .nasa-image:first-of-type {
    order: 2;
    margin-bottom: 1.5rem;
  }

  /* Tech stack section */
  .tech-stack-container {
    order: 3;
    margin-bottom: 1.5rem;
  }

  /* Daily tools section */
  .daily-tools-section {
    order: 4;
    margin-bottom: 1.5rem;
  }

  /* Spotify section */
  .spotify-section {
    order: 5;
    margin-bottom: 1.5rem;
  }

  /* Second NASA image */
  .nasa-image.second-image {
    order: 6;
    margin-bottom: 1.5rem;
  }

  /* Projects section */
  .project-section {
    order: 7;
    margin-bottom: 1.5rem;
  }

  /* Eye gallery section */
  .eye-gallery-section {
    order: 8;
    margin-bottom: 1.5rem;
  }

  /* Hide links section header but keep social icons */
  .links-section h2 {
    display: none;
  }

  /* Daily tools mobile adjustments */
  .daily-tools-header {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }
  
  .daily-tools-header h2 {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .tools-grid.apple-style {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0.5rem 1rem;
    max-width: none;
    width: 100%;
  }
  
  .apple-style .tool-item {
    width: 100%;
  }
  
  .project-card {
    height: 160px;
    padding: 1.5rem;
  }
  
  /* Adjust tooltip for mobile */
  .tool-tooltip {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
    bottom: -1.4rem;
  }
  
  .tool-icon:hover .tool-tooltip {
    bottom: -1.1rem;
  }
  
  /* Ensure daily tools section has enough space */
  .daily-tools-section {
    margin-bottom: 1.5rem;
    overflow: visible;
    background-color: #1e1e23;
  }
  
  /* Eye gallery section adjustments */
  .eye-gallery-section {
    margin-top: 0.75rem;
  }
  
  .eye-circle-frame {
    width: 150px;
    height: 150px;
  }
  
  .eye-collection-label {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
  
  .ai-label {
    font-size: 0.75em;
  }

  /* Hide the entire links section for mobile */
  .links-section {
    display: none !important;
  }

  /* Ensure profile-container is always at the top */
  .profile-container {
    order: -1;
  }

  /* ... existing code ... */
  body .links-section,
  .links-projects-container > .links-section {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  /* ... existing code ... */
}

/* Fullscreen Modal */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-modal.active {
  background-color: rgba(0, 0, 0, 0.9);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0.8);
}

.fullscreen-modal.active .close-modal {
  opacity: 1;
  transform: scale(1);
}

.close-modal:hover {
  color: #bbb;
  transform: scale(1.1);
}

.fullscreen-image {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fullscreen-modal.active .fullscreen-image {
  transform: scale(1);
  opacity: 1;
}

/* Remove duplicate animations and pseudo-elements for daily tools */
.daily-tools-section::before,
.daily-tools-header::before,
.tools-grid.apple-style::before,
.daily-tools-section::after,
.daily-tools-header::after,
.tools-grid.apple-style::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

/* Fix simplify hover effects - remove daily tools elements */
.tech-stack-container:hover,
.profile-card:hover,
.nasa-image:hover,
.quote-card:hover {
  transform: none;
  box-shadow: none;
}

/* Separate active states - remove daily tools elements */
.tech-stack-container:active,
.profile-card:active,
.nasa-image:active,
.quote-card:active,
.project-card:active {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Fix Links section and social links */
.links-section {
  all: initial !important;
  display: block !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 1rem 0;
  position: relative;
  z-index: 1;
  margin-bottom: 0; /* Changed from 1rem to 0 since we're using gap in the container */
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  background-image: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.links-section h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  color: white !important;
  display: block !important;
  margin-left: 5px;
}

.social-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 240px;
  margin-left: 0.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(50, 50, 60, 0);
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  border: 1px solid rgba(255, 255, 255, 0);
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.social-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  filter: brightness(0) invert(1);
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.social-link:hover {
  background: rgba(44, 44, 44, 0.6);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.social-link:hover::before {
  opacity: 0.7;
}

.social-link:hover .social-icon {
  transform: scale(1.1);
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
}

.social-tooltip {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: transparent;
  padding: 0;
  font-size: 0.7rem;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100 !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.social-link:hover .social-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.apple-style .tool-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 2.4rem; /* Increased size */
  height: 2.4rem; /* Increased size */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  overflow: visible;
  margin: 0.25rem;
}

/* Only the tool icon should transform on hover */
.apple-style .tool-icon:hover {
  transform: scale(1.15);
  box-shadow: none;
  z-index: 5;
}

.apple-style .tool-icon::before {
  display: none;
}

.apple-style .tool-icon img {
  width: 65%;
  height: 65%;
  /* filter: brightness(0) invert(1); */
  opacity: 0.9;
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.apple-style .tool-icon:hover img {
  transform: scale(1.1);
  opacity: 1;
}

.apple-style .tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: none;
  padding: 0.25rem;
  margin-bottom: 0.2rem;
}

/* NFT Eye Gallery Section - Sleeker circular design */
.eye-gallery-section {
  margin-top: 0 !important; /* Updated from 0.2rem to 0 */
  margin-bottom: 0; /* Ensure consistent spacing */
}

.eye-gallery-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
  background-color: transparent;
  border: none;
  padding: 0.5rem;
}

.eye-gallery-link:hover {
  box-shadow: none !important;
}

/* Restore hover effects for other elements - excluding eye-gallery-link */
.nasa-image:hover,
.quote-card:hover,
.project-card:hover {
  transform: none !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.38, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0.38, 1) !important;
}

/* Ensure tech-stack-container has no transform on hover */
.tech-stack-container:hover {
  transform: none !important;
  box-shadow: none !important;
}

.eye-circle-frame {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: rotate(-5deg);
  background: rgba(10, 10, 15, 0.3);
}

.eye-gallery-link:hover .eye-circle-frame {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; /* Keep original box-shadow */
  transform: rotate(0deg) !important;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.galactic-eye-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease-out !important;
}

.eye-gallery-link:hover .galactic-eye-gif {
  transform: scale(1.1) !important;
  transition: transform 0.25s ease-out !important;
}

.eye-collection-label {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  position: relative;
  overflow: hidden;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.retro-dos-label {
  font-family: 'VT323', 'Fira Mono', 'Consolas', 'Courier New', monospace;
  color: #19b300;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  background: none;
  text-shadow: 0 0 2px #19b300;
  display: inline-block;
  position: relative;
  cursor: pointer;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0.1em;
  margin-right: 0.1em;
  overflow: visible;
}

.eye-gallery-link:hover .retro-dos-label,
.eye-collection-label:hover .retro-dos-label {
  animation: matrixEnhancedGlitch 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes matrixEnhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px #19b300;
  }
  20%, 25% {
    transform: translate(-1px, 1px) skew(1deg);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: brightness(1.2) contrast(1.2);
  }
  40%, 45% {
    transform: translate(1px, -1px) skew(-1deg);
    text-shadow: -1px 0 #ff0000, 1px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  60%, 65% {
    transform: translate(-0.5px, -0.5px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: saturate(1.5);
  }
  80%, 85% {
    transform: translate(0.5px, 0.5px);
    text-shadow: 0.5px 0.5px #ff0080, -0.5px -0.5px #00ff00;
    filter: brightness(1.2);
  }
}

.retro-dos-label:hover {
  color: #2cff00;
}

.ai-label {
  position: absolute;
  top: -0.3em;
  right: -1.4em;
  padding: 0.15em 0.3em;
  border-radius: 3px;
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: all 0.3s ease;
}

.eye-gallery-link:hover .eye-collection-label {
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.1em;
}

.eye-gallery-link:hover .ai-label {
  transform: scale(1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 970px) {
  .eye-gallery-section {
    margin-top: 0.75rem;
  }
  
  .eye-circle-frame {
    width: 150px;
    height: 150px;
  }
  
  .eye-collection-label {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
  
  .ai-label {
    font-size: 0.75em;
  }
}

/* Add hover overlay effect */
.eye-circle-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.1), rgba(0, 100, 255, 0.1));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.eye-gallery-link:hover .eye-circle-frame::after {
  opacity: 0; /* Changed from 1 to 0 to disable the overlay highlight */
}

.project-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.5) 40%, rgba(10,10,20,0) 100%);
}

.tools-grid .invert-icon {
  filter: brightness(0) invert(1) !important;
}

.tools-grid .rounded-icon {
  border-radius: 8px !important;
  background: #fff0;
}

.retro-dos-label {
  font-family: 'VT323', 'Fira Mono', 'Consolas', 'Courier New', monospace;
  color: #19b300;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  background: none;
  text-shadow: 0 0 2px #19b300;
  display: inline-block;
  position: relative;
  cursor: pointer;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0.1em;
  margin-right: 0.1em;
  overflow: visible;
}

.eye-gallery-link:hover .retro-dos-label,
.eye-collection-label:hover .retro-dos-label {
  animation: matrixEnhancedGlitch 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes matrixEnhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px #19b300;
    filter: none;
  }
  20%, 25% {
    transform: translate(-1px, 1px) skew(1deg);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: brightness(1.2) contrast(1.2);
  }
  40%, 45% {
    transform: translate(1px, -1px) skew(-1deg);
    text-shadow: -1px 0 #ff0000, 1px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  60%, 65% {
    transform: translate(-0.5px, -0.5px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: saturate(1.5);
  }
  80%, 85% {
    transform: translate(0.5px, 0.5px);
    text-shadow: 0.5px 0.5px #ff0080, -0.5px -0.5px #00ff00;
    filter: brightness(1.2);
  }
}

.retro-dos-label:hover {
  color: #2cff00;
}

.ai-label {
  position: absolute;
  top: -0.3em;
  right: -1.4em;
  padding: 0.15em 0.3em;
  border-radius: 3px;
  font-size: 0.6em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  transition: all 0.3s ease;
}

.eye-gallery-link:hover .eye-collection-label {
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0.1em;
}

.eye-gallery-link:hover .ai-label {
  transform: scale(1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 970px) {
  .eye-gallery-section {
    margin-top: 0.75rem;
  }
  
  .eye-circle-frame {
    width: 150px;
    height: 150px;
  }
  
  .eye-collection-label {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
  
  .ai-label {
    font-size: 0.75em;
  }
}

/* Add hover overlay effect */
.eye-circle-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 255, 200, 0.1), rgba(0, 100, 255, 0.1));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.eye-gallery-link:hover .eye-circle-frame::after {
  opacity: 0; /* Changed from 1 to 0 to disable the overlay highlight */
}

.project-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.5) 40%, rgba(10,10,20,0) 100%);
}

.tools-grid .invert-icon {
  filter: brightness(0) invert(1) !important;
}

.tools-grid .rounded-icon {
  border-radius: 8px !important;
  background: #fff0;
}

.retro-dos-label {
  font-family: 'VT323', 'Fira Mono', 'Consolas', 'Courier New', monospace;
  color: #19b300;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  background: none;
  text-shadow: 0 0 2px #19b300;
  display: inline-block;
  position: relative;
  cursor: pointer;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 0.1em;
  margin-right: 0.1em;
  overflow: visible;
}

.eye-gallery-link:hover .retro-dos-label,
.eye-collection-label:hover .retro-dos-label {
  animation: matrixEnhancedGlitch 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes matrixEnhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px #19b300;
    filter: none;
  }
  20%, 25% {
    transform: translate(-1px, 1px) skew(1deg);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: brightness(1.2) contrast(1.2);
  }
  40%, 45% {
    transform: translate(1px, -1px) skew(-1deg);
    text-shadow: -1px 0 #ff0000, 1px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  60%, 65% {
    transform: translate(-0.5px, -0.5px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: saturate(1.5);
  }
  80%, 85% {
    transform: translate(0.5px, 0.5px);
    text-shadow: 0.5px 0.5px #ff0080, -0.5px -0.5px #00ff00;
    filter: brightness(1.2);
  }
}

.retro-dos-label:hover {
  color: #2cff00;
}

.typewriter-text {
  white-space: nowrap;
  font-family: inherit;
}

.retro-slash {
  color: #19b300;
  font-family: inherit;
  font-size: inherit;
  text-shadow: 0 0 2px #19b300;
}

@keyframes typewriter {
  from { width: 0 }
  to { width: 18ch }
}

@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.smaller-icon {
  transform: scale(0.85);
}

/* Add Matrix-style scan lines effect */
.highlight::before, 
.retro-dos-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    transparent 0%,
    rgba(0, 255, 100, 0.01) 0.5px,
    transparent 1px
  );
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight.glitching::before,
.eye-gallery-link:hover .retro-dos-label::before {
  opacity: 1;
}

/* Update highlight with more matrixy effects */
.highlight {
  color: var(--white);
  font-weight: 700;
  position: relative;
  display: inline-block;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.highlight.glitching {
  animation: enhancedGlitch 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes enhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
    filter: none;
  }
  15% {
    transform: translate(-2px, 1px);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: hue-rotate(0deg);
  }
  30% {
    transform: translate(1px, -1px);
    text-shadow: -2px 0 #ff0000, 2px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  45% {
    transform: translate(-1px, -1px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: hue-rotate(180deg);
  }
  60% {
    transform: translate(1px, 1px);
    text-shadow: -1px 1px #ff0080, 1px -1px #00ff00;
    filter: brightness(1.2);
  }
  75% {
    transform: translate(-1px, 0);
    text-shadow: 1px 0 #ff0000, -1px 0 #0000ff;
    filter: contrast(1.2);
  }
  90% {
    transform: translate(1px, 0);
    text-shadow: -1px 0 #00ff00, 1px 0 #ff0080;
    filter: none;
  }
}

/* Remove the digital rain effect */
.highlight::after {
  display: none;
}

/* Remove the digital rain effect from retro label */
.retro-dos-label::after {
  display: none;
}

/* Matrix-style retro label with more polish */
.retro-dos-label {
  font-family: 'VT323', 'Fira Mono', 'Consolas', 'Courier New', monospace;
  color: #19b300;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  background: none;
  text-shadow: 0 0 2px #19b300;
  display: inline-block;
  position: relative;
  cursor: pointer;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.eye-gallery-link:hover .retro-dos-label,
.eye-collection-label:hover .retro-dos-label {
  animation: matrixEnhancedGlitch 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  text-shadow: 0 0 8px rgba(25, 179, 0, 0.7);
}

@keyframes matrixEnhancedGlitch {
  0%, 100% {
    transform: translate(0);
    text-shadow: 0 0 2px #19b300;
    filter: none;
  }
  20%, 25% {
    transform: translate(-1px, 1px) skew(1deg);
    text-shadow: 1px 0 #ff0080, -1px 0 #00ff00;
    filter: brightness(1.2) contrast(1.2);
  }
  40%, 45% {
    transform: translate(1px, -1px) skew(-1deg);
    text-shadow: -1px 0 #ff0000, 1px 0 #0000ff;
    filter: hue-rotate(90deg);
  }
  60%, 65% {
    transform: translate(-0.5px, -0.5px);
    text-shadow: 1px 1px #ff0000, -1px -1px #00ff00;
    filter: saturate(1.5);
  }
  80%, 85% {
    transform: translate(0.5px, 0.5px);
    text-shadow: 0.5px 0.5px #ff0080, -0.5px -0.5px #00ff00;
    filter: brightness(1.2);
  }
}

/* Add digital rain effect to retro label */
.retro-dos-label::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 150%;
  top: -150%;
  background: linear-gradient(to bottom, 
              rgba(25, 179, 0, 0.3) 0%, 
              rgba(25, 179, 0, 0) 100%);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
  z-index: -1;
}

.eye-gallery-link:hover .retro-dos-label::after,
.eye-collection-label:hover .retro-dos-label::after {
  top: 100%;
  opacity: 0.8;
}

/* Add subtle digital noise texture */
.eye-circle-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.eye-gallery-link:hover .eye-circle-frame::before {
  opacity: 0.05 !important; /* Keep it at its original non-hover state */
}

/* Add a subtle glow effect on hover */
.eye-circle-frame {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: rotate(-5deg);
  background: rgba(10, 10, 15, 0.3);
}

.eye-gallery-link:hover .eye-circle-frame {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important; /* Keep original box-shadow */
  transform: rotate(0deg) !important;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

/* Fancy Apple-style pulsing glow - improved with smoother edges */
.eye-gallery-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 260px; /* Increased from 200px */
  height: 260px; /* Increased from 200px */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(25, 179, 0, 0.15) 0%,
    rgba(25, 179, 0, 0.08) 30%,
    rgba(25, 179, 0, 0.03) 60%,
    rgba(25, 179, 0, 0) 90%
  ); /* Extended fade-out gradient with more stops */
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  filter: blur(12px); /* Increased blur for softer edges */
}

.eye-gallery-link:hover::after {
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
}

/* FINAL OVERRIDE to completely remove any shadow from eye-gallery-link */
.eye-gallery-link:hover {
  box-shadow: none !important;
}

/* Firefox scrollbar styling */
.tech-stack-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 80, 90, 0.4) rgba(30, 30, 35, 0);
}

/* Space category sections properly - keep only this instance and remove the duplicate below */
.tech-categories {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* Increased gap between categories */
  padding: 1.25rem;
  padding-top: 0.75rem;
  position: relative;
  z-index: 1;
  background-color: transparent;
  margin-top: 1rem; /* Added top margin */
  transition: none !important;
}

.tech-categories:hover {
  transform: none !important;
}

/* Restore bottom fade with subtle Apple-style gradient - more transparent */
.tech-stack-container::after {
  display: none !important;
}

.tech-stack-container:hover::after {
  display: none !important;
}

/* Sleeker, darker scrollbar styles */
.tech-stack-container::-webkit-scrollbar,
.scrollable::-webkit-scrollbar {
  width: 3px;
}

.tech-stack-container::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-track {
  background: rgba(30, 30, 35, 0.2);
  border-radius: 10px;
}

.tech-stack-container::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb {
  background: rgba(80, 80, 90, 0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.tech-stack-container::-webkit-scrollbar-thumb:hover,
.scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 120, 0.5);
}

/* Disable hover effects for tech stack, bio and profile content */
.tech-stack-container:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--dark-2) !important;
}

.tech-stack-container:hover::after {
  display: none !important;
}

.bio:hover {
  transform: none !important;
}

.profile-content:hover {
  transform: none !important;
  background: transparent !important;
}

/* Disable cursor following highlight for specific sections */
.tech-stack-container::after,
.profile-content::after,
.bio::after {
  display: none !important;
}

.tech-stack-container:hover::after,
.profile-content:hover::after,
.bio:hover::after {
  display: none !important;
  opacity: 0 !important;
}

.project-card:hover .project-content h2 {
  opacity: 0;
}

/* Add rotating dotted outline animation */
@keyframes rotate-outline {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Add the rotating dotted outline */
.project-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  animation: rotate-outline 12s linear infinite;
  pointer-events: none;
  z-index: 3;
}

/* Add a glowing effect */
.project-card::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 18px;
  background: linear-gradient(45deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 25%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.project-card:hover::after {
  opacity: 1;
}

/* Improve the rotating dotted outline animation */
@keyframes rotate-outline {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Add shine/glow effect that moves around the border */
@keyframes border-shine {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 135% 0%;
  }
}

.project-card .rotating-border {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  animation: rotate-outline 15s linear infinite;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Add a second border with opposite rotation for extra flair */
.project-card::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  animation: rotate-outline 20s linear infinite reverse;
  pointer-events: none;
  z-index: 3;
}

/* More vibrant glow on hover */
.project-card:hover .rotating-border {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* Create a subtle reflection effect */
.project-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 25%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: border-shine 3s linear infinite;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.project-card:hover::after {
  opacity: 0.6;
}

/* Remove any other project-card rotating animations that might conflict */
@keyframes rotate-outline {
  0% { }
  100% { }
}

/* Add flowing dash border animation */
@keyframes flow-dash {
  to {
    background-position: 100% 0;
  }
}

/* Flowing dash animation for each side */
@keyframes flow-dash-right {
  to {
    background-position: 100% 100%;
  }
}

@keyframes flow-dash-bottom {
  to {
    background-position: 100% 100%;
  }
}

@keyframes flow-dash-left {
  to {
    background-position: 0 100%;
  }
}

/* Style for the animated border */
.project-card .rotating-border {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: flow-dash 15s linear infinite;
  pointer-events: none;
  z-index: 3;
  border: none;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Add the other sides of the flowing border */
.project-card .rotating-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Right edge */
    linear-gradient(0deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%) right top / 2px 20px repeat-y,
    /* Bottom edge */
    linear-gradient(-90deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%) left bottom / 20px 2px repeat-x,
    /* Left edge */
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 50%, transparent 50%) left top / 2px 20px repeat-y;
  background-position: 
    /* Right edge */
    100% 0,
    /* Bottom edge */
    0 100%,
    /* Left edge */
    0 0;
  border-radius: 18px;
  animation: 
    flow-dash-right 15s linear infinite,
    flow-dash-bottom 15s linear infinite,
    flow-dash-left 15s linear infinite;
}

/* Brighter flowing border on hover */
.project-card:hover .rotating-border {
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, transparent 50%);
  background-size: 20px 2px;
  background-repeat: repeat-x;
  background-position: 0 0;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.project-card:hover .rotating-border::before {
  background: 
    /* Right edge */
    linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, transparent 50%) right top / 2px 20px repeat-y,
    /* Bottom edge */
    linear-gradient(-90deg, rgba(255, 255, 255, 1) 50%, transparent 50%) left bottom / 20px 2px repeat-x,
    /* Left edge */
    linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, transparent 50%) left top / 2px 20px repeat-y;
}

/* Make sure to disable any previous rotating animations */
.project-card::before {
  display: none;
}

/* Replace the current flowing dashed border with racing dots animation */
@keyframes race-track {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Change the rotating border to a racing dots effect */
.project-card .rotating-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 18px;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  border: none;
  background: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
}

/* Create SVG element for the racing dots */
.project-card .rotating-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: none;
  animation: none;
}

/* Racing dots SVG container */
.project-card .racing-dots {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: 3;
  border-radius: 18px;
  pointer-events: none;
}

/* Styling for the racing dots path */
.project-card .racing-dots path {
  fill: none;
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10, 30;
  stroke-dashoffset: 1000;
  animation: race-track 10s linear infinite;
}

/* Brighter racing dots on hover */
.project-card:hover .racing-dots path {
  stroke: white;
  stroke-width: 3;
  stroke-dasharray: 10, 20;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  animation-duration: 5s; /* Faster animation on hover */
}

/* Make sure to disable any previous animations */
.project-card::before {
  display: none;
}

/* Improve the racing dots animation to be more NASCAR-like */
@keyframes race-track {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Add a glow to the dots */
@keyframes dot-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.7));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
  }
}

/* Styling for the racing dots path */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8, 40; /* Shorter dots with more space between */
  stroke-dashoffset: 1000;
  animation: race-track 12s linear infinite, dot-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* Brighter, faster racing dots on hover */
.project-card:hover .racing-dots path {
  stroke: white;
  stroke-width: 5;
  stroke-dasharray: 10, 35;
  animation: race-track 6s linear infinite, dot-glow 1s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}

/* Make the SVG adapt to the card shape precisely */
.project-card .racing-dots {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: 4; /* Ensure it's above other elements */
  pointer-events: none;
  overflow: visible;
}

/* Optimize the racing dots animation */
@keyframes race-track {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Simplified glow effect */
@keyframes dot-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
  }
}

/* Styling for the racing dots path - make smaller and more frequent */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2; /* Smaller dots */
  stroke-linecap: round;
  stroke-dasharray: 4, 16; /* Smaller dots with less space between */
  stroke-dashoffset: 1000;
  animation: race-track 15s linear infinite; /* Slower animation: 8s → 15s */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

/* Brighter racing dots on hover - fix duplication issue */
.project-card:hover .racing-dots path {
  stroke: white;
  stroke-width: 2; /* Keep same size */
  stroke-dasharray: 4, 12; /* More dots but maintain size */
  animation-duration: 10s; /* Slower hover animation: 4s → 10s */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* Ensure the SVG precisely aligns with the card edge */
.project-card .racing-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4; 
  pointer-events: none;
  overflow: visible;
}

/* Fix any border radius mismatch */
.project-card {
  border-radius: 18px;
  overflow: hidden;
}

/* Fine-tune the position of the SVG to align perfectly with card */
.project-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.project-card .racing-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
  border-radius: 18px;
}

/* Ensure the dots align exactly with the card edge */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4, 16;
  stroke-dashoffset: 1000;
  animation: race-track 15s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
  vector-effect: non-scaling-stroke; /* Ensure consistent stroke width */
}

/* Ensure the dots align exactly with the card edge */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(0, 0, 0, 0.7); /* Change from white to black */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4, 16;
  stroke-dashoffset: 1000;
  animation: race-track 25s linear infinite; /* Even slower: 15s → 25s */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); /* Black drop shadow */
  vector-effect: non-scaling-stroke;
}

/* Brighter racing dots on hover */
.project-card:hover .racing-dots path {
  stroke: rgba(0, 0, 0, 0.9); /* Darker black on hover */
  stroke-width: 2;
  stroke-dasharray: 4, 12;
  animation-duration: 18s; /* Slower hover animation: 10s → 18s */
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)); /* Black drop shadow */
}

/* Update glow effect for black */
@keyframes dot-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
  }
}

/* Ensure the dots align exactly with the card edge */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7); /* Change back to white */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4, 16;
  stroke-dashoffset: 1000;
  animation: race-track 40s linear infinite; /* Much slower: 25s → 40s */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); /* White drop shadow */
  vector-effect: non-scaling-stroke;
}

/* Brighter racing dots on hover with faster animation */
.project-card:hover .racing-dots path {
  stroke: rgba(255, 255, 255, 0.9); /* Brighter white on hover */
  stroke-width: 2;
  stroke-dasharray: 4, 12;
  animation-duration: 15s; /* Faster than non-hover: 40s → 15s */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)); /* White drop shadow */
}

/* Update glow effect back to white */
@keyframes dot-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
  }
}

/* Ensure the dots align exactly with the card edge - make dashes longer */
.project-card .racing-dots path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10, 18; /* Increase dash length from 4 to 10, adjust gap accordingly */
  stroke-dashoffset: 1000;
  animation: race-track 40s linear infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
  vector-effect: non-scaling-stroke;
}

/* Brighter racing dots on hover with faster animation */
.project-card:hover .racing-dots path {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-dasharray: 10, 15; /* Maintain consistent dash length, slightly reduce gap */
  animation-duration: 15s;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

/* Brighter racing dots on hover with much faster animation */
.project-card:hover .racing-dots path {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
  stroke-dasharray: 10, 15;
  animation-duration: 4s; /* Much faster: 15s → 4s */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* Brighter racing dots on hover with faster animation, but not too fast */
.project-card:hover .racing-dots path {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
  stroke-dasharray: 10, 15;
  animation-duration: 7s; /* Slow down a bit: 4s → 7s */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* NASA image in the links-projects-container */
.links-projects-container .nasa-image.second-image {
  margin-bottom: 0; /* Ensure consistent spacing */
}

/* Project section spacing */
.project-section {
  margin-bottom: 0; /* Ensure consistent spacing */
}

/* Make sure the layout is consistent at the 969-970px range */
@media (min-width: 901px) and (max-width: 970px) {
  .main-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.2fr 0.7fr;
    grid-template-rows: auto 1fr auto;
    gap: 0.75rem;
    width: 100%;
  }
  
  /* Fix any potential empty space on the right side */
  .container {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
}

/* Mobile and Desktop visibility classes */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 970px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  /* Mobile layout order */
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
  }

  /* Section order for mobile */
  .profile-section { order: 1; }
  .project-section { order: 2; }
  .nasa-image-1 { order: 3; }
  .nasa-image-2 { order: 4; }
  .tech-stack-section { order: 5; }
  .daily-tools-section { order: 6; }
  .spotify-section { order: 7; }
  .eye-gallery-section { order: 8; }
}

@media (max-width: 970px) {
  /* 
    === MOBILE SECTION ORDER CONTROL ===
    Edit the order numbers below to change the mobile layout.
    This is the ONLY place you need to edit for mobile order.
    Desktop layout is NOT affected.
  */
  .main-grid > .profile-section { order: 1 !important; }
  .main-grid > .tech-stack-section { order: 2 !important; }
  .main-grid > .project-section { order: 3 !important; }
  .main-grid > .daily-tools-section { order: 4 !important; }
  .main-grid > .spotify-section { order: 5 !important; }
  .main-grid > .nasa-images-row { order: 6 !important; display: flex; flex-direction: row; gap: 1rem; width: 100%; }
  .main-grid > .eye-gallery-section { order: 7 !important; }

  .nasa-images-row > .nasa-image-1,
  .nasa-images-row > .nasa-image-2 {
    flex: 1 1 0;
    width: 50%;
  }
}

@media (max-width: 970px) {
  .nasa-images-row .nasa-image-1 .space-image {
    background-image: url('assets/01.webp');
  }
  .nasa-images-row .nasa-image-2 .space-image {
    background-image: url('assets/02.webp');
  }
}

.nasa-image-1.desktop-only .space-image {
  background-image: url('assets/01.webp');
}

@media (max-width: 970px) {
  .nasa-images-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 1.5rem;
  }
  .nasa-images-row > .nasa-image {
    flex: 1 1 0;
    width: 48vw;
    max-width: 220px;
    min-width: 0;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  .nasa-images-row > .nasa-image .space-image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    min-height: 0;
    min-width: 0;
  }
}

@media (max-width: 970px) {
  .mobile-section-spacing {
    margin-bottom: 1.25rem !important;
    margin-top: 0 !important;
  }
  /* Remove extra margin from last section */
  .mobile-section-spacing:last-child {
    margin-bottom: 0 !important;
  }
  /* Remove/override any default margin for these sections on mobile */
  .daily-tools-section.mobile-only,
  .spotify-section.mobile-only,
  .nasa-images-row.mobile-only,
  .project-section.mobile-only,
  .eye-gallery-section.mobile-only {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 970px) {
  .tech-stack-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

@media (max-width: 970px) {
  .container {
    padding-top: 0.75rem !important;
  }
}

@media (max-width: 970px) {
  .profile-container {
    margin-bottom: 0.5rem !important;
  }
  .profile-card {
    margin-bottom: 0 !important;
    padding-bottom: 1rem !important;
  }
  .tech-stack-container {
    margin-top: 0 !important;
  }
}

@media (max-width: 970px) {
  .container {
    padding-top: 1.5rem !important;
  }
  .profile-container {
    margin-bottom: 0.25rem !important;
  }
}

@media (max-width: 970px) {
  .profile-card .i-build {
    font-size: 1.3rem !important;
  }
  .profile-card .bio,
  .profile-card .bio-line {
    font-size: 0.8rem !important;
  }
}

.links-projects-container > .links-section {
  margin-bottom: 2.5rem !important;
}

@media (max-width: 970px) {
  .spotify-section {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 1.5rem 0 !important;
  }
  .spotify-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
  }
  .spotify-card iframe {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    border: none !important;
    background: none !important;
    width: 100% !important;
    min-height: 80px !important;
    max-height: 180px !important;
  }
}

@media (max-width: 970px) {
  .profile-content {
    position: relative;
  }
  .profile-content .social-links-grid.mobile-only {
    display: flex !important;
    flex-direction: row;
    gap: 1.2rem;
    justify-content: flex-start;
    align-items: center;
    margin: 0.2rem 0 0 0;
    padding: 0;
    position: absolute;
    left: 1.5rem;
    top: 100%;
    transform: translateY(-3.5rem); /* Move icons a bit higher */
    z-index: 10;
    background: none !important;
    box-shadow: none !important;
  }
  .social-links-grid.mobile-only .social-link {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    min-height: 0;
  }
  .social-links-grid.mobile-only .social-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: transform 0.2s;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    display: block;
  }
  .social-links-grid.mobile-only .social-link:hover .social-icon,
  .social-links-grid.mobile-only .social-link:active .social-icon,
  .social-links-grid.mobile-only .social-link:focus .social-icon {
    transform: none !important;
    opacity: 1;
  }
  .social-links-grid.mobile-only .social-tooltip {
    display: none !important;
  }
}

.nasa-image-1.desktop-only {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0.75rem; /* Match the .main-grid gap */
  margin-bottom: 0.25rem;
}

.project-card h1 {
  font-size: 3rem; /* Fallback for older browsers */
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.1;
  transition: opacity 0.4s;
  white-space: nowrap;
}

.project-card:hover .project-content h1 {
  opacity: 0;
}

/* Update the view hint positioning for h1 */
.view-hint {
  position: absolute;
  bottom: 15%;
  left: 10%;
  transform: none;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.project-card:hover .view-hint {
  opacity: 1;
  transform: translateY(-5px);
}

@media (max-width: 600px) {
  .project-card {
    height: auto !important;
    min-height: 180px !important; /* Increased height */
    padding: 0 !important; /* Zero padding */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* Ensure no clipping */
  }
  .project-card .project-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
  }
  .project-card .project-content h1 {
    font-size: 3.5rem !important; /* Much larger font */
    font-weight: 900 !important; /* Ultra bold */
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    line-height: 1 !important; /* Tighter line height */
    word-break: break-word !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: scale(1.05) !important; /* Slightly scaled up */
    text-shadow: 0 0 5px rgba(255,255,255,0.3) !important; /* Add a subtle glow */
  }
  /* Override any other project-card styles that might interfere */
  .project-card .project-bg-gif {
    opacity: 0.7 !important; /* Make background less distracting */
    filter: blur(2px) !important; /* Less blur for sharper look */
  }
  .project-card .project-gradient {
    opacity: 0.7 !important; /* Make gradient more subtle */
  }
}

/* CRITICAL FIX FOR PROJECTS TITLE - MOBILE DEVICES */
@media (max-width: 768px) {
  body .main-grid .project-section .project-card,
  .main-grid > .project-section > .project-card,
  .project-section.mobile-only .project-card,
  .project-card {
    height: auto !important;
    min-height: 180px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
  }

  body .main-grid .project-card .project-content,
  .main-grid > .project-section > .project-card .project-content,
  .project-section.mobile-only .project-card .project-content,
  .project-card .project-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
  }

  body .main-grid .project-card h1,
  .main-grid > .project-section > .project-card h1,
  .project-section.mobile-only .project-card h1,
  .project-card .project-content h1,
  .project-card h1 {
    font-size: 4rem !important; /* EXTREMELY large font */
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1 !important;
    word-break: normal !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: scale(1.05) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.4) !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Override any animations that might interfere */
  body .project-card:hover .project-content h1,
  .project-card:hover .project-content h1 {
    opacity: 1 !important;
  }

  body .project-card .project-bg-gif,
  .project-card .project-bg-gif {
    opacity: 0.7 !important;
    filter: blur(2px) !important;
  }
}

/* Original media query with increased specificity */
@media (max-width: 600px) {
  body .project-card,
  html .project-card,
  .project-card {
    height: auto !important;
    min-height: 180px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  
  body .project-card .project-content,
  html .project-card .project-content,
  .project-card .project-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
  }
  
  body .project-card .project-content h1,
  html .project-card .project-content h1,
  .project-card .project-content h1,
  .project-card h1 {
    font-size: 4rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1 !important;
    word-break: normal !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: scale(1.05) !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.4) !important;
  }
  
  /* Override any other project-card styles that might interfere */
  body .project-card .project-bg-gif,
  html .project-card .project-bg-gif,
  .project-card .project-bg-gif {
    opacity: 0.7 !important;
    filter: blur(2px) !important;
  }
  
  body .project-card .project-gradient,
  html .project-card .project-gradient,
  .project-card .project-gradient {
    opacity: 0.7 !important;
  }

  /* Force hover state to maintain visibility */
  body .project-card:hover .project-content h1,
  html .project-card:hover .project-content h1,
  .project-card:hover .project-content h1 {
    opacity: 1 !important;
  }
}

/* Touch hover for mobile devices */
.project-card.touch-hover .project-content h1 {
  opacity: 0 !important;
}

.project-card.touch-hover .view-hint {
  opacity: 1 !important;
  transform: translateY(-5px) !important;
}

.project-card.touch-hover .project-bg-gif {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: scale(1.05) !important;
}

.project-card.touch-hover .pulse-line {
  animation: pulse 2s ease-in-out infinite !important;
}

.project-card.touch-hover::after {
  opacity: 0.6 !important;
}

/* Ensure project title fades on hover for ALL devices */
.project-card:hover .project-content h1,
.project-card:hover .project-content h2,
body .project-card:hover .project-content h1,
html .project-card:hover .project-content h1,
body .project-card:hover .project-content h2,
html .project-card:hover .project-content h2 {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  visibility: hidden !important;
}

.project-card .project-content h1,
.project-card .project-content h2,
body .project-card .project-content h1,
html .project-card .project-content h1,
body .project-card .project-content h2,
html .project-card .project-content h2 {
  opacity: 1 !important;
  transition: opacity 0.3s ease !important;
  visibility: visible !important;
}

/* Ensure project GIF unblurs on hover for ALL devices */
.project-card:hover .project-bg-gif,
body .project-card:hover .project-bg-gif,
html .project-card:hover .project-bg-gif,
.project-card.touch-hover .project-bg-gif {
  opacity: 1 !important;
  filter: blur(0px) !important;
  transform: scale(1.05) !important;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease !important;
}

.links-projects-container .project-card h1 {
  font-size: 3rem; /* Fallback for older browsers */
  font-size: clamp(2rem, 6vw, 3rem);
}