/* Optimized NUI Framework Dark Theme Override */
/*
   Root variables for dark theme colors and custom accents.
   These variables are used throughout the UI for consistent theming.
*/
:root {
  /* Override NUI default colors for dark theme */
  --primary-color: #9fdc00; /* Main accent color */
  --secondary-color: #7cb800; /* Secondary accent color */
  --dark-color: #e0e0e0; /* Text color for dark backgrounds */
  --light-color: #0a0a0a; /* Main background color */
  --lighter-color: #1a1a1a; /* Slightly lighter background */
  --white: #ffffff; /* Pure white */
  --card-bg: rgba(26, 26, 26, 0.2); /* Card background with glass effect */
  --card-border: rgba(255, 255, 255, 0.1); /* Card border color */
  --card-footer-text: #a0a0a0; /* Footer text color */
  
  /* Custom theme variables for accents and glass effects */
  --accent-green: #9fdc00; /* Bright green accent */
  --accent-green-dark: #7cb800; /* Darker green accent */
  --accent-green-light: rgba(159, 220, 0, 0.1); /* Light green accent for hover/focus */
  --glass-bg: rgba(26, 26, 26, 0.1); /* Glass background for cards */
  --glass-border: rgba(255, 255, 255, 0.1); /* Glass border for cards */
  --shadow-light: rgba(159, 220, 0, 0.2); /* Light shadow for hover/focus */
  --shadow-dark: rgba(0, 0, 0, 0.5); /* Dark shadow for depth */
}

/* Enhanced Background with performance optimization */
/*
   Applies a dark, glassy gradient background to the main container.
   Uses will-change for smoother parallax performance.
*/
body.parallax-container {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f1f0f 100%);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  will-change: scroll-position;
}

/* Respect user's motion preferences */
/*
   Disables animations and transitions for users who prefer reduced motion.
   Improves accessibility and performance for sensitive users.
*/
@media (prefers-reduced-motion: reduce) {
  .funnel-layer,
  .circle,
  .text-char,
  .marine-particle {
    animation: none !important;
    transform: none !important;
  }
  
  .card-glass {
    transition: none !important;
  }
  
  .badge {
    transition: none !important;
  }
  
  .marine-snow-container {
    display: none !important;
  }
}

/* Optimized Background Floating Elements */
/*
   Styles for floating background circles used in parallax and glass effects.
   Uses contain for performance optimization.
*/
.bg-circles {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  contain: layout style paint;
}

/*
   Individual floating circle for parallax background.
   Uses radial gradient and optimized float animation for depth effect.
*/
.circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-green-light) 0%, transparent 70%);
  animation: float 12s ease-in-out infinite; /* Increased duration for smoother animation */
  opacity: 0.4; /* Reduced opacity for better performance */
  will-change: transform;
  transform: translateZ(0); /* Force hardware acceleration */
}

.circle:nth-child(1) {
  width: 250px; /* Reduced size */
  height: 250px;
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.circle:nth-child(2) {
  width: 180px; /* Reduced size */
  height: 180px;
  bottom: 20%;
  left: 5%;
  animation-delay: 4s;
}

.circle:nth-child(3) {
  width: 120px; /* Reduced size */
  height: 120px;
  top: 50%;
  left: 50%;
  animation-delay: 8s;
}

/*
   Optimized keyframes for floating circle animation.
   Creates a gentle up-and-down floating effect with reduced movement.
*/
@keyframes float {
  0%, 100% { transform: translateY(0px) translateZ(0) scale(1); }
  50% { transform: translateY(-15px) translateZ(0) scale(1.03); } /* Reduced movement */
}

/* Enhanced Glass Effects for NUI Cards with performance optimization */
/*
   Glassmorphism card style for NUI cards and .card-glass elements.
   Uses backdrop-filter and box-shadow for depth and blur.
*/
.nui.card-glass, .card-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(15px); /* Reduced blur for better performance */
  border: 1px solid var(--glass-border) !important;
  box-shadow: 
    0 6px 24px var(--shadow-dark), /* Reduced shadow complexity */
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Faster transition */
  border-radius: 16px;
  padding: 2rem;
  will-change: transform, box-shadow;
  contain: layout style;
  transform: translateZ(0); /* Force hardware acceleration */
}

/*
   Optimized hover effect for glass cards.
*/
.nui.card-glass:hover, .card-glass:hover {
  box-shadow: 
    0 12px 40px var(--shadow-dark), /* Reduced shadow complexity */
    0 0 20px var(--shadow-light); /* Reduced glow */
  border-color: rgba(159, 220, 0, 0.3) !important;
  transform: translateY(-1px) translateZ(0); /* Reduced lift */
}

/* Enhanced Header */
/*
   Glassy header style for primary navigation and page headers.
*/
.nui.bg-primary-glass, .bg-primary-glass {
  background: rgba(10, 10, 10, 0.9) !important;
  backdrop-filter: blur(15px); /* Reduced blur */
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

/*
   Decorative gradient overlay for glassy headers.
*/
.nui.bg-primary-glass::before, .bg-primary-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, var(--accent-green-light) 100%);
  pointer-events: none;
}

/*
   Ensures header content is above the gradient overlay.
*/
.nui.bg-primary-glass > *, .bg-primary-glass > * {
  position: relative;
  z-index: 1;
}

/* Accent Color Updates */
/*
   Utility class for accent border color.
*/
.border-accent {
  border-color: var(--accent-green);
}

/* Enhanced Badges with performance optimization */
/*
   Glassy badge style for NUI badges and .badge elements.
   Uses blur and transitions for interactive feedback.
*/
.nui.badge, .badge {
  background: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(8px); /* Reduced blur */
  transition: all 0.15s ease; /* Faster transition */
  color: var(--dark-color) !important;
  will-change: transform, background-color, border-color, box-shadow;
  transform: translateZ(0); /* Force hardware acceleration */
}

/*
   Optimized hover effect for glassy badges.
*/
.nui.badge:hover, .badge:hover {
  background: var(--accent-green-light) !important;
  border-color: var(--accent-green) !important;
  box-shadow: 0 2px 8px rgba(159, 220, 0, 0.15); /* Reduced shadow */
  transform: translateY(-0.5px) translateZ(0); /* Reduced lift */
}

/* Scrollbar Styling */
/*
   Custom scrollbar styles for webkit browsers.
   Uses accent colors for thumb and track.
*/
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-green);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-green-dark);
}

/* Custom styles for resume layout */
/*
   Grid and spacing utilities for resume and content layout.
   Includes responsive grid and border styles for sections.
*/
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.border-l-4 {
  border-left-width: 4px;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(26, 26, 26, 0.3);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 1rem;
  transition: none !important;
  transform: none !important;
}

.border-l-4:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(26, 26, 26, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.pl-4 {
  padding-left: 1rem;
}

.list-inside {
  list-style-position: inside;
}

/* Content wrapper for better layout */
/*
   Ensures main content is above background and glass effects.
*/
.content-wrapper {
  position: relative;
  z-index: 1000;
}

/* Optimized Funnel Animation Styles */
/*
   Styles for funnel animation layers and spiral text characters.
   Uses 3D transforms and perspective for depth.
*/
.funnel-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
  perspective: 1000px; /* Reduced perspective for better performance */
  will-change: transform;
  contain: layout style paint;
  transform: translateZ(0); /* Force hardware acceleration */
}

/*
   Optimized spiral text character style for funnel animations.
   Uses accent color, shadow, and blur for glowing effect.
*/
.text-char {
  position: absolute;
  color: var(--accent-green);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(159, 220, 0, 0.4); /* Reduced glow */
  transform-origin: 0 0;
  backface-visibility: hidden; /* Improved performance */
  transition: opacity 0.2s ease, filter 0.2s ease; /* Faster transitions */
  pointer-events: none;
  font-family: 'Courier New', monospace;
  will-change: transform, opacity;
  transform: translateZ(0); /* Force hardware acceleration */
}

/*
   Style for spiral text characters on the back side of the spiral.
*/
.text-char.back {
  color: rgba(159, 220, 0, 0.25); /* Reduced opacity */
  filter: blur(0.3px); /* Reduced blur */
}

/* Optimized depth-based styling for different funnel layers */
/*
   Each funnel layer has a unique blur and shadow for depth effect.
   Reduced complexity for better performance.
*/
#funnel1 .text-char {
  filter: blur(1.5px); /* Reduced blur */
  text-shadow: 0 0 15px rgba(159, 220, 0, 0.25);
}

#funnel2 .text-char {
  filter: blur(1.2px);
  text-shadow: 0 0 13px rgba(159, 220, 0, 0.3);
}

#funnel3 .text-char {
  filter: blur(0.8px);
  text-shadow: 0 0 12px rgba(159, 220, 0, 0.35);
}

#funnel4 .text-char {
  filter: blur(0.6px);
  text-shadow: 0 0 10px rgba(159, 220, 0, 0.4);
}

#funnel5 .text-char {
  filter: blur(0.4px);
  text-shadow: 0 0 8px rgba(159, 220, 0, 0.45);
}

#funnel6 .text-char {
  filter: blur(0.2px);
  text-shadow: 0 0 6px rgba(159, 220, 0, 0.5);
}

/* Removed funnel7 and funnel8 styles since we reduced the number of funnels */

/* Optimized Marine Snow Particle Styles */
/*
   Styles for marine snow particles that create an underwater suspended particulate effect.
   Uses programming symbols with depth-based opacity and blur for realism.
*/
.marine-snow-container {
  contain: layout style paint;
  will-change: scroll-position;
  transform: translateZ(0); /* Force hardware acceleration */
}

.marine-particle {
  position: fixed;
  color: var(--accent-green);
  font-family: 'Courier New', monospace;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: center center;
  transition: opacity 0.2s ease; /* Faster transition */
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Simplified marine particle glow effect for better performance */
.marine-particle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* Reduced size */
  height: 150%;
  background: radial-gradient(circle, rgba(159, 220, 0, 0.08) 0%, transparent 60%); /* Reduced intensity */
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
}

/* Simplified particle types for better performance */
.marine-particle[data-symbol="{"],
.marine-particle[data-symbol="}"],
.marine-particle[data-symbol="["],
.marine-particle[data-symbol="]"],
.marine-particle[data-symbol="("],
.marine-particle[data-symbol=")"],
.marine-particle[data-symbol="<"],
.marine-particle[data-symbol=">"] {
  color: rgba(159, 220, 0, 0.7); /* Unified color for better performance */
}

/* Optimized animation for particles when they're created */
@keyframes particleSpawn {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(0deg) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateZ(0);
  }
}

.marine-particle {
  animation: particleSpawn 0.3s ease-out; /* Faster spawn animation */
}

/* Footer styling */
/*
   Glassy muted background for footer sections.
*/
.nui.bg-muted-glass, .bg-muted-glass {
  background: rgba(42, 42, 42, 0.6) !important;
  backdrop-filter: blur(8px); /* Reduced blur */
  border-top: 1px solid var(--glass-border);
}

/* Override NUI button styles for dark theme */
.button {
  background-color: var(--primary-color) !important;
  color: var(--black) !important;
}

.button:hover {
  background-color: var(--secondary-color) !important;
  color: var(--black) !important;
}

.button-outline {
  background-color: transparent !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.button-outline:hover {
  background-color: var(--primary-color) !important;
  color: var(--black) !important;
}

/* Enhanced print styles for resume */
@media print {
  /* Hide decorative elements */
  .bg-circles,
  .funnel-layer,
  .text-char,
  .marine-snow-container,
  .marine-particle {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12px;
    background: white !important;
    color: black !important;
  }
  
  .nui.bg-primary, .bg-primary-glass {
    background: #333 !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .nui.card, .card-glass {
    break-inside: avoid;
    margin-bottom: 1rem;
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  .badge {
    background: #f0f0f0 !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
  
  /* Ensure links are visible */
  a {
    color: #0066cc !important;
    text-decoration: underline !important;
  }
  
  /* Page breaks */
  h2 {
    page-break-after: avoid;
  }
  
  .border-l-4 {
    page-break-inside: avoid;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --accent-green: #00ff00;
    --glass-border: rgba(255, 255, 255, 0.5);
  }
  
  .text-char {
    text-shadow: none;
  }
  
  .card-glass {
    border-width: 2px !important;
  }
}

/* Performance optimizations for low-end devices */
@media (max-width: 768px) {
  /* Reduce effects on mobile devices */
  .card-glass {
    backdrop-filter: blur(8px); /* Further reduced blur on mobile */
  }
  
  .bg-primary-glass {
    backdrop-filter: blur(8px);
  }
  
  .badge {
    backdrop-filter: blur(4px);
  }
  
  /* Simplify animations on mobile */
  .circle {
    animation-duration: 16s; /* Slower animation */
    opacity: 0.3;
  }
}

/* Dark mode support (system preference) */
@media (prefers-color-scheme: light) {
  /* Override for users who prefer light mode */
  body.parallax-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f0f8f0 100%);
  }
  
  :root {
    --primary-color: #0066cc;
    --dark-color: #333;
    --light-color: #fff;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(0, 0, 0, 0.1);
  }
}