body {
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #090909;
	position: relative;
	overflow-x: hidden; /* Prevent horizontal scrollbar */
	overflow-y: hidden; /* Prevent vertical scrollbar during animation */
}

/* Pattern Background Layer */
.pattern-layer {
	position: fixed;
	top: -320px;
	left: -320px;
	width: calc(100vw + 640px);
	height: calc(100vh + 640px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cg transform='scale(-1 1) translate(-400 0) rotate(180 200 200)'%3E%3Cpath d='M50.019375,192.14906 189.75,94.79 134.18125,26.575 318.71,126.91 250.14,237.47 340.05,210.52 243.2,370.59 Z' fill='%23050505'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 240px 240px;
	animation: movePatternLarge 25s linear infinite;
	z-index: -1;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	pointer-events: none;
}

@keyframes movePatternLarge {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(240px, 240px, 0);
	}
}

.container {
	width: 37%;
	height: 60vh;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	background-color: transparent;
	position: relative;
	z-index: 2;
}

.platform-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 71.875px;
	height: 71.875px;
	z-index: 10;
	opacity: 0.8;
	transition: all 0.3s ease;
}

/* Twitter icon specifically larger */
.column:nth-child(1) .platform-icon {
	width: 78px;
	height: 78px;
}

/* Column-specific outline colors using drop-shadow */
.column:nth-child(1) .platform-icon {
	filter: 
		drop-shadow(0 0 0 #1C99E6) 
		drop-shadow(1px 0 0 #1C99E6) 
		drop-shadow(-1px 0 0 #1C99E6) 
		drop-shadow(0 1px 0 #1C99E6) 
		drop-shadow(0 -1px 0 #1C99E6)
		drop-shadow(1px 1px 0 #1C99E6)
		drop-shadow(-1px -1px 0 #1C99E6)
		drop-shadow(1px -1px 0 #1C99E6)
		drop-shadow(-1px 1px 0 #1C99E6);
}

.column:nth-child(2) .platform-icon {
	filter: 
		drop-shadow(0 0 0 #007EF2) 
		drop-shadow(1px 0 0 #007EF2) 
		drop-shadow(-1px 0 0 #007EF2) 
		drop-shadow(0 1px 0 #007EF2) 
		drop-shadow(0 -1px 0 #007EF2)
		drop-shadow(1px 1px 0 #007EF2)
		drop-shadow(-1px -1px 0 #007EF2)
		drop-shadow(1px -1px 0 #007EF2)
		drop-shadow(-1px 1px 0 #007EF2);
}

.column:nth-child(3) .platform-icon {
	filter: 
		drop-shadow(0 0 0 #E69500) 
		drop-shadow(1px 0 0 #E69500) 
		drop-shadow(-1px 0 0 #E69500) 
		drop-shadow(0 1px 0 #E69500) 
		drop-shadow(0 -1px 0 #E69500)
		drop-shadow(1px 1px 0 #E69500)
		drop-shadow(-1px -1px 0 #E69500)
		drop-shadow(1px -1px 0 #E69500)
		drop-shadow(-1px 1px 0 #E69500);
}

.column:nth-child(4) .platform-icon {
	filter: 
		drop-shadow(0 0 0 #EE6B38) 
		drop-shadow(1px 0 0 #EE6B38) 
		drop-shadow(-1px 0 0 #EE6B38) 
		drop-shadow(0 1px 0 #EE6B38) 
		drop-shadow(0 -1px 0 #EE6B38)
		drop-shadow(1px 1px 0 #EE6B38)
		drop-shadow(-1px -1px 0 #EE6B38)
		drop-shadow(1px -1px 0 #EE6B38)
		drop-shadow(-1px 1px 0 #EE6B38);
}

.column:nth-child(5) .platform-icon,
.column:nth-child(5) .money-icon,
.column:nth-child(5) .icon1,
.column:nth-child(5) .icon2 {
	filter: 
		drop-shadow(0 0 0 #F24E4E) 
		drop-shadow(1px 0 0 #F24E4E) 
		drop-shadow(-1px 0 0 #F24E4E) 
		drop-shadow(0 1px 0 #F24E4E) 
		drop-shadow(0 -1px 0 #F24E4E)
		drop-shadow(1px 1px 0 #F24E4E)
		drop-shadow(-1px -1px 0 #F24E4E)
		drop-shadow(1px -1px 0 #F24E4E)
		drop-shadow(-1px 1px 0 #F24E4E);
}

.column:nth-child(6) .platform-icon {
	filter: 
		drop-shadow(0 0 0 #CE3E5D) 
		drop-shadow(1px 0 0 #CE3E5D) 
		drop-shadow(-1px 0 0 #CE3E5D) 
		drop-shadow(0 1px 0 #CE3E5D) 
		drop-shadow(0 -1px 0 #CE3E5D)
		drop-shadow(1px 1px 0 #CE3E5D)
		drop-shadow(-1px -1px 0 #CE3E5D)
		drop-shadow(1px -1px 0 #CE3E5D)
		drop-shadow(-1px 1px 0 #CE3E5D);
}

.column:hover .platform-icon {
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 1;
}

.row {
	height: 100%;
}

.column {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 0;
	width: 20%;
	height: 100%;
	vertical-align: top;
	z-index: 2;
	
	/* Start each column below the viewport */
	transform: translateY(100vh);
}

/* Apply slide-up animation to each column */
.column:nth-child(1) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.4s;
}
.column:nth-child(2) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.5s;
}
.column:nth-child(3) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.6s;
}
.column:nth-child(4) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.7s;
}
.column:nth-child(5) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.8s;
}
.column:nth-child(6) {
	animation: slideUpColumn 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	animation-delay: 0.9s;
}

@keyframes slideUpColumn {
	0% {
		transform: translateY(100vh);
	}
	100% {
		transform: translateY(0);
	}
}

.column-content {
	position: relative;
	width: 100%;
	height: 100%;
}

.column-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.4s ease;
	transform-origin: center center;
}

.twitter {
	background-color: #1DA1F2;
}

.bluesky {
	background-color: #0085FF;
}

.newgrounds {
	background-color: #fb713b;
}

.furaffinity {
	background-color: #f29d00;
}

.patreon {
	background-color: #FF5252;
}

.gallery {
	background-color: #D94162;
}

.column-image {
	position: absolute;
	top: -10px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	transition: opacity 0.25s ease, transform 0.4s ease, top 0.4s ease, filter 0.3s ease;
	transform-origin: center center;
	filter: sepia(5%) contrast(1.025) blur(1px);
	mix-blend-mode: soft-light;
}

.twitter-image {
	opacity: 0.2;
	filter: contrast(1.025) hue-rotate(180deg) opacity(0.95) blur(3px);
}

.bluesky-image {
	opacity: 0.2;
	filter: contrast(1.025) hue-rotate(210deg) opacity(0.95) blur(3px);
}

.newgrounds-image {
	opacity: 0.2;
	filter: contrast(1.025) hue-rotate(15deg) opacity(0.95) blur(3px);
}

.furaffinity-image {
	opacity: 0.2;
	filter: contrast(1.025) hue-rotate(30deg) opacity(0.95) blur(3px);
}

.patreon-image {
	opacity: 0.2;
	filter: contrast(3.025) hue-rotate(45deg) opacity(0.95) blur(3px);
}

.gallery-image {
	opacity: 0.2;
	filter: contrast(3.025) hue-rotate(45deg) opacity(0.95) blur(3px);
}

.column:hover .column-image {
	opacity: 0.4;
	transform: scale(1.05);
	top: 0;
	filter: grayscale(85%) contrast(0.9) brightness(1.1);
}

.blur-mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 6;
	opacity: 1;
}

.blur-effect {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition: all 0.2s ease-out;
	mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0.8) 31px, rgba(0,0,0,0) 100px);
	-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0, rgba(0,0,0,0.8) 31px, rgba(0,0,0,0) 100px);
}

.column:hover .blur-effect {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Split Column Styles */
.split-column {
	overflow: hidden;
}

.split-column .support-image {
	opacity: 0.2;
	filter: contrast(1.025) hue-rotate(45deg) opacity(0.95) blur(3px);
}

.split-column:hover .support-image {
	opacity: 0.4;
	transform: scale(1.05);
	top: 0;
	filter: grayscale(85%) contrast(0.9) brightness(1.1);
}

.money-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 71.875px;
	height: 71.875px;
	z-index: 10;
	opacity: 0.8;
	transition: all 0.2s ease-out;
}

.split-column:hover .money-icon {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}

.split-section {
	position: absolute;
	width: 100%;
	height: 50%;
	transition: all 0.25s ease-out;
	overflow: hidden;
	opacity: 0;
}

.top-section {
	top: 25%;
	left: 0;
}

.bottom-section {
	bottom: 25%;
	left: 0;
}

.split-column:hover .split-section {
	opacity: 1;
}

.split-column:hover .top-section {
	top: 0;
}

.split-column:hover .bottom-section {
	bottom: 0;
}

.icon1, .icon2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 71.875px;
	height: 71.875px;
	z-index: 10;
	opacity: 0.8;
	transition: all 0.2s ease-out;
}

.split-column:hover .icon1,
.split-column:hover .icon2 {
	transform: translate(-50%, -50%) scale(1.1);
	opacity: 1;
}

.top-section:hover .icon1 {
	transform: translate(-50%, -50%) scale(1.2) !important;
	opacity: 1 !important;
}

.bottom-section:hover .icon2 {
	transform: translate(-50%, -50%) scale(1.2) !important;
	opacity: 1 !important;
}

/* Signature styles */
.signature {
	position: absolute;
	bottom: 2vh;
	left: 50%;
	transform: translateX(-50%) translateY(50px);
	width: 80px;
	height: auto;
	opacity: 0;
	z-index: 20;
	animation: signatureJelloAppear 2s ease-out forwards;
	animation-delay: 2.0s;
}

@keyframes signatureJelloAppear {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(50px) scaleX(1) scaleY(1);
	}
	30% {
		opacity: 0.7;
		transform: translateX(-50%) translateY(0) scaleX(0.9) scaleY(1.1);
	}
	40% {
		transform: translateX(-50%) translateY(0) scaleX(1.25) scaleY(0.75);
	}
	50% {
		transform: translateX(-50%) translateY(0) scaleX(0.85) scaleY(1.15);
	}
	60% {
		transform: translateX(-50%) translateY(0) scaleX(1.15) scaleY(0.85);
	}
	70% {
		transform: translateX(-50%) translateY(0) scaleX(0.95) scaleY(1.05);
	}
	80% {
		transform: translateX(-50%) translateY(0) scaleX(1.05) scaleY(0.95);
	}
	90% {
		transform: translateX(-50%) translateY(0) scaleX(0.98) scaleY(1.02);
	}
	100% {
		opacity: 0.7;
		transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1);
	}
}

.signature img {
	width: 100%;
	height: auto;
	filter: brightness(0) saturate(100%) invert(100%);
}

/* Squash & Stretch Bounce Animation */
.squash-bounce {
	width: 60px;
	height: 60px;
	background: linear-gradient(45deg, #feca57, #ff9ff3);
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	animation: squashBounce 1.5s ease-in-out infinite;
	position: absolute;
	bottom: 2vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 19;
	opacity: 0;
	animation: squashBounceIntro 2s ease-out forwards;
	animation-delay: 0.5s;
	display: none;
}

@keyframes squashBounce {
	0% {
		transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1);
	}
	15% {
		transform: translateX(-50%) translateY(-80px) scaleX(1.1) scaleY(0.9);
	}
	50% {
		transform: translateX(-50%) translateY(-120px) scaleX(0.9) scaleY(1.1);
	}
	85% {
		transform: translateX(-50%) translateY(0) scaleX(1.2) scaleY(0.8);
	}
	100% {
		transform: translateX(-50%) translateY(0) scaleX(1) scaleY(1);
	}
}

@keyframes squashBounceIntro {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(50px) scale(0);
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1.2);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
		animation: squashBounce 1.5s ease-in-out infinite;
	}
}

.icon-link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Loading overlay */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: fadeOut 0.4s ease-out forwards;
	animation-delay: 0.3s;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}