/* Further reduced logo size and clickable area */
nav .logo {
  height: 25px; /* Further reduced from 30px to 25px */
  display: flex;
  align-items: center;
  max-width: 80px; /* Limit the clickable area width */
}

nav .logo img {
  height: 100%;
  width: auto;
  max-width: 80px; /* Reduced from 120px to 80px */
  object-fit: contain;
}

/* Project card hover animations */
.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  background-color: #1d1d1d; /* Slightly lighter than the base color */
}

.project-info {
  transition: padding 0.3s ease;
}

.project-card:hover .project-info {
  padding-left: 2.5rem; /* Increase padding on hover for a subtle animation */
}

.project-image img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.project-card:hover .project-image img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Case study button styling */
.view-case-study {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: rgba(120, 190, 186, 0.1);
  border: 1px solid var(--color-teal);
  border-radius: 30px;
  color: var(--color-teal);
  font-family: var(--font-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.view-case-study:hover {
  background-color: var(--color-teal);
  color: var(--color-black);
  transform: translateY(-2px);
}

/* Add a note about demo functionality */
.demo-note {
  font-size: 0.8rem;
  font-family: var(--font-secondary);
  font-style: italic;
  color: var(--color-light-gray);
  margin-top: 0.5rem;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
}

p, .tag, .category-link {
  font-family: var(--font-secondary);
}

.main-title {
  font-family: var(--font-primary);
  font-weight: 700;
}

.tagline {
  font-family: var(--font-primary);
  font-weight: normal;
}

/* Enhance category section styling */
.category-content h2 {
  font-family: var(--font-primary);
  font-weight: 700;
}

.category-content p {
  font-family: var(--font-secondary);
}

.category-link {
  font-family: var(--font-secondary);
  letter-spacing: 1px;
}

/* Music composition visualization specific adjustments */
/* Add these to your css/section-fixes.css file */

/* For category header visualizations */
.category-header {
  position: relative;
  height: 50vh;
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

/* Make the visualization container take up the full width and height */
.category-header .category-visualization {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  pointer-events: none;
}

/* Ensure that music visualizations have the proper width */
.music-composition-header .category-visualization canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Ensure the background canvas stays behind content */
#background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Specific styling for visualization types */
.music-visualization canvas {
  opacity: 0.9; /* Higher opacity for music visualization */
}

.sound-visualization canvas {
  opacity: 0.8; /* Sound design slightly transparent */
}

.technical-visualization canvas {
  opacity: 0.85; /* Technical visualizations opacity */
}

/* Ensure visualization containers have correct z-index positioning */
#sound-design-visualization,
#music-composition-visualization,
#technical-audio-visualization {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ensure header content stays above visualizations */
.category-header-content {
  position: relative;
  z-index: 5;
  padding: 2rem;
  background-color: rgba(17, 17, 17, 0.7);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: center;
  pointer-events: auto;
}

/* Hardware acceleration for smoother animations */
canvas {
  transform: translateZ(0);
  will-change: transform;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .category-visualization {
    opacity: 0.6 !important; /* Force reduced opacity on mobile for better readability */
  }
  
  .category-header {
    height: 40vh;
    min-height: 250px;
  }
}

/* For WebKit browsers to ensure proper z-indexing */
.category-visualization canvas {
  -webkit-transform: translateZ(0);
}

/* Category header background colors */
.sound-design-header {
  background-color: rgba(120, 190, 186, 0.05);
}

.music-composition-header {
  background-color: rgba(231, 178, 37, 0.05);
}

.technical-audio-header {
  background-color: rgba(211, 82, 51, 0.05);
}