/* ============================================================
   Boys — 100% JavaScript-free animated page
   Everything below is pure CSS animation.
   ============================================================ */

* { box-sizing: border-box; }

body {
	color: black;
	background-color: deepskyblue;
	font-family: monospace;
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
}

a { color: white; }

/* ---------- header with wobbling rainbow title ---------- */
header {
	color: white;
	text-align: center;
	padding: 1.5em 1em 0.5em;
}

header h1 {
	margin: 0;
	font-size: clamp(2rem, 9vw, 5rem);
	letter-spacing: 2px;
	background: linear-gradient(90deg,
		#ff004d, #ffa800, #ffff00, #00e436, #29adff, #a020f0, #ff004d);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation:
		hueSlide 4s linear infinite,
		titleWobble 2.2s ease-in-out infinite;
}

header p {
	margin: 0.3em 0 0;
	font-size: clamp(1rem, 4vw, 1.6rem);
	animation: blink 1.4s steps(2, jump-none) infinite;
}

@keyframes hueSlide {
	to { background-position: 300% 0; }
}
@keyframes titleWobble {
	0%, 100% { transform: rotate(-2deg) scale(1); }
	50%      { transform: rotate(2deg) scale(1.06); }
}
@keyframes blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0.25; }
}

/* ---------- main panel ---------- */
main {
	padding: 2.5em 1em;
	border: solid white;
	background-color: pink;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
}

/* ============================================================
   .xmeme : CSS re-creation of the <acidjs-xmeme> component
   ============================================================ */
.xmeme {
	position: relative;
	width: 600px;
	max-width: 92vw;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	isolation: isolate;
}

/* ----- changing gradient behind the gif ----- */
.gradient-bg {
	position: absolute;
	z-index: -1;
	inset: -28px;
	border-radius: 18px;
	background: linear-gradient(125deg,
		#ff004d, #ffa800, #00e436, #29adff, #a020f0, #ff004d);
	background-size: 400% 400%;
	filter: blur(6px) saturate(1.4);
	animation:
		gradientShift 7s ease infinite,
		gradientPulse 3.5s ease-in-out infinite;
}
@keyframes gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes gradientPulse {
	0%, 100% { opacity: 0.75; }
	50%      { opacity: 1; }
}

/* ----- the gif: stretches / squishes on the vertical axis ----- */
.xmeme-img {
	display: block;
	width: 100%;
	height: auto;
	border: none;
	/* box-shadow: 0 10px 30px rgba(0,0,0,0.35); */
	transform-origin: center center;
	animation: vstretch 1.4s ease-in-out infinite;
}
@keyframes vstretch {
	0%, 100% { transform: scaleY(1); }
	25%      { transform: scaleY(1.88); }
	60%      { transform: scaleY(0.66); }
}

/* ----- spinning lines: one clockwise, one counter-clockwise ----- */
.spin-line {
	position: absolute;
	z-index: -2;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 6px;
	margin: -3px 0 0 -75%;
	border-radius: 6px;
	pointer-events: none;
}
.spin-cw {
	background: linear-gradient(90deg, transparent, #ffff00, transparent);
	animation: spinCW 6s linear infinite;
}
.spin-ccw {
	background: linear-gradient(90deg, transparent, #00e436, transparent);
	animation: spinCCW 9s linear infinite;
}
@keyframes spinCW  { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }

/* ============================================================
   Captions (top / bottom) — classic Impact meme look.
   Text is animated via CSS so it "changes" without JS.
   ============================================================ */
.cap {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-family: Impact, "Arial Black", monospace;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	-webkit-text-stroke: 2px #000;
	text-shadow:
		2px 2px 0 #000, -2px 2px 0 #000,
		2px -2px 0 #000, -2px -2px 0 #000;
	font-size: clamp(1.4rem, 6vw, 2.6rem);
	letter-spacing: 1px;
	padding: 0 0.3em;
	pointer-events: none;
}
.cap-top    { top: 8px; }
.cap-bottom { bottom: 8px; }

/* ::after holds the words; content cycles through values.
   Default words match caption-top="sharky go" / caption-bottom="spinnnn" */
.cap::after {
	display: inline-block;
	animation-duration: 6s;
	animation-timing-function: steps(1, end);
	animation-iteration-count: infinite;
}

.cap-top::after {
	content: "sharky go";
	animation-name: capTopText, capBounce;
	animation-duration: 6s, 1.8s;
	animation-timing-function: steps(1, end), ease-in-out;
	animation-iteration-count: infinite, infinite;
}
.cap-bottom::after {
	content: "spinnnn";
	animation-name: capBottomText, capBounce;
	animation-duration: 6s, 2.1s;
	animation-timing-function: steps(1, end), ease-in-out;
	animation-iteration-count: infinite, infinite;
}

@keyframes capTopText {
	0%   { content: "sharky go"; }
	33%  { content: "sharky GOOO"; }
	66%  { content: "haiiiii"; }
}
@keyframes capBottomText {
	0%   { content: "spinnnn"; }
	33%  { content: "spinnnnnn"; }
	66%  { content: "SPINNN!!!"; }
}
@keyframes capBounce {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-4px) rotate(1deg); }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; }
}