/* ===========================
   PHASE 1: BLOCKCHAIN CANVAS
   Enhanced with better visibility
   =========================== */

/* Blockchain Network Canvas - positioned behind content */
.blockchain-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4; /* Increased from 0.6 for better visibility */
    pointer-events: none;
    z-index: 0;
}

/* Ensure hero section has proper positioning */
.hero-quantum {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Ensure hero-container stays on top */
.hero-quantum .hero-container {
    position: relative;
    z-index: 2;
}

/* Add subtle vignette effect around canvas */
.blockchain-canvas::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(10, 14, 39, 0.4) 100%
    );
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .blockchain-canvas {
        opacity: 0.25; /* Reduce opacity on mobile for better text readability */
    }
}

/* Loading state */
.blockchain-canvas.loading {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.blockchain-canvas.loaded {
    opacity: 0.4;
}