/* ====================================================
   TaskSection Styles - Feature Section 5
   Organisé par section : Desktop → Mobile → Animations
   ==================================================== */

/* ====================================================
   BASE STYLES & LAYOUT
   ==================================================== */

#feature-section-5 .feature-section { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:2rem; 
    padding:6rem 2rem; 
    min-height:80vh; 
    position:relative; 
    z-index:1; 
}

#feature-section-5 .feature-section.reverse { 
    flex-direction: row-reverse; 
}

/* ====================================================
   TEXT CONTENT SECTION
   ==================================================== */

#feature-section-5 .feature-text-content { 
    flex:1.3; 
    max-width:700px; 
    color:#E5E7EB; 
}

#feature-section-5 .feature-text-content h2 { 
    font-size:2.5rem; 
    font-weight:bold; 
    margin-bottom:1.5rem; 
    background:linear-gradient(135deg,#a78bfa,#ec4899,#3b82f6); 
    -webkit-background-clip:text; 
    background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

#feature-section-5 .feature-text-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

#feature-section-5 .mobile-text { 
    display: none; 
}

/* ====================================================
   CARD CONTAINER & POSITIONING
   ==================================================== */

#feature-section-5 .feature-card-container { 
    flex:0.8; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    max-width:540px; 
    margin-left:12px; 
    position:relative; 
    z-index:1; 
    transform: translateX(80px); 
    --card-radius:2.5rem; 
    --ring-width:3px; 
    --outer-glow-blur:20px; 
    --outer-glow-spread:3px; 
    --inner-glow-size:12px; 
    --inner-glow-blur:18px; 
    --inner-glow-feather:12px; 
    --ring-angle:220deg; 
    --ring-stops: rgba(255,122,0,1) 0deg, rgba(255,45,85,1) 50deg, rgba(255,0,153,1) 100deg, rgba(191,90,242,1) 150deg, rgba(94,92,230,1) 200deg, rgba(10,132,255,1) 250deg, rgba(100,210,255,1) 300deg, rgba(255,122,0,1) 360deg; 
    --ring-gradient: conic-gradient(from var(--ring-angle), var(--ring-stops)); 
}

/* Outer glow effect */
#feature-section-5 .feature-card-container::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    border-radius:var(--card-radius); 
    z-index:0; 
    pointer-events:none; 
    background:var(--ring-gradient); 
    padding: calc(var(--ring-width) + var(--outer-glow-spread)); 
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
    -webkit-mask-composite:xor; 
    mask-composite:exclude; 
    filter: blur(var(--outer-glow-blur)) saturate(140%) brightness(135%); 
    opacity:.78; 
    transition: opacity 400ms ease, filter 400ms ease; 
}

#feature-section-5 .feature-card-container:hover::before { 
    opacity:.90; 
    filter: blur(calc(var(--outer-glow-blur) + 2px)) saturate(155%) brightness(145%); 
}

/* ====================================================
   LIQUID GLASS CARD
   ==================================================== */

#feature-section-5 .liquid-glass-card, #feature-section-5 .lg-card { 
    position:relative; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
    text-align:center; 
    width:100%; 
    height:650px; 
    padding:2.5rem; 
    overflow:hidden; 
    z-index:2; 
    border-radius:var(--card-radius); 
    border:2px solid rgba(255,255,255,0.12); 
    box-shadow:0 4px 12px rgba(0,0,0,0.02), inset 0 1px 2px rgba(100,180,255,0.04), inset 0 -1px 2px rgba(0,0,0,0.01); 
    will-change:border-color; 
    color:#fff; 
    transform:none; 
    transform-style:preserve-3d; 
    perspective:1200px; 
    isolation:isolate; 
    transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 700ms cubic-bezier(0.2,0.8,0.2,1), border-color 700ms ease; 
}

/* Glass effect background */
#feature-section-5 .liquid-glass-card::before, #feature-section-5 .lg-card::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    border-radius:inherit; 
    pointer-events:none; 
    z-index:0; 
    background: radial-gradient(ellipse at center, rgba(100,180,255,0) 0%, rgba(255,255,255,0) 70%), linear-gradient(135deg, rgba(100,180,255,0.002) 0%, rgba(255,255,255,0.0003) 50%, rgba(100,180,255,0.002) 100%); 
    backdrop-filter: blur(6px) saturate(110%) contrast(102%); 
    -webkit-backdrop-filter: blur(6px) saturate(110%) contrast(102%); 
}

/* Hover effect overlay */
#feature-section-5 .liquid-glass-card::after, #feature-section-5 .lg-card::after { 
    content:''; 
    position:absolute; 
    inset:0; 
    border-radius:inherit; 
    pointer-events:none; 
    z-index:1; 
    opacity:0; 
    transform:translate3d(0,0,0); 
    background: radial-gradient(120% 120% at 50% 50%, rgba(191,90,242,0) 0%, rgba(191,90,242,0.24) 18%, rgba(94,92,230,0.18) 42%, rgba(255,255,255,0) 70%), radial-gradient(80% 60% at 18% 22%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 60%), radial-gradient(80% 60% at 82% 78%, rgba(10,132,255,0.20) 0%, rgba(10,132,255,0) 60%), linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 60%); 
    will-change:opacity,transform; 
    transition: opacity 600ms ease, transform 600ms ease; 
}

/* ====================================================
   CARD EFFECTS & DECORATIONS
   ==================================================== */

/* Ring border effect - SUPPRIMÉ */
#feature-section-5 .lg-card__ring { 
    display: none;
}

#feature-section-5 .lg-card:hover .lg-card__ring, #feature-section-5 .lg-card:focus-within .lg-card__ring { 
    opacity:1; 
    filter:saturate(140%) brightness(122%); 
}

/* Inner band glow - SUPPRIMÉ */
#feature-section-5 .lg-card__innerband { 
    display: none;
}

/* Inner feather effect */
#feature-section-5 .lg-card__innerfeather { 
    content:''; 
    position:absolute; 
    inset:0; 
    border-radius:inherit; 
    pointer-events:none; 
    z-index:0; 
    background:var(--ring-gradient); 
    background-blend-mode:screen; 
    -webkit-mask: linear-gradient(#000,transparent) top/100% var(--inner-glow-feather) no-repeat, linear-gradient(transparent,#000) bottom/100% var(--inner-glow-feather) no-repeat, linear-gradient(90deg,#000,transparent) left/var(--inner-glow-feather) 100% no-repeat, linear-gradient(90deg,transparent,#000) right/var(--inner-glow-feather) 100% no-repeat; 
    mask: linear-gradient(#000,transparent) top/100% var(--inner-glow-feather) no-repeat, linear-gradient(transparent,#000) bottom/100% var(--inner-glow-feather) no-repeat, linear-gradient(90deg,#000,transparent) left/var(--inner-glow-feather) 100% no-repeat, linear-gradient(90deg,transparent,#000) right/var(--inner-glow-feather) 100% no-repeat; 
    filter: blur(calc(var(--inner-glow-blur) * 0.65)) saturate(126%); 
    opacity:.38; 
}

/* ====================================================
   CARD CONTENT
   ==================================================== */

#feature-section-5 .liquid-glass-card > *, #feature-section-5 .lg-card > * { 
    position:relative; 
    z-index:2; 
}

#feature-section-5 .card-motion { 
    position:relative; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:flex-start; 
    text-align:inherit; 
    width:100%; 
    height:100%; 
    transform-style:preserve-3d; 
    will-change:transform; 
    transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1); 
}

#feature-section-5 .card-motion.animate-on-scroll { 
    transition: all var(--animation-duration,600ms) var(--animation-easing-elegant,cubic-bezier(0.25,0.46,0.45,0.94)); 
}

#feature-section-5 .card-icon { 
    font-size:3rem; 
    margin-bottom:1.5rem; 
}

#feature-section-5 .card-title { 
    font-size:2.9rem; 
    font-weight:bold; 
    margin-bottom:1rem; 
    background:linear-gradient(135deg,#c084fc,#ec4899,#60a5fa); 
    -webkit-background-clip:text; 
    background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

#feature-section-5 .card-title .accent-etr {
    display: inline-block;
    font-size: 1.18em;
    font-weight: 800;
}

#feature-section-5 .feature-text-content h2 .accent-etr {
    display: inline-block;
    font-size: 1.18em;
    font-weight: 800;
}

#feature-section-5 .card-subtitle { 
    font-size:1rem; 
    color:#D1D5DB; 
}

#feature-section-5 .card-visual { 
    margin-top:1rem; 
}

/* ====================================================
   CHIPS & BADGES
   ==================================================== */

#feature-section-5 .chip-row, #feature-section-5 .badge-row { 
    display:flex; 
    flex-wrap:wrap; 
    gap:.5rem; 
    justify-content:center; 
    margin-top:1rem; 
}

#feature-section-5 .glass-chip { 
    --bg:rgba(255,255,255,0.06); 
    --bd:rgba(255,255,255,0.18); 
    padding:.4rem .7rem; 
    font-size:.85rem; 
    line-height:1; 
    border-radius:999px; 
    border:1px solid var(--bd); 
    background:linear-gradient(135deg, rgba(255,255,255,0.10), var(--bg)); 
    color:rgba(255,255,255,0.92); 
    backdrop-filter: blur(10px) saturate(120%); 
    -webkit-backdrop-filter: blur(10px) saturate(120%); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 6px rgba(0,0,0,0.20); 
    transition: transform 350ms ease, box-shadow 350ms ease, background 350ms ease; 
}

#feature-section-5 .glass-chip:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 18px rgba(99,102,241,0.25), inset 0 1px 0 rgba(255,255,255,0.12); 
    background: linear-gradient(135deg, rgba(138,43,226,0.18), rgba(99,102,241,0.10)); 
}

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

#feature-section-5 .visual-equalizer { 
    display:inline-flex; 
    align-items:flex-end; 
    gap:6px; 
    height:28px; 
}

#feature-section-5 .visual-equalizer .bar { 
    width:4px; 
    border-radius:2px; 
    background:linear-gradient(180deg, #a78bfa, #60a5fa); 
    animation: eq-bounce 1.1s ease-in-out infinite alternate; 
    opacity:.9; 
}

#feature-section-5 .visual-equalizer .bar:nth-child(2){animation-duration:1.0s;} 
#feature-section-5 .visual-equalizer .bar:nth-child(3){animation-duration:1.25s;} 
#feature-section-5 .visual-equalizer .bar:nth-child(4){animation-duration:0.95s;} 
#feature-section-5 .visual-equalizer .bar:nth-child(5){animation-duration:1.3s;} 
#feature-section-5 .visual-equalizer .bar:nth-child(6){animation-duration:1.1s;} 
#feature-section-5 .visual-equalizer .bar:nth-child(7){animation-duration:1.35s;}

#feature-section-5 .visual-chart { 
    display:grid; 
    grid-template-columns:repeat(6,1fr); 
    align-items:end; 
    gap:8px; 
    height:70px; 
    width:100%; 
    max-width:360px; 
}

#feature-section-5 .visual-chart .col { 
    height:100%; 
    transform-origin:bottom; 
    background:linear-gradient(180deg, rgba(99,102,241,0.85), rgba(99,102,241,0.35)); 
    border-radius:6px; 
    opacity:.95; 
    animation: col-rise 1.4s var(--animation-easing-elegant, cubic-bezier(0.25,0.46,0.45,0.94)) forwards; 
}

#feature-section-5 .visual-chart .col:nth-child(1){transform:scaleY(0.35);} 
#feature-section-5 .visual-chart .col:nth-child(2){transform:scaleY(0.55);} 
#feature-section-5 .visual-chart .col:nth-child(3){transform:scaleY(0.42);} 
#feature-section-5 .visual-chart .col:nth-child(4){transform:scaleY(0.78);} 
#feature-section-5 .visual-chart .col:nth-child(5){transform:scaleY(0.62);} 
#feature-section-5 .visual-chart .col:nth-child(6){transform:scaleY(0.90);}

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

#feature-section-5 .feature-card-container.animate-on-scroll, 
#feature-section-5 .liquid-glass-card.animate-on-scroll, 
#feature-section-5 .feature-card-container .liquid-glass-card.animate-on-scroll, 
#feature-section-5 .lg-card.animate-on-scroll, 
#feature-section-5 .feature-card-container .lg-card.animate-on-scroll { 
    opacity:1 !important; 
    transition: transform var(--animation-duration,600ms) var(--animation-easing-elegant,cubic-bezier(0.25,0.46,0.45,0.94)) !important; 
}

#feature-section-5 .feature-card-container.animate-on-scroll.fade-left{transform:translateX(40px);} 
#feature-section-5 .feature-card-container.animate-on-scroll.fade-right{transform:translateX(-40px);} 
#feature-section-5 .feature-card-container.animate-on-scroll.fade-up{transform:translateY(40px);} 
#feature-section-5 .feature-card-container.animate-on-scroll.fade-down{transform:translateY(-40px);}

#feature-section-5 .feature-card-container.animate-on-scroll.is-visible, 
#feature-section-5 .liquid-glass-card.animate-on-scroll.is-visible, 
#feature-section-5 .lg-card.animate-on-scroll.is-visible { 
    transform:none !important; 
}

/* ====================================================
   KEYFRAME ANIMATIONS
   ==================================================== */

#feature-section-5 .lg-card.pulsating-illumination { 
    animation: card-border-flash 1.5s ease; 
}

#feature-section-5 .lg-card.pulsating-illumination::after { 
    animation: card-refraction-flash 1.5s ease, card-refraction-shift 1.5s ease; 
}

@keyframes card-border-flash { 
    0%,100%{border-color:rgba(255,255,255,0.12);} 
    40%{border-color:rgba(191,90,242,0.95);} 
}

@keyframes card-refraction-flash { 
    0%,100%{opacity:0;} 
    45%{opacity:0.30;} 
}

@keyframes card-refraction-shift { 
    0%,100%{transform:translate3d(0,0,0);} 
    42%{transform:translate3d(6px,6px,0);} 
}

@keyframes eq-bounce { 
    0%{height:6px;filter:brightness(0.9);} 
    50%{height:20px;filter:brightness(1.1);} 
    100%{height:12px;filter:brightness(1.0);} 
}

@keyframes col-rise { 
    from{transform:scaleY(0.1);} 
    to{transform:scaleY(1);} 
}

/* ====================================================
   BROWSER COMPATIBILITY
   ==================================================== */

@supports not (mask-composite: exclude) { 
    #feature-section-5 .liquid-glass-card, #feature-section-5 .lg-card { 
        border:var(--ring-width) solid transparent; 
        border-image: var(--ring-gradient) 1; 
        border-radius: var(--card-radius); 
    } 
    #feature-section-5 .liquid-glass-card .liquid-glass-outline, 
    #feature-section-5 .lg-card .lg-card__ring { 
        display:none; 
    } 
}

/* ====================================================
   ACCESSIBILITY - REDUCED MOTION
   ==================================================== */

@media (prefers-reduced-motion: reduce) { 
    #feature-section-5 .liquid-glass-card, #feature-section-5 .lg-card { 
        transition:none; 
        transform:none; 
    } 
    #feature-section-5 .liquid-glass-card:hover, 
    #feature-section-5 .liquid-glass-card:focus-within { 
        transform:none; 
    } 
    #feature-section-5 .visual-equalizer .bar, 
    #feature-section-5 .visual-chart .col { 
        animation:none !important; 
    } 
}

/* ====================================================
   RESPONSIVE DESIGN - MOBILE STYLES
   ==================================================== */

@media (max-width:768px) { 
    /* Layout Changes */
    #feature-section-5 .feature-section, 
    #feature-section-5 .feature-section.reverse { 
        flex-direction:column; 
        text-align:center; 
        gap: 0.5rem; 
        padding: 0.1rem 1rem; 
        margin-bottom: -3rem; 
        min-height:unset; 
    }
    
    /* Text Content Mobile */
    #feature-section-5 .feature-text-content { 
        order: 2; 
        width: 100%; 
        max-width: none; 
    }
    
    #feature-section-5 .feature-text-content h2 { 
        display:none; 
    }
    
    /* Hide desktop elements */
    #feature-section-5 .chip-row { 
        display:none; 
    }
    
    #feature-section-5 .desktop-text { 
        display:none; 
    }
    
    /* Show mobile text */
    #feature-section-5 .mobile-text { 
        display:block !important; 
        font-size: 1rem !important; 
        line-height: 1.5 !important; 
        color: #D1D5DB; 
        text-align: center; 
        margin-top: 2rem; 
        margin-bottom: 6rem; 
        position: relative; 
    }
    
    #feature-section-5 .mobile-text::before { 
        content: ''; 
        position: absolute; 
        top: -1rem; 
        left: 50%; 
        transform: translateX(-50%); 
        width: 96px; 
        height: 2px; 
        background: linear-gradient(90deg, transparent, rgba(191,90,242,0.6), rgba(94,92,230,0.6), transparent); 
        border-radius: 1px; 
    }
    
    /* Card Container Mobile */
    #feature-section-5 .feature-card-container { 
        order: 1; 
        justify-content: center; 
        align-items: center; 
        margin: 0 auto; 
        max-width: 420px; 
        width: 100%; 
        transform: none; 
        margin-left: 0; 
        --inner-glow-size:10px; 
        --inner-glow-blur:16px; 
        --inner-glow-feather:10px; 
        --outer-glow-blur:18px; 
        --card-radius: 2rem; 
        --ring-width: 3px; 
        --outer-glow-spread: 3px; 
    }
    
    #feature-section-5 .feature-card-container::before { 
        content: ''; 
        position: absolute; 
        inset: 0; 
        border-radius: var(--card-radius); 
        z-index: 0; 
        pointer-events: none; 
        background: var(--ring-gradient); 
        padding: calc(var(--ring-width) + var(--outer-glow-spread)); 
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
        -webkit-mask-composite: xor; 
        mask-composite: exclude; 
        filter: blur(var(--outer-glow-blur)) saturate(140%) brightness(135%); 
        opacity: .78; 
        transition: opacity 400ms ease, filter 400ms ease; 
        width: 100%; 
        height: 100%; 
    }
    
    /* Card Mobile Adjustments - Dark background with subtle violet effects */
    #feature-section-5 .liquid-glass-card, 
    #feature-section-5 .lg-card { 
        height: auto; 
        min-height: 320px; 
        padding: 2rem 1.5rem; 
        margin: 0; 
        width: 100%; 
        background: 
          radial-gradient(ellipse at center, hsla(250, 90%, 50%, 0.12) 0%, hsla(280, 85%, 45%, 0.08) 40%, rgb(9, 5, 24) 70%),
          rgb(9, 5, 24) !important;
        box-shadow: 
          inset 0 0 30px hsla(220, 95%, 55%, 0.10),
          inset 0 0 60px hsla(250, 90%, 50%, 0.05) !important;
        will-change: auto; 
        contain: layout style paint; 
    }
    
    /* Remove all glassmorphism effects on mobile */
    #feature-section-5 .lg-card::before {
        display: none !important;
    }
    
    /* Remove colored rings and inner glow on mobile */
    #feature-section-5 .lg-card__ring,
    #feature-section-5 .lg-card__innerband,
    #feature-section-5 .lg-card__innerfeather {
        display: none !important;
    }
    
    /* Remove outer glow container on mobile */
    #feature-section-5 .feature-card-container::before {
        display: none !important;
    }
    
    /* Disable animations on mobile */
    #feature-section-5 .lg-card.pulsating-illumination { 
        animation: none; 
    }
    
    #feature-section-5 .lg-card.pulsating-illumination::after { 
        animation: none; 
        opacity: 0; 
    }
    
    #feature-section-5 .card-motion { 
        will-change: auto; 
    }
    
    /* Mobile Typography */
    #feature-section-5 .card-title { 
        font-size: 1.75rem; 
    }
    
    #feature-section-5 .glass-chip { 
        font-size: .8rem; 
        will-change: auto; 
    }
}