/* Custom CSS for Workify Landing Page */

/* Global Styles */
* {
    scroll-behavior: smooth;
}

body {
    min-width: 400px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #7c4ffd 0%, #56e6c2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center px-6 py-3 bg-primary text-white font-semibold rounded-xl;
    @apply hover:bg-primary/90 transform hover:scale-105 transition-all duration-300;
    @apply shadow-lg hover:shadow-xl;
    box-shadow: 0 4px 20px rgba(124, 79, 253, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 8px 30px rgba(124, 79, 253, 0.4);
}

.btn-secondary {
    @apply inline-flex items-center px-6 py-3 bg-white text-primary font-semibold rounded-xl border-2 border-primary;
    @apply hover:bg-primary hover:text-white transform hover:scale-105 transition-all duration-300;
    @apply shadow-lg hover:shadow-xl;
}

.btn-outline {
    @apply inline-flex items-center px-6 py-3 bg-transparent text-primary font-semibold rounded-xl border-2 border-primary;
    @apply hover:bg-primary hover:text-white transform hover:scale-105 transition-all duration-300;
}

.btn-white {
    @apply inline-flex items-center px-6 py-3 bg-white text-primary font-semibold rounded-xl;
    @apply hover:bg-gray-50 transform hover:scale-105 transition-all duration-300;
    @apply shadow-lg hover:shadow-xl;
}

/* Navigation */
.nav-link {
    @apply text-gray-600 hover:text-primary font-medium transition-colors duration-300;
    @apply relative;
}

.nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, #7c4ffd 0%, #56e6c2 100%);
    border-radius: 1px;
}

/* Hero Section Animations */
.hero-cta {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(124, 79, 253, 0.3);
    }
    50% {
        box-shadow: 0 8px 40px rgba(124, 79, 253, 0.5);
    }
}

.floating-card {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.floating-element {
    animation: float-small 4s ease-in-out infinite;
}

.floating-element-2 {
    animation: float-small 4s ease-in-out infinite 2s;
}

@keyframes float-small {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* Step Cards */
.step-card {
    @apply bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-500;
    @apply transform hover:-translate-y-2 relative overflow-hidden;
    border: 1px solid rgba(124, 79, 253, 0.1);
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #7c4ffd 0%, #56e6c2 100%);
}

.step-card:hover {
    border-color: rgba(124, 79, 253, 0.3);
}

.step-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center mb-4;
    @apply transform group-hover:scale-110 transition-transform duration-300;
}

.step-number {
    @apply absolute -top-2 -right-2 w-8 h-8 bg-primary text-white rounded-full;
    @apply flex items-center justify-center text-sm font-bold;
    @apply transform group-hover:scale-125 transition-transform duration-300;
}

/* Advantage Cards */
.advantage-card {
    @apply bg-white rounded-2xl p-6 shadow-lg transition-all duration-500;
    @apply transform hover:-translate-y-2 relative overflow-hidden;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-origin: border-box;
    background-image:
        linear-gradient(white, white),
        linear-gradient(135deg, #7c4ffd, #56e6c2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%;
}

.advantage-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.advantage-icon {
    @apply w-12 h-12 rounded-xl bg-gray-50 flex items-center justify-center mb-4 text-xl;
    @apply transform hover:scale-110 transition-transform duration-300;
}

.calculator-card {
    background: linear-gradient(135deg, rgba(124, 79, 253, 0.05) 0%, rgba(86, 230, 194, 0.05) 100%);
}

/* Stats */
.stat-card {
    @apply bg-white rounded-xl p-6 relative overflow-hidden;
    @apply transform hover:scale-105 transition-all duration-300;
    @apply shadow-lg hover:shadow-xl;
    border: 1px solid rgba(124, 79, 253, 0.1);
}

.stat-icon {
    @apply absolute top-4 right-4 text-gray-200 text-2xl;
}

/* Referral Program */
.referral-level {
    @apply bg-white rounded-xl p-4 shadow-md transition-all duration-300;
    border: 2px solid transparent;
}

.referral-level.active {
    border-color: rgba(124, 79, 253, 0.2);
    background: linear-gradient(135deg, rgba(124, 79, 253, 0.05) 0%, rgba(86, 230, 194, 0.05) 100%);
}

.referral-level.locked {
    @apply bg-gray-50;
    border-color: rgba(156, 163, 175, 0.2);
}

.level-badge {
    @apply w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3;
}

.level-badge.locked {
    @apply bg-gray-400;
}

.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply bg-gradient-to-r from-primary to-secondary h-full rounded-full transition-all duration-1000;
}

.bonus-card {
    @apply bg-gradient-to-r from-secondary/10 to-primary/10 rounded-xl p-4;
    @apply border-2 border-dashed border-secondary/30;
}

/* FAQ */
.faq-item {
    @apply bg-white rounded-xl shadow-md overflow-hidden;
    border: 1px solid rgba(124, 79, 253, 0.1);
}

.faq-question {
    @apply w-full p-6 text-left font-semibold text-gray-900 flex items-center justify-between;
    @apply hover:bg-gray-50 transition-colors duration-300;
}

.faq-question i {
    @apply transform transition-transform duration-300;
}

.faq-item.active .faq-question i {
    @apply rotate-180;
}

.faq-answer {
    @apply px-6 pb-6 text-gray-600;
    @apply hidden;
}

.faq-item.active .faq-answer {
    @apply block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .step-card {
        @apply text-center;
    }
    
    .step-number {
        @apply relative top-0 right-0 mx-auto mb-4;
    }
    
    .hero-cta {
        @apply w-full;
    }
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
    content: '';
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #7c4ffd 0%, #56e6c2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6d3df0 0%, #4dd4b5 100%);
}

/* Glassmorphism effects */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Enhanced hover effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Gradient borders */
.gradient-border {
    position: relative;
    background: white;
    border-radius: 12px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(135deg, #7c4ffd, #56e6c2);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Typography enhancements */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Interactive elements */
.interactive {
    cursor: pointer;
    user-select: none;
}

.interactive:active {
    transform: scale(0.98);
}

/* Success states */
.success-pulse {
    animation: successPulse 2s infinite;
}

@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}