/* Mobile-specific styles */
@media (max-width: 768px) {
  /* Override main padding-top to allow hero background under header */
  /* This assumes mobile-fix.css is loaded after header-mobile-fix.css */
  /* WARNING: This might affect other pages if mobile-fix.css is used globally. */
  main {
      padding-top: 0 !important; /* Force remove padding */
  }

  /* Position hero section directly under header on mobile for about.html */
  #overview.hero { /* Targeting specifically the hero section in about.html */
      /* position: relative; /* REMOVED - No longer needed for fixed background */
      padding-top: 0 !important; /* Removed top padding */
      margin-top: 0 !important; /* Ensure no top margin, removing negative margin */
      /* overflow: hidden; /* REMOVED - No longer needed for fixed background */
      /* Ensure hero still takes up space */
      min-height: 80vh; /* Reverted min-height */
      display: flex; /* Use flex to align content */
      align-items: flex-end; /* Align content to bottom */
      justify-content: center; /* Center content horizontally */
      /* position: relative; /* REMOVED - Interferes with negative margin */
      /* z-index: 1; /* REMOVED - Interferes with negative margin */
  }

  /* Adjust hero container for bottom alignment */
  #overview .hero-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* Align content to the bottom */
      min-height: 80vh; /* Ensure container has height to allow bottom alignment, adjust as needed */
      padding-bottom: 40px; /* Add some padding at the bottom */
      /* position: relative; /* REMOVED - No longer needed */
      /* z-index: 1; /* REMOVED - No longer needed */
  }

  /* Ensure hero content is above the background and takes available space */
   #overview .hero-content {
       /* position: relative; /* No longer needed here, handled by parent #overview.hero */
       /* z-index: 1; /* No longer needed here, handled by parent #overview.hero */
       width: 100%; /* Take full width */
       text-align: center; /* Center text */
   }

  /* Reduce font size for h1 in about.html hero on mobile */
  #overview .hero-content h1 {
      font-size: 2.2rem !important; /* Smaller font size for h1 */
      margin-bottom: 10px; /* Adjust spacing */
  }

  /* Fix h2 positioning, font size, color, and spacing in about.html hero */
  #overview h2 {
      font-size: 32px !important; /* Ensure 32px font size on mobile */
      position: relative !important; /* Override absolute positioning */
      top: auto !important;
      left: auto !important;
      right: auto !important;
      width: auto !important;
      margin: 10px 0 20px 0 !important; /* Reduced top margin, kept bottom margin */
      text-align: center; /* Ensure text is centered */
      color: #9D9D9D !important; /* Set requested color */
      font-size: 1.4rem !important; /* Smaller font size for h2 */
      /* Reset any potential text-shadow causing issues */
      text-shadow: none !important;
  }

  /* Set color for the paragraph below h2 in about.html hero */
  #overview p.price-display {
      color: #8C8C8C !important; /* Set requested color */
  }

  /* General feature text container fix */
  .feature-text-container {
    position: relative !important;
    z-index: 20 !important;
  }
  
  /* CTA Section Fixes */
  .cta-section {
    padding-top: 5px !important; /* Reduce top padding */
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important; /* Reduced bottom padding to decrease space between CTA and Collection */
    overflow: visible !important; /* Changed from hidden to visible to match ai-gene-video-fix.css */
  }
  
  .cta-content {
    max-width: 100% !important; /* Ensure content doesn't exceed container width */
    margin-bottom: 30px !important;
    padding: 0 15px !important;
  }
  
  .cta-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
    /* Re-apply shimmer effect properties */
    background-image:
      /* 1. Base text gradient */
      linear-gradient(to right, #E8E0D7 0%, #547B84 54%, #A0A57B 100%),
      /* 2. Shimmer gradient (brighter, narrower highlight) */
      linear-gradient(90deg,
        rgba(255,255,255,0) calc(50% - 20px), /* Transparent edge */
        rgba(255,255,255,0.8) 50%,            /* Brighter white highlight */
        rgba(255,255,255,0) calc(50% + 20px)  /* Transparent edge */
      ) !important; /* Using 20px spread */
    background-size: 100% 100%, 250% 100% !important; /* Base size, Shimmer size */
    background-position: 0% 0%, 0% 0% !important; /* Initial position for Base and Shimmer (Shimmer starts left) */
    background-repeat: no-repeat !important;
    animation: framer-shimmer 2s linear infinite !important; /* Slower animation (2s) */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    position: relative !important;
    font-weight: 700 !important; /* Keep mobile font-weight */
    /* Remove the single background property that was overriding the shimmer */
  }
  
  /* Define the glow animation with movement */
  @keyframes glowKinetic {
    0% {
      filter: blur(12px) !important;
      opacity: 0.7 !important;
      transform: translateX(-1px) translateY(0px) !important;
    }
    25% {
      filter: blur(14px) !important;
      opacity: 0.8 !important;
      transform: translateX(0px) translateY(-1px) !important;
    }
    50% {
      filter: blur(16px) !important;
      opacity: 0.9 !important;
      transform: translateX(1px) translateY(0px) !important;
    }
    75% {
      filter: blur(14px) !important;
      opacity: 0.8 !important;
      transform: translateX(0px) translateY(1px) !important;
    }
    100% {
      filter: blur(12px) !important;
      opacity: 0.7 !important;
      transform: translateX(-1px) translateY(0px) !important;
    }
  }
  
  @keyframes glowKineticWide {
    0% {
      filter: blur(20px) !important;
      opacity: 0.4 !important;
      transform: translateX(-2px) translateY(0px) !important;
    }
    25% {
      filter: blur(22px) !important;
      opacity: 0.5 !important;
      transform: translateX(0px) translateY(-2px) !important;
    }
    50% {
      filter: blur(25px) !important;
      opacity: 0.6 !important;
      transform: translateX(2px) translateY(0px) !important;
    }
    75% {
      filter: blur(22px) !important;
      opacity: 0.5 !important;
      transform: translateX(0px) translateY(2px) !important;
    }
    100% {
      filter: blur(20px) !important;
      opacity: 0.4 !important;
      transform: translateX(-2px) translateY(0px) !important;
    }
  }
  
  /* Glowing text effect for CTA title */
  .cta-title::after {
    content: attr(data-text) !important;
    position: absolute !important;
    left: 10px !important; /* Match padding */
    top: 0 !important;
    background: linear-gradient(to right, #E8E0D7 0%, #547B84 54%, #A0A57B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: blur(12px) !important;
    z-index: -1 !important;
    opacity: 0.9 !important;
    animation: glowKinetic 3s infinite ease-in-out !important;
    will-change: transform, filter, opacity !important;
  }
  
  /* Additional glow layer for stronger effect */
  .cta-title::before {
    content: attr(data-text) !important;
    position: absolute !important;
    left: 10px !important;
    top: 0 !important;
    background: linear-gradient(to right, #E8E0D7 0%, #547B84 54%, #A0A57B 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: blur(20px) !important;
    z-index: -2 !important;
    opacity: 0.5 !important;
    animation: glowKineticWide 4s infinite ease-in-out !important;
    will-change: transform, filter, opacity !important;
  }
  
  .cta-description {
    font-size: 14px !important; /* Reduced font size */
    line-height: 1.4 !important;
    color: #BFBFBF !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
    /* Removed line clamping properties */
  }
  
  /* AI Gene Video Fix & Spacing Adjustment */
  .cta-image-container {
    margin-bottom: 5px !important; /* Reduce bottom margin */
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important; /* Changed from hidden to visible to match ai-gene-video-fix.css */
    position: relative !important;
    padding: 0 !important;
    margin-left: auto !important; /* Keep auto horizontal margins */
    margin-right: auto !important;
    height: auto !important;
  }

  
  /* Reduce top padding of Collection section to decrease space between CTA and Collection */
  .collection-section {
    padding-top: 20px !important; /* Reduced from 60px */
  }
  
  /* Removed conflicting .cta-video styles to allow ai-gene-video-fix.css to take precedence */

  /* Agent Card Text Size */
  .agent-card-title {
    font-size: 12px !important; /* Adjusted target class */
  }

  .agent-card-subtitle {
    font-size: 12px !important; /* Adjusted target class */
  }

  /* Reduce space between NFT media and text on mobile */
  .agent-card-media-container {
    margin-bottom: 10px !important; 
  }

  /* Features Section Descriptive Text Mobile Fix */
  .features-section .feature-description {
    color: var(--Neutral-N6, #8C8C8C) !important;
    text-align: justify !important;
    font-family: "Helvetica Neue" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 125% !important; /* 17.5px */
  }

  /* Vision Section Descriptive Text Mobile Fix */
  #vision-section .feature-description {
    color: var(--Neutral-N6, #8C8C8C) !important; /* Added !important */
    text-align: justify !important; /* Added !important */
    font-family: "Helvetica Neue" !important; /* Added !important */
    font-size: 16px !important; /* Added !important */
    font-style: normal !important; /* Added !important */
    /* font-weight: 700 !important; /* Removed explicit weight */
    line-height: 21px !important; /* 131.25%, Updated */
  }

  /* Reduce top margin for Aeaea Society image on mobile */
  #camera .product-display {
    margin-top: 10px !important; /* Significantly reduce top margin */
  }

  /* Humanoid Class Section Descriptive Text Mobile Fix */
  #humanoid-class-section .feature-description {
    font-size: 16px !important; /* Set font size to 16px for mobile */
  }

  /* Reduce protagonist card size on mobile */
  .protagonist-cards {
    padding: 0 10px; /* Add some horizontal padding to the container */
  }
  .protagonist-card {
    max-width: 90%; /* Make cards slightly narrower */
    margin-left: auto; /* Center the cards */
    margin-right: auto;
    margin-bottom: 25px; /* Add space below each card */
    padding: 15px; /* Slightly reduce padding */
  }
  .protagonist-card img,
  .protagonist-card video {
      margin-bottom: 10px; /* Reduce space below image/video */
  }
  .protagonist-card .card-content h3 {
      font-size: 1.1em; /* Slightly smaller heading */
  }
   .protagonist-card .card-content p {
      font-size: 0.9em; /* Slightly smaller paragraph text */
      line-height: 1.3; /* Adjust line height */
   }
   .protagonist-card .card-content .japanese-name {
       font-size: 1em; /* Adjust Japanese name size */
       margin-bottom: 8px; /* Reduce space below Japanese name */
   }

  /* Celestial Section Image Mobile Fix */
  #battery .product-display img {
    width: 100% !important; /* Ensure full width */
    height: auto !important; /* Maintain aspect ratio */
    max-width: 100% !important; /* Prevent exceeding container */
    display: block; /* Ensure block display for proper width handling */
    margin-left: auto; /* Center if needed */
    margin-right: auto;
  }

  /* Show/hide elements based on screen size */
  .desktop-only {
    display: none !important; /* Hide desktop-only elements on mobile */
  }
  .mobile-only {
    display: block !important; /* Show mobile-only elements on mobile */
  }
}