/* Hero Section Styles */
.hero {
  min-height: 80vh; /* Reduced from 100vh to decrease grey gap */
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start */
  justify-content: center;
  background: var(--bg-primary);
  position: relative;
  overflow-x: hidden; /* Prevent horizontal overflow */
  overflow-y: visible; /* Allow vertical overflow for full puppy circle */
  z-index: 1;
  padding-top: 168px !important; /* Desktop: Match mobile padding to accommodate container positioning */
  padding-bottom: var(--space-6); /* Increased bottom padding to accommodate bubble */
  width: 100%;
  max-width: 100vw; /* Ensure it doesn't exceed viewport width */
}

.hero::before { display: none; }

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 0 var(--space-6) var(--space-4) var(--space-6);
  position: relative;
  z-index: 10 !important; /* Higher z-index so text stays IN FRONT of puppy animation (match mobile) */
  margin-top: -85px !important; /* Match mobile positioning for consistency */
}

/* PERMANENT PUPPY CIRCLE FIX */
.hero-puppy-container {
  position: absolute;
  top: 112px !important; /* Desktop: Use same positioning as mobile for consistency */
  margin-top: -66px !important; /* Desktop: Negative margin to compensate (same as mobile) */
  left: var(--space-6);
  z-index: 1; /* Desktop: Lower z-index */
  -webkit-animation: puppy-glide-x 8s ease-in-out infinite alternate; /* Safari animation prefix */
  animation: puppy-glide-x 8s ease-in-out infinite alternate;
  max-width: calc(100vw - 2 * var(--space-6) - 132px); /* Ensure it doesn't exceed viewport */
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

/* PERMANENT PUPPY CIRCLE FIX */
.hero-puppy {
  width: 132px;
  height: 132px;
  overflow: hidden !important;
  border-radius: 50% !important;
  margin: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.hero-puppy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* DESKTOP-ONLY FIX - 60% position for better GIF visibility */
@media (min-width: 769px) {
  .hero-puppy img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 60% !important; /* Position GIF at 60% from top for better bottom visibility */
    border-radius: 50% !important;
    display: block !important;
  }
  
  /* Hide iframe on desktop - will be replaced with img via JavaScript */
  .hero-puppy iframe,
  .hero-puppy .giphy-embed {
    display: none !important;
  }
}

/* PERMANENT PUPPY CIRCLE FIX */
.hero-puppy iframe,
.hero-puppy .giphy-embed {
  position: relative !important;
  top: 10px !important;
  margin-top: -20px !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Speech bubble attached to puppy */
.puppy-speech-bubble {
  position: absolute;
  top: 135px; /* Moved down by 10% (13px down from 122px) */
  left: -46px; /* Moved right by 20% (27px right from -73px) */
  background: var(--bg-primary); /* Website background color */
  color: white; /* White text for contrast */
  padding: 12px 20px; /* Increased horizontal padding for better spacing */
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  z-index: -1; /* Behind the puppy circle */
  border-radius: 8px;
  border: none; /* Border removed */
  box-shadow: none; /* Shadow removed */
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: 10px; /* Increased gap between icon and text */
  min-width: 200px; /* Ensure minimum width for proper alignment */
  width: auto; /* Allow width to adjust based on content */
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

/* Fix icon alignment */
.puppy-speech-bubble svg {
  flex-shrink: 0; /* Prevent icon from shrinking */
  vertical-align: middle;
  margin-top: -1px; /* Fine-tune vertical alignment */
}

/* Circular text animation for speech bubble */
.bubble-text {
  position: relative;
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  flex: 1; /* Allow text to take remaining space */
  min-width: 0; /* Allow text to shrink if needed */
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

.bubble-text .text-1,
.bubble-text .text-2,
.bubble-text .text-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  -webkit-animation: textFade 6s infinite; /* Safari animation prefix */
  animation: textFade 6s infinite;
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

.bubble-text .text-1 {
  opacity: 1;
  visibility: visible;
  color: var(--primary-color) !important; /* Primary accent */
}

.bubble-text .text-2 {
  opacity: 0;
  visibility: hidden;
  animation-delay: 2s;
  color: var(--accent-color) !important; /* Accent */
}

.bubble-text .text-3 {
  opacity: 0;
  visibility: hidden;
  animation-delay: 4s;
  color: white; /* White */
}

@keyframes textFade {
  0%, 30% {
    opacity: 1;
    visibility: visible;
    -webkit-opacity: 1;
    -webkit-visibility: visible;
  }
  33%, 95% {
    opacity: 0;
    visibility: hidden;
    -webkit-opacity: 0;
    -webkit-visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-opacity: 1;
    -webkit-visibility: visible;
  }
}

/* Arrow removed as requested */

@-webkit-keyframes puppy-glide-x {
  from { left: var(--space-6); }
  to   { left: calc(100% - var(--space-6) - 132px); }
}

@keyframes puppy-glide-x {
  from { left: var(--space-6); }
  to   { left: calc(100% - var(--space-6) - 132px); }
}

@media (max-width: 768px) {
  .hero-puppy {
    animation-duration: 8s; /* medium speed on mobile too */
  }
  
  /* Adjust speech bubble for mobile */
  .puppy-speech-bubble {
    min-width: 180px; /* Slightly smaller on mobile */
    padding: 10px 16px; /* Reduced padding on mobile */
    font-size: 13px; /* Slightly smaller text on mobile */
    gap: 8px; /* Reduced gap on mobile */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-puppy {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: none;
    transform: none;
  }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  .puppy-speech-bubble {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }
  
  .bubble-text .text-1,
  .bubble-text .text-2,
  .bubble-text .text-3 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

.hero-name {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: 5rem; /* Decreased by 2rem from 7rem */
  line-height: 1.2;
}

/* First/last name colors */
.name-first { color: var(--primary-color) !important; }
.name-last { color: var(--primary-color) !important; }

.greeting {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.hero-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  line-height: 1.3;
}

.title-highlight {
  color: var(--primary-color);
  font-weight: var(--font-bold);
}

.typing-effect {
  color: var(--accent-color);
  font-weight: var(--font-bold);
  border-right: 2px solid var(--accent-color);
  -webkit-animation: blink-cursor 1s infinite; /* Safari animation prefix */
  animation: blink-cursor 1s infinite;
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

@-webkit-keyframes blink-cursor {
  0%, 50% { 
    border-color: var(--accent-color);
    -webkit-border-color: var(--accent-color);
  }
  51%, 100% { 
    border-color: transparent;
    -webkit-border-color: transparent;
  }
}

@keyframes blink-cursor {
  0%, 50% { border-color: var(--accent-color); }
  51%, 100% { border-color: transparent; }
}

.hero-tagline {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-tagline .highlight {
  color: var(--primary-color);
  font-weight: var(--font-bold);
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--primary-color);
  margin-bottom: var(--space-1); /* Reduced from var(--space-2) */
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hero Animations */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content > *:not(.hero-puppy) {
  opacity: 1;
  transform: translateY(0);
  -webkit-animation: fadeInUp 0.8s ease-out forwards; /* Safari animation prefix */
  animation: fadeInUp 0.8s ease-out forwards;
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
}

.hero-name {
  -webkit-animation-delay: 0.2s; /* Safari animation delay prefix */
  animation-delay: 0.2s;
}

.hero-title {
  -webkit-animation-delay: 0.4s; /* Safari animation delay prefix */
  animation-delay: 0.4s;
}

.hero-tagline {
  -webkit-animation-delay: 0.6s; /* Safari animation delay prefix */
  animation-delay: 0.6s;
}

.hero-cta {
  -webkit-animation-delay: 0.8s; /* Safari animation delay prefix */
  animation-delay: 0.8s;
}

.hero-stats {
  -webkit-animation-delay: 1s; /* Safari animation delay prefix */
  animation-delay: 1s;
}

/* Responsive Hero */
@media (max-width: 768px) {
  .hero {
    min-height: 90vh; /* Reduced height to prevent congestion */
    padding: 168px 0 var(--space-6) 0 !important; /* Increased from 134px to 168px (lowered by another 34px) */
    margin-top: 0; /* Remove any top margin */
    /* CRITICAL: Allow overflow for full puppy circle visibility */
    overflow: visible !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    overflow-y: visible !important; /* Allow vertical overflow for puppy circle */
  }
  
  .hero-content {
    margin-top: -85px !important; /* Moved down by 15px from -100px (content further down) */
    z-index: 10 !important; /* Higher z-index so text stays IN FRONT of puppy animation */
  }
  
  /* PERMANENT PUPPY CIRCLE FIX - Mobile */
  .hero-puppy-container {
    top: 112px !important; /* Moved down by 10%: 102px * 1.1 = 112.2px (rounded to 112px) */
    margin-top: -66px !important;
    position: absolute !important;
    z-index: 1 !important; /* Lower z-index so puppy animation runs BEHIND text */
  }
  
  /* Keep puppy visible on smaller screens */
  .hero-puppy {
    left: var(--space-4);
  }
  
  .hero-name {
    font-size: var(--text-3xl);
    margin-bottom: 2rem; /* Extra large gap below Maheshwor Tiwari for puppy visibility */
  }
  
  .hero-title {
    font-size: var(--text-xl);
  }
  
  .hero-tagline {
    font-size: var(--text-sm); /* Smaller text to reduce congestion */
    margin-bottom: var(--space-6); /* Reduced gap to prevent congestion */
    line-height: 1.4; /* Tighter line height */
  }
  
  .hero-cta {
    -webkit-flex-direction: column; /* Safari flex-direction prefix */
    flex-direction: column;
    -webkit-align-items: center; /* Safari align-items prefix */
    align-items: center;
    gap: var(--space-3); /* Reduced gap to prevent congestion */
    margin-bottom: var(--space-8); /* Reduced bottom margin to prevent congestion */
  }
  
  .hero-cta .btn {
    width: 240px !important; /* Same fixed width as desktop - all buttons equal */
    min-width: 240px !important;
    max-width: 240px !important;
  }
  
  .hero-stats {
    -webkit-flex-direction: column; /* Safari flex-direction prefix */
    flex-direction: column;
    gap: var(--space-4); /* Reduced gap to prevent congestion */
    margin-top: var(--space-4); /* Reduced top margin to prevent congestion */
  }
  
  .stat {
    padding: var(--space-4);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-base);
    min-width: 120px;
    border: 1px solid var(--border-color);
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 85vh; /* Further reduced height for very small screens */
    padding: var(--space-2) 0 var(--space-3) 0; /* Tighten top spacing even more on very small screens */
  }
  
  .hero-content {
    padding: 0 var(--space-4);
    margin-top: 0; /* No extra gap above greeting on very small screens */
  }
  
  .hero-name {
    font-size: var(--text-2xl);
    margin-bottom: 5rem; /* Extra large gap below Maheshwor Tiwari for puppy visibility */
  }
  
  .hero-title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3); /* Add bottom margin for better spacing */
  }
  
  .greeting {
    font-size: var(--text-lg);
  }
  
  .hero-tagline {
    font-size: var(--text-xs); /* Even smaller text on very small screens */
    margin-bottom: var(--space-4); /* Further reduced bottom margin */
    line-height: 1.3; /* Even tighter line height */
  }
  
  .hero-cta {
    gap: var(--space-2); /* Smaller gap on very small screens */
    margin-bottom: var(--space-6); /* Further reduced bottom margin */
  }
  
  .hero-stats {
    gap: var(--space-3); /* Smaller gap on very small screens */
    margin-top: var(--space-3); /* Further reduced top margin */
  }
}