/* ===== Mobile Optimizations for Animations ===== */

/* Mobile Detection and Base Optimizations */
@media (max-width: 768px) {
  
  /* Reduce animation complexity for better performance */
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Disable complex 3D transforms on mobile */
  .card:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.3) !important;
  }
  
  /* Simplify navbar animations */
  nav {
    animation: none !important;
    transition: transform 0.2s ease !important;
  }
  
  .brand {
    animation: none !important;
  }
  
  .brand:hover {
    transform: scale(1.02) !important;
  }
  
  /* Optimize nav links for touch */
  .nav-links a {
    padding: 0.75rem 1rem !important;
    font-size: 1.1rem !important;
    min-height: 44px !important; /* Touch target size */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .nav-links a:hover {
    transform: none !important;
    background: rgba(0, 255, 255, 0.2) !important;
  }
  
  /* Simplify burger menu */
  .burger span {
    animation: none !important;
  }
  
  .burger:hover {
    transform: scale(1.05) !important;
  }
  
  /* Optimize cards for mobile */
  .cards-container {
    gap: 1rem !important;
    padding: 1.5rem 1rem !important;
  }
  
  .card {
    animation: mobileCardSlideIn 0.4s ease-out both !important;
    animation-fill-mode: both !important;
  }
  
  @keyframes mobileCardSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .card:nth-child(1) { animation-delay: 0.05s !important; }
  .card:nth-child(2) { animation-delay: 0.1s !important; }
  .card:nth-child(3) { animation-delay: 0.15s !important; }
  .card:nth-child(4) { animation-delay: 0.2s !important; }
  .card:nth-child(5) { animation-delay: 0.25s !important; }
  .card:nth-child(6) { animation-delay: 0.3s !important; }
  .card:nth-child(7) { animation-delay: 0.35s !important; }
  .card:nth-child(8) { animation-delay: 0.4s !important; }
  .card:nth-child(9) { animation-delay: 0.45s !important; }
  
  /* Simplify card hover effects */
  .card::before {
    display: none !important;
  }
  
  .card:hover::before {
    display: none !important;
  }
  
  /* Optimize buttons for touch */
  .card a,
  .card button {
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .card a:hover,
  .card button:hover {
    transform: translateY(-1px) !important;
  }
  
  /* Simplify loading animations */
  .loading-spinner {
    width: 30px !important;
    height: 30px !important;
    border-width: 3px !important;
  }
  
  .loading-dots {
    width: 60px !important;
    height: 60px !important;
  }
  
  .loading-dots div {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Optimize modal for mobile */
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
  
  .modal-content {
    border-radius: 12px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem !important;
  }
  
  /* Touch-friendly form elements */
  .form-control,
  .form-select {
    padding: 1rem !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 48px !important;
  }
  
  /* Optimize table for mobile */
  .table-wrapper {
    border-radius: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .styled-table {
    font-size: 0.9rem !important;
  }
  
  .styled-table th,
  .styled-table td {
    padding: 0.75rem 0.5rem !important;
  }
  
  /* Mobile table row animations */
  .styled-table tbody tr {
    animation: mobileRowSlideIn 0.3s ease-out both !important;
  }
  
  @keyframes mobileRowSlideIn {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .styled-table tbody tr:nth-child(1) { animation-delay: 0.05s !important; }
  .styled-table tbody tr:nth-child(2) { animation-delay: 0.1s !important; }
  .styled-table tbody tr:nth-child(3) { animation-delay: 0.15s !important; }
  .styled-table tbody tr:nth-child(4) { animation-delay: 0.2s !important; }
  .styled-table tbody tr:nth-child(5) { animation-delay: 0.25s !important; }
  
  /* Simplify table hover effects */
  .styled-table tbody tr:hover {
    transform: none !important;
    background: rgba(0, 255, 255, 0.15) !important;
  }
  
  /* Optimize scroll indicator */
  .scroll-indicator {
    height: 3px !important;
  }
  
  .scroll-to-top {
    width: 45px !important;
    height: 45px !important;
    bottom: 15px !important;
    right: 15px !important;
    font-size: 1.2rem !important;
  }
  
  /* Reduce particle effects for performance */
  #particles-js {
    display: none !important; /* Disable particles on mobile for better performance */
  }
  
  /* Simplify hero animations */
  .hero h1 {
    animation: mobileHeroSlide 0.6s ease-out !important;
    font-size: 2rem !important;
  }
  
  @keyframes mobileHeroSlide {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hero p {
    animation: mobileHeroSlide 0.8s ease-out 0.2s both !important;
    font-size: 1rem !important;
  }
  
  .hero small {
    animation: mobileHeroSlide 1s ease-out 0.4s both !important;
    font-size: 0.9rem !important;
  }
  
  /* Optimize info section */
  .info {
    animation: mobileInfoSlide 0.6s ease-out 0.6s both !important;
    padding: 1.5rem 1rem !important;
  }
  
  @keyframes mobileInfoSlide {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Disable complex shimmer effects */
  .info::before,
  .hero::before {
    display: none !important;
  }
  
  /* Optimize main section */
  main {
    animation: mobileMainSlide 0.6s ease-out 0.8s both !important;
    padding: 1.5rem 1rem !important;
    margin: 4rem auto !important;
  }
  
  @keyframes mobileMainSlide {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Simplify form animations */
  form {
    animation: mobileFormSlide 0.4s ease-out 1s both !important;
  }
  
  @keyframes mobileFormSlide {
    from {
      opacity: 0;
      transform: translateX(-10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Optimize select animations */
  select#jenis {
    animation: none !important;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3) !important;
  }
  
  /* Simplify table animations */
  table {
    animation: mobileTableSlide 0.4s ease-out 1.2s both !important;
  }
  
  @keyframes mobileTableSlide {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Optimize footer */
  .footer-custom {
    animation: mobileFooterSlide 0.4s ease-out 1.4s both !important;
    font-size: 0.8rem !important;
  }
  
  @keyframes mobileFooterSlide {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Touch-friendly status badges */
  .status-badge {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Optimize mobile table links */
  .styled-table a {
    padding: 0.5rem 0.75rem !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Simplify mobile row animations */
  .mobile-row {
    animation: mobileRowFadeIn 0.3s ease-out both !important;
  }
  
  @keyframes mobileRowFadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .mobile-row:nth-child(1) { animation-delay: 0.05s !important; }
  .mobile-row:nth-child(2) { animation-delay: 0.1s !important; }
  .mobile-row:nth-child(3) { animation-delay: 0.15s !important; }
  .mobile-row:nth-child(4) { animation-delay: 0.2s !important; }
  .mobile-row:nth-child(5) { animation-delay: 0.25s !important; }
  
  /* Simplify mobile row hover */
  .mobile-row:hover {
    transform: scale(1.01) !important;
    background: rgba(0, 255, 255, 0.15) !important;
  }
  
  /* Optimize loading overlay for mobile */
  .loading-overlay {
    padding: 1rem !important;
  }
  
  .loading-content p {
    font-size: 1rem !important;
    margin-top: 15px !important;
  }
  
  /* Touch-friendly success/error messages */
  .success-message,
  .error-message {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    padding: 12px 15px !important;
    font-size: 0.9rem !important;
  }
  
  /* Disable complex animations on very small screens */
  @media (max-width: 480px) {
    * {
      animation-duration: 0.2s !important;
      transition-duration: 0.15s !important;
    }
    
    .card {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    
    .styled-table tbody tr {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    
    .mobile-row {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects on touch devices */
  .card:hover,
  .nav-links a:hover,
  .styled-table tbody tr:hover,
  .mobile-row:hover,
  .btn:hover,
  .brand:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Add active states for touch */
  .card:active {
    transform: scale(0.98) !important;
  }
  
  .nav-links a:active {
    background: rgba(0, 255, 255, 0.3) !important;
  }
  
  .btn:active {
    transform: scale(0.95) !important;
  }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .loading-spinner,
  .loading-dots,
  .scroll-indicator {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduce motion for accessibility */
@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;
  }
  
  .card,
  .styled-table tbody tr,
  .mobile-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}