/* ========================================
   PORTFOLIO STYLES - Swiss Minimal Design
   ======================================== */

/* Site-wide margins */
body {
  margin: var(--site-margin);
}

/* Navigation - Swiss Minimal */
.navbar {
  position: fixed;
  top: var(--site-margin);
  left: var(--site-margin);
  right: var(--site-margin);
  z-index: var(--z-fixed);
  transition: all var(--transition-theme);
  margin: 0;
  mix-blend-mode: exclusion;
  -webkit-mix-blend-mode: exclusion; /* Safari/iOS support */
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 48px;
}

.nav-logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-logo a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  line-height: 1;
  transition: none; /* Remove transition to allow animation */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: transparent;
  border-radius: var(--border-radius-2xl);
  padding: var(--space-md) var(--space-xl);
  display: inline-block;
  min-height: 24px;
  box-sizing: border-box;
}


.nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-right: 0; /* No extra padding - navbar already provides 20px margin */
}

.nav-link {
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  transition: none; /* Remove transition to allow animation */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: transparent;
  border-radius: var(--border-radius-2xl);
  padding: var(--space-md) var(--space-xl);
  display: inline-block;
  min-height: 24px;
  box-sizing: border-box;
}


.nav-toggle {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.bar {
  width: 24px;
  height: 2px;
  background-color: var(--theme-text-primary);
  transition: all var(--transition-fast);
}

/* Layout System - Swiss Minimal */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: 80px 0;
}

.section-sm {
  padding: 60px 0;
}

.section-lg {
  padding: 120px 0;
}

/* Hero Section - Swiss Minimal */
.hero {
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background-color: transparent;
  padding-top: 0;
}

.hero-content {
  max-width: 800px;
}

.hero h1 {
  margin-bottom: 20px;
  color: var(--theme-text-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: normal;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--theme-text-secondary);
  margin-bottom: 40px;
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.5px;
}

.hero-description {
  font-size: var(--font-size-base);
  color: var(--theme-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
}

/* 3D Hero Section */
.hero-3d {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Spline 3D Viewer */
.hero-3d spline-viewer {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Hero Overlay for any content over the 3D scene */
.hero-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Allow interaction with 3D scene */
}

.hero-overlay .hero-content {
  pointer-events: auto; /* Re-enable for any interactive content */
}

/* Hero Background Text */
.hero-background-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Behind the 3D scene */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.background-text-top,
.background-text-bottom {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 12vw, 16rem);
  line-height: 0.7;
  letter-spacing: normal;
  color: var(--theme-text-inverse);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transition: opacity var(--transition-theme), color var(--transition-theme);
  width: 100%;
  text-align: center;
  overflow: visible;
  max-width: 100vw;
}

.background-text-top {
  transform: translateY(-100px); /* Move up more for better clearance */
}

.background-text-bottom {
  transform: translateY(100px); /* Move down more for better clearance */
}

/* Responsive adjustments for background text */
@media (max-width: 768px) {
  .hero-background-text {
    padding: 0 10px;
  }
  
  .background-text-top,
  .background-text-bottom {
    font-size: clamp(1.8rem, 10vw, 8rem);
    line-height: 0.6;
  }
  
  .background-text-top {
    transform: translateY(-60px);
  }
  
  .background-text-bottom {
    transform: translateY(60px);
  }
}

@media (max-width: 480px) {
  .background-text-top,
  .background-text-bottom {
    font-size: clamp(1.2rem, 8vw, 4rem);
    line-height: 0.5;
  }
  
  .background-text-top {
    transform: translateY(-45px);
  }
  
  .background-text-bottom {
    transform: translateY(45px);
  }
}

/* Mobile Navigation - Hidden on desktop */
.mobile-nav {
  display: none;
}

/* Ensure proper responsive behavior */
@media (max-width: 768px) {
  /* Hide desktop navigation */
  .nav-menu {
    display: none !important;
  }
  
  /* Show mobile navigation */
  .mobile-nav {
    display: flex !important;
  }
  
  /* Ensure mobile layout snaps properly */
  .navbar {
    height: auto;
    padding: var(--space-xl);
  }
  
  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure all sections are mobile-friendly */
  .section {
    padding: 40px var(--site-margin);
  }
  
  /* Work section mobile adjustments */
  .work {
    height: 100vh; /* Maintain full height on mobile */
    margin: 0; /* Reset margin on mobile */
    padding: 4px; /* Minimal padding on mobile */
  }
  
  .work-grid {
    flex-direction: column; /* Stack cards vertically on mobile */
    gap: var(--space-md); /* Increase gap for better spacing */
  }
  
  .work-column {
    flex: none; /* Remove flex growth on mobile */
    width: 100%; /* Full width on mobile */
    flex-direction: column; /* Ensure cards stack within each column */
    gap: var(--space-md); /* Consistent gap between cards */
  }
  
  .work-card {
    flex: 1; /* Fill available height */
    padding: var(--space-md); /* Match gap spacing for consistency */
  }
  
  .work-card-title {
    font-size: clamp(1rem, 6vw, 3rem); /* Smaller text on mobile */
  }
}

/* Pop Up Jay Component - Single Frame Structure */
.popup-jay {
  position: absolute;
  width: fit-content;
  height: fit-content;
  min-width: fit-content; /* Shrinks to minimum content size */
  max-width: calc(100vw - var(--site-margin) * 2); /* Respect site margins */
  z-index: var(--z-popover);
  background-color: #eeeeee; /* Default light theme - overridden by theme-specific rules */
  border: 2px solid #070707; /* Default light theme - overridden by theme-specific rules */
  pointer-events: none; /* Don't interfere with content interaction */
  border-radius: 50px 50px 50px 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-sizing: border-box;
  display: inline-flex; /* Better for content-based sizing */
  align-items: center; /* Center both avatar and text vertically */
  gap: 12px;
  padding: 12px 20px 12px 12px;
  pointer-events: auto;
  
  /* Initial state - hidden and positioned lower */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated entrance state */
.popup-jay.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.popup-jay-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--theme-bg-secondary); /* Use design system color */
  background-image: url('../images/jay.png');
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Ensure avatar background works in both themes */
[data-theme="light"] .popup-jay-avatar {
  background-color: var(--theme-light-bg-secondary);
}

[data-theme="dark"] .popup-jay-avatar {
  background-color: var(--theme-bg-secondary);
}

/* Pop Up Jay theme-specific styling */
[data-theme="light"] .popup-jay {
  background-color: #eeeeee;
  border-color: #070707;
}

[data-theme="dark"] .popup-jay {
  background-color: #151515;
  border-color: #ffffff;
}

.popup-jay-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--theme-text-primary);
  display: flex;
  align-items: center;
  text-align: left; /* Left align text content */
  max-width: 35ch;
  min-width: 0; /* Allow text to shrink if needed */
  white-space: normal;
  word-wrap: break-word; /* Break long words if necessary */
  overflow-wrap: break-word; /* Modern browsers */
  flex: 0 1 auto; /* Don't grow, can shrink, auto basis - sizes to content */
}

/* Pop Up Jay Positioning Variants */
.popup-jay--hero-1 {
  top: 20%;
  right: 10%;
  z-index: 1100 !important; /* Above locked banners and other content */
}

.popup-jay--hero-2 {
  bottom: 25%;
  left: 8%;
  z-index: 1100 !important; /* Above locked banners and other content */
}

.popup-jay--about-1 {
  top: 15%;
  left: 5%;
  z-index: 1100 !important; /* Above locked banners and other content */
}

.popup-jay--projects-1 {
  top: 30%;
  right: 5%;
}

/* Responsive Pop Up Jay */
@media (max-width: 768px) {
  .popup-jay {
    width: fit-content;
    height: fit-content;
    position: relative;
    margin: 20px auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  
  .popup-jay-container {
    padding: 15px;
    gap: 15px;
  }
  
  .popup-jay-avatar {
    width: 50px;
    height: 50px;
  }
  
  .popup-jay-text {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .popup-jay {
    width: fit-content;
    height: fit-content;
  }
  
  .popup-jay-container {
    padding: 12px;
    gap: 12px;
  }
  
  .popup-jay-avatar {
    width: 40px;
    height: 40px;
  }
  
  .popup-jay-text {
    font-size: var(--font-size-sm);
  }
}

/* Visually hidden class for accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sections - Swiss Minimal */
.section h2 {
  margin-bottom: 60px;
  text-align: left;
  color: var(--theme-text-primary);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-3xl);
  letter-spacing: normal;
}

/* About Section */
.about {
  background-color: transparent;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--site-margin);
  margin: 140px 0;
}

.about .container {
  position: relative; /* Enable positioning for Pop Up Jay */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Ensure hero section can contain Pop Up Jays */
.hero {
  position: relative;
}

.hero .container {
  position: relative;
}

/* Ensure 3D hero section can contain Pop Up Jays */
.hero-3d .container {
  position: relative;
  z-index: 3; /* Above 3D scene and background text */
}

.about-content {
  max-width: 700px; /* Slightly narrower than project content */
  width: 100%;
  text-align: left;
}

.about-text {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.5;
  color: var(--theme-text-inverse);
  margin-bottom: 2rem;
  letter-spacing: normal;
  opacity: 0.8;
}

.about-text:last-child {
  margin-bottom: 0;
}

/* Figma crossed out with marker effect */
.figma-crossed {
  position: relative;
  display: inline-block;
}

.figma-crossed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2px;
  right: -2px;
  height: 8px;
  background: linear-gradient(45deg, #E40303 0%, #CC0000 50%, #E40303 100%);
  transform: translateY(-50%) rotate(-2deg);
  border-radius: 4px;
  opacity: 0.9;
  z-index: 1;
}

/* Cursor handwritten style */
.cursor-handwritten {
  font-family: 'Rock Salt', cursive;
  font-size: 1.8em;
  color: #E40303;
  position: relative;
  display: inline-block;
  margin-left: 8px;
  margin-right: -20px;
  transform: rotate(-8deg);
  font-weight: normal;
}

/* Pop Up Jay positioning for About section */
.popup-jay--about {
  top: 40%; /* Moved higher from 60% */
  left: -10%; /* Move further left to avoid overlap */
  z-index: 4; /* Above other content */
}

/* About Section Responsive */
@media (max-width: 768px) {
  .about {
    padding: 40px var(--site-margin); /* Match project content padding */
  }
  
  .about-content {
    max-width: 100%; /* Full width on mobile */
  }
  
  .about-text {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }
  
  .popup-jay--about {
    top: 50%; /* Higher positioning on tablet */
    left: -5%; /* Move further left on tablet */
  }
}

@media (max-width: 480px) {
  .about {
    padding: 60px var(--site-margin); /* Match project content padding */
  }
  
  .about-content {
    max-width: 100%; /* Full width on mobile */
  }
  
  .about-text {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }
  
  /* Mobile Pop Up Jay - Simple bottom positioning above nav */
  .popup-jay {
    position: fixed !important;
    bottom: 120px; /* Above mobile nav (40px) + nav height + padding */
    left: var(--site-margin);
    right: var(--site-margin);
    top: auto !important;
    width: fit-content !important; /* Shrinks to content width */
    height: auto !important; /* Allow height to adjust to content */
    min-width: fit-content !important; /* Shrinks to minimum content size */
    min-height: fit-content !important; /* Ensure it fits content */
    max-width: calc(100vw - var(--site-margin) * 2) !important; /* Respect site margins */
    z-index: 100; /* Below navigation but above content */
    display: none; /* Hidden by default on mobile, shown by JS when section is visible */
  }
  
  .popup-jay.animate-in {
    display: inline-flex !important; /* Show when animated in, use inline-flex for better sizing */
    margin: 0 auto !important; /* Center horizontally when smaller than container */
  }
  
  /* Ensure text container can expand on mobile */
  .popup-jay .popup-jay-text {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  .popup-jay--about {
    position: fixed;
    /* Mobile positioning overridden by above rule */
  }
}


/* Work Section - Full width, full height, theme-aware */
.work {
  background-color: #070707; /* Always black in light mode */
  width: 100vw;
  height: 100vh;
  margin: calc(-1 * var(--site-margin)); /* Break out of all container margins */
  padding: var(--space-xs); /* Override section padding */
  transition: background-color var(--transition-theme);
}

/* Contact Section - Full height, centered email */
.contact {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--site-margin);
  margin: 200px 0;
}

.contact .container {
  position: relative;
  width: 100%;
  text-align: center;
}

.contact .contact-email {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem); /* Same as about section text */
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--theme-text-inverse);
  margin: 0;
  text-align: center;
  cursor: pointer;
  transition: none; /* Remove transition to allow animation */
  text-transform: lowercase;
}

.contact .contact-email {
  animation: none; /* Ensure no animation by default */
}

.contact .contact-email:hover {
  animation: rainbow-cycle 1s linear infinite;
  mix-blend-mode: normal; /* Override blend mode on hover */
}

/* Ensure contact email animation works in both themes */
[data-theme="light"] .contact .contact-email,
[data-theme="dark"] .contact .contact-email {
  animation: none; /* Ensure no animation by default in both themes */
}

[data-theme="light"] .contact .contact-email:hover,
[data-theme="dark"] .contact .contact-email:hover {
  animation: rainbow-cycle 1s linear infinite;
  mix-blend-mode: normal; /* Override blend mode on hover */
}

@keyframes rainbow-cycle {
  0% { color: #E40303; } /* Red */
  8.33% { color: #FF8C00; } /* Orange */
  16.66% { color: #FFED00; } /* Yellow */
  25% { color: #008026; } /* Green */
  33.33% { color: #004DFF; } /* Blue */
  41.66% { color: #750787; } /* Purple */
  50% { color: #FFFFFF; } /* White */
  58.33% { color: #FFB6C1; } /* Light Pink */
  66.66% { color: #87CEEB; } /* Light Blue */
  75% { color: #8B4513; } /* Brown */
  83.33% { color: #000000; } /* Black */
  91.66% { color: #E40303; } /* Back to red */
  100% { color: #E40303; } /* Red for seamless loop */
}

/* Theme switching for work section */
[data-theme="dark"] .work {
  background-color: #070707; /* Keep black background in dark mode */
}

.work .container {
  max-width: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
}

.work-grid {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.work-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-xs);
}

.work-card {
  background-color: #ffffff; /* White cards in light mode */
  border-radius: 4px;
  margin: 0;
  padding: 40px;
  transition: all var(--transition-normal);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.work-card:hover,
.work-card:focus,
.work-card:visited {
  text-decoration: none;
}

.work-card--large {
  flex: 1.6; /* Approximately 620px out of 1016px total */
}

.work-card--small {
  flex: 1; /* Approximately 392-400px out of 1016px total */
}

.work-card:hover {
  transform: none;
  box-shadow: none;
  padding: 0;
}

.work-card-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 8vw, 10rem);
  line-height: 0.8;
  letter-spacing: normal;
  color: #070707; /* Always dark text on white cards */
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card-title-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  animation: none;
  width: 100%;
}

.work-card-title-text {
  display: block;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0;
  padding-right: 80px;
  text-transform: uppercase;
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 8vw, 10rem);
  line-height: 0.8;
  letter-spacing: normal;
  color: #070707; /* Always dark text on white cards */
}

.work-card-title-copies {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.work-card:hover .work-card-title-content {
  animation: ticker-scroll 4s linear infinite;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Locked banner overlays for Nike cards */
.work-card--locked {
  position: relative;
  overflow: hidden; /* Clip banners within card bounds */
  z-index: 1; /* Create stacking context for banners */
}

.work-card--locked::before,
.work-card--locked::after {
  content: "LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED LOCKED";
  position: absolute;
  background-color: #E13800; /* Red from Figma */
  color: #070707; /* Dark text from Figma */
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  padding: 20px 40px;
  white-space: nowrap;
  z-index: 1; /* Stay within the work card stacking context */
  width: 500%; /* Extended to cover entire diagonal */
  word-spacing: 24px; /* Even more space between words */
  box-shadow: 
    0 4px 9px rgba(7, 7, 7, 0.14),
    0 17px 17px rgba(7, 7, 7, 0.12),
    0 37px 22px rgba(7, 7, 7, 0.07),
    0 66px 26px rgba(7, 7, 7, 0.02); /* Drop shadows from Figma */
}

/* Centered diagonal banner 1 */
.work-card--locked::before {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-35deg);
  transform-origin: center center;
}

/* Centered diagonal banner 2 */
.work-card--locked::after {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transform-origin: center center;
}

/* Theme switching for work cards - keep white in both themes */
[data-theme="dark"] .work-card {
  background-color: #ffffff; /* Keep white cards in dark mode */
}

/* ===== PROJECT TEMPLATE STYLES ===== */

/* Project Main */
.project-main {
  padding-top: calc(var(--site-margin) + 48px); /* Account for fixed navbar */
}

/* Project Hero */
.project-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--site-margin);
}

.project-hero-content {
  text-align: center;
  max-width: 1200px; /* Much wider than body copy (800px) */
  width: 100%;
}

.project-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 8vw, 10rem);
  line-height: 0.8;
  letter-spacing: normal;
  color: var(--theme-text-inverse);
  text-align: center;
  margin: 0 0 24px 0;
  text-transform: uppercase;
}

.project-subtitle {
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  line-height: 1.3;
  color: var(--theme-text-primary);
  margin: 0 auto;
  opacity: 0.8;
  max-width: 80%;
  text-align: center;
}

/* Project Details */
.project-details {
  padding: 200px var(--site-margin);
  display: flex;
  justify-content: center;
}

.project-details-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 80px;
  max-width: 1200px;
  width: 100%;
}

.project-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.project-info-item h3 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--theme-text-primary);
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.project-info-item p {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--theme-text-inverse);
  margin: 0;
  line-height: 1.2;
}

.project-description-content {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--theme-text-primary);
  opacity: 0.8;
}

.project-description-content p {
  margin: 0 0 24px 0;
}

.project-description-content p:last-child {
  margin-bottom: 0;
}

/* Project Content */
.project-content {
  padding: 200px var(--site-margin) 0 var(--site-margin);
  display: flex;
  justify-content: center;
}

.project-content-area {
  max-width: 800px;
  width: 100%;
}

.project-image {
  margin: 0 0 60px 0;
}

.project-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Project Placeholder Containers */
/* Base class for both images and placeholders */
.project-media {
  width: 100vw;
  height: auto;
  background-color: transparent;
  border-radius: 0;
  margin: 0 0 200px 0;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  overflow: hidden;
}

.project-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Specific styling for real project images */
.project-image img {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Dark mode stroke for project images */
[data-theme="dark"] .project-image img {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Project carousel styles */
.project-carousel {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.carousel-container {
  position: relative;
  width: 100%;
  height: auto;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.carousel-image.active {
  opacity: 1;
}

.carousel-spacer-image {
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* Dark mode carousel styling */
[data-theme="dark"] .project-carousel {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .carousel-image {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Removed ::before overlay for real images */

/* Placeholder styling for empty containers */
.project-placeholder-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: #666666; /* Medium gray text for light mode */
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
  text-align: center;
}

/* Dark mode styles for placeholders */
[data-theme="dark"] .project-placeholder-text {
  color: #999999; /* Lighter gray text for dark mode */
}

/* Mobile responsive */
@media (max-width: 768px) {
  .project-media {
    height: auto;
    width: 100vw !important; /* Full viewport width on mobile */
    margin-left: 50% !important; /* Center the full-width element */
    transform: translateX(-50%) !important; /* Center the full-width element */
    margin-bottom: 80px !important; /* Reduced from 200px for mobile-friendly spacing */
  }
  
  .project-video--full {
    width: 100vw !important; /* Full viewport width on mobile */
    margin-left: 50% !important; /* Center the full-width element */
    transform: translateX(-50%) !important; /* Center the full-width element */
    margin-bottom: 80px !important; /* Reduced from 200px for mobile-friendly spacing */
  }
  
  .project-screenshots {
    width: 100vw !important; /* Full viewport width on mobile */
    margin-left: 50% !important; /* Center the full-width element */
    transform: translateX(-50%) !important; /* Center the full-width element */
    margin-bottom: 80px !important; /* Reduced from 200px for mobile-friendly spacing */
  }
}

.project-text {
  max-width: 600px;
  margin: 0 auto 200px auto;
}

.project-text h2 {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--theme-text-inverse);
  margin: 0 0 24px 0;
  letter-spacing: normal;
}

.project-text p {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--theme-text-primary);
  opacity: 0.8;
  margin: 0 0 24px 0;
}

.project-text p:last-child {
  margin-bottom: 0;
}

/* Project Video */
.project-video {
  margin: 0 0 200px 0;
  width: 100%;
  border-radius: 0;
}

.project-video--full {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}

/* Project Screenshots */
.project-screenshots {
  margin-bottom: 200px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.screenshot-masonry {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  padding: 0 var(--space-xs);
  position: relative;
}

.screenshot-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Default: center first column for 2-column layouts */
.screenshot-column:nth-child(1) {
  justify-content: center;
}

/* Three column layout - all columns horizontally centered */
.screenshot-masonry--three-col .screenshot-column:nth-child(1) {
  justify-content: center;
}

.screenshot-masonry--three-col .screenshot-column:nth-child(2) {
  justify-content: center;
}

.screenshot-masonry--three-col .screenshot-column:nth-child(3) {
  justify-content: center;
}

/* Mixed layout - portrait images stacked, landscape side by side */
.screenshot-masonry--mixed {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  padding: 0 var(--space-xs);
}

.screenshot-masonry--mixed .screenshot-column--portrait {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  justify-content: center;
}

.screenshot-masonry--mixed .screenshot-column--landscape {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  justify-content: center;
}

.screenshot-card--portrait img {
  border-radius: var(--border-radius-md);
}

.screenshot-card {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  width: 100%;
}

.screenshot-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark mode stroke */
[data-theme="dark"] .screenshot-card img {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Twitter screenshot grid - no corner radius or stroke */
.screenshot-masonry--twitter .screenshot-card img {
  border-radius: 0;
  border: none;
}


/* Viewport-fixed popup jay - completely separate from base popup-jay */
.popup-jay-viewport-fixed {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Inherit styling from base popup-jay but not positioning */
  background-color: #eeeeee;
  border: 2px solid #070707;
  border-radius: 50px 50px 50px 12px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 12px 20px 12px 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - var(--site-margin) * 2); /* Respect site margins */
}

/* Viewport-fixed popup positioning variants */
.popup-jay-viewport-fixed--left {
  left: var(--site-margin);
}

.popup-jay-viewport-fixed--center {
  left: 50%;
  top: auto;
  bottom: 120px;
  transform: translate(-50%, 0);
  max-width: 400px; /* Match other popup widths on desktop */
}

.popup-jay-viewport-fixed--right {
  right: var(--site-margin);
}

.popup-jay-viewport-fixed.section-in-view {
  opacity: 1;
}



/* Theme-specific styling for viewport-fixed popup */
[data-theme="light"] .popup-jay-viewport-fixed {
  background-color: #eeeeee;
  border-color: #070707;
}

[data-theme="dark"] .popup-jay-viewport-fixed {
  background-color: #151515;
  border-color: #ffffff;
}

/* Mobile overrides for viewport-fixed popup */
@media (max-width: 768px) {
  .popup-jay-viewport-fixed {
    left: var(--site-margin);
    top: 50vh;
    transform: translateY(-50%);
  }
  
  .popup-jay-viewport-fixed--center {
    left: var(--site-margin);
    top: 50vh;
    transform: translateY(-50%);
    width: fit-content !important; /* Shrinks to content width */
    max-width: calc(100vw - var(--site-margin) * 2); /* Respect site margins */
  }
}

@media (max-width: 768px) {
  .screenshot-masonry {
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
  }
  
  .screenshot-column {
    gap: 4px;
  }
  
  .screenshot-card img {
    border-radius: 4px; /* 4px radius on mobile */
  }
}

/* Project Navigation */
.project-navigation {
  padding: 0 var(--site-margin) 240px var(--site-margin);
}

.project-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.project-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 40px 20px;
  border-radius: 8px;
  transition: all var(--transition-normal);
  color: inherit;
}

.project-nav-item:hover {
  background-color: var(--theme-bg-secondary);
  transform: translateY(-4px);
}

.project-nav-label {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--theme-text-primary);
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  opacity: 0.6;
}

.project-nav-title {
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--theme-text-inverse);
  margin: 0;
  line-height: 1.2;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .project-hero {
    min-height: 50vh;
    padding: 40px var(--site-margin);
  }
  
  .project-details {
    padding: 40px var(--site-margin); /* Match hero padding */
  }
  
  .project-content {
    padding: 40px var(--site-margin); /* Consistent spacing */
  }
  
  .project-navigation {
    padding: 40px var(--site-margin); /* Consistent spacing */
  }
  
  
  .project-details-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
  }
  
  .project-info {
    flex-direction: column;
    gap: 24px;
  }
  
  .project-content {
    padding: 40px var(--site-margin);
  }
  
  .project-content-area {
    max-width: 100%;
  }
  
  .project-text {
    max-width: 100%;
    padding: 40px var(--site-margin); /* Add horizontal padding for mobile readability */
    margin-bottom: 80px; /* Reduced from 200px for mobile-friendly spacing */
  }
  
  .project-navigation {
    padding: 60px var(--site-margin) 60px var(--site-margin);
  }
  
  
  .project-nav-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .project-nav-item {
    padding: 24px 16px;
  }
}

[data-theme="dark"] .work-card:hover {
  background-color: #ffffff; /* Keep white cards in dark mode */
}

/* Work card titles now use theme-aware colors */

/* Contact Section */
.contact {
  background-color: transparent;
}

.contact-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.contact-content p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* Footer */
.footer {
  position: fixed;
  bottom: calc(var(--site-margin) + 12px); /* Account for nav item padding */
  left: 0;
  right: 0;
  z-index: 9998; /* High z-index, just below cursor (9999) */
  background-color: transparent;
  padding: 0 calc(var(--site-margin) + 20px); /* Match nav item visual positioning */
  mix-blend-mode: exclusion; /* Apply blend mode to entire footer - same as cursor */
  -webkit-mix-blend-mode: exclusion; /* Safari/iOS support */
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-left {
  justify-self: flex-start;
}

.footer-center {
  justify-self: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.footer-right {
  justify-self: flex-end;
}

.footer-left,
.footer-center,
.footer-right {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: #ffffff; /* White base color for blend mode */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: none;
}

/* Remove default link styles from footer links */
.footer a {
  color: inherit;
  text-decoration: none;
  transition: none;
}

.footer a {
  animation: none; /* Ensure no animation by default */
}

.footer a:hover,
.footer a:focus {
  text-decoration: none;
  animation: rainbow-cycle 1s linear infinite;
  mix-blend-mode: normal; /* Override blend mode on hover */
}

/* Ensure footer animation works in both themes */
[data-theme="light"] .footer a,
[data-theme="dark"] .footer a {
  animation: none; /* Ensure no animation by default in both themes */
}

[data-theme="light"] .footer a:hover,
[data-theme="light"] .footer a:focus,
[data-theme="dark"] .footer a:hover,
[data-theme="dark"] .footer a:focus {
  animation: rainbow-cycle 1s linear infinite;
  mix-blend-mode: normal; /* Override blend mode on hover */
}

/* Fallback for browsers without blend mode support - same as cursor */
@supports not (mix-blend-mode: exclusion) {
  .footer {
    mix-blend-mode: normal;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    color: var(--theme-text-primary);
  }
  
  .navbar,
  .mobile-nav {
    mix-blend-mode: normal;
  }
  
  .nav-logo a,
  .nav-link,
  .mobile-nav .nav-link {
    color: var(--theme-text-primary);
  }
}

/* Removed hover states - cursor inversion provides visual feedback */

/* Mobile Hero - Hide Spline and show text instead */
@media (max-width: 768px) {
  #spline-scene {
    display: none; /* Hide 3D embed on mobile */
  }
  
  .hero-background-text {
    display: none; /* Hide background text on mobile */
  }
  
  .hero-3d::before {
    content: "I MAKE COMPLEX THINGS SIMPLE";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-family-display);
    font-weight: 700; /* Bold weight - heaviest available */
    font-size: clamp(3rem, 12vw, 6rem); /* Much bigger - increased from 8vw to 12vw */
    line-height: 0.8; /* Tighter line height for impact */
    letter-spacing: normal; /* Tighter letter spacing */
    color: var(--theme-text-inverse);
    text-align: center;
    width: 95%; /* Slightly wider */
    z-index: 1;
  }
}

/* Footer Mobile Responsive */
@media (max-width: 768px) {
  .footer {
    position: static; /* Remove fixed positioning */
    bottom: auto;
    left: auto;
    right: auto;
    z-index: auto;
    padding: 40px 20px 120px 20px; /* Extra bottom padding for mobile nav clearance */
    margin-top: 60px; /* Space from content above */
  }
  
  .footer-container {
    flex-direction: column;
    gap: 32px; /* Doubled spacing between footer items */
    align-items: center;
  }
  
  .footer-center {
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove transform */
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    justify-self: center;
  }
}

/* Mobile Navigation - Complete redesign */
@media (max-width: 768px) {
  body {
    margin: 20px;
  }
  
  /* Top bar with logo and theme toggle */
  .navbar {
    top: 20px;
    left: 20px;
    right: 20px;
    height: auto;
    padding: 0;
    background: none;
    backdrop-filter: none;
  }
  
  .nav-container {
    display: flex;
    justify-content: flex-start; /* Logo on left, toggle positioned separately */
    align-items: center;
    padding: 0;
  }
  
  /* Logo - top left, styled like nav items */
  .nav-logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  
  .nav-logo a {
    background-color: transparent;
    border-radius: var(--border-radius-2xl);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
  }
  
  /* Hide desktop nav menu */
  .nav-menu {
    display: none;
  }
  
  /* Theme toggle - top right, vertically centered with nav */
  .theme-toggle {
    position: fixed !important;
    top: calc(20px + 24px) !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0;
    width: 60px;
    height: 35px;
    border-radius: 19px;
    z-index: 9999; /* Above everything */
  }
  
  /* Bottom navigation - thumb-friendly positioning */
  .mobile-nav {
    display: flex !important; /* Override desktop hidden */
    position: fixed;
    bottom: 40px; /* Higher for comfortable thumb reach */
    left: 20px;
    right: 20px;
    justify-content: center;
    gap: 24px; /* Slightly larger gaps for easier tapping */
    z-index: 9997;
    padding-bottom: env(safe-area-inset-bottom, 0); /* iOS safe area */
    mix-blend-mode: exclusion;
    -webkit-mix-blend-mode: exclusion; /* Safari/iOS support */
  }
  
  .mobile-nav .nav-link {
    background-color: transparent;
    border-radius: var(--border-radius-2xl);
    padding: 16px 24px; /* Larger touch targets */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    min-height: 44px; /* iOS recommended minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none; /* Remove transition to allow animation */
  }
  
  .nav-link {
    font-size: var(--font-size-sm);
  }

  .hero {
    min-height: calc(100vh - 32px);
  }

  .hero h1 {
    font-size: var(--font-size-4xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .hero-description {
    font-size: var(--font-size-sm);
  }

  .section {
    padding: 60px 0;
  }
  
  .section h2 {
    margin-bottom: 40px;
    font-size: var(--font-size-2xl);
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

@media (max-width: 480px) {
  body {
    margin: 20px;
  }
  
  .navbar {
    top: 20px;
    left: 20px;
    right: 20px;
  }
  
  .nav-logo {
    left: 0;
  }
  
  .nav-container {
    padding: 0;
  }
  
  .nav-logo a,
  .nav-link {
    padding: 6px 12px;
  }
  
  .nav-menu {
    gap: 16px;
  }

  .hero h1 {
    font-size: var(--font-size-3xl);
  }

  .section {
    padding: 40px 0;
  }
  
  /* Override work section padding with higher specificity */
  .work.section {
    padding: 4px;
  }
  
  .section h2 {
    margin-bottom: 30px;
    font-size: var(--font-size-xl);
  }

  .project-card {
    padding: 16px;
  }
}

/* Focus styles for accessibility */
.nav-toggle:focus,
.project-card:focus {
  outline: 2px solid var(--theme-accent-primary);
  outline-offset: 2px;
}

/* Navigation focus outline removal - styles moved to design-system.css */
.nav-logo a:focus,
.nav-link:focus {
  outline: none; /* Remove default outline since we have custom focus style */
}

/* Work Dropdown Menu */
.nav-item-with-menu {
  position: relative;
  display: inline-block;
}

.work-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 304px;
  background-color: var(--theme-bg-primary); /* Light mode: white bg */
  border-radius: 30px;
  padding: 24px;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s ease, height 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  mix-blend-mode: normal; /* Override any inherited blend modes */
  overflow: hidden;
}

/* Dark mode: white background, black text */
[data-theme="dark"] .work-dropdown-menu {
  background-color: #ffffff; /* White background in dark mode */
}

[data-theme="dark"] .work-menu-title {
  color: #070707; /* Black text in dark mode */
}

[data-theme="dark"] .work-menu-sub {
  color: #070707; /* Black text in dark mode */
}

.nav-item-with-menu:hover .work-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Hide dropdown when explicitly disabled (e.g., after clicking work link) */
.nav-item-with-menu.dropdown-disabled .work-dropdown-menu,
.nav-item-with-menu.dropdown-disabled:hover .work-dropdown-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-10px) !important;
}

/* Ensure disabled state works in both light and dark modes */
[data-theme="light"] .nav-item-with-menu.dropdown-disabled .work-dropdown-menu,
[data-theme="light"] .nav-item-with-menu.dropdown-disabled:hover .work-dropdown-menu,
[data-theme="dark"] .nav-item-with-menu.dropdown-disabled .work-dropdown-menu,
[data-theme="dark"] .nav-item-with-menu.dropdown-disabled:hover .work-dropdown-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-10px) !important;
}

.work-menu-item {
  margin-bottom: 6px;
}

.work-menu-item:last-child {
  margin-bottom: 0;
}

.work-menu-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: normal; /* Override any inherited blend modes */
}

.work-menu-link:hover {
  opacity: 0.7;
}

.work-menu-title {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--theme-text-primary); /* Use theme-aware text color */
  display: block;
  margin-bottom: 8px;
  mix-blend-mode: normal; /* Override any inherited blend modes */
}

/* Nike submenu that appears on hover */
.work-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 16px;
  margin-top: 4px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.work-menu-item-expandable:hover .work-submenu {
  max-height: 100px; /* Enough space for the submenu items */
  opacity: 1;
}

.work-submenu-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: 8px;
  padding: 2px 0;
  transition: opacity 0.2s ease;
  mix-blend-mode: normal;
}

.work-submenu-link:hover {
  opacity: 0.7;
}

/* Legacy subcategories (keeping for compatibility) */
.work-menu-subcategories {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-left: 16px;
}

.work-menu-sub {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  color: var(--theme-text-primary); /* Use theme-aware text color */
  opacity: 0.8;
  mix-blend-mode: normal; /* Override any inherited blend modes */
}

/* Dark mode styles for dropdown menu - using theme-aware variables automatically handles this */

/* Mobile responsive styles for dropdown menu */
@media (max-width: 768px) {
  .work-dropdown-menu {
    display: none; /* Hide dropdown on mobile */
  }
  
  .nav-item-with-menu:hover .work-dropdown-menu {
    display: none; /* Ensure it stays hidden on mobile */
  }
}

/* Theme Toggle - 60% Size (40% reduction) */
.theme-toggle {
  position: fixed;
  top: calc(var(--site-margin) + 24px);
  right: var(--site-margin);
  transform: translateY(-50%);
  width: 60px;
  height: 35px;
  border: none;
  border-radius: 19px;
  background-color: rgba(57, 57, 57, 1);
  cursor: pointer;
  transition: all var(--transition-normal);
  z-index: var(--z-fixed);
  padding: 0;
  display: flex;
  align-items: center;
  mix-blend-mode: exclusion;
  -webkit-mix-blend-mode: exclusion; /* Safari/iOS support */
}

.theme-toggle:hover {
  opacity: 0.8;
  /* Removed blur effects for cleaner interaction */
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--theme-accent-primary);
  outline-offset: 2px;
}

.toggle-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 1);
  transition: all var(--transition-normal);
  position: absolute;
  left: 5px;
  top: 5px;
}

/* Off state (dark mode) - white rail, black circle on left */
[data-theme="dark"] .theme-toggle {
  background-color: rgba(255, 255, 255, 1);
}

[data-theme="dark"] .toggle-circle {
  background-color: rgba(0, 0, 0, 1);
  left: 5px;
}

/* On state (light mode) - white rail, black circle on right */
[data-theme="light"] .theme-toggle {
  background-color: rgba(255, 255, 255, 1);
}

[data-theme="light"] .toggle-circle {
  background-color: rgba(0, 0, 0, 1);
  left: 30px;
}

/* Responsive theme toggle positioning - handled in main mobile section */

/* Custom Cursor System - Desktop only */
@media (pointer: fine) {
  * {
    cursor: none !important; /* Hide default cursor on desktop */
  }
  
  .custom-cursor {
    display: block; /* Show custom cursor on desktop */
  }
}

/* Mobile fallback - use default cursors */
@media (pointer: coarse) {
  * {
    cursor: auto !important; /* Use default mobile cursors */
  }
  
  .custom-cursor {
    display: none !important; /* Hide custom cursor on mobile */
  }
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: none; /* Remove transition for position updates */
}

/* Modern browsers with blend mode support */
@supports (mix-blend-mode: exclusion) {
  .custom-cursor {
    mix-blend-mode: exclusion;
    -webkit-mix-blend-mode: exclusion; /* Safari/iOS support */
  }
}

/* Fallback for browsers without blend mode support (IE, older browsers) */
@supports not (mix-blend-mode: exclusion) {
  .cursor-dot {
    background-color: #070707; /* Dark cursor for better visibility */
  }
  
  .cursor-ring {
    border-color: #070707;
  }
  
  /* Theme-aware fallback */
  [data-theme="light"] .cursor-dot {
    background-color: #070707;
  }
  
  [data-theme="light"] .cursor-ring {
    border-color: #070707;
  }
  
  [data-theme="dark"] .cursor-dot {
    background-color: #ffffff;
  }
  
  [data-theme="dark"] .cursor-ring {
    border-color: #ffffff;
  }
}

.cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #ffffff; /* White for better blend */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  background: transparent; /* No fill */
  border: 1px solid #ffffff; /* White stroke for better blend */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover state - show ring */
.custom-cursor.hover .cursor-ring {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Theme-aware cursor colors - removed since mix-blend-mode handles inversion */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent flash of unstyled content */
.theme-loading {
  visibility: hidden;
}

.theme-loading * {
  transition: none !important;
}

/* Lock screen overlay for Nike projects */
.project-lock-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #EEEEEE;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.project-lock-screen h1 {
  position: relative;
  z-index: 10001;
}

.project-lock-screen .password-input-container {
  position: relative;
  z-index: 10001;
}

/* Allow custom cursor to work on lock screen */

.project-lock-screen .custom-cursor .cursor-dot {
  background-color: #070707 !important;
}

.project-lock-screen .custom-cursor .cursor-ring {
  border-color: #070707 !important;
}

.project-lock-screen.custom-cursor.hover .cursor-ring {
  border-color: #070707 !important;
}

.project-lock-screen h1 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 15vw, 8rem);
  color: #070707;
  text-align: center;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 0.9;
  transform: translateX(-50%);
  margin-left: 50%;
}

.project-lock-screen .lock-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50vw;
  height: 50vh;
  background-image: url('../images/lock screen/akon.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
  animation: akon-attention-shake 2s ease-in-out 4s infinite;
}

.project-lock-screen .easter-egg-hotspot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 33.33vw; /* Only left 1/3 of image */
  height: 30vh; /* Much smaller height */
  z-index: 14; /* Lower than password input */
  
  /* Scale hotspot with image - covers left 1/3 of image area only */
  mask: linear-gradient(90deg, black 100%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, black 100%, transparent 100%);
}

/* Easter egg hotspot hover state handled by JavaScript */

/* Custom cursor hover state over easter egg handled by JavaScript */

.project-lock-screen .password-input {
  position: relative;
  width: 100%;
  max-width: 410px;
  height: 78px;
  background-color: transparent;
  border: 2px solid #070707;
  border-radius: 8px;
  padding: 0 20px;
  font-family: var(--font-family-body);
  font-size: 1.25rem;
  color: #070707;
  outline: none;
  caret-color: transparent; /* Hide default cursor */
  z-index: 10002;
}

.project-lock-screen .password-input::placeholder {
  color: rgba(7, 7, 7, 0.4);
}

/* Custom blinking cursor */
.password-cursor {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 10px;
  height: 38px;
  background-color: #E13800;
  transform: translateY(-50%);
  animation: blink 1s infinite;
  pointer-events: none;
  display: block;
  z-index: 1;
}

.password-input-container {
  position: relative;
  width: 100%;
  max-width: 410px;
  display: flex;
  align-items: center;
  z-index: 10002;
}

.project-lock-screen .submit-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  z-index: 10003;
}

.project-lock-screen .submit-arrow:hover {
  opacity: 1;
}

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

@keyframes akon-attention-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-1.5deg); }
  30% { transform: rotate(1.5deg); }
  45% { transform: rotate(-1deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(0deg); }
}

.project-lock-screen .close-button {
  position: absolute;
  top: clamp(20px, 5vw, 70px);
  right: clamp(20px, 5vw, 70px);
  width: clamp(60px, 15vw, 80px);
  height: clamp(60px, 15vw, 80px);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.project-lock-screen .close-button-icon {
  width: 100%;
  height: 100%;
  max-width: 68px;
  max-height: 68px;
}


.project-lock-screen .close-button:hover .close-button-icon path {
  fill: #E13800;
}

/* Mobile lock screen - ensure full width */
@media (max-width: 768px) {
  .project-lock-screen {
    left: -20px; /* Offset body margin */
    right: -20px; /* Offset body margin */
    width: calc(100vw + 40px); /* Full viewport width plus margin offset */
  }
}