/* ============================================================================
   MOBILE & IPHONE OPTIMIZATIONS - OPEREBEM
   Professional, minimalist, and performance-focused
   ============================================================================ */

/* Safe Area Support for iPhone X+ */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .footer {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom));
  }
}

/* Touch Optimization */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets for mobile */
  .button,
  .nav__link,
  .card__link,
  .card__roadmap-trigger {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Remove hover effects on touch devices */
  .card:hover,
  .button:hover,
  .nav__link:hover {
    transform: none;
  }
  
  /* Add active states instead */
  .button:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  .card:active {
    transform: scale(0.99);
  }
}

/* iPhone Specific Optimizations */
@supports (-webkit-touch-callout: none) {
  /* Disable text selection on interactive elements */
  .button,
  .nav__link,
  .card__roadmap-trigger {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Optimize scrolling */
  body,
  .roadmap-modal__content,
  .timeline__track-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix input zoom on iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Disable parallax and complex effects on mobile */
  .background-canvas__orb {
    animation: none !important;
    opacity: 0.08;
  }
  
  /* Simplify gradients */
  body::before {
    opacity: 0.3;
  }
  
  /* Remove blur effects for better performance */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-background);
  }
}

/* iPhone Landscape Optimization */
@media (max-width: 896px) and (orientation: landscape) {
  .hero {
    padding-block: clamp(2rem, 4vw, 3rem) !important;
  }
  
  .section {
    padding-block: clamp(2rem, 4vw, 3rem);
  }
  
  .hero__title {
    font-size: clamp(2rem, 5vw, 2.5rem);
  }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  * {
    max-width: 100%;
  }
  
  img,
  video {
    height: auto;
  }
}

/* Dark mode optimizations for OLED screens (iPhone) */
@media (prefers-color-scheme: dark) {
  body {
    background: #000000;
  }
  
  :root {
    --color-background: #000000;
  }
}

/* Reduce motion for accessibility and battery saving */
@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;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border: rgba(255, 255, 255, 0.2);
    --color-text: #ffffff;
  }
  
  .card {
    border-width: 2px;
  }
}

/* Focus visible for keyboard navigation on mobile */
@media (hover: none) {
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* ============================================================================
   LOW-END PC OPTIMIZATIONS
   Reduces GPU/CPU load for better performance on weak hardware
   ============================================================================ */

/* Detect low-end devices via update media query */
@media (update: slow) {
  * {
    animation: none !important;
    transition: none !important;
  }
  
  .background-canvas {
    display: none !important;
  }
}

/* General performance optimizations for all devices */
.card,
.button,
.nav__link {
  will-change: auto; /* Only use will-change when needed */
}

/* Optimize paint and composite layers */
.background-canvas__orb {
  contain: strict;
  content-visibility: auto;
}

.card {
  contain: layout style;
}

/* Reduce repaints on scroll */
.header {
  contain: layout style;
}

/* GPU acceleration only where needed */
.roadmap-modal {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize images */
img {
  content-visibility: auto;
}

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

/* Reduce complexity of blur effects on low-end */
@supports (backdrop-filter: blur(1px)) {
  @media (prefers-reduced-motion: no-preference) {
    .header {
      backdrop-filter: blur(8px);
    }
  }
}

/* Fallback for devices without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .header {
    background: rgba(10, 11, 15, 0.98);
  }
}

/* Optimize font rendering */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce animation complexity */
@media (max-width: 1024px) {
  .background-canvas__orb {
    animation-duration: 30s !important; /* Slower = less CPU */
  }
  
  .js-animate {
    animation-duration: 0.4s !important;
  }
}

/* Print optimizations */
@media print {
  .background-canvas,
  .nav,
  .header,
  .footer,
  .button {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}