/**
 * ZibllDev v2 - Static Background
 * Geometric Shapes (No Animation)
 * Author: Nguyễn Hoàng Nhật
 */

/* === BACKGROUND CONTAINER === */
.bg-animated {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    overflow: hidden;
    z-index: -1;
}

/* === GEOMETRIC SHAPES === */
.geo-shape {
    position: absolute;
    pointer-events: none;
}

/* Triangle */
.geo-triangle {
    width: 0;
    height: 0;
    border-style: solid;
}

.geo-triangle.small {
    border-width: 0 8px 14px 8px;
}

.geo-triangle.medium {
    border-width: 0 12px 20px 12px;
}

.geo-triangle.large {
    border-width: 0 16px 28px 16px;
}

.geo-triangle.outline {
    background: transparent;
    border: 2px solid currentColor;
    border-bottom: none;
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Square */
.geo-square {
    border: 2px solid currentColor;
    transform: rotate(45deg);
}

.geo-square.small { width: 12px; height: 12px; }
.geo-square.medium { width: 18px; height: 18px; }
.geo-square.large { width: 24px; height: 24px; }

.geo-square.filled {
    background: currentColor;
    border: none;
}

/* Circle */
.geo-circle {
    border-radius: 50%;
    border: 2px solid currentColor;
}

.geo-circle.small { width: 8px; height: 8px; }
.geo-circle.medium { width: 12px; height: 12px; }
.geo-circle.large { width: 16px; height: 16px; }

.geo-circle.filled {
    background: currentColor;
    border: none;
}

/* Cross (X) */
.geo-cross {
    position: relative;
    width: 16px;
    height: 16px;
}

.geo-cross::before,
.geo-cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.geo-cross::before { transform: translate(-50%, -50%) rotate(45deg); }
.geo-cross::after { transform: translate(-50%, -50%) rotate(-45deg); }

.geo-cross.small { width: 12px; height: 12px; }
.geo-cross.large { width: 20px; height: 20px; }

/* Diamond */
.geo-diamond {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    transform: rotate(45deg);
}

/* === COLOR VARIANTS === */
.color-green { color: #2ecc71; border-color: #2ecc71; }
.color-green .geo-triangle { border-color: transparent transparent #2ecc71 transparent; }

.color-yellow { color: #f1c40f; border-color: #f1c40f; }
.color-yellow .geo-triangle { border-color: transparent transparent #f1c40f transparent; }

.color-red { color: #e74c3c; border-color: #e74c3c; }
.color-red .geo-triangle { border-color: transparent transparent #e74c3c transparent; }

.color-blue { color: #3498db; border-color: #3498db; }
.color-blue .geo-triangle { border-color: transparent transparent #3498db transparent; }

.color-pink { color: #e85d75; border-color: #e85d75; }
.color-pink .geo-triangle { border-color: transparent transparent #e85d75 transparent; }

.color-cyan { color: #00d4aa; border-color: #00d4aa; }
.color-cyan .geo-triangle { border-color: transparent transparent #00d4aa transparent; }

.color-white { color: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.3); }

/* === PARTICLES OVERLAY === */
.particles-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.03) 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 200px 200px;
    pointer-events: none;
}

/* === GRADIENT OVERLAY === */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(232, 93, 117, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(52, 152, 219, 0.08) 0%, transparent 50%);
    pointer-events: none;
}