/* Viewport Optimization
   A centralized approach to responsive design across the website */

/* Base viewport settings */
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* Consistent breakpoints across all site pages */
:root {
  /* Breakpoint variables for consistent usage */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
}

/* Base container widths with responsive padding */
.container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

/* Responsive image handling */
img {
  max-width: 100%;
  height: auto;
}

/* Mobile optimization for cyber and retro effects */
@media (max-width: 768px) {
  /* Reduce animation intensity on small screens */
  .cyber-bg {
    opacity: 0.7;
  }
  
  /* Optimize grid backgrounds for mobile */
  .grid {
    background-size: 30px 30px;
  }
  
  /* Improve readability of text with backgrounds */
  .cyber-panel, .cyber-container {
    padding: 1rem;
    backdrop-filter: blur(8px);
  }
  
  /* Optimize scan line effects for mobile performance */
  .scan-line {
    animation-duration: 8s;
  }
  
  .crt-overlay, .crt-flicker {
    opacity: 0.1;
  }
}

/* Motion reduction for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  
  .scan-line, .glitch-overlay, .crt-flicker {
    display: none;
  }
}

/* Fix for horizontal overflow issues on mobile */
body {
  overflow-x: hidden;
  width: 100%;
}

/* Handle tall fixed background elements on mobile */
@media (max-width: 768px) {
  .retro-sun, .retro-computer, .retro-disk, .sunset-bg {
    transform: scale(0.7);
  }
  
  /* Improve mobile performance by disabling certain effects */
  .circuit-lines, .data-stream {
    opacity: 0.3;
  }
}