/**
 * Mobile Performance Optimizations
 * Ensures 60fps scrolling and smooth interactions on mobile devices
 */

/* ═══════════════════════════════════════════════════════════════════
   HARDWARE ACCELERATION & GPU OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Keep font rendering tweaks, avoid forced transforms on root
     because they can break fixed/sticky overlays on some mobiles. */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Optimize animated elements */
  .project-card,
  .cert-card,
  .stat-card,
  .exp-card,
  .btn,
  .pp-img,
  .nav-links a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* Remove will-change after animation completes */
  .project-card:not(:hover),
  .cert-card:not(:hover),
  .stat-card:not(:hover) {
    will-change: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Optimize touch targets */
  button,
  a,
  .btn,
  .project-card,
  .cert-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent text selection during touch interactions */
  .project-card,
  .cert-card,
  .stat-card,
  .btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Enable momentum scrolling */
  .terminal-body,
  .project-tabs,
  .skills-table-container,
  #nav-dropdown,
  .contact-form {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL PERFORMANCE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Optimize scroll containers */
  body {
    overscroll-behavior-y: auto;
    scroll-behavior: smooth;
  }

  /* Optimize images for scroll performance */
  img {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATION OPTIMIZATION FOR 60FPS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Simplify animations on mobile */
  *:not(#boot-overlay):not(#boot-overlay *) {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Disable expensive animations */
  .scanlines,
  #matrix-canvas,
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  /* Calm the profile image on mobile:
     - kill profileGlow (border colour flash)
     - floatMobile is applied via mobile.css instead */
  .pp-img {
    animation: 8s ease-in-out infinite floatMobile !important;
    border-color: var(--accent) !important;
  }

  /* Optimize hover states (convert to active states) */
  .mobile-device .project-card:hover,
  .mobile-device .cert-card:hover,
  .mobile-device .stat-card:hover {
    transform: none !important;
  }

  .mobile-device .project-card:active,
  .mobile-device .cert-card:active,
  .mobile-device .stat-card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HIGH REFRESH RATE SUPPORT (90Hz, 120Hz, 144Hz)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-resolution: 90dpi) and (max-width: 900px) {
  .btn,
  .project-card,
  .cert-card {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .pp-img,
  .project-card,
  .cert-card {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAINT OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Reduce paint areas */
  .project-card,
  .cert-card,
  .stat-card,
  .exp-card {
    contain: layout style paint;
  }

  /* Simplify shadows globally on mobile to reduce GPU paint cost */
  .project-card, .cert-card, .stat-card, .exp-card, .skill, .btn, .navbar {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: none !important;
  }

  /* Prevent horizontal layout jitter without viewport lock */
  body, html {
    overflow-x: hidden !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FONT RENDERING OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
  }

  /* Optimize text during scroll */
  h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MEMORY OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Limit gradient complexity */
  .section-title,
  .btn,
  .hero-left h1 span {
    background-size: 100% 100% !important;
  }

  /* Simplify complex backgrounds */
  .hero::before,
  .hero::after {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VIEWPORT OPTIMIZATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Use viewport units efficiently */
  .hero {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  /* Prevent zoom on input focus (iOS) */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SAFE AREA INSETS (iPhone X+, Android with notch)
   ═══════════════════════════════════════════════════════════════════ */

@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    .navbar {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }

    #mobile-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}