/* 
  ===================================================================
  Component: Mentorship Page Styles
  ===================================================================
*/

/* --- Animated Background Blobs --- */
@keyframes moveBlob {
  0%, 100% {
    transform: translate(10%, -10%) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(30%, 10%) scale(1.2) rotate(90deg);
  }
  50% {
    transform: translate(50%, 40%) scale(0.8) rotate(180deg);
  }
  75% {
    transform: translate(20%, 50%) scale(1.1) rotate(270deg);
  }
}

@keyframes moveBlob2 {
  0%, 100% {
    transform: translate(80%, 80%) scale(1) rotate(45deg);
  }
  25% {
    transform: translate(60%, 40%) scale(0.8) rotate(120deg);
  }
  50% {
    transform: translate(30%, 70%) scale(1.2) rotate(210deg);
  }
  75% {
    transform: translate(70%, 20%) scale(0.9) rotate(300deg);
  }
}

.background-blob, .background-blob-2 {
  position: fixed;
  border-radius: 9999px;
  filter: blur(100px);
  z-index: -1;
  will-change: transform;
}

.background-blob {
  top: 0;
  left: 0;
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle at center, var(--display-start), transparent 60%);
  opacity: 0.2;
  animation: moveBlob 30s infinite alternate ease-in-out;
}

.background-blob-2 {
  bottom: 0;
  right: 0;
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(circle at center, var(--display-end), transparent 70%);
  opacity: 0.15;
  animation: moveBlob2 45s infinite alternate ease-in-out;
}

/* --- Hero Section --- */
.mentorship-badge {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.text-gradient-display {
    background-image: linear-gradient(to right, var(--display-start), var(--display-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pricing-highlight {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 20px rgba(var(--display-start-rgb), 0.2);
}

/* --- Service Cards --- */
.service-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--display-start), var(--display-end));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: var(--display-start);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:nth-child(2)::before {
    background: linear-gradient(to right, var(--display-end), var(--cta-start));
}

.service-card:nth-child(3)::before {
    background: linear-gradient(to right, var(--cta-start), var(--cta-end));
}

/* --- Process Steps --- */
.process-step {
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.step-number {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(var(--display-start-rgb), 0.4);
}

/* --- CTA Section --- */
.whatsapp-cta {
    box-shadow: 0 0 20px rgba(var(--cta-end-rgb), 0.4), 0 0 30px rgba(var(--cta-start-rgb), 0.3);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.whatsapp-cta:hover {
    box-shadow: 0 0 35px rgba(var(--cta-end-rgb), 0.6), 0 0 50px rgba(var(--cta-start-rgb), 0.4);
}

/* --- Contact Form --- */
.contact-form {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.form-group input:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(var(--display-start-rgb), 0.1);
}

.submit-btn {
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .service-card {
        margin-bottom: 1rem;
    }
    
    .process-step {
        margin-bottom: 2rem;
    }
}

/* --- Animation Classes (for GSAP) --- */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
}