Template:BibisiLauncher/style.css - Revision history

SomebodyRum at 18:21, 10 April 2026

2026-04-10T18:21:24Z

SomebodyRum at 18:17, 10 April 2026

2026-04-10T18:17:51Z

← Older revision		Revision as of 18:17, 10 April 2026
Line 1:		Line 1:
	/* Button styling ~~(using cursor: pointer since it's a span now)~~ */		/* Button styling */
	.launcher-btn {		.launcher-btn {
	display: inline-block;		display: inline-block;
Line 16:		Line 16:
	/* -------------------------------------- */		/* -------------------------------------- */

	~~/* When the collapsible is OPEN (not collapsed), trigger the rocket */~~		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-container .missile-object {
	#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-~~wrapper~~ .missile-object {
	visibility: visible;		visibility: visible;
	animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;		animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
	}		}

	#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-~~wrapper~~ .smoke {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-container .smoke {
	visibility: visible;		visibility: visible;
	animation: smoke-anim 0.8s ease-out infinite;		animation: smoke-anim 0.8s ease-out infinite;
Line 28:		Line 27:

	/* Shuts off the smoke pad completely after the rocket leaves (2s) */		/* Shuts off the smoke pad completely after the rocket leaves (2s) */
	#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-~~wrapper~~ .smoke-pad {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-container .smoke-pad {
	animation: hide-pad 2s forwards;		animation: hide-pad 2s forwards;
	}		}

	#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-~~wrapper~~ .fire {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-container .fire {
	visibility: visible;		visibility: visible;
	animation: fire-anim 0.4s linear infinite;		animation: fire-anim 0.4s linear infinite;
Line 43:		Line 42:

	/* -------------------------------------- */		/* -------------------------------------- */
	/* ~~ROCKET CONTAINER~~ */		/* THE INVISIBLE FRAME (Does not move) */
	/* -------------------------------------- */		/* -------------------------------------- */
	.missile-~~object, .smoke-pad~~ {		.missile-container {
	position: fixed;		position: fixed;
	bottom: -60px;		bottom: -60px;
Line 52:		Line 51:
	width: 50px;		width: 50px;
	height: 50px;		height: 50px;
			z-index: 9999;
			}

			/* -------------------------------------- */
			/* ROCKET & SMOKE CONTAINERS */
			/* -------------------------------------- */
			.missile-object, .smoke-pad {
			position: absolute; /* Positions them relative to the invisible frame */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
	font-size: 50px;		font-size: 50px;
	line-height: 50px;		line-height: 50px;
	text-align: center;		text-align: center;
	visibility: hidden;		visibility: hidden;
	~~z-index: 9999;~~
	}		}

	.smoke-pad {		.smoke-pad {
	z-index: 9998; /* Keeps smoke behind the rocket */		z-index: 9998; /* Keeps smoke behind the rocket */
Line 80:		Line 91:
	}		}

	~~/* 4 particles spread evenly across the 0.4s animation for continuous flow */~~
	.fire-1 { animation-delay: 0s; }		.fire-1 { animation-delay: 0s; }
	.fire-2 { animation-delay: 0.1s; }		.fire-2 { animation-delay: 0.1s; }
Line 103:		Line 113:
	}		}

	~~/* 5 particles spread out in different directions to look like a cloud */~~
	.smoke-1 { animation-delay: 0s; }		.smoke-1 { animation-delay: 0s; }
	.smoke-2 { animation-delay: 0.15s; margin-left: -15px; }		.smoke-2 { animation-delay: 0.15s; margin-left: -15px; }

SomebodyRum at 18:15, 10 April 2026

2026-04-10T18:15:20Z

← Older revision		Revision as of 18:15, 10 April 2026
Line 1:		Line 1:
	/* ~~Prevent MediaWiki from highlighting the target container~~ (~~fixes the ugly frame!~~) */		/* Button styling (using cursor: pointer since it's a span now) */
	~~#launch-easter-egg:target {~~
	~~background: transparent;~~
	~~outline: none;~~
	~~box-shadow: none;~~
	}

	~~/* Button styling~~ */
	.launcher-btn {		.launcher-btn {
	display: inline-block;		display: inline-block;
Line 14:		Line 7:
	font-weight: bold;		font-weight: bold;
	border-radius: 5px;		border-radius: 5px;
	~~text-decoration~~: ~~none~~;		cursor: pointer;
	~~margin~~-~~right~~: ~~10px~~;		user-select: none;
	}		}
	.launcher-btn:hover { background: #f44; }		.launcher-btn:hover { background: #f44; }

	~~.launcher-reset {~~
	~~background: #555;~~
	}
	~~.launcher-reset:hover { background: #777; }~~

	/* -------------------------------------- */		/* -------------------------------------- */
	/* TRIGGER ANIMATIONS ~~ON CLICK~~ */		/* TRIGGER ANIMATIONS VIA CUSTOM TOGGLE */
	/* -------------------------------------- */		/* -------------------------------------- */
	#~~launch~~-~~easter~~-~~egg~~:~~target~~ .missile-object {
			/* When the collapsible is OPEN (not collapsed), trigger the rocket */
			#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-wrapper .missile-object {
	visibility: visible;		visibility: visible;
	animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;		animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
	}		}

	#~~launch~~-~~easter~~-~~egg~~:~~target~~ .smoke {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-wrapper .smoke {
	visibility: visible;		visibility: visible;
	animation: smoke-anim 0.8s ease-out infinite;		animation: smoke-anim 0.8s ease-out infinite;
Line 38:		Line 28:

	/* Shuts off the smoke pad completely after the rocket leaves (2s) */		/* Shuts off the smoke pad completely after the rocket leaves (2s) */
	#~~launch~~-~~easter~~-~~egg~~:~~target~~ .smoke-pad {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-wrapper .smoke-pad {
	animation: hide-pad 2s forwards;		animation: hide-pad 2s forwards;
	}		}

	#~~launch~~-~~easter~~-~~egg~~:~~target~~ .fire {		#mw-customcollapsible-rocketLaunch:not(.mw-collapsed) ~ .missile-wrapper .fire {
	visibility: visible;		visibility: visible;
	animation: fire-anim 0.4s linear infinite;		animation: fire-anim 0.4s linear infinite;
Line 60:		Line 50:
	left: 50%;		left: 50%;
	margin-left: -25px; /* Centers the 50px width */		margin-left: -25px; /* Centers the 50px width */
	width: 50px; ~~/* Fixed width fixes the offset corner bug! */~~		width: 50px;
	height: 50px;		height: 50px;
	font-size: 50px;		font-size: 50px;

SomebodyRum at 18:07, 10 April 2026

2026-04-10T18:07:32Z

← Older revision		Revision as of 18:07, 10 April 2026
Line 1:		Line 1:
	/* Prevent MediaWiki from highlighting the target container (fixes the ugly frame!) */		/* Prevent MediaWiki from highlighting the target container (fixes the ugly frame!) */
	#launch-easter-egg:target {		#launch-easter-egg:target {
	background: transparent ~~!important~~;		background: transparent;
	outline: none ~~!important~~;		outline: none;
	box-shadow: none ~~!important~~;		box-shadow: none;
	}		}

SomebodyRum at 18:06, 10 April 2026

2026-04-10T18:06:00Z

← Older revision		Revision as of 18:06, 10 April 2026
Line 1:		Line 1:
			/* Prevent MediaWiki from highlighting the target container (fixes the ugly frame!) */
			#launch-easter-egg:target {
			background: transparent !important;
			outline: none !important;
			box-shadow: none !important;
			}

	/* Button styling */		/* Button styling */
	.launcher-btn {		.launcher-btn {
Line 8:		Line 15:
	border-radius: 5px;		border-radius: 5px;
	text-decoration: none;		text-decoration: none;
			margin-right: 10px;
	}		}
	.launcher-btn:hover { background: #f44; }		.launcher-btn:hover { background: #f44; }

			.launcher-reset {
			background: #555;
			}
			.launcher-reset:hover { background: #777; }

	/* -------------------------------------- */		/* -------------------------------------- */
	/* TRIGGER ANIMATIONS ON CLICK */		/* TRIGGER ANIMATIONS ON CLICK */
	/* -------------------------------------- */		/* -------------------------------------- */
	~~/* Notice the "~ div" - this connects the hidden span to the rocket below it */~~		#launch-easter-egg:target .missile-object {
	#launch-easter-egg:target ~~~ div~~ .missile-object {
	visibility: visible;		visibility: visible;
	animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;		animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
	}		}

	#launch-easter-egg:target ~~~ div~~ .smoke {		#launch-easter-egg:target .smoke {
	visibility: visible;		visibility: visible;
	animation: smoke-anim 0.8s ease-out infinite;		animation: smoke-anim 0.8s ease-out infinite;
	}		}

	/* Shuts off the smoke pad completely after the rocket leaves (2s) */		/* Shuts off the smoke pad completely after the rocket leaves (2s) */
	#launch-easter-egg:target ~~~ div~~ .smoke-pad {		#launch-easter-egg:target .smoke-pad {
	animation: hide-pad 2s forwards;		animation: hide-pad 2s forwards;
	}		}

	#launch-easter-egg:target ~~~ div~~ .fire {		#launch-easter-egg:target .fire {
	visibility: visible;		visibility: visible;
	animation: fire-anim 0.4s linear infinite;		animation: fire-anim 0.4s linear infinite;
Line 109:		Line 122:
	@keyframes smoke-anim {		@keyframes smoke-anim {
	0% { transform: scale(0.5); opacity: 1; }		0% { transform: scale(0.5); opacity: 1; }
	100% { transform: scale(3); opacity: 0; } ~~/* Max size is now 3 instead of 5 */~~		100% { transform: scale(3); opacity: 0; }
	}		}

SomebodyRum at 18:04, 10 April 2026

2026-04-10T18:04:14Z

← Older revision		Revision as of 18:04, 10 April 2026
Line 14:		Line 14:
	/* TRIGGER ANIMATIONS ON CLICK */		/* TRIGGER ANIMATIONS ON CLICK */
	/* -------------------------------------- */		/* -------------------------------------- */
	#launch-easter-egg:target .missile-object {		/* Notice the "~ div" - this connects the hidden span to the rocket below it */
			#launch-easter-egg:target ~ div .missile-object {
	visibility: visible;		visibility: visible;
	animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;		animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
	}		}

	#launch-easter-egg:target .smoke {		#launch-easter-egg:target ~ div .smoke {
	visibility: visible;		visibility: visible;
	animation: smoke-anim 1.5s ease-out forwards;		animation: smoke-anim 0.8s ease-out infinite;
			}
			/* Shuts off the smoke pad completely after the rocket leaves (2s) */
			#launch-easter-egg:target ~ div .smoke-pad {
			animation: hide-pad 2s forwards;
	}		}

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

			@keyframes hide-pad {
			0%, 99% { opacity: 1; visibility: visible; }
			100% { opacity: 0; visibility: hidden; }
	}		}

	/* -------------------------------------- */		/* -------------------------------------- */
	/* ROCKET ~~(Moves up)~~ */		/* ROCKET CONTAINER */
	/* -------------------------------------- */		/* -------------------------------------- */
	.missile-object {		.missile-object, .smoke-pad {
	position: fixed;		position: fixed;
	bottom: -~~50px~~;		bottom: -60px;
	left: 50%;		left: 50%;
	margin-left: -25px; /* Centers the ~~rocket~~ */		margin-left: -25px; /* Centers the 50px width */
			width: 50px; /* Fixed width fixes the offset corner bug! */
			height: 50px;
	font-size: 50px;		font-size: 50px;
			line-height: 50px;
			text-align: center;
	visibility: hidden;		visibility: hidden;
	z-index: 9999;		z-index: 9999;
			}
			.smoke-pad {
			z-index: 9998; /* Keeps smoke behind the rocket */
	}		}

Line 49:		Line 65:

	/* -------------------------------------- */		/* -------------------------------------- */
	/* FIRE ~~(Welded to rocket, shoots down)~~ */		/* CONTINUOUS FIRE */
	/* -------------------------------------- */		/* -------------------------------------- */
	.fire {		.fire {
	position: absolute;		position: absolute;
	left: ~~10px~~; /* ~~Centers~~ under the rocket ~~emoji~~ */		left: 0;
	~~top~~: ~~40px~~; ~~/* Offsets down from the rocket */~~		top: 35px; /* Fixed right under the rocket */
			width: 50px;
	font-size: 30px;		font-size: 30px;
			text-align: center;
	visibility: hidden;		visibility: hidden;
	}		}

	/* ~~Fire~~ particles ~~offset their start times so it looks like a~~ continuous ~~stream~~ */		/* 4 particles spread evenly across the 0.4s animation for continuous flow */
	.fire-1 { animation-delay: 0s; }		.fire-1 { animation-delay: 0s; }
	.fire-2 { animation-delay: 0.2s; }		.fire-2 { animation-delay: 0.1s; }
			.fire-3 { animation-delay: 0.2s; }
			.fire-4 { animation-delay: 0.3s; }

	@keyframes fire-anim {		@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; }		0% { transform: translateY(0) scale(1); opacity: 1; }
	100% { transform: translateY(50px) scale(0); opacity: 0; }		100% { transform: translateY(50px) scale(0); opacity: 0; }
Line 70:		Line 89:

	/* -------------------------------------- */		/* -------------------------------------- */
	/* SMOKE ~~(Anchored at spawn, gets huge)~~ */		/* CONTINUOUS SMOKE */
	/* -------------------------------------- */		/* -------------------------------------- */
	~~.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 {		.smoke {
	position: absolute;		position: absolute;
	left: 0;		left: 0;
	top: 0;		top: 10px;
			width: 50px;
			text-align: center;
	visibility: hidden;		visibility: hidden;
	}		}

	/* ~~Spread the smoke~~ out ~~slightly~~ */		/* 5 particles spread out in different directions to look like a cloud */
	.smoke-1 { ~~transform~~: ~~translateX(-20px)~~; }		.smoke-1 { animation-delay: 0s; }
	.smoke-2 { ~~transform~~: ~~translateX(20px)~~; animation-delay: 0.1s; }		.smoke-2 { animation-delay: 0.15s; margin-left: -15px; }
	.smoke-3 { ~~transform~~: ~~translateY(10px)~~; animation-delay: 0.2s; }		.smoke-3 { animation-delay: 0.3s; margin-left: 15px; }
			.smoke-4 { animation-delay: 0.45s; margin-top: 15px; }
			.smoke-5 { animation-delay: 0.6s; margin-left: -5px; }

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

SomebodyRum at 18:00, 10 April 2026

2026-04-10T18:00:38Z

← Older revision		Revision as of 18:00, 10 April 2026
Line 1:		Line 1:
	/* Button styling ~~(makes the link look like a real button)~~ */		/* Button styling */
	.launcher-btn {		.launcher-btn {
	display: inline-block;		display: inline-block;
Line 9:		Line 9:
	text-decoration: none;		text-decoration: none;
	}		}
	.launcher-btn:hover {		.launcher-btn:hover { background: #f44; }
	background: #f44;
	}

	/* TRIGGER~~: When the URL ends in #launch~~-~~easter~~-~~egg, start animation~~ */		/* -------------------------------------- */
			/* TRIGGER ANIMATIONS ON CLICK */
			/* -------------------------------------- */
	#launch-easter-egg:target .missile-object {		#launch-easter-egg:target .missile-object {
	visibility: visible;		visibility: visible;
Line 19:		Line 19:
	}		}

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

			#launch-easter-egg:target .fire {
	visibility: visible;		visibility: visible;
	/* ~~Changed to infinite~~ so ~~the~~ fire ~~loops~~ while ~~the rocket is in the air~~ */		/* Infinite loop so it constantly shoots fire while flying */
	animation: ~~particle~~-~~fire~~ 0.~~8s ease~~-~~out infinite~~;		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;
	}		}

	~~/* Missile moves straight up */~~
	@keyframes rocket-move {		@keyframes rocket-move {
	0% { transform: translateY(0); }		0% { transform: translateY(0); }
Line 31:		Line 48:
	}		}

	/* Fire/~~Smoke spawns~~, ~~grows~~, ~~rotates~~, and fades */		/* -------------------------------------- */
	~~@keyframes particle-fire {~~		/* FIRE (Welded to rocket, shoots down) */
	0% { transform: ~~scale~~(0.2) ~~rotate~~(~~0deg~~); opacity: 1; }		/* -------------------------------------- */
	100% { transform: ~~scale~~(~~2.5~~) ~~rotate~~(~~45deg~~); opacity: 0; }		.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; }
	}		}

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

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

	/* ~~Replaces~~ the ~~inline styles MediaWiki strips~~ out */		/* Spread the smoke out slightly */
	.~~particle~~-1 { animation-delay: 0.1s; }		.smoke-1 { transform: translateX(-20px); }
	.~~particle~~-2 { animation-delay: 0.2s~~; left: 20px~~; }		.smoke-2 { transform: translateX(20px); animation-delay: 0.1s; }
	~~.particle~~-3 { ~~animation-delay~~: 0.3s; ~~left~~: ~~-10px~~; }		.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; }
			}

SomebodyRum at 17:56, 10 April 2026

2026-04-10T17:56:07Z

← Older revision		Revision as of 17:56, 10 April 2026
Line 1:		Line 1:
			/* 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 */		/* Missile moves straight up */
	@keyframes rocket-move {		@keyframes rocket-move {
	0% { transform: translateY(0); }		0% { transform: translateY(0); }
	100% { transform: translateY(-~~1200px~~); }		100% { transform: translateY(-1500px); }
	}		}

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

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

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

	/* ~~TRIGGER~~ */		/* Replaces the inline styles MediaWiki strips out */
	.~~launcher~~-~~btn~~:~~active +~~ .~~missile-wrapper~~ .~~missile~~-~~object~~ {		.particle-1 { animation-delay: 0.1s; }
	~~visibility: visible;~~		.particle-2 { animation-delay: 0.2s; left: 20px; }
	animation: ~~rocket-move 2s cubic-bezier(~~0.~~5, 0, 1, 0) forwards~~;		.particle-3 { animation-delay: 0.3s; left: -10px; }
	}

	.~~launcher~~-~~btn:active + .missile-wrapper .particle~~ {
	~~visibility: visible;~~
	animation: ~~particle-fire~~ 0.~~8s ease~~-~~out forwards~~;
	}

SomebodyRum at 17:52, 10 April 2026

2026-04-10T17:52:52Z

← Older revision		Revision as of 17:52, 10 April 2026
Line 1:		Line 1:
	/* ~~Rocket animation~~ */		/* Missile moves straight up */
	@keyframes rocket-~~launch~~ {		@keyframes rocket-move {
	0% { transform: translateY(0); }		0% { transform: translateY(0); }
	100% { transform: translateY(-1200px); }		100% { transform: translateY(-1200px); }
	}		}

	/* Smoke ~~trail animation: Grows~~ and fades */		/* Fire/Smoke spawns, grows, rotates, and fades */
	@keyframes ~~exhaust~~-~~trail~~ {		@keyframes particle-fire {
	0% { ~~opacity: 1;~~ transform: scale(0.5); }		0% { transform: scale(0.2) rotate(0deg); opacity: 1; }
	100% { ~~opacity: 0.3;~~ transform: scale(3) ~~translateY~~(~~-50px~~); }		100% { transform: scale(2.5) rotate(45deg); opacity: 0; }
	}		}

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

	/* ~~When clicking, trigger BOTH animations~~ */		/* Particle style */
	.~~launcher-btn:active + .missile-object~~ {		.particle {
	~~visibility~~: ~~visible~~;		position: absolute;
	~~animation~~: rocket-~~launch 2s cubic-bezier(0.5, 0, 1, 0) forwards~~;		top: 50px; /* Offset under the rocket */
			left: 10px;
			font-size: 20px;
			visibility: hidden;
	}		}

	/* ~~The fire/smoke child element~~ */		/* TRIGGER */
	.launcher-btn:active + .missile-object ~~.exhaust~~ {		.launcher-btn:active + .missile-wrapper .missile-object {
	animation: ~~exhaust~~-~~trail 1s ease~~-~~out infinite~~;		visibility: visible;
			animation: rocket-move 2s cubic-bezier(0.5, 0, 1, 0) forwards;
	}		}

	.~~exhaust~~ {		.launcher-btn:active + .missile-wrapper .particle {
	~~display~~: ~~block~~;		visibility: visible;
	~~font~~-~~size: 20px~~;		animation: particle-fire 0.8s ease-out forwards;
	}		}

SomebodyRum at 17:47, 10 April 2026

2026-04-10T17:47:49Z

← Older revision		Revision as of 17:47, 10 April 2026
Line 1:		Line 1:
			/* Rocket animation */
	@keyframes rocket-launch {		@keyframes rocket-launch {
	0% { transform: translateY(0)~~; opacity: 1~~; }		0% { transform: translateY(0); }
	100% { transform: translateY(-1200px); opacity: 0; }		100% { transform: translateY(-1200px); }
			}

			/* Smoke trail animation: Grows and fades */
			@keyframes exhaust-trail {
			0% { opacity: 1; transform: scale(0.5); }
			100% { opacity: 0.3; transform: scale(3) translateY(-50px); }
	}		}

	.missile-object {		.missile-object {
	position: fixed;		position: fixed;
	bottom: 0;		bottom: 50px;
	left: 50%;		left: 50%;
	font-size: 50px;		font-size: 50px;
	visibility: hidden;		visibility: hidden;
	z-index: 9999;		z-index: 9999;
			text-align: center;
	}		}

	/* ~~This makes it launch when you press and hold~~ */		/* When clicking, trigger BOTH animations */
	.launcher-btn:active + .missile-object {		.launcher-btn:active + .missile-object {
	visibility: visible;		visibility: visible;
	animation: rocket-launch ~~1.5s~~ cubic-bezier(0.5, 0, 1, 0) forwards;		animation: rocket-launch 2s cubic-bezier(0.5, 0, 1, 0) forwards;
			}

			/* The fire/smoke child element */
			.launcher-btn:active + .missile-object .exhaust {
			animation: exhaust-trail 1s ease-out infinite;
	}		}

	.~~launcher-btn~~ {		.exhaust {
	~~cursor: pointer;~~		display: block;
	display: ~~inline-~~block;		font-size: 20px;
	~~padding: 10px;~~
	~~background: #333;~~
	~~color: #fff;~~
	~~border-radius: 5px;~~
	~~user~~-~~select~~: ~~none~~;
	}		}