Template:BibisiLauncher/style.css: Difference between revisions

/* Button styling */
.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 ANIMATIONS ON CLICK            */
/* -------------------------------------- */
#launch-easter-egg:target .missile-object {
    visibility: visible;
    animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
}

#launch-easter-egg:target .smoke {
    visibility: visible;
    animation: smoke-anim 1.5s ease-out forwards;
}

#launch-easter-egg:target .fire {
    visibility: visible;
    /* Infinite loop so it constantly shoots fire while flying */
    animation: fire-anim 0.4s linear infinite; 
}

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

@keyframes rocket-move {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-1500px); }
}

/* -------------------------------------- */
/* FIRE (Welded to rocket, shoots down)   */
/* -------------------------------------- */
.fire {
    position: absolute;
    left: 10px; /* Centers under the rocket emoji */
    top: 40px;  /* Offsets down from the rocket */
    font-size: 30px;
    visibility: hidden;
}

/* Fire particles offset their start times so it looks like a continuous stream */
.fire-1 { animation-delay: 0s; }
.fire-2 { animation-delay: 0.2s; }

@keyframes fire-anim {
    /* Starts at normal size, then moves down the Y axis, shrinks, and fades out */
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(50px) scale(0); opacity: 0; }
}

/* -------------------------------------- */
/* SMOKE (Anchored at spawn, gets huge)   */
/* -------------------------------------- */
.smoke-pad {
    position: fixed;
    bottom: -50px;
    left: 50%;
    margin-left: -25px; /* Exact same position as the rocket start */
    font-size: 50px;
    z-index: 9998; /* Spawns behind the rocket */
}

.smoke {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

/* Spread the smoke out slightly */
.smoke-1 { transform: translateX(-20px); }
.smoke-2 { transform: translateX(20px); animation-delay: 0.1s; }
.smoke-3 { transform: translateY(10px); animation-delay: 0.2s; }

@keyframes smoke-anim {
    /* Starts normal size, blows up to 5x size, and fades away completely */
    0%   { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(5); opacity: 0; }
}