Template:MLG/styles.css: Difference between revisions

/* Table wrapper forces perfect shrink-wrapping */
.mlg-aligner {
	display: table;
	margin: 40px auto; 
}

/* Main Box Structure */
.mlg-container {
	position: relative;
	background-color: #333333;
	border: 5px solid #fec837; 
	border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	border-image-slice: 1;
	/* ADDED: Deep outer drop shadow and inner vignette shadow for un-hovered polish */
	box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.8);
	padding: 15px 20px;
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	color: #cccccc;
	text-transform: uppercase;
	transition: filter 0.2s, box-shadow 0.2s;
}

/* 1. Hover Background Image Layers */
.mlg-bg-wrapper {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden; 
	z-index: 0;
}

.mlg-bg {
	position: absolute;
	top: -5%; left: -5%; 
	width: 110%; height: 110%;
	opacity: 0;
	transition: opacity 0.2s;
}

.mlg-bg img {
	width: 100%;
	height: 100%;
}

/* 2. Particles Container & Base Class */
.mlg-particles {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 1;
}

.mlg-p {
	position: absolute;
	opacity: 0; 
}

/* 3. Main Content Wrapper */
.mlg-inner {
	position: relative;
	z-index: 2; 
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.mlg-content { text-align: center; }
.mlg-img { flex: 0 0 auto; }

/* Text Formatting & Heavy Meme Stroke */
.mlg-title { font-size: 2em; color: #ffffff; margin-bottom: 5px; letter-spacing: 1px; }
.mlg-subtitle { font-size: 1.1em; color: #cccccc; margin-bottom: 10px; }
.mlg-yellow { color: #ffe43a; }

.mlg-stroke {
	text-shadow: 
		-2px -2px 0 #000,  2px -2px 0 #000,
		-2px  2px 0 #000,  2px  2px 0 #000,
		-3px  0   0 #000,  3px  0   0 #000,
		 0   -3px 0 #000,  0    3px 0 #000,
		 4px  4px 5px rgba(0,0,0,1);
}

.mlg-audio { display: flex; justify-content: center; }


/* =========================================
   HOVER TRIGGERS & ANIMATIONS
========================================= */

/* Triggers a glowing rainbow shadow when hovering, plus the shakes */
.mlg-container:hover { 
	animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear; 
	box-shadow: 0 10px 30px rgba(184, 39, 252, 0.5), inset 0 0 25px rgba(0,0,0,0.8);
}
.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }

/* Trigger Particles Safely */
.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; }
.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
.mlg-container:hover .mlg-bounce { animation-name: mlg-anim-bounce; opacity: 1; }

/* Base animation rules */
.mlg-hit, .mlg-weed, .mlg-chip, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

/* Hitmarkers */
.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }
.h3 { top: 40%; left: -25px; animation-duration: 1.4s; animation-delay: 0.2s; }
.h4 { top: 15%; right: -15px; animation-duration: 1.1s; animation-delay: 0.7s; }
.h5 { top: -25px; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.h6 { bottom: -20px; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }
.h7 { top: 50%; left: 50%; animation-duration: 1.3s; animation-delay: 0.3s; }
.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }

/* Floating Weed */
.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }
.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }

/* Floating Dorito Chips */
.c1 { bottom: -20px; left: 25%; animation-duration: 3.2s; animation-delay: 0.5s; }
.c2 { bottom: -35px; right: 35%; animation-duration: 2.8s; animation-delay: 1.2s; }
.c3 { bottom: -15px; left: 65%; animation-duration: 4.1s; animation-delay: 0.2s; }

/* Mountain Dew */
.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
.s3 { bottom: -20px; right: 25%; animation-duration: 1.8s; animation-delay: 0.7s; }
.s4 { top: -10px; left: 55%; animation-duration: 3.0s; animation-delay: 0.3s; }

/* Illuminati */
.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }
.p2 { bottom: -10px; left: -15px; animation-duration: 1.2s; animation-delay: 0.5s; }
.p3 { top: 35%; left: 85%; animation-duration: 1.8s; animation-delay: 0.2s; }

/* Dorito Bags */
.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }
.b2 { top: -40px; left: -5px; animation-duration: 0.6s; animation-delay: 0.2s; }
.b3 { top: 25%; left: -35px; animation-duration: 0.4s; animation-delay: 0.1s; }


/* =========================================
   KEYFRAMES
========================================= */

@keyframes mlg-rainbow {
	0% { filter: hue-rotate(0deg) saturate(200%); }
	100% { filter: hue-rotate(360deg) saturate(200%); }
}

@keyframes mlg-shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes mlg-bg-shake {
	0% { transform: translate(-3px, -2px); }
	50% { transform: translate(3px, 3px); }
	100% { transform: translate(-2px, 3px); }
}

@keyframes mlg-bounce-img {
	0% { transform: scale(1) rotate(-5deg); }
	100% { transform: scale(1.1) rotate(5deg); }
}

@keyframes mlg-anim-hit {
	0% { transform: scale(0); opacity: 1; }
	10% { transform: scale(1.5); opacity: 1; }
	20% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1); opacity: 0; }
	100% { transform: scale(1); opacity: 0; }
}

@keyframes mlg-anim-weed {
	0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(20px, -120px) rotate(15deg); opacity: 0; }
}

@keyframes mlg-anim-spin {
	0% { transform: rotate(0deg) scale(0.8); }
	100% { transform: rotate(360deg) scale(1.2); }
}

@keyframes mlg-anim-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

@keyframes mlg-anim-bounce {
	0% { transform: translateY(0); }
	100% { transform: translateY(-30px); }
}