:root { 
    --bg:#111;
    --surface:#1a1a1a;
    --surface2:#222;
    --border:#2e2e2e; 
    --orange:#ff6a00;
    --orange2:#ff9900;
    --orange-dim:#7a3200;
    --orange-glow:rgba(255,106,0,0.15); 
    --text:#f5e6d0;
    --text-dim:#8a7a6a;
    --text-muted:#3a3028; 
    --diamond:#4dd9e8;
    --dg:rgba(77,217,232,0.2); 
    --danger:#e74c3c;
    --success:#2ecc71;
    --r:8px; 
}

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

body {
    background:var(--bg);
    color:var(--text);
    min-height:100vh; 
    overflow-x:hidden;
    font-family: "Passero One", sans-serif;
    text-align: center;
    padding: 30px;
    font-size: larger;
}

@import url(https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&family=Passero+One&display=swap);

body::before { 
    content:''; 
    position:fixed; 
    inset:0; 
    background-image:linear-gradient(rgba(255,106,0,0.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,106,0,0.04) 1px,transparent 1px); 
    background-size:32px 32px; 
    pointer-events:none; 
    z-index:-1; 
    animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate; 
}

@keyframes gridDriftX { 0% { background-position-x: 0px; } 100% { background-position-x: 1024px; } }
@keyframes gridDriftY { 0% { background-position-y: 0px; } 100% { background-position-y: 1024px; } }

/* --- BOX & LAYOUT --- */
.annimation-box {
    background-color: var(--bg);
    border-radius: 13px;
    border-width: 14px;
    border-color: var(--orange);
    border-style: solid;
    max-width: 600px;
    margin: 20px auto;
    position: relative;
    padding: 20px;
    box-shadow: 0 0 30px var(--orange-glow);
}

.experiment-svg {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

/* --- BUTTON --- */
#fire-btn {
    background: var(--orange);
    color: var(--bg);
    border: none;
    padding: 12px 24px;
    font-size: 20px;
    font-family: "Passero One", sans-serif;
    border-radius: var(--r);
    cursor: pointer;
    transition: 0.2s;
}

#fire-btn:hover {
    background: var(--orange2);
    transform: scale(1.05);
}

/* --- LASER BEAM ANIMATIONS --- */
.beam {
    stroke: var(--danger);
    stroke-width: 4;
    filter: drop-shadow(0 0 5px var(--danger)); 
    stroke-dasharray: 280;
    stroke-dashoffset: 280; 
}

.animate-beam1 {
    animation: drawBeam 0.8s linear forwards;
}

.animate-beam2 {
    animation: drawBeam 0.8s linear 0.8s forwards;
}

@keyframes drawBeam {
    to { stroke-dashoffset: 0; }
}

/* --- VIBRATION ANIMATIONS --- */
@keyframes windowVibrate {
    0% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(-0.5deg); }
    50% { transform: translateY(1px) rotate(0.5deg); }
    75% { transform: translateY(-1px) rotate(0.2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes beamVibrate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
    75% { transform: rotate(-0.8deg); }
    100% { transform: rotate(0deg); }
}

.is-vibrating-window {
    animation: windowVibrate 0.05s infinite linear;
    transform-origin: 200px 250px; 
}

.is-vibrating-beam {
    animation: beamVibrate 0.05s infinite linear;
    transform-origin: 200px 250px; 
}

/* --- SOUND WAVE ANIMATIONS --- */
.is-playing-sound {
    opacity: 1 !important;
}

.wave {
    animation: soundRipple 1.2s infinite linear;
    transform-origin: 200px 280px; 
}

.wave1 { animation-delay: 0s; }
.wave2 { animation-delay: 0.4s; }
.wave3 { animation-delay: 0.8s; }

@keyframes soundRipple {
    0% { transform: scale(0.5) translateY(10px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.5) translateY(-20px); opacity: 0; }
}

/* --- EXISTING CSS REMAINS THE SAME --- */
/* (Keep everything from your previous styles.css up to the sound wave animations) */

/* --- AUDIO DECRYPTION ANIMATIONS --- */
.is-decrypted {
    opacity: 1 !important;
    transition: opacity 0.3s ease-in;
}

#waveform {
    /* Hide the line initially */
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    filter: drop-shadow(0 0 3px var(--success));
}

.animate-waveform {
    /* Draws the line, then makes it pulse */
    animation: 
        drawWave 0.5s ease-out forwards, 
        wavePulse 0.4s infinite alternate 0.5s;
}

@keyframes drawWave {
    to { stroke-dashoffset: 0; }
}

@keyframes wavePulse {
    0% { transform: scaleY(0.8); transform-origin: 330px 145px; }
    100% { transform: scaleY(1.3); transform-origin: 330px 145px; }
}