/* ============================================
   MISSION SECTION - ENTERPRISE EDITION
   Inti Wasi Global - E-commerce International

   Quick Wins Phase 1:
   - Triple shadow system for premium depth
   - GPU acceleration (translate3d, backface-visibility)
   - Glassmorphism backgrounds
   - Advanced gradients (135°, multiple stops)
   - Shine hover effects
   ============================================ */

/* ============================================
   MISSION SECTION CONTAINER
   ============================================ */

.mission-section {
    padding: var(--section-padding-vertical) 0; /* OPTIMIZED: Reduced from 5xl (128px) to 3xl (64px) */
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

/* ============================================
   MISSION GRID
   ============================================ */

.mission-grid {
    display: grid;
    /* FIX: Changed from auto-fit to 2 fixed columns for balanced 2x2 layout */
    /* With 4 cards, auto-fit created 3+1 distribution which was visually inconsistent */
    grid-template-columns: repeat(2, 1fr);

    /* OPTIMIZED: Reduced from spacing-2xl (48px) to spacing-xl (32px) for better proportion */
    gap: var(--spacing-xl);

    /* OPTIMIZED: Reduced from 1000px to 800px for optimal card dimensions
       - Cards now: 384px (within 280-400px industry standard)
       - Content: 320px (55-65 characters per line - optimal readability)
       - Icon ratio: 16.7% (within 15-20% optimal visual hierarchy) */
    max-width: 800px;
    margin: 0 auto; /* Center the grid */
}

/* ============================================
   MISSION CARDS - ENTERPRISE PREMIUM
   ============================================ */

.mission-card {
    position: relative;
    /* OPTIMIZED: Reduced from spacing-2xl (48px) to spacing-xl (32px)
       - Reduces excessive horizontal white space (was 20% of card, now 16%)
       - Increases content-to-card ratio for better visual density
       - Maintains premium feel with adequate breathing room */
    padding: var(--spacing-xl);

    /* ENTERPRISE: Glassmorphism background */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 244, 240, 0.9) 50%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border-radius: var(--radius-2xl);
    border: 1px solid rgba(217, 118, 66, 0.15);

    /* ENTERPRISE: Triple shadow system for depth + Premium Glow */
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(217, 118, 66, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 20px rgba(217, 118, 66, 0.15); /* Premium glow effect */

    /* ENTERPRISE: GPU acceleration */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    /* ENTERPRISE: Advanced cubic-bezier transitions */
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden; /* Contain shine effect */

    /* PREMIUM: Pulsating glow animation for brand premium feel */
    animation: premiumGlow 3s ease-in-out infinite;
}

/* PREMIUM: Crystal curtain effect on hover - simulates glass pane sweeping across */
.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start further left for smoother entrance */
    width: 150%; /* Wider curtain for more visible effect */
    height: 100%;

    /* Multi-layer gradient to simulate crystal/glass with reflections - INTENSIFIED */
    background: linear-gradient(
        110deg, /* Slight angle for more dynamic crystal effect */
        transparent 0%,
        transparent 20%,
        rgba(255, 255, 255, 0.2) 30%, /* Increased from 0.1 */
        rgba(255, 255, 255, 0.5) 40%, /* Increased from 0.3 */
        rgba(255, 255, 255, 0.85) 50%, /* Peak brightness - crystal center (increased from 0.6) */
        rgba(255, 255, 255, 0.5) 60%, /* Increased from 0.3 */
        rgba(255, 255, 255, 0.2) 70%, /* Increased from 0.1 */
        transparent 80%,
        transparent 100%
    );

    /* Slower, more elegant sweep */
    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    border-radius: var(--radius-2xl);
    pointer-events: none; /* Don't interfere with card interactions */

    /* Reduced blur for sharper, more visible crystal effect */
    filter: blur(0.5px);
}

.mission-card:hover::before {
    left: 100%; /* Sweep crystal curtain across card */
}

/* ENTERPRISE: Enhanced hover state */
.mission-card:hover {
    /* GPU-accelerated 3D transform */
    transform: translate3d(0, -12px, 0);

    /* ENTERPRISE: Triple shadow elevation on hover + Enhanced Glow */
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(217, 118, 66, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 0 40px rgba(217, 118, 66, 0.3); /* Enhanced glow on hover */

    /* Enhanced glassmorphism on hover */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 244, 240, 0.95) 50%,
        rgba(255, 255, 255, 0.9) 100%
    );

    border-color: rgba(217, 118, 66, 0.25);
}

/* ============================================
   MISSION ICON - ENTERPRISE
   ============================================ */

.mission-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* ENTERPRISE: Advanced gradient with multiple stops */
    background: linear-gradient(
        135deg,
        #d97642 0%,
        #e8915f 25%,
        #d97642 50%,
        #e8915f 75%,
        #d97642 100%
    );

    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-lg);
    position: relative;
    z-index: 2; /* Above shine effect */

    /* ENTERPRISE: Triple shadow on icon */
    box-shadow:
        0 4px 12px rgba(217, 118, 66, 0.3),
        0 2px 6px rgba(217, 118, 66, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    /* GPU acceleration */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;

    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-card:hover .mission-icon {
    /* Subtle lift on card hover */
    transform: translate3d(0, -4px, 0);

    box-shadow:
        0 8px 16px rgba(217, 118, 66, 0.4),
        0 4px 8px rgba(217, 118, 66, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.mission-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
    position: relative;
    z-index: 1;
}

/* ============================================
   MISSION TITLE
   ============================================ */

.mission-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2; /* Above shine effect */
    color: var(--color-gray-900);
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission-card:hover .mission-title {
    color: var(--color-primary);
}

/* ============================================
   MISSION TEXT
   ============================================ */

.mission-text {
    color: var(--color-gray-600);
    line-height: 1.7;
    position: relative;
    z-index: 2; /* Above shine effect */
}

/* ============================================
   PREMIUM GLOW ANIMATION
   ============================================ */

/* Subtle pulsating glow for premium brand feel */
@keyframes premiumGlow {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.06),
            0 2px 4px rgba(217, 118, 66, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 0 20px rgba(217, 118, 66, 0.15);
    }
    50% {
        box-shadow:
            0 4px 16px rgba(0, 0, 0, 0.06),
            0 2px 4px rgba(217, 118, 66, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 0 30px rgba(217, 118, 66, 0.25); /* Intensified glow at midpoint */
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet breakpoint - maintain 2 columns */
@media (max-width: 1024px) {
    .mission-grid {
        max-width: 100%; /* Use full width on tablets */
        gap: var(--spacing-xl);
    }
}

/* Mobile breakpoint - switch to 1 column */
@media (max-width: 768px) {
    .mission-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg); /* Reduced to 24px for better vertical space usage */
    }

    .mission-card {
        /* Maintain comfortable padding on mobile */
        padding: var(--spacing-xl);
    }

    .mission-card:hover {
        transform: translate3d(0, -8px, 0);
    }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .mission-card,
    .mission-card::before,
    .mission-icon {
        transition: none;
        animation: none; /* Disable glow animation */
    }

    .mission-card:hover {
        transform: translate3d(0, 0, 0);
    }

    .mission-card::before {
        display: none;
    }
}

/* Focus state for keyboard navigation */
.mission-card:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}