Template:Party/style.css: Difference between revisions

.party-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    margin: 1em auto;
    padding: 20px; 
}

/* Speaker bouncing animation */
.party-speaker {
    flex-shrink: 0;
    /* 5 beats playing at 0.5s each = 2.5s total loop.
       'ease-out' makes the shrinking feel like a natural fade. */
    animation: speaker-pump 2.5s ease-out infinite;
    transform-origin: center center;
}

@keyframes speaker-pump {
    /* Beat 1: Heavy Drop */
    0%    { transform: scale(1.5); }
    19.9% { transform: scale(1); }

    /* Beat 2: Light Bump */
    20%   { transform: scale(1.2); }
    39.9% { transform: scale(1); }

    /* Beat 3: Medium Bump */
    40%   { transform: scale(1.4); }
    59.9% { transform: scale(1); }

    /* Beat 4: Tiny Bump */
    60%   { transform: scale(1.15); }
    79.9% { transform: scale(1); }

    /* Beat 5: Massive Drop */
    80%   { transform: scale(1.6); }
    99.9% { transform: scale(1); }

    /* Loop reset */
    100%  { transform: scale(1); }
}

/* Main Box Styling */
.party-main-box {
    padding: 0.5em;
    margin: 0;
    font-size: 95%;
    text-align: center;
    color: #fff;
    border: 7px solid red; 
    /* 
     * flashy-glow changed from 0.5s to 2s to be 
     * safely under the epilepsy risk threshold
     */
    animation: smooth-border 3s linear infinite, flashy-glow 2s step-end infinite;
}

/* Smoothly transitions through the rainbow */
@keyframes smooth-border {
    0%   { border-color: red; }
    17%  { border-color: orange; }
    33%  { border-color: yellow; }
    50%  { border-color: lime; }
    67%  { border-color: cyan; }
    83%  { border-color: magenta; }
    100% { border-color: red; }
}

/* Snaps instantly between neon colors */
@keyframes flashy-glow {
    0%  { box-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; }
    20% { box-shadow: 0px 0px 40px #ff00ff, 0px 0px 2px #ff00ff; }
    40% { box-shadow: 0px 0px 40px #00ffff, 0px 0px 2px #00ffff; }
    60% { box-shadow: 0px 0px 40px #ff0000, 0px 0px 2px #ff0000; }
    80% { box-shadow: 0px 0px 40px #ffff00, 0px 0px 2px #ffff00; }
    100%{ box-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20; }
}