/**
 * Souvi Landing Page - Styles
 * Application de partage de photos et vidéos en albums partagés
 */

/* ========================================
   BASE STYLES
   ======================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
}

/* ========================================
   GRADIENT BACKGROUNDS
   ======================================== */

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #6B8DD6 50%, #8E37D7 75%, #667eea 100%);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.hero-gradient {
    background: linear-gradient(180deg,
            #7c3aed 0%,
            #6366f1 30%,
            #3b82f6 60%,
            #06b6d4 100%);
}

/* Features: commence où Hero finit (cyan) → indigo */
.section-gradient {
    background: linear-gradient(180deg,
            #06b6d4 0%,
            #0ea5e9 20%,
            #3b82f6 50%,
            #6366f1 80%,
            #7c3aed 100%);
}

/* How It Works: commence où Features finit (violet) → violet */
.howto-gradient {
    background: linear-gradient(180deg,
            #7c3aed 0%,
            #8b5cf6 50%,
            #7c3aed 100%);
}

/* Use Cases: commence où How It Works finit (violet) → violet foncé */
.usecases-gradient {
    background: linear-gradient(180deg,
            #7c3aed 0%,
            #6d28d9 50%,
            #5b21b6 100%);
}

/* CTA: commence où Use Cases finit → bleu nuit */
.cta-gradient {
    background: linear-gradient(180deg,
            #5b21b6 0%,
            #4c1d95 40%,
            #2e1065 70%,
            #1e1b4b 100%);
}

/* Footer background */
.footer-bg {
    background-color: #1e1b4b;
}

/* Supprimer les lignes entre sections sur mobile */
.section-gradient,
.howto-gradient,
.usecases-gradient,
.cta-gradient {
    margin-top: -1px;
    padding-top: calc(6rem + 1px);
}

/* ========================================
   GRADIENT TEXT
   ======================================== */

.gradient-text,
.gradient-text-cyan,
.gradient-text-purple {
    background: linear-gradient(90deg, #FACC15 0%, #4ADE80 25%, #22D3EE 50%, #4ADE80 75%, #FACC15 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}

/* ========================================
   GLASSMORPHISM
   ======================================== */

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

.glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation scrolled state */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Navigation when mobile menu is open */
.nav-mobile-open {
    background: rgba(124, 58, 237, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ========================================
   COMPONENTS
   ======================================== */

.phone-shadow {
    box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.2),
        0 15px 30px -15px rgba(0, 0, 0, 0.15);
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.feature-icon {
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ========================================
   BLOB ANIMATION
   ======================================== */

.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blob 8s ease-in-out infinite;
}

@keyframes blob {

    0%,
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

/* Animation delays */
.delay-100 {
    animation-delay: 0.1s;
    transition-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
    transition-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
    transition-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
    transition-delay: 0.6s;
}

.delay-700 {
    animation-delay: 0.7s;
    transition-delay: 0.7s;
}

.delay-800 {
    animation-delay: 0.8s;
    transition-delay: 0.8s;
}

.delay-neg-4s {
    animation-delay: -4s;
}

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

/* ========================================
   LANGUAGE SELECTOR
   ======================================== */

.lang-btn.active {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   STORE BUTTONS - SHINE ANIMATION
   ======================================== */

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

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

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

.store-btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.5),
        0 0 20px rgba(139, 92, 246, 0.2);
}

.store-btn-primary:hover {
    box-shadow: 0 15px 50px -10px rgba(139, 92, 246, 0.6),
        0 0 30px rgba(139, 92, 246, 0.3);
}

.store-btn-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.store-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}