/* Mobile Centering Fixes and Global Positioning */

/* Position movement elements behind portfolio2 for all views */
.movement-1,
.movement-2,
.movement-3 {
  z-index: -1 !important;
}

/* Ensure portfolio2 stays on top for all views */
.portfolio2 {
  z-index: 10 !important;
  position: relative !important;
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce or disable heavy animations on mobile */
@media (max-width: 768px) {
  /* Mobile movement - lighter versions */
  .movement-1,
  .movement-2,
  .movement-3 {
    opacity: 0.3 !important;
    filter: blur(20px) !important;
    animation-duration: 30s !important;
    animation-play-state: running !important;
  }
  /* AGGRESSIVE GPU RELIEF - Kill ALL blurs/ellipses */
  .ellipse-1, .ellipse-2, .ellipse-3, .ellipse-4, .ellipse-5,
  .ellipse-6, .ellipse-42, .ellipse-58, .ellipse-7, .ellipse-72, .ellipse-73 {
    opacity: 0 !important; visibility: hidden !important; animation: none !important;
  }
  
  /* Hide parallax/motion backgrounds */
  .hero-gradient-bg, .floating-orb { display: none !important; }
  
  /* Chrome overscroll prevention */
  html { overscroll-behavior-y: contain; }
  
  /* Reduce blur effects on mobile - these are very expensive */
  .ellipse-1,
  .ellipse-2,
  .ellipse-3,
  .ellipse-4,
  .ellipse-5,
  .ellipse-6,
  .ellipse-42,
  .ellipse-58 {
    filter: blur(20px) !important;
    opacity: 0.3 !important;
    will-change: auto !important;
  }
  
  /* Simplify hero gradient background */
  .hero-gradient-bg {
    display: none !important;
  }
  
  .frame-3901 {
    height: auto !important;
    position: relative !important;
  }
  
  /* Disable complex scroll animations on mobile */
  .fade-in-section,
  .scroll-animate,
  .scroll-animate-up,
  .scroll-animate-down,
  .scroll-animate-left,
  .scroll-animate-right {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation-play-state: running !important;
  }
  
  /* Simplify profile image animation */
  ._295682021-5694158343929879-7527780016033116887-n-removebg-preview-1 {
    animation: none !important;
  }
  
  /* Disable hover effects on mobile */
  .work-process-card:hover,
  .work-process-card-1:hover,
  .work-process-card-2:hover,
  .project-872:hover,
  .projectda-21:hover,
  .project-426:hover,
  .project-101:hover,
  .project-48:hover,
  .project-916:hover,
  .what-i-do-card-05:hover,
  .what-i-do-card-04:hover,
  .what-i-do-card-03:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
/* Allow carousel overflow for auto-scroll */
  .carousel {
    overflow-x: visible !important;
  }
  
  .frame-280 {
    animation: carouselScroll 60s linear infinite !important;
  }

  .testimonial-inner-frame-783 {
    overflow-x: visible !important;
  }

  .testimonial-cards-container {
    animation: testimonialScroll 70s linear infinite !important;
    overflow-x: visible !important;
  }
  
  .testimonial-card-831-d {
    flex: 0 0 auto;
    width: clamp(280px, 80vw, 350px);
  }
}

/* Further optimizations for very small screens */
@media (max-width: 480px) {
  .ellipse-1,
  .ellipse-2,
  .ellipse-3,
  .ellipse-4,
  .ellipse-5,
  .ellipse-6,
  .ellipse-42,
  .ellipse-58 {
    filter: blur(30px) !important;
    opacity: 0.3 !important;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in-section,
  .scroll-animate,
  .hero-section,
  .floating-orb,
  .ellipse-1,
  .ellipse-2,
  .ellipse-3,
  .ellipse-4,
  .ellipse-5,
  .ellipse-6,
  ._295682021-5694158343929879-7527780016033116887-n-removebg-preview-1,
  .frame-280,
  .testimonial-cards-container {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Portfolio description text - ensure justified on mobile */
@media (max-width: 767px) {
  .frame-286-wes > .a-seasoned-product-56-h-23 {
    text-align: justify !important;
  }
}

/* Add left and right padding to all input fields for screens below 450px */
@media screen and (max-width: 450px) {
  /* Remove padding from specific input fields on screens below 450px */
  .form input[type="text"].enter-name,
  .form input[type="email"].enter-email,
  .form input[type="text"].enter-location,
  .form input[type="number"].enter-budget,
  .form input[type="text"].enter-subject,
  .form textarea.type-your-message-here {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Add padding to placeholder containers */
  .form .placeholder-1,
  .form .placeholder-2,
  .form .placeholder-3,
  .form .placeholder-4,
  .form .placeholder-5,
  .form .placeholder-6 {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

/* Center specific frames for screens 912px and below */
@media screen and (max-width: 912px) {
  .frame-32155,
  .frame-32337,
  .frame-32209,
  .frame-32191,
  .frame-32534,
  .frame-32412 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Center specific frames for screens 300px to 750px */
@media screen and (max-width: 750px) and (min-width: 300px) {
  .frame-32155,
  .frame-32337,
  .frame-32209,
  .frame-32191,
  .frame-32534,
  .frame-32412 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Force center all project cards for screens 750px and below */
@media screen and (max-width: 750px) {
  /* Force center project card containers */
  .project-card-inner-frame-1,
  .project-card-inner-frame-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
  }

  /* Force center individual project card containers */
  .frame-32209,
  .frame-32337,
  .frame-32155,
  .frame-32191,
  .frame-32534,
  .frame-32412 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
  }

  /* Force center buttons and other elements */
  .button-4-qa-2,
  .frame-313-rhg,
  .frame-411-fgst-3,
  .button2,
  .about-picture-social-media {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-items: center !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Style social media buttons */
  .social-button {
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  .social-button:hover {
    transform: scale(1.1) !important;
    opacity: 0.8 !important;
  }
  
  /* Note: Movement elements positioning is now global, outside this media query */
  
  /* Make am-a-product-designer text fill parent width on mobile */
  .am-a-product-designer-with-the-ability-to-speak-developers-language-i-strives-to-build-immersive-and-beautiful-web-and-mobile-applications-through-carefully-crafted-user-centric-goal {
    width: 100% !important;
    max-width: 100% !important;
    text-align: justify !important;
    box-sizing: border-box !important;
  }
  
  /* Make frame-293-rat element fill parent width on mobile */
  .frame-293-rat {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  
  .frame-286-wes {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px !important;
  }
  
  .frame-286-wes > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    word-wrap: break-word !important;
  }
  
  .upper-frame-2332 {
    padding: 40px 0 !important;
  }
}