/**
 * Mobile Infinite Scroll CSS Optimizations
 * Optimized for smoother mobile scrolling experience
 */

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  /* Optimize scrolling performance */
  .timeline,
  .container,
  .wrapper-content {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    will-change: scroll-position;
  }

  /* Smooth scrolling for the entire page */
  html,
  body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Optimize product grid for mobile */
  .stream {
    /* display: grid;*/
    /*grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
    /*gap: 10px;*/
    /*padding: 10px; */
    will-change: contents;
  }

  .stream > li {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    contain: layout style paint;
    will-change: transform, opacity;
  }

  /* Smooth loading animations */
  .stream > li {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-out;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .stream > li.loading {
    opacity: 0.7;
    transform: scale(0.98);
  }

  /* Optimize images for mobile */
  .figure img,
  .figure.grid {
    width: 100%;
    height: fit-content;
    object-fit: cover;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Loading indicator optimizations */
  #infscr-loading {
    position: fixed;
    /*bottom: 20px;*/
    left: 50%;
    top: 94% !important;
    /*bottom: 30%;*/
    height: 30px;
    transform: translateX(-50%);
    padding-bottom: 0px !important;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 10px;
    border-radius: 50%;
    font-size: 14px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.3s ease;
  }

  #infscr-loading .loading {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #infscr-loading .loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Intersection Observer sentinel */
  .infinite-scroll-sentinel {
    height: 1px;
    width: 100%;
    position: relative;
    top: 500px;
    pointer-events: none;
    opacity: 0;
  }

  /* Optimize touch interactions */
  .figure-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Smooth hover effects for touch devices */
  .figure-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Optimize buttons for mobile */
  .button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Reduce layout shifts */
  .figure {
    /* aspect-ratio: 1; */
    background-size: cover;
    background-position: center;
    position: relative;
  }

  /* Optimize text rendering */
  .figcaption,
  .figure-detail,
  .username {
    font-smooth: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Performance optimizations for animations */
  .stream > li {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 200px;
  }

  /* Optimize for low-end devices */
  @media (max-width: 480px) {
    .stream {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      /* gap: 8px; */
      padding: 8px;
    }

    .figure-item {
      font-size: 12px;
    }

    .button {
      min-height: 40px;
      min-width: 40px;
      font-size: 12px;
    }
  }

  /* High-end device optimizations */
  /* @media (min-width: 769px) and (max-width: 1024px) {
    .stream {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 15px;
      padding: 15px;
    }
  } */

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    .stream > li,
    .figure-item,
    #infscr-loading {
      transition: none !important;
      animation: none !important;
    }

    .stream > li {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* Dark mode support */
  /* @media (prefers-color-scheme: dark) {
    #infscr-loading {
      background: rgba(255, 255, 255, 0.9); 
      color: #000;
    }

    #infscr-loading .loading::before {
      border-top-color: #000;
    }
  } */

  /* Landscape orientation optimizations */
  /* @media (orientation: landscape) and (max-height: 500px) {
    .stream {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 6px;
      padding: 6px;
    }

    #infscr-loading {
      bottom: 10px;
      padding: 8px 16px;
      font-size: 12px;
    }
  } */
}



/* Commenting out for classic view  */
/* Performance optimizations for all devices */
/* .stream {
  contain: layout style;
  content-visibility: auto;
}

.stream > li {
  contain: layout style paint;
  will-change: transform, opacity;
} */

/* Optimize for Core Web Vitals */
/* .stream > li {
  content-visibility: auto;
  contain-intrinsic-size: 200px;
} */
/* //////////////////////// */


/* Reduce layout shifts */
.figure {
  /*aspect-ratio: 1;*/
  background-size: cover;
  background-position: center;
}

/* Optimize loading states */
.stream.loading {
  pointer-events: none;
}

.stream.loading > li {
  opacity: 0.7;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Optimize for battery life */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}