/* ============================================================================
   SIMANTAN - Value Proposition Icon Illustrations
   Modern CSS-only illustrations for Tentang SIMANTAN section
   ============================================================================ */

/* ============================================================================
   ILLUSTRATION CONTAINER
   ============================================================================ */
.value-illustration-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    padding: 2rem;
}

.illustration-icon-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   ICON CIRCLES - Base Styles
   ============================================================================ */
.icon-circle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-circle i {
    font-size: 3rem;
    color: #ffffff;
}

/* Main Central Icon - Largest */
.icon-circle:not(.icon-floating-1):not(.icon-floating-2) {
    width: 150px;
    height: 150px;
    z-index: 3;
}

.icon-circle:not(.icon-floating-1):not(.icon-floating-2) i {
    font-size: 4rem;
}

/* Floating Icons - Smaller */
.icon-floating-1,
.icon-floating-2 {
    width: 100px;
    height: 100px;
    z-index: 2;
}

.icon-floating-1 i,
.icon-floating-2 i {
    font-size: 2.5rem;
}

/* ============================================================================
   ICON CIRCLE COLOR VARIANTS
   ============================================================================ */
.icon-circle-primary {
    background: linear-gradient(135deg, #405189 0%, #5b73b8 100%);
}

.icon-circle-success {
    background: linear-gradient(135deg, #0ab39c 0%, #16a571 100%);
}

.icon-circle-info {
    background: linear-gradient(135deg, #299cdb 0%, #1c7fb8 100%);
}

.icon-circle-warning {
    background: linear-gradient(135deg, #f7b84b 0%, #f89a37 100%);
}

.icon-circle-danger {
    background: linear-gradient(135deg, #f06548 0%, #d84a2e 100%);
}

/* ============================================================================
   FLOATING POSITIONS
   ============================================================================ */
/* Floating Icon 1 - Top Right */
.icon-floating-1 {
    top: 20px;
    right: 30px;
    animation: floatAnimation1 4s ease-in-out infinite;
}

/* Floating Icon 2 - Bottom Left */
.icon-floating-2 {
    bottom: 20px;
    left: 30px;
    animation: floatAnimation2 5s ease-in-out infinite;
}

/* ============================================================================
   CONNECTING LINES (Decorative)
   ============================================================================ */
.connecting-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.connecting-lines::before,
.connecting-lines::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg,
        rgba(64, 81, 137, 0) 0%,
        rgba(64, 81, 137, 0.2) 50%,
        rgba(64, 81, 137, 0) 100%
    );
    border-radius: 2px;
}

/* Diagonal Line 1 */
.connecting-lines::before {
    top: 50px;
    right: 60px;
    width: 80px;
    height: 2px;
    transform: rotate(-45deg);
    opacity: 0.4;
}

/* Diagonal Line 2 */
.connecting-lines::after {
    bottom: 50px;
    left: 60px;
    width: 80px;
    height: 2px;
    transform: rotate(45deg);
    opacity: 0.4;
}

/* ============================================================================
   HOVER EFFECTS
   ============================================================================ */
.value-illustration-icon:hover .icon-circle {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.value-illustration-icon:hover .icon-circle:not(.icon-floating-1):not(.icon-floating-2) {
    transform: scale(1.1);
}

.value-illustration-icon:hover .icon-floating-1 {
    animation: floatAnimationHover1 2s ease-in-out infinite;
}

.value-illustration-icon:hover .icon-floating-2 {
    animation: floatAnimationHover2 2.5s ease-in-out infinite;
}

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

/* Float Animation 1 - Gentle Up-Down */
@keyframes floatAnimation1 {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(-15px) translateX(5px);
    }
    50% {
        transform: translateY(-10px) translateX(10px);
    }
    75% {
        transform: translateY(-15px) translateX(5px);
    }
}

/* Float Animation 2 - Gentle Up-Down (Different Timing) */
@keyframes floatAnimation2 {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    25% {
        transform: translateY(15px) translateX(-5px);
    }
    50% {
        transform: translateY(10px) translateX(-10px);
    }
    75% {
        transform: translateY(15px) translateX(-5px);
    }
}

/* Hover Float Animation 1 - Faster */
@keyframes floatAnimationHover1 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) translateX(10px) rotate(5deg);
    }
}

/* Hover Float Animation 2 - Faster */
@keyframes floatAnimationHover2 {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(20px) translateX(-10px) rotate(-5deg);
    }
}

/* Pulse Glow Animation for Central Icon */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(64, 81, 137, 0.3);
    }
    50% {
        box-shadow: 0 10px 60px rgba(64, 81, 137, 0.5);
    }
}

.value-illustration-icon:hover .icon-circle:not(.icon-floating-1):not(.icon-floating-2) {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ============================================================================
   BACKGROUND DECORATIVE ELEMENTS
   ============================================================================ */
.value-illustration-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(64, 81, 137, 0.05) 0%,
        rgba(64, 81, 137, 0.02) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Animated Background Gradient */
.value-illustration-icon::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(64, 81, 137, 0.1) 0deg,
        transparent 60deg,
        transparent 300deg,
        rgba(64, 81, 137, 0.1) 360deg
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: rotateGradient 15s linear infinite;
}

@keyframes rotateGradient {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
    .value-illustration-icon {
        min-height: 300px;
        padding: 1.5rem;
    }

    .illustration-icon-container {
        max-width: 350px;
        height: 300px;
    }

    .icon-circle:not(.icon-floating-1):not(.icon-floating-2) {
        width: 120px;
        height: 120px;
    }

    .icon-circle:not(.icon-floating-1):not(.icon-floating-2) i {
        font-size: 3rem;
    }

    .icon-floating-1,
    .icon-floating-2 {
        width: 80px;
        height: 80px;
    }

    .icon-floating-1 i,
    .icon-floating-2 i {
        font-size: 2rem;
    }

    /* Adjust floating positions */
    .icon-floating-1 {
        top: 15px;
        right: 20px;
    }

    .icon-floating-2 {
        bottom: 15px;
        left: 20px;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    .value-illustration-icon {
        min-height: 250px;
        padding: 1rem;
    }

    .illustration-icon-container {
        max-width: 280px;
        height: 250px;
    }

    .icon-circle:not(.icon-floating-1):not(.icon-floating-2) {
        width: 100px;
        height: 100px;
    }

    .icon-circle:not(.icon-floating-1):not(.icon-floating-2) i {
        font-size: 2.5rem;
    }

    .icon-floating-1,
    .icon-floating-2 {
        width: 70px;
        height: 70px;
    }

    .icon-floating-1 i,
    .icon-floating-2 i {
        font-size: 1.75rem;
    }

    /* Adjust floating positions for mobile */
    .icon-floating-1 {
        top: 10px;
        right: 15px;
    }

    .icon-floating-2 {
        bottom: 10px;
        left: 15px;
    }

    /* Reduce connecting line width */
    .connecting-lines::before,
    .connecting-lines::after {
        width: 60px;
    }

    /* Disable heavy animations on mobile for performance */
    .value-illustration-icon::after {
        animation: none;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .icon-floating-1,
    .icon-floating-2,
    .value-illustration-icon::after {
        animation: none !important;
    }

    .value-illustration-icon:hover .icon-circle {
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .icon-circle {
        border: 3px solid currentColor;
    }

    .connecting-lines::before,
    .connecting-lines::after {
        background: currentColor;
        opacity: 0.5;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
    .value-illustration-icon {
        min-height: 200px;
    }

    .icon-circle {
        box-shadow: none;
        border: 2px solid #333;
    }

    .connecting-lines::before,
    .connecting-lines::after,
    .value-illustration-icon::after {
        display: none;
    }
}