/**

 * Benefits Cards Redesign - Custom CSS

 * Modern glassmorphism effects for "Tudo que você precisa" section

 */



/* ============================================

   BASE CARD STYLING - Glassmorphism

   ============================================ */



.benefit-card {

    position: relative;

    overflow: hidden;

    background: rgba(17, 24, 39, 0.6);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 

        0 8px 32px 0 rgba(0, 0, 0, 0.4),

        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Fallback for browsers without backdrop-filter support */

@supports not (backdrop-filter: blur(12px)) {

    .benefit-card {

        background: rgba(17, 24, 39, 0.95);

    }

}



/* ============================================

   ANIMATED GRADIENT BORDER

   ============================================ */



.benefit-card::before {

    content: '';

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    padding: 2px;

    background: linear-gradient(

        135deg,

        transparent 0%,

        rgba(16, 185, 129, 0.3) 50%,

        transparent 100%

    );

    -webkit-mask: 

        linear-gradient(#fff 0 0) content-box, 

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: 

        linear-gradient(#fff 0 0) content-box, 

        linear-gradient(#fff 0 0);

    mask-composite: exclude;

    opacity: 0;

    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

}



.benefit-card:hover::before,

.benefit-card:focus-within::before {

    opacity: 1;

    animation: borderShimmer 3s linear infinite;

}



@keyframes borderShimmer {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}



/* ============================================

   HOVER GLOW EFFECTS

   ============================================ */



.benefit-card::after {

    content: '';

    position: absolute;

    inset: -30px;

    background: radial-gradient(

        circle at center,

        rgba(16, 185, 129, 0.12) 0%,

        transparent 70%

    );

    opacity: 0;

    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    pointer-events: none;

    z-index: -1;

}



.benefit-card:hover::after,

.benefit-card:focus-within::after {

    opacity: 1;

}



/* ============================================

   HOVER STATE EFFECTS

   ============================================ */



.benefit-card:hover,

.benefit-card:focus-within {

    transform: translateY(-4px) scale(1.01);

    border-color: rgba(16, 185, 129, 0.3);

    box-shadow: 

        0 20px 40px 0 rgba(0, 0, 0, 0.5),

        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),

        0 0 0 1px rgba(16, 185, 129, 0.2);

}



/* ============================================

   ICON CONTAINER EFFECTS

   ============================================ */



.benefit-icon {

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

}



.benefit-icon::before {

    content: '';

    position: absolute;

    inset: -4px;

    background: inherit;

    border-radius: inherit;

    filter: blur(12px);

    opacity: 0;

    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: -1;

}



.benefit-card:hover .benefit-icon,

.benefit-card:focus-within .benefit-icon {

    transform: scale(1.1) rotate(-5deg);

}



.benefit-card:hover .benefit-icon::before,

.benefit-card:focus-within .benefit-icon::before {

    opacity: 0.6;

}



/* ============================================

   CATEGORY-SPECIFIC COLORS

   ============================================ */



/* WhatsApp - Green */

.benefit-card.card-whatsapp:hover::after,

.benefit-card.card-whatsapp:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(37, 211, 102, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-whatsapp:hover,

.benefit-card.card-whatsapp:focus-within {

    border-color: rgba(37, 211, 102, 0.4);

}



/* Email - Blue */

.benefit-card.card-email:hover::after,

.benefit-card.card-email:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(59, 130, 246, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-email:hover,

.benefit-card.card-email:focus-within {

    border-color: rgba(59, 130, 246, 0.4);

}



/* Telegram - Cyan */

.benefit-card.card-telegram:hover::after,

.benefit-card.card-telegram:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(6, 182, 212, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-telegram:hover,

.benefit-card.card-telegram:focus-within {

    border-color: rgba(6, 182, 212, 0.4);

}



/* Automation - Primary Green */

.benefit-card.card-automation:hover::after,

.benefit-card.card-automation:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(16, 185, 129, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-automation:hover,

.benefit-card.card-automation:focus-within {

    border-color: rgba(16, 185, 129, 0.4);

}



/* Analytics - Amber */

.benefit-card.card-analytics:hover::after,

.benefit-card.card-analytics:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(245, 158, 11, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-analytics:hover,

.benefit-card.card-analytics:focus-within {

    border-color: rgba(245, 158, 11, 0.4);

}



/* Disparo - Orange */

.benefit-card.card-disparo:hover::after,

.benefit-card.card-disparo:focus-within::after {

    background: radial-gradient(

        circle at center,

        rgba(249, 115, 22, 0.15) 0%,

        transparent 70%

    );

}



.benefit-card.card-disparo:hover,

.benefit-card.card-disparo:focus-within {

    border-color: rgba(249, 115, 22, 0.4);

}



/* ============================================

   TEXT EFFECTS

   ============================================ */



.benefit-card h3 {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover h3,

.benefit-card:focus-within h3 {

    color: rgba(255, 255, 255, 1);

    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);

}



.benefit-card p {

    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover p,

.benefit-card:focus-within p {

    color: rgba(229, 231, 235, 1); /* gray-200 */

}



/* ============================================

   BADGE EFFECTS

   ============================================ */



.benefit-badge {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover .benefit-badge,

.benefit-card:focus-within .benefit-badge {

    transform: scale(1.05);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



/* ============================================

   FEATURE LIST EFFECTS

   ============================================ */



.benefit-feature {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover .benefit-feature,

.benefit-card:focus-within .benefit-feature {

    transform: translateX(4px);

}



.benefit-feature-icon {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover .benefit-feature-icon,

.benefit-card:focus-within .benefit-feature-icon {

    transform: scale(1.1);

    box-shadow: 0 0 12px currentColor;

}



/* ============================================

   TAG EFFECTS

   ============================================ */



.benefit-tag {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.benefit-card:hover .benefit-tag,

.benefit-card:focus-within .benefit-tag {

    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-2px);

}



/* ============================================

   ACCESSIBILITY - FOCUS STATES

   ============================================ */



.benefit-card:focus {

    outline: none;

}



.benefit-card:focus-visible {

    outline: 3px solid #10B981;

    outline-offset: 4px;

    box-shadow: 

        0 20px 40px 0 rgba(0, 0, 0, 0.5),

        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),

        0 0 0 4px rgba(16, 185, 129, 0.3);

}



/* ============================================

   REDUCED MOTION SUPPORT

   ============================================ */



@media (prefers-reduced-motion: reduce) {

    .benefit-card,

    .benefit-card::before,

    .benefit-card::after,

    .benefit-icon,

    .benefit-icon::before,

    .benefit-card h3,

    .benefit-card p,

    .benefit-badge,

    .benefit-feature,

    .benefit-feature-icon,

    .benefit-tag {

        animation: none !important;

        transition: none !important;

    }

    

    /* Keep instant state changes for accessibility */

    .benefit-card:hover,

    .benefit-card:focus-within {

        border-color: #10B981;

        transform: none;

    }

}



/* ============================================

   CLICK FEEDBACK ANIMATION

   ============================================ */



.benefit-card:active {

    transform: translateY(-2px) scale(0.99);

    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);

}



@media (prefers-reduced-motion: reduce) {

    .benefit-card:active {

        transform: none;

    }

}



/* ============================================

   BACKGROUND PATTERN ANIMATION

   ============================================ */



.benefits-bg-pattern {

    animation: patternShift 20s linear infinite;

}



@keyframes patternShift {

    0% {

        transform: translate(0, 0);

    }

    100% {

        transform: translate(50px, 50px);

    }

}



@media (prefers-reduced-motion: reduce) {

    .benefits-bg-pattern {

        animation: none !important;

    }

}