/**
 * Techmenas.lt - Performance Optimizations
 * Image loading, font optimization, and performance enhancements
 */

/* ============================================
   FONT LOADING OPTIMIZATION
   ============================================ */

/* Ensure fonts display immediately with fallback */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local('Inter'), local('Inter-Regular'),
       url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-017F, U+0104-0107, U+010C-010D, U+0116-0119, U+012E-012F, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}

/* ============================================
   IMAGE OPTIMIZATION
   ============================================ */

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lazy loading images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Prevent layout shift */
img,
video,
iframe {
  aspect-ratio: attr(width) / attr(height);
}

/* Object fit for consistent aspect ratios */
.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================
   PERFORMANCE HINTS
   ============================================ */

/* GPU acceleration for animations - Desktop only */
@media (min-width: 769px) {
  .card,
  .btn-primary,
  .hamburger,
  .mobile-menu,
  .navbar {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Remove will-change after animation */
  .card:not(:hover),
  .btn-primary:not(:hover),
  .hamburger:not(.active),
  .mobile-menu:not(.active) {
    will-change: auto;
  }
}

/* Mobile: Disable GPU acceleration to save battery */
@media (max-width: 768px) {
  .card,
  .btn-primary,
  .hamburger,
  .mobile-menu,
  .navbar {
    will-change: auto;
    transform: none;
  }
}

/* ============================================
   CRITICAL CSS LOADING
   ============================================ */

/* Above-the-fold critical styles are inlined in HTML */
/* Non-critical styles loaded asynchronously */

/* ============================================
   REDUCE REPAINTS AND REFLOWS
   ============================================ */

/* Use transform instead of position changes */
.slide-in {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.slide-out {
  transform: translateX(100%);
}

/* Use opacity instead of visibility when possible */
.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   CONTENT VISIBILITY (Modern browsers)
   ============================================ */

/* Defer rendering of off-screen content */
section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ============================================
   LOADING STATES
   ============================================ */

/* Skeleton loading for images */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Loading spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 191, 255, 0.2);
  border-top-color: #00BFFF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  /* Hide non-essential elements */
  .navbar,
  .mobile-menu,
  .hamburger,
  footer,
  .btn-primary,
  #ai-chat-modal {
    display: none !important;
  }

  /* Optimize for print */
  body {
    background: white;
    color: black;
    padding: 0;
  }

  /* Ensure links are visible */
  a {
    color: black;
    text-decoration: underline;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid #00BFFF;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .card {
    border: 2px solid var(--color-text-primary);
  }

  .btn-primary {
    border: 2px solid white;
  }
}

/* Dark mode support (if system preference changes) */
@media (prefers-color-scheme: light) {
  /* Our site is dark by default, but we can add light mode support here if needed */
  /* For now, we maintain dark theme regardless of system preference */
}

/* ============================================
   NETWORK OPTIMIZATION
   ============================================ */

/* Preload critical resources */
/* Added in HTML head:
<link rel="preload" href="assets/css/global-theme.css" as="style">
<link rel="preload" href="assets/js/main.js" as="script">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
*/

/* ============================================
   BROWSER COMPATIBILITY
   ============================================ */

/* Fallbacks for older browsers */
@supports not (backdrop-filter: blur(10px)) {
  .navbar {
    background: rgba(22, 33, 62, 0.98);
  }
}

@supports not (content-visibility: auto) {
  section {
    /* Fallback: no content-visibility optimization */
  }
}

/* ============================================
   PERFORMANCE MONITORING
   ============================================ */

/* Mark important elements for performance tracking */
.hero {
  /* Largest Contentful Paint (LCP) element */
}

.navbar {
  /* First Contentful Paint (FCP) element */
}

/* ============================================
   REDUCED DATA MODE
   ============================================ */

@media (prefers-reduced-data: reduce) {
  /* Disable background images */
  * {
    background-image: none !important;
  }

  /* Disable animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* Use system fonts */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
  /* Disable expensive animations */
  .animate-pulse,
  .animate-spin,
  .animate-bounce {
    animation: none !important;
  }

  /* Simplify transitions */
  * {
    transition-duration: 0.15s !important;
  }

  /* Remove blur effects (expensive on mobile) */
  .blur,
  .blur-sm,
  .blur-md,
  .blur-lg,
  .blur-xl,
  .blur-2xl,
  .blur-3xl {
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* Simplify shadows */
  .shadow-lg,
  .shadow-xl,
  .shadow-2xl {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Disable parallax effects */
  [data-parallax] {
    transform: none !important;
  }

  /* Reduce gradient complexity */
  .bg-gradient-to-r,
  .bg-gradient-to-br,
  .bg-gradient-to-bl {
    background: linear-gradient(135deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%) !important;
  }
}

/* ============================================
   MOBILE BATTERY SAVING
   ============================================ */

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* Pause animations when page is not visible */
  :root {
    --animation-play-state: running;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --animation-play-state: paused;
    }
  }
}

/* ============================================
   MOBILE TOUCH OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  /* Faster tap response */
  a,
  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  /* Prevent text selection on buttons */
  button,
  .btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Smooth scrolling on iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   MOBILE FONT LOADING
   ============================================ */

@media (max-width: 768px) {
  /* Use system fonts on mobile for faster load */
  @supports (font-display: optional) {
    @font-face {
      font-family: 'Inter';
      font-display: optional;
    }
  }
}

/* ============================================
   MOBILE IMAGE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  /* Lazy load images below the fold */
  img[loading="lazy"] {
    content-visibility: auto;
  }

  /* Reduce image quality on mobile */
  img {
    image-rendering: auto;
  }
}

/* ============================================
   MOBILE SPLINE 3D OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  /* Optimize Spline quality on mobile */
  spline-viewer {
    image-rendering: auto !important;
    transform: translateZ(0);
    will-change: auto;
  }
}

@media (max-width: 480px) {
  /* Reduce size on small mobile */
  spline-viewer {
    max-height: 300px !important;
  }
}

@media (max-width: 375px) {
  /* Further reduce on very small screens */
  spline-viewer {
    max-height: 250px !important;
  }
}