/*
 * GLOBAL SCROLL PERFORMANCE FIX
 * Disables all heavy animations and effects that cause scroll lag
 * Applies to ALL screen sizes for maximum performance
 */

/* ===== DISABLE ALL CONTINUOUS ANIMATIONS ===== */
.service-icons-container::before,
.downloader-section,
a.tools-blog-btn,
.tools-blog-btn,
.hero-headline,
.hero-headline h1,
.badge-3d,
.stars-container,
.stars-badge,
.badge-inner,
.service-icon-card,
.gradient-text,
.download-btn,
.url-input,
.downloader-container,
.downloader-buttons,
.download-box,
.input-wrapper,
#videoUrl,
#pasteBtn,
#clearBtn,
#downloadBtn {
  animation: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  will-change: auto !important;
}

/* ===== HERO HEADLINE - AGGRESSIVE FIX ===== */
.hero-headline,
.hero-headline-inner {
  animation: none !important;
  transform: none !important;
  background-size: 100% 100% !important;
}

.hero-headline h1,
.hero-headline-inner h1,
.hero-title,
.hero .hero-title {
  animation: none !important;
  background-size: 100% 100% !important;
  transform: none !important;
}

/* Kill hero-headline-inner inline style animations */
.hero-headline-inner[style*="animation"],
.hero-headline-inner[style*="bgGradientShift"] {
  animation: none !important;
  background-size: 100% 100% !important;
}

/* ===== DOWNLOADER SECTION - AGGRESSIVE FIX ===== */
.downloader-section,
section.downloader-section,
.downloader-section[animation] {
  animation: none !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  transform: none !important;
  will-change: auto !important;
}

/* ===== DOWNLOAD BUTTON & INPUT - AGGRESSIVE FIX ===== */
.download-btn,
#downloadBtn,
button.download-btn,
.url-input,
#videoUrl,
input.url-input {
  animation: none !important;
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  will-change: auto !important;
}

/* Disable any pseudo-element animations */
.download-btn::before,
.download-btn::after,
.url-input::before,
.url-input::after {
  animation: none !important;
  display: none !important;
}

/* ===== REMOVE HEAVY BACKDROP FILTERS ===== */
.service-icons-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.dark-mode .service-icons-container {
  background: rgba(30, 41, 59, 0.98) !important;
}

/* ===== SIMPLIFY DOWNLOADER SECTION ===== */
.downloader-section {
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.35) 0%, 
    rgba(139, 92, 246, 0.30) 50%, 
    rgba(59, 130, 246, 0.35) 100%) !important;
  background-size: 100% 100% !important;
  animation: none !important;
}

/* ===== SIMPLIFY TOOLS BLOG BUTTON ===== */
a.tools-blog-btn,
.tools-blog-btn {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #6B7280 !important;
  background: none !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2), 0 4px 12px rgba(107, 114, 128, 0.15) !important;
  border: 2px solid #6B7280 !important;
}

a.tools-blog-btn:hover,
.tools-blog-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.3), 0 8px 20px rgba(107, 114, 128, 0.2) !important;
  border-color: #4B5563 !important;
  background-color: rgba(107, 114, 128, 0.1) !important;
  color: #4B5563 !important;
}

/* ===== DISABLE BADGE 3D ANIMATIONS ===== */
.badge-3d,
.badge-inner,
.stars-container,
.stars-badge,
#starsBadge,
.star-count,
.star-label {
  animation: none !important;
  transform-style: flat !important;
  transform: none !important;
  will-change: auto !important;
}

/* ===== SIMPLIFY SERVICE ICONS ===== */
.service-icon-card {
  animation: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.service-icon-card::before,
.service-icon-card::after {
  display: none !important;
}

.service-icon-wrapper svg {
  filter: none !important;
  transition: transform 0.2s ease !important;
}

.service-icon-card:hover .service-icon-wrapper svg {
  filter: none !important;
}

/* Remove shimmer effect */
@keyframes shimmer {
  0% { background-position: 0 0; }
  100% { background-position: 0 0; }
}

/* ===== SIMPLIFY HERO ELEMENTS ===== */
.hero-headline h1 {
  background-size: 100% 100% !important;
  animation: none !important;
}

/* ===== OPTIMIZE HEADER ===== */
.header {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  will-change: auto !important;
}

/* ===== SCROLL OPTIMIZATION ===== */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Enable hardware acceleration for main scrollable areas */
.app-container,
main,
.main-content {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===== COMPREHENSIVE ANIMATION KILLER ===== */
/* Force disable ALL animations on all elements */
*,
*::before,
*::after,
*:hover,
*:focus,
*:active {
  animation: none !important;
  animation-play-state: paused !important;
}

/* ===== KILL JAVASCRIPT-INJECTED ANIMATIONS ===== */
/* These are added dynamically by script.js */
[style*="animation:"],
[style*="animation "] {
  animation: none !important;
}

/* Kill gradient border animations */
[style*="gradientBorder"],
[class*="gradientBorder"],
#downloadBtn::before,
#downloadBtn::after,
.download-btn::before,
.download-btn::after,
.input-wrapper::before,
.url-input::before {
  animation: none !important;
  display: none !important;
  content: none !important;
}

/* Kill cursor blink */
[style*="cursorBlink"],
.cursor-blink,
.typing-cursor {
  animation: none !important;
  display: none !important;
}

/* Kill shimmer effects */
[style*="shimmer"],
.shimmer,
.shimmer-effect,
[style*="shimmer 3s"] {
  animation: none !important;
  display: none !important;
}

/* Kill brand gradient shift */
[style*="brandGradientShift"],
.brand-gradient {
  animation: none !important;
  background-size: 100% 100% !important;
}

/* Kill all popup/modal animations */
[style*="fadeIn"],
[style*="slideUp"],
.popup,
.modal,
.bottom-sheet,
.bookmark-popup,
.install-popup,
.ios-popup {
  animation: none !important;
  transition: opacity 0.15s ease !important;
}

/* Kill hint animations */
[style*="bookmarkHintAnim"],
.hint,
.bookmark-hint {
  animation: none !important;
  backdrop-filter: none !important;
}

/* Force no backdrop-filter on any dynamic elements */
[style*="backdrop-filter"],
[style*="-webkit-backdrop-filter"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== KEYFRAMES NULLIFIER ===== */
/* Override any keyframe animations that might be defined */
@keyframes gradientShift { 0%, 100% { background-position: 0 0; } }
@keyframes gradientText { 0%, 100% { background-position: 0 0; } }
@keyframes toolsBlogGradient { 0%, 100% { background-position: 0 0; text-shadow: none; } }
@keyframes fadeInUp { 0%, 100% { opacity: 1; transform: none; } }
@keyframes badge-float { 0%, 100% { transform: none; } }
@keyframes float { 0%, 100% { transform: none; } }
@keyframes spin { 0%, 100% { transform: none; } }
@keyframes gradientFlow { 0%, 100% { background-position: 0 0; } }
@keyframes gradientBorder { 0%, 100% { background-position: 0 0; } }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } }
@keyframes brandGradientShift { 0%, 100% { background-position: 0 0; } }
@keyframes fadeIn { 0%, 100% { opacity: 1; } }
@keyframes slideUp { 0%, 100% { transform: none; opacity: 1; } }
@keyframes bookmarkHintAnim { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes bgGradientShift { 0%, 100% { background-position: 0 0; } }
@keyframes shimmer { 0%, 100% { transform: none; } }
@keyframes icon-card-entrance { 0%, 100% { opacity: 1; transform: none; } }
@keyframes gradient-float { 0%, 100% { transform: none; } }
@keyframes slideInUp { 0%, 100% { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } }
@keyframes typing { 0%, 100% { width: auto; } }

/* ===== FORCE GPU ACCELERATION ON SCROLLABLE AREAS ===== */
html, body {
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ===== MOBILE-SPECIFIC OVERRIDES ===== */
/* These override mobile-header.css animations */
@media (max-width: 768px) {
  /* Disable backdrop filter on downloader-section */
  .downloader-section,
  [dir="rtl"] .downloader-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    background-size: 100% 100% !important;
  }

  /* Disable tools blog button animation */
  a.tools-blog-btn,
  [dir="rtl"] a.tools-blog-btn,
  .tools-blog-btn {
    animation: none !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  /* Disable header backdrop filter */
  .header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Kill all animations on downloader buttons */
  .downloader-btn,
  [dir="rtl"] .downloader-btn,
  .downloader-buttons,
  [dir="rtl"] .downloader-buttons {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ===== 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;
  }
}