/* Bottom SVG Elements for BitBank */
.bottom-svg-container {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    margin-top: 2rem;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Geometric shapes floating around */
.geometric-shape {
    position: absolute;
    opacity: 0.3;
    animation: float 8s ease-in-out infinite;
}

.shape-circle {
    width: 60px;
    height: 60px;
    border: 2px solid #1976d2;
    border-radius: 50%;
    left: 10%;
    bottom: 30%;
    animation-delay: 0s;
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #42a5f5;
    right: 15%;
    bottom: 40%;
    animation-delay: 2s;
}

.shape-diamond {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #1976d2;
    transform: rotate(45deg);
    left: 70%;
    bottom: 25%;
    animation-delay: 4s;
}

.shape-hexagon {
    width: 50px;
    height: 28.87px;
    background: #42a5f5;
    position: relative;
    left: 85%;
    bottom: 50%;
    opacity: 0.2;
    animation-delay: 6s;
}

.shape-hexagon:before,
.shape-hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.shape-hexagon:before {
    bottom: 100%;
    border-bottom: 14.43px solid #42a5f5;
}

.shape-hexagon:after {
    top: 100%;
    border-top: 14.43px solid #42a5f5;
}

/* Chart-like SVG lines */
.chart-lines {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.chart-line {
    stroke: #1976d2;
    stroke-width: 1.5;
    fill: none;
    opacity: 0.6;
    animation: dashMove 6s linear infinite;
}

/* Bitcoin/crypto symbols */
.crypto-symbols {
    position: absolute;
    width: 100%;
    height: 100%;
}

.crypto-symbol {
    position: absolute;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #1976d2;
    opacity: 0.2;
    animation: cryptoFloat 10s ease-in-out infinite;
}

.btc-symbol {
    font-size: 24px;
    left: 30%;
    bottom: 60%;
    animation-delay: 1s;
}

.eth-symbol {
    font-size: 20px;
    right: 25%;
    bottom: 35%;
    animation-delay: 3s;
}

.dollar-symbol {
    font-size: 32px;
    left: 50%;
    bottom: 45%;
    animation-delay: 5s;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    50% {
        transform: translateY(-20px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

@keyframes cryptoFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.2;
    }
    33% {
        transform: translateY(-15px) scale(1.1);
        opacity: 0.4;
    }
    66% {
        transform: translateY(-5px) scale(0.9);
        opacity: 0.3;
    }
}

@keyframes dashMove {
    0% {
        stroke-dasharray: 5 5;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 5 5;
        stroke-dashoffset: 20;
    }
}

/* Grid pattern overlay */
.grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: 
        linear-gradient(rgba(25, 118, 210, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 118, 210, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: gridShift 15s linear infinite;
}

@keyframes gridShift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}