/**
 * mobile.css
 *
 * Overrides and adjustments for tablet and mobile devices.
 * Breakpoints:
 * - Tablet & Mobile Base: <= 1024px
 * - Tablet Specific: 768px - 1024px
 * - Mobile Specific: <= 767px
 * - Smaller Mobile: <= 640px
 * - Smallest Mobile: <= 480px
 *
 * Note: Heavy use of `!important` suggests potential conflicts with base styles.
 * Consider refactoring base styles or increasing specificity here if possible
 * to reduce reliance on `!important`.
 */

/* --- Base Mobile & Tablet Styles (<= 1024px) --- */
@media (max-width: 1024px) {

  /* Prevent horizontal scrollbars and ensure full width */
  html, body {
    width: 100%;
    max-width: 100vw; /* Use viewport width unit */
    overflow-x: hidden !important; /* Force hide horizontal overflow */
    margin: 0 !important; /* Reset margins */
    padding: 0 !important; /* Reset padding */
    position: relative; /* Needed for some absolute positioning contexts */
    box-sizing: border-box; /* Consistent box model */
  }

  /* Apply consistent box model globally within this breakpoint */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Ensure major sections don't cause overflow */
  /* These might need individual overflow control if they contain wide elements */
  #home, #contact, #expertise, #experience, #main {
    width: 100% !important; /* Ensure full width */
    max-width: 100vw !important; /* Prevent exceeding viewport */
    overflow-x: hidden !important; /* Hide horizontal overflow within sections */
    position: relative; /* Maintain positioning context */
    /* Reset padding that might be inherited or set globally */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Adjust main content containers */
  .container {
    width: 100% !important; /* Use available width */
    max-width: 100vw !important; /* Prevent overflow */
    padding-left: 1rem !important; /* Base mobile padding */
    padding-right: 1rem !important; /* Base mobile padding */
    margin-left: auto !important; /* Center container if needed */
    margin-right: auto !important; /* Center container if needed */
  }

  /* Ensure scroll indicator is always visible and positioned */
  .scroll-indicator-container {
    position: absolute !important; /* Use absolute for positioning relative to nearest positioned ancestor */
    left: 50% !important; /* Center horizontally */
    transform: translateX(-50%) !important; /* Fine-tune centering */
    z-index: 50 !important; /* Ensure it's above other content */
    /* Force visibility if hidden by default styles */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Fix for iOS Safari and other mobile browsers */
  .headshot-img {
    -webkit-transform: translateZ(0); /* Force GPU acceleration on WebKit */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; /* Prevent flickering during transitions */
    backface-visibility: hidden;
    will-change: filter; /* Tell browser to optimize for filter changes */
  }
  
  /* Fix for blur-up effect on mobile */
  img.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  img.blur-up.loaded {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  
  /* Ensure image wrapper contains the image properly */
  .image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
  }
  
  /* Improved headshot sizing for mobile */
  #home .headshot-frame {
    max-width: 65% !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
    transform: none !important;
  }

  /* Make image container more constrained */
  .headshot-container {
    overflow: hidden !important;
    position: relative !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
  }

  /* Better image sizing and containment */
  .headshot-img {
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    transition: filter 0.5s ease-in-out !important;
  }

  /* Ensure image wrapper contains the image properly */
  .image-wrapper {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
  }
}

/* Mobile Overrides */

/* Base fixes for all mobile & tablet devices */
@media (max-width: 1024px) {
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    position: relative;
  }

  /* Apply overflow control to sections */
  #home, #contact, #expertise, #experience, #main {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure containers don't overflow */
  .container {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box;
  }

  /* Enhanced scroll indicator styles for all devices */
  .scroll-indicator-container {
    position: absolute;
    z-index: 50 !important; 
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(17, 24, 39, 0.35) !important;
    border-radius: 999px !important;
    padding: 0.4rem 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-direction: row !important; /* Always use row layout on mobile/tablet */
    align-items: center !important;
    gap: 0.75rem !important;
  }
  
  /* Fix hero section height */
  #home {
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 60px !important;
    box-sizing: border-box !important;
  }
  
  @supports (height: 100dvh) {
    #home {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
  
  /* Adjust spacing for the tagline section */
  #home .grid {
    margin-top: 0 !important;
    width: 100% !important;
  }
}

/* Tablet specific fixes */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Adjust container padding for tablets */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Ensure scroll indicator is properly positioned */
  .scroll-indicator-container {
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    transform: translateX(-50%) scale(1) !important;
  }
  
  /* Reduced size for hero section on tablet */
  #home {
    padding-top: 70px !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)) !important;
  }
}

/* Mobile specific fixes */
@media (max-width: 767px) {
  html, body, #home, #contact, #hero, #main {
    min-width: 0 !important;
  }
  
  /* Properly center hero content on mobile */
  #home {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important; /* Remove top padding to center content */
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)) !important;
    overflow: hidden !important;
    min-height: 100vh !important;
  }
  
  #home .container {
    padding-top: 0 !important;
    padding-bottom: 15px !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  #home .grid {
    gap: 0.75rem !important; /* Reduce gap between image and text */
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make headshot much larger on mobile - as requested */
  #home .headshot-frame {
    max-width: 75% !important; /* Significantly larger */
    width: 75% !important;
    margin: 0 auto 0.5rem auto !important; /* Reduce bottom margin to bring closer to text */
    overflow: hidden !important;
    transform: none !important;
    position: relative !important;
  }
  
  /* Ensure headshot doesn't go into header by adding margin-top */
  #home .order-1 {
    margin-top: 90px !important; /* Increased from 60px for more space below header */
    margin-bottom: 0 !important; /* Remove bottom margin */
  }

  /* Adjust text sizing for balance with larger headshot */
  #home h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    margin-top: 0 !important; /* Remove top margin */
  }
  
  #typed {
    font-size: 1.35rem !important;
  }
  
  /* Ensure no tech elements spill out */
  #home .headshot-container::before,
  #home .headshot-container::after,
  #home .tech-corner,
  #home .data-point,
  #home .scan-line {
    overflow: hidden !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  
  /* Position the Touch to Explore button closer to content */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 4vh !important; /* Move closer to content */
  }
  
  /* Properly hide scroll indicator when scrolling down */
  .scroll-indicator-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 20px) scale(0.8) !important;
  }
  
  /* Fix animation for the arrow in thumbprint - ensure it always animates */
  .fingerprint-animated-path {
    animation: swipe-path-animation 2s ease-in-out infinite !important;
    stroke-width: 2 !important;
    stroke: #3B82F6 !important;
  }
  
  /* Updated animation keyframes for better arrow movement */
  @keyframes swipe-path-animation {
    0% { opacity: 0.5; transform: translateY(-3px); }
    40% { opacity: 1; transform: translateY(3px); }
    60% { opacity: 0.7; transform: translateY(0); }
    100% { opacity: 0.5; transform: translateY(-3px); }
  }
  
  /* Hide all touch indicators that might cause floating dot */
  .touch-animation-group,
  .touch-indication,
  .touch-indication-ring {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Smaller hand indicator on mobile */
  .hand-swipe-container {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Adjust font sizes for better mobile display */
  #home h1 {
    font-size: clamp(2.25rem, 8vw, 3rem) !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
  }
  
  #typed {
    font-size: 1.25rem !important;
  }
  
  /* Reduce spacing between elements */
  #home .space-y-2,
  #home .space-y-3,
  #home .space-y-4 {
    gap: 0.5rem !important;
  }
  
  /* Reduce margins */
  #home .mt-2, #home .mt-3, #home .mt-4 {
    margin-top: 0.5rem !important;
  }
  
  /* Better vertical spacing in hero grid */
  #home .grid {
    gap: 2rem !important;
  }
}

@media (max-width: 640px) {
  /* Ensure scroll indicator is visible on small devices */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 8vh !important; /* Adjust position for smaller screens */
    transform: translateX(-50%) scale(0.9) !important;
    padding: 0.35rem 0.6rem !important;
  }
  
  /* Adjust CTA buttons for small screens */
  .cta-container {
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
  }
  
  /* Make hero even more compact */
  #home {
    padding-top: 40px !important;
  }
  
  #home .grid {
    gap: 0.5rem !important;
  }
  
  #home .space-y-2,
  #home .space-y-3 {
    gap: 0.35rem !important;
  }
  
  @media (max-width: 380px) {
    .cta-container {
      flex-direction: column !important;
      width: 100% !important;
    }
    
    .mobile-full-width {
      width: 100% !important;
    }
    
    .hand-swipe-container {
      width: 40px !important;
      height: 40px !important;
    }
    
    #home .headshot-frame, 
    #home .relative[style*="perspective"] {
      max-width: 35% !important;
    }
  }
}

@media (max-width: 480px) {
  /* Ensure scroll indicator is visible on very small devices */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 8vh !important; /* Use viewport-relative units */
    transform: translateX(-50%) scale(0.85) !important;
    padding: 0.3rem 0.5rem !important;
  }
  
  /* Reduce spacing in the hero section */
  #home .grid {
    gap: 0.5rem !important;
  }
  
  /* Adjust heading sizes on small mobile */
  #home h1 {
    font-size: clamp(2rem, 7vw, 2.5rem) !important;
  }
  
  /* Improved headshot sizing for mobile */
  #home .headshot-frame {
    max-width: 55% !important;
    margin: 0 auto !important;
  }
  
  #home .grid {
    gap: 1.5rem !important;
  }
}

/* Small height screens */
@media (max-height: 580px) {
  #home {
    padding-top: 30px !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
  }
  
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 12vh !important; /* Position higher on short screens */
    transform: translateX(-50%) scale(0.8) !important;
  }
  
  #home .grid {
    gap: 0.35rem !important;
  }
  
  #home h1 {
    font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
  }
  
  #home .space-y-2,
  #home .space-y-3,
  #home .space-y-4 {
    gap: 0.25rem !important;
  }
  
  /* More compact headshot */
  #home .relative[style*="perspective"] {
    max-width: 35% !important;
  }
  
  .hand-swipe-container {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Improved headshot sizing for mobile */
  #home .headshot-frame {
    max-width: 35% !important;
  }
}

/* iOS specific adjustments */
@supports (padding: max(0px)) {
  /* Apply safe area insets for notched devices */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: max(8vh, calc(8vh + env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px) / 3) !important;
  }
  
  #home {
    padding-bottom: max(30px, calc(30px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Show hand indicator only on mobile and tablet */
@media (max-width: 1023px) {
  .hand-swipe-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .mouse-wheel-container {
    display: none !important;
  }
}

/* Hide hand indicator on desktop/laptop */
@media (min-width: 1024px) {
  .hand-swipe-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .mouse-wheel-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Skill-chip media queries */
@media (max-width: 768px) {
  .skill-chip { font-size: 0.7rem !important; padding: 0.2rem 0.4rem !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; max-width: 35% !important; }
  .skill-chip.ai { top: 5% !important; left: 5% !important; }
  .skill-chip.marketing { top: 5% !important; right: 5% !important; }
  .skill-chip.strategy { bottom: 5% !important; left: 5% !important; }
  .skill-chip.dev { bottom: 5% !important; right: 5% !important; }
}
@media (max-width: 640px) {
  .skill-chip { font-size: 0.65rem !important; padding: 0.15rem 0.35rem !important; max-width: 40% !important; animation-duration: 3s !important; }
  .skill-chip.ai, .skill-chip.marketing { top: 3% !important; }
  .skill-chip.strategy, .skill-chip.dev { bottom: 3% !important; }
}
@media (max-width: 480px) {
  .skill-chip { font-size: 0.6rem !important; padding: 0.12rem 0.3rem !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; max-width: 45% !important; }
}

/* Headshot frame fix for mobile devices */
.headshot-frame { 
    max-width: 90vw !important; 
    width: 180px !important; 
    margin: 0 auto !important;
    overflow: hidden !important; 
    box-sizing: border-box !important; 
    padding: 0 !important; 
    background: none !important;
    transform-style: flat !important;
    position: relative !important;
    z-index: 10 !important;
}

.headshot-container { 
    max-width: 100% !important; 
    width: 100% !important; 
    margin: 0 auto !important; 
    overflow: hidden !important; 
    box-sizing: border-box !important; 
    padding: 0 !important; 
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.7)) !important;
    border-radius: 50% !important;
}

.headshot-container img { 
    display: block !important; 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important; 
    object-fit: cover !important; 
    margin: 0 auto !important; 
    box-sizing: border-box !important; 
    outline: none !important;
    border-radius: 50% !important;
    object-position: center top !important;
}

.headshot-container > div { 
    max-width: 100% !important; 
    width: 100% !important; 
    overflow: hidden !important; 
    box-sizing: border-box !important; 
    outline: none !important;
}

/* Adjust tech elements for smaller screens */
@media (max-width: 768px) {
    .tech-corner {
        width: 15px !important;
        height: 15px !important;
    }
    
    .data-point {
        width: 3px !important;
        height: 3px !important;
    }
    
    .scan-line {
        height: 1px !important;
    }
}

@media (max-width: 480px) {
    .tech-corner {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Thumbprint container sizing fixes */
.thumbprint-container {
  width: 40px !important;
  height: 40px !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Special override for the mobile touch explore thumbprint container */
.mobile-touch-explore .thumbprint-container {
  width: 3.7rem !important;
  height: 3.7rem !important;
  min-width: 3.7rem !important;
  min-height: 3.7rem !important;
  transform: scale(1) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.thumbprint-container svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Special override for the fingerprint icon inside mobile touch explore */
.mobile-touch-explore .fingerprint-icon {
  font-size: 3.5rem !important;
  color: #fff !important;
  transform: translateY(0) scale(1) !important;
  transition: transform 0.13s cubic-bezier(.4,2.1,.6,1) !important;
}

/* Ensure the animated path is visible */
.fingerprint-animated-path {
  stroke-width: 2 !important;
  animation: fingerprint-path-animation 2s ease-in-out infinite !important;
}

/* Enhanced animation for the arrow */
@keyframes fingerprint-path-animation {
  0% { 
    opacity: 0.3;
    transform: translateY(-2px);
  }
  40% { 
    opacity: 1;
    transform: translateY(0);
  }
  60% { 
    opacity: 0.3;
    transform: translateY(2px);
  }
  100% { 
    opacity: 0.3;
    transform: translateY(-2px);
  }
}

/* Touch indication pulse animation */
.touch-indication {
  animation: pulse-touch 1.5s ease-in-out infinite !important;
  filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.7)) !important;
}

@keyframes pulse-touch {
  0% { opacity: 0.3; r: 0.5; }
  50% { opacity: 1; r: 1.5; }
  100% { opacity: 0.3; r: 0.5; }
}

/* Tablet specific fixes */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Adjust container padding for tablets */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Ensure scroll indicator is properly positioned on tablets */
  .scroll-indicator-container {
    bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    transform: translateX(-50%) scale(1) !important;
  }
  
  /* Show thumbprint icon on tablets */
  .mouse-wheel-container {
    display: none !important;
  }
  
  .thumbprint-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Reduced size for hero section on tablet */
  #home {
    padding-top: 80px !important;
    padding-bottom: max(50px, env(safe-area-inset-bottom, 50px)) !important;
  }
  
  #home .grid {
    gap: 3rem !important;
  }
  
  #home .headshot-frame {
    max-width: 70% !important;
  }
  
  #home .container {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Mobile specific fixes */
@media (max-width: 767px) {
  html, body, #home, #contact, #hero, #main {
    min-width: 0 !important;
  }
  
  /* Make hero more compact on mobile */
  #home {
    padding-top: 70px !important;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)) !important;
  }
  
  #home .grid {
    gap: 1rem !important;
  }
  
  /* Make headshot much smaller */
  #home .headshot-frame {
    max-width: 40% !important;
    margin: 0 auto !important;
  }
  
  /* Ensure scroll indicator is properly positioned */
  .scroll-indicator-container {
    bottom: max(15px, env(safe-area-inset-bottom, 15px)) !important;
    transform: translateX(-50%) scale(0.95) !important;
    padding: 0.35rem 0.7rem !important;
  }
  
  /* Smaller hand indicator on mobile */
  .hand-swipe-container {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Adjust font sizes for better mobile display */
  #home h1 {
    font-size: clamp(2.25rem, 8vw, 3rem) !important;
    line-height: 1.1 !important;
  }
  
  #typed {
    font-size: 1.25rem !important;
  }
}

/* Show hand indicator only on mobile and tablet */
@media (max-width: 1023px) {
  .hand-swipe-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .mouse-wheel-container {
    display: none !important;
  }
}

/* Hide hand indicator on desktop/laptop */
@media (min-width: 1024px) {
  .hand-swipe-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .mouse-wheel-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Balance desktop vs mobile headshot sizing - 30% smaller */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Large screens but not extra large */
  #home .headshot-frame {
    max-width: 70% !important;
    width: 70% !important;
  }
  
  /* Ensure the container is wide enough */
  #home .container {
    max-width: 95% !important; 
    width: 95% !important;
  }
}

@media (min-width: 1200px) {
  /* Extra large screens */
  #home .headshot-frame {
    max-width: 75% !important;
    width: 75% !important;
  }
  
  /* Extra wide container */
  #home .container {
    max-width: 1400px !important;
    width: 95% !important;
  }
}

@media (min-width: 1536px) {
  /* Ultra wide screens */
  #home .container {
    max-width: 1600px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Adjust the grid layout on very large screens */
@media (min-width: 1280px) {
  #home .grid {
    gap: 3rem !important;
  }
}

/* Ensure content doesn't overflow with larger headshot */
@media (min-width: 768px) {
  #home .container {
    overflow: visible !important;
  }
  
  #home img {
    max-width: 100% !important;
  }
}

/* Updated thumbprint container sizing for better text fit */
.thumbprint-container {
  width: 40px !important;
  height: 40px !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  transform-style: preserve-3d !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Make scroll indicator text smaller and more compact */
.scroll-indicator-text {
  font-size: 0.75rem !important; /* 12px base size */
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

/* Reposition elements on mobile at specific breakpoints */
@media (max-width: 767px) {
  #unified-scroll-indicator {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.35rem 0.6rem !important;
  }
  
  .scroll-indicator-text {
    font-size: 0.7rem !important; /* Smaller text on mobile */
    margin: 0 !important;
  }
  
  /* Ensure these styles don't override the mobile-touch-explore specific styles */
  .thumbprint-container:not(.mobile-touch-explore .thumbprint-container) {
    width: 36px !important;
    height: 36px !important;
    margin-left: 0.15rem !important;
  }
}

@media (max-width: 640px) {
  /* Ensure scroll indicator is visible on small devices */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 8vh !important; /* Adjust position for smaller screens */
    transform: translateX(-50%) scale(0.9) !important;
    padding: 0.3rem 0.5rem !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
  }
  
  .scroll-indicator-text {
    font-size: 0.65rem !important; /* Even smaller text */
  }
  
  /* Ensure these styles don't override the mobile-touch-explore specific styles */
  .thumbprint-container:not(.mobile-touch-explore .thumbprint-container) {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 480px) {
  /* Ensure scroll indicator is visible on very small devices */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 8vh !important; /* Use viewport-relative units */
    transform: translateX(-50%) scale(0.85) !important;
    padding: 0.25rem 0.4rem !important;
    gap: 0.3rem !important;
  }
  
  /* Ensure these styles don't override the mobile-touch-explore specific styles */
  .thumbprint-container:not(.mobile-touch-explore .thumbprint-container) {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Small height screens */
@media (max-height: 580px) {
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 12vh !important; /* Position higher on short screens */
    transform: translateX(-50%) scale(0.8) !important;
    flex-direction: row !important;
    gap: 0.3rem !important;
  }
  
  .scroll-indicator-text {
    font-size: 0.65rem !important;
  }
  
  /* Ensure these styles don't override the mobile-touch-explore specific styles */
  .thumbprint-container:not(.mobile-touch-explore .thumbprint-container) {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Additional headshot responsive fixes */
@media (max-width: 1024px) {
  /* Fix for iOS Safari and other mobile browsers */
  .headshot-img {
    -webkit-transform: translateZ(0); /* Force GPU acceleration on WebKit */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden; /* Prevent flickering during transitions */
    backface-visibility: hidden;
    will-change: filter; /* Tell browser to optimize for filter changes */
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
  }
  
  /* Fix for blur-up effect on mobile */
  img.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-width: 100% !important;
    object-fit: cover !important;
  }
  
  img.blur-up.loaded {
    -webkit-filter: blur(0);
    filter: blur(0);
  }
  
  /* Ensure image wrapper contains the image properly */
  .image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    position: relative !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  
  /* Critical fix: Constrain hero section on mobile to prevent overflow */
  #home {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 767px) {
  #home .headshot-frame {
    max-width: 45% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 640px) {
  #home .headshot-frame {
    max-width: 50% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  #home .headshot-frame {
    max-width: 55% !important;
    margin: 0 auto !important;
  }
}

/* Fix for very small devices */
@media (max-width: 360px) {
  #home .headshot-frame {
    max-width: 60% !important;
    margin: 0 auto !important;
  }
}

/* Adjust portrait mode specifically */
@media (max-width: 767px) and (orientation: portrait) {
  /* Position hero for portrait mode */
  #home {
    padding-top: 0 !important; /* Remove padding to center vertically */
    justify-content: center !important;
  }
  
  /* Make headshot properly sized in portrait */
  #home .headshot-frame {
    max-width: 75% !important;
    width: 75% !important;
    margin-bottom: 0.5rem !important; /* Reduce bottom margin */
  }
  
  /* Fix order and spacing */
  #home .order-1 {
    margin-top: 90px !important; /* Increased from 60px for more space below header */
    margin-bottom: 0 !important;
  }
  
  #home .order-2 {
    margin-top: 0 !important;
  }
  
  /* Position Touch to Explore closer */
  #unified-scroll-indicator {
    bottom: 4vh !important;
  }
}

/* Better specific fix for iPhone and smaller devices */
@media (max-width: 480px) {
  #home {
    padding-top: 0 !important; /* Center content vertically */
    justify-content: center !important;
  }
  
  /* Keep headshot large but slightly smaller on very small screens */
  #home .headshot-frame {
    max-width: 70% !important;
    width: 70% !important;
    transform: none !important;
    margin-top: 90px !important; /* Increased from 60px to create more space from header */
    margin-bottom: 0.25rem !important; /* Minimal margin to text */
  }
  
  /* Improve grid layout */
  #home .grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0.5rem !important; /* Very small gap between elements */
  }
  
  /* Touch to Explore even closer for small screens */
  #unified-scroll-indicator,
  .scroll-indicator-container {
    bottom: 2vh !important;
  }
}

@media (max-width: 380px) {
  #home .headshot-frame {
    max-width: 65% !important; /* Slightly smaller on very small screens */
  }
  
  #home h1 {
    font-size: 2.25rem !important;
  }
}