/* ==========================================================================
   BellyFed - Features Showcase Section
   Linear.app-Inspired with Neon Accents
   ========================================================================== */

/* Section Layout
   ========================================================================== */

.features-section {
    position: relative;
    background: var(--color-bg);
    overflow: hidden;
}

/* Background gradient glow */
.features-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    height: 600px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0, 255, 229, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
    filter: blur(80px);
    pointer-events: none;
}

.features-content {
    position: relative;
    max-width: var(--max-width-xl);
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* 4-Column Grid for Capabilities */
.features-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
    .features-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .features-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Feature Card
   ========================================================================== */

.feature-card {
    padding: var(--space-8);
    text-align: center;
    transition:
        transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(0, 255, 229, 0.1);
    border-color: rgba(0, 255, 229, 0.2);
}

.feature-visual {
    position: relative;
    height: 180px;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.feature-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* Feature 1: AI Recommendations Visual
   ========================================================================== */

.feature-icon-container {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-accent);
    border-radius: var(--radius-lg);
    color: #000;
    z-index: 2;
    box-shadow: 0 0 30px rgba(0, 255, 229, 0.3);
    transition: box-shadow var(--duration-normal) var(--ease-out);
}

.feature-card:hover .feature-icon-container {
    box-shadow: 0 0 40px rgba(0, 255, 229, 0.5);
}

/* Icon Container Variants */
.feature-icon-container--automation {
    background: linear-gradient(135deg, var(--neon-purple) 0%, #7C3AED 100%);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.feature-card:hover .feature-icon-container--automation {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
}

.feature-icon-container--apps {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

.feature-card:hover .feature-icon-container--apps {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
}

.feature-icon-container--rapid {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.feature-card:hover .feature-icon-container--rapid {
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.5);
}

.feature-suggestions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.suggestion-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 255, 229, 0.05);
    border: 1px solid rgba(0, 255, 229, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    animation: suggestionAppear 0.5s var(--ease-out) forwards;
    backdrop-filter: blur(8px);
}

.suggestion-bubble--1 {
    top: 10%;
    right: 5%;
    animation-delay: 0.3s;
}

.suggestion-bubble--2 {
    top: 40%;
    left: 0;
    animation-delay: 0.6s;
}

.suggestion-bubble--3 {
    bottom: 10%;
    right: 10%;
    animation-delay: 0.9s;
}

.suggestion-icon {
    font-size: var(--text-sm);
}

@keyframes suggestionAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover state - bubbles float */
.feature-card:hover .suggestion-bubble--1 {
    animation: floatBubble1 2s ease-in-out infinite;
}

.feature-card:hover .suggestion-bubble--2 {
    animation: floatBubble2 2.5s ease-in-out infinite;
}

.feature-card:hover .suggestion-bubble--3 {
    animation: floatBubble3 2.2s ease-in-out infinite;
}

@keyframes floatBubble1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-5px, -8px); }
}

@keyframes floatBubble2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -5px); }
}

@keyframes floatBubble3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-3px, -10px); }
}

/* Feature 2: Social Network Visual
   ========================================================================== */

.feature-network {
    position: relative;
    width: 200px;
    height: 200px;
}

.network-node {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--gradient-accent);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 255, 229, 0.5);
}

.network-node--center {
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.network-node--1 {
    top: 25%;
    left: 20%;
    animation: nodeFloat 3s ease-in-out infinite;
}

.network-node--2 {
    top: 25%;
    right: 20%;
    animation: nodeFloat 3s ease-in-out infinite 0.5s;
}

.network-node--3 {
    bottom: 25%;
    left: 20%;
    animation: nodeFloat 3s ease-in-out infinite 1s;
}

.network-node--4 {
    bottom: 25%;
    right: 20%;
    animation: nodeFloat 3s ease-in-out infinite 1.5s;
}

@keyframes nodeFloat {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

.network-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.network-line {
    stroke: var(--neon-cyan, #00FFE5);
    stroke-width: 1;
    opacity: 0.4;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: lineConnect 2s ease-out forwards;
}

.network-line--1 { animation-delay: 0.2s; }
.network-line--2 { animation-delay: 0.4s; }
.network-line--3 { animation-delay: 0.6s; }
.network-line--4 { animation-delay: 0.8s; }

@keyframes lineConnect {
    to {
        stroke-dashoffset: 0;
    }
}

/* Hover pulse effect */
.feature-card:hover .network-node {
    animation: nodePulse 1.5s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 255, 229, 0.5);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 30px rgba(0, 255, 229, 0.8);
    }
}

.feature-card:hover .network-node--center {
    animation: nodePulse 1.5s ease-in-out infinite;
    transform: translate(-50%, -50%) scale(1);
}

/* Feature 3: Rewards Visual
   ========================================================================== */

.feature-rewards {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    z-index: 2;
}

.reward-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    animation: badgeAppear 0.6s var(--ease-out) forwards;
}

.reward-badge--gold {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    animation-delay: 0.2s;
}

.reward-badge--silver {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);
    color: #000;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
    animation-delay: 0.4s;
}

.reward-badge--bronze {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
    color: #000;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
    animation-delay: 0.6s;
}

@keyframes badgeAppear {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Celebration Particles */
.celebration-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}

.feature-card:hover .celebration-particles {
    opacity: 1;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-cyan, #00FFE5);
}

.particle--1 {
    top: 20%;
    left: 30%;
    animation: particleFloat 2s ease-in-out infinite;
}

.particle--2 {
    top: 30%;
    right: 25%;
    background: #FFD700;
    animation: particleFloat 2.3s ease-in-out infinite 0.3s;
}

.particle--3 {
    bottom: 30%;
    left: 25%;
    background: var(--neon-purple, #A855F7);
    animation: particleFloat 1.8s ease-in-out infinite 0.6s;
}

.particle--4 {
    bottom: 25%;
    right: 30%;
    background: var(--neon-cyan, #00FFE5);
    animation: particleFloat 2.5s ease-in-out infinite 0.9s;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }
}

/* Hover glow on badges */
.feature-card:hover .reward-badge--gold {
    animation: badgeGlow 1.5s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
    }
}

/* Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .suggestion-bubble,
    .network-node,
    .network-line,
    .reward-badge,
    .particle {
        animation: none !important;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }

    .network-node--center {
        transform: translate(-50%, -50%);
    }

    .feature-card:hover .suggestion-bubble,
    .feature-card:hover .network-node,
    .feature-card:hover .reward-badge,
    .feature-card:hover .celebration-particles {
        animation: none !important;
    }

    .feature-card:hover {
        transform: none;
    }
}