/* Matrix Background Styles */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html, body {
    height: 100%;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
    background: black;
}

.matrix-elements {
    position: relative;
    width: 100%;
    height: 100%;
}

#matrix-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

#sophon-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: auto;
    background: radial-gradient(circle at center, rgba(0,255,255,0.15) 0%, rgba(0,100,255,0.08) 50%, rgba(0,0,0,0.02) 100%), repeating-radial-gradient(circle at center, rgba(0,255,255,0.05) 0, transparent 8px);
    animation: pulse-sophon 4s infinite ease-in-out, rotateField 60s linear infinite;
    transition: transform 0.4s ease, filter 0.4s ease;
    will-change: transform, filter;
}

#sophon-visual:hover {
    animation: pulse-sophon-hover 1s ease-in-out infinite alternate, rotateField 60s linear infinite;
    filter: brightness(2) blur(4px);
}

@keyframes pulse-sophon {
    0% { opacity: 0.15; filter: blur(2px); }
    50% { opacity: 0.4; filter: blur(6px); }
    100% { opacity: 0.15; filter: blur(2px); }
}

@keyframes pulse-sophon-hover {
    0% { opacity: 0.3; filter: blur(2px); }
    100% { opacity: 0.9; filter: blur(5px); }
}

@keyframes rotateField {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes burst {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(10); opacity: 0; }
}

@keyframes btcFlicker {
    0% { opacity: 0.95; }
    50% { opacity: 0.75; }
    100% { opacity: 0.95; }
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0.2; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

@keyframes flashout {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

@keyframes flickerText {
    0% { opacity: 1; }
    25% { opacity: 0.4; transform: translateX(-0.5px); }
    50% { opacity: 0.8; transform: translateX(0.5px); }
    75% { opacity: 0.6; transform: translateY(-0.5px); }
    100% { opacity: 1; transform: translateY(0); }
}

.cryptic {
    filter: none;
    text-shadow: 0 0 3px #0ff, 0 0 6px #0ff;
    transition: all 0.4s ease;
}

.cryptic::before {
    content: attr(data-matrix);
    position: absolute;
    top: 0;
    left: 0;
    color: #00ffcc;
    opacity: 0.1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cryptic:hover {
    filter: none;
    color: #ffaa00;
    text-shadow: 0 0 10px #ffaa00, 0 0 20px #ffaa00;
    animation: flickerText 0.3s linear 1;
}

.cryptic:hover::before {
    opacity: 0;
}

.bubble {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: rgba(0,255,255,0.3);
    animation: floatUp 8s linear forwards;
    z-index: 12;
}

/* Overlay Elements */
.matrix-overlay {
    position: absolute;
    z-index: 10;
    font-family: 'Share Tech Mono', monospace;
    pointer-events: auto;
}

#sophon-flash {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2vw;
    text-align: center;
    cursor: help;
    white-space: nowrap;
    overflow: hidden;
}

#btc-block {
    bottom: 10px;
    left: 10px;
    color: #32cd32;
    font-size: 1rem;
    animation: btcFlicker 1.5s infinite alternate;
    text-shadow: 0 0 5px #32cd32, 0 0 10px #32cd32, 0 0 20px #228b22;
    background-color: rgba(0,0,0,0.25);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

#toggle-sound {
    bottom: 10px;
    right: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    color: #888;
    z-index: 11;
}