Template:BibisiLauncher/style.css: Difference between revisions

/* Button styling (makes the link look like a real button) */
.launcher-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #d33;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
}
.launcher-btn:hover {
    background: #f44;
}

/* TRIGGER: When the URL ends in #launch-easter-egg, start animation */
#launch-easter-egg:target .missile-object {
    visibility: visible;
    animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
}

#launch-easter-egg:target .particle {
    visibility: visible;
    /* Changed to infinite so the fire loops while the rocket is in the air */
    animation: particle-fire 0.8s ease-out infinite; 
}

/* Missile moves straight up */
@keyframes rocket-move {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-1500px); }
}

/* Fire/Smoke spawns, grows, rotates, and fades */
@keyframes particle-fire {
    0%   { transform: scale(0.2) rotate(0deg); opacity: 1; }
    100% { transform: scale(2.5) rotate(45deg); opacity: 0; }
}

.missile-object {
    position: fixed;
    bottom: -50px;
    left: 50%;
    margin-left: -25px; /* Centers the rocket */
    font-size: 50px;
    visibility: hidden;
    z-index: 9999;
}

/* Particle style */
.particle {
    position: absolute;
    top: 50px; /* Offset under the rocket */
    left: 10px;
    font-size: 20px;
    visibility: hidden;
}

/* Replaces the inline styles MediaWiki strips out */
.particle-1 { animation-delay: 0.1s; }
.particle-2 { animation-delay: 0.2s; left: 20px; }
.particle-3 { animation-delay: 0.3s; left: -10px; }