/*
 * Mobile Performance Optimization CSS
 * Disables animations on mobile to improve scrolling performance and eliminate CLS
 * Targets: viewport < 768px (mobile devices)
 */

@media (max-width: 767px) {
  /* ===== DISABLE 3D BADGE ANIMATION ===== */
  .badge-3d,
  .badge-3d * {
    animation: none !important;
    transition: none !important;
    transform-style: flat !important;
    transform: none !important;
  }

  /* ===== DISABLE HERO TITLE TYPING ANIMATION ===== */
  .hero-title,
  h1.hero-title {
    animation: none !important;
    transition: none !important;
    white-space: normal !important;
    overflow: visible !important;
    width: auto !important;
  }

  /* ===== DISABLE GRADIENT TEXT ANIMATION IF ANY ===== */
  .gradient-text {
    animation: none !important;
    transition: none !important;
  }

  /* ===== DISABLE STARS CONTAINER ANIMATIONS ===== */
  .stars-container,
  .stars-container svg,
  .stars-badge,
  .badge-inner {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* ===== FIX LAYOUT SHIFT FOR STAR BADGE ===== */
  .stars-badge {
    min-height: 60px !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
    will-change: auto !important;
  }

  .badge-3d {
    min-height: 50px !important;
    height: auto !important;
    transform: none !important;
  }

  .badge-inner {
    min-height: 45px !important;
    height: auto !important;
    transform: none !important;
  }

  /* ===== FIX LAYOUT SHIFT FOR HERO TITLE ===== */
  .hero-content {
    min-height: auto !important;
    height: auto !important;
  }

  .hero-title {
    min-height: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }

  /* ===== DISABLE TOOLS BLOG BUTTON GRADIENT ANIMATION ===== */
  a.tools-blog-btn,
  .tools-blog-btn {
    animation: none !important;
    transition: none !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  /* ===== HARDWARE ACCELERATION FOR SCROLLABLE CONTAINERS ===== */
  .app-container,
  main,
  .main-content,
  .hero,
  .downloader-section {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* ===== ENSURE SMOOTH SCROLLING ON iOS ===== */
  body {
    -webkit-overflow-scrolling: touch;
  }

  /* ===== DISABLE FLOAT ANIMATION FOR BOOKMARK POPUP ICON ===== */
  .bookmark-popup .icon {
    animation: none !important;
    transition: none !important;
  }

  /* ===== DISABLE SLIDE IN UP ANIMATION FOR POPUP ===== */
  .bookmark-popup.show {
    animation: none !important;
  }

  /* ===== PREVENT LAYOUT SHIFTS ON SCROLL ===== */
  .header {
    will-change: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* ===== DISABLE ANY CONTINUOUS ANIMATIONS ON HERO ELEMENTS ===== */
  .hero-content > * {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}

/* ===== EXTRA SMALL SCREENS (< 480px) ===== */
@media (max-width: 479px) {
  .stars-badge {
    min-height: 50px !important;
  }

  .badge-3d {
    min-height: 40px !important;
  }

  .hero-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
}