/* Founder Section - Text Fill Animation Styles */

#social-proof {
   position: relative;
}

.founder-text-container {
   position: relative;
}

.founder-text-content {
   font-size: 1.5rem;
   line-height: 1.8;
   color: #d1d5db; /* Light gray by default */
   font-weight: 300;
}

@media (min-width: 1024px) {
   .founder-text-content {
      font-size: 1.75rem; /* Bigger on desktop */
      line-height: 1.9;
   }
}

/* Text wrapper for fill effect */
.founder-text-wrapper {
   position: relative;
   display: block;
   width: 100%;
}

.founder-text-base,
.founder-text-fill {
   font-size: inherit;
   line-height: inherit;
   font-weight: inherit;
}

.founder-text-base {
   position: relative;
   z-index: 1;
   color: #d1d5db; /* Light gray - base */
}

.founder-text-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
   color: #374151; /* Dark gray - fill */
}

.founder-word {
   display: inline;
}

/* Ensure proper spacing and layout */
.founder-message {
   margin-bottom: 1.5rem;
   position: relative;
}

.founder-name {
   font-size: 1.75rem;
   font-weight: 700;
   color: #111827;
   margin-bottom: 0.5rem;
   position: relative;
   display: inline-block;
}

@media (min-width: 1024px) {
   .founder-name {
      font-size: 2rem;
   }
}

/* Shine effect - text itself shines with orange using pseudo-element */
.founder-name::before {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: #f97316;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   clip-path: inset(0 100% 0 0);
   overflow: hidden;
   pointer-events: none;
}

.founder-name.shining::before {
   animation: text-shine-sweep 0.6s ease-out forwards;
}

@keyframes text-shine-sweep {
   0% {
      clip-path: inset(0 100% 0 0);
   }
   100% {
      clip-path: inset(0 0% 0 0);
   }
}

.founder-role {
   color: #f97316;
   font-weight: 600;
   margin-bottom: 1.5rem;
}

/* Founder Photo Styles */
.founder-photo-container {
   position: relative;
   cursor: grab;
   display: inline-block;
   padding: 0.5rem;
}

.founder-photo-container:active {
   cursor: grabbing;
}

.founder-photo {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, border-radius;
   user-select: none;
   -webkit-user-drag: none;
   position: relative;
   z-index: 1;
}

/* Hover effect - enlarge and become square */
.founder-photo-container:hover .founder-photo,
.founder-photo.square-shape {
   border-radius: 1rem !important; /* Square with rounded corners */
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
   z-index: 10;
}

/* Scale handled by GSAP to work with draggable */
.founder-photo-container:hover .founder-photo:not(.dragging) {
   transform: scale(1.2) !important;
}

/* Maintain square shape when dragging */
.founder-photo.dragging {
   border-radius: 1rem !important;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Initial state for scroll animation - handled by GSAP */
.founder-photo-left .founder-photo,
.founder-photo-right .founder-photo {
   /* Initial states set by GSAP */
}

/* Active state after animation */
.founder-photo-left .founder-photo.animated,
.founder-photo-right .founder-photo.animated {
   /* Final states set by GSAP */
}