@font-face {
	font-family: "Shrikhand";
	src: url("../ttf/Shrikhand-Regular.woff2") format("woff2"),
	     url("../ttf/Shrikhand-Regular.ttf") format("truetype");
}

html, body {
	width:100%;
	height:100%;
}

body {
	margin:0;
	display:flex;
	overflow-x:hidden;
	position:relative;
	background: #f6a6c1;
}

/* The drifting gradient lives on its own layer and moves with transform, so the
   GPU animates it instead of the whole page being repainted every frame.
   Same geometry as the old body background (400% size, position 0%→100% at 50%). */
.bg {
	position:fixed;
	top:-150%;
	top:-150svh;
	left:0;
	width:400%;
	height:400%;
	height:400svh;
	z-index:-1;
	pointer-events:none;
	background: linear-gradient(-45deg, #94BBE9, #f6a6c1, #ffd1dc, #b98be0);
	animation: drift 18s ease infinite;
}

@keyframes drift {
	0% { transform: translateX(0); }
	50% { transform: translateX(-75%); }
	100% { transform: translateX(0); }
}

body::before,
body::after {
	content:"";
	position:fixed;
	border-radius:50%;
	filter:blur(80px);
	opacity:0.55;
	z-index:0;
	pointer-events:none;
}

body::before {
	width:420px;
	height:420px;
	top:-120px;
	left:-100px;
	background:#ff8fb1;
	animation: float1 14s ease-in-out infinite;
}

body::after {
	width:380px;
	height:380px;
	bottom:-140px;
	right:-100px;
	background:#8fc4ff;
	animation: float2 16s ease-in-out infinite;
}

@keyframes float1 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(60px, 40px); }
}

@keyframes float2 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-50px, -30px); }
}

main {
	position:relative;
	z-index:1;
	margin:auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:20px;
}

h1 {
	font-family: "Shrikhand", sans-serif;
	background: #e0526a;
	background: linear-gradient(180deg, #ffc1cc 0%, #ff7d95 28%, #e8465a 58%, #c4283f 100%);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	font-size:clamp(1.6rem, 4vw + 1rem, 7rem);
	padding:0.2em 0.25em;
	margin:auto;
	position:relative;
	text-align:center;
	line-height:1.1;
	letter-spacing:1px;
	-webkit-text-stroke:0.02em rgba(255,255,255,0.98);
	paint-order:stroke fill;
	text-shadow:0 0.08em 0 rgba(196,16,31,0.18), 0 0.18em 0.3em rgba(196,16,31,0.3);
	animation: wiggle 7s ease-in-out infinite;
}

@keyframes wiggle {
	0%, 100% { transform: rotate(-1.5deg); }
	50% { transform: rotate(1.5deg); }
}

.falling-strawberries {
	position:fixed;
	inset:0;
	overflow:hidden;
	z-index:0;
	pointer-events:none;
}

.falling-strawberries .berry {
	position:absolute;
	top:0;
	left:var(--x);
	width:var(--size);
	height:var(--size);
	background:url("../img/strawberry.svg") no-repeat center/contain;
	opacity:var(--opacity);
	animation:fall var(--duration) linear var(--delay) infinite;
}

@keyframes fall {
	0% { transform:translateY(-10vh) rotate(var(--rot)); }
	100% { transform:translateY(110vh) rotate(calc(var(--rot) + var(--spin))); }
}

.twitch-wrap {
	position:relative;
	z-index:1;
	width:min(90vw, 620px);
	margin:40px auto 0;
}

.embed-frame {
	border-radius:16px;
	overflow:hidden;
	border:2px solid rgba(255,255,255,0.7);
	box-shadow:0 4px 16px rgba(0,0,0,0.12);
	background:rgba(255,255,255,0.35);
	line-height:0;
}

/* 16:9 matches the stream, so the player scales with the page without black bars */
#twitch-embed {
	aspect-ratio:16 / 9;
}

.embed-frame iframe {
	display:block;
	width:100%;
	height:100%;
}

.live-badge {
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:6px 16px;
	white-space:nowrap;
	border-radius:999px;
	background:rgba(255,255,255,0.9);
	border:2px solid rgba(255,255,255,0.9);
	box-shadow:0 4px 10px rgba(0,0,0,0.15);
	line-height:1;
	font-family:sans-serif;
	font-weight:700;
	font-size:13px;
	letter-spacing:0.5px;
	text-transform:uppercase;
	color:#c4101f;
}

.live-badge .dot {
	width:9px;
	height:9px;
	border-radius:50%;
	background:#ff2d3d;
	animation:pulse-dot 1.6s ease-out infinite;
}

@keyframes pulse-dot {
	0% { box-shadow:0 0 0 0 rgba(255,45,61,0.55); }
	70% { box-shadow:0 0 0 8px rgba(255,45,61,0); }
	100% { box-shadow:0 0 0 0 rgba(255,45,61,0); }
}

.links {
	list-style:none;
	margin:10px 0 0;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	width:min(90vw, 320px);
}

@media (min-width:640px) {
	.links {
		grid-template-columns:1fr 1fr;
		width:min(90vw, 620px);
	}
}

.link {
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 20px;
	border-radius:14px;
	background:rgba(255,255,255,0.55);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border:2px solid rgba(255,255,255,0.7);
	box-shadow:0 4px 16px rgba(0,0,0,0.08);
	color:#5a3352;
	font-family:sans-serif;
	font-weight:600;
	font-size:18px;
	text-decoration:none;
	transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.link::after {
	content:"";
	position:absolute;
	right:6px;
	top:50%;
	width:108px;
	height:108px;
	background:url("../img/strawberry.svg") no-repeat center/contain;
	opacity:0.22;
	transform:translateY(-50%) rotate(-14deg);
	transition:transform 0.2s ease, opacity 0.2s ease;
	pointer-events:none;
}

.link:hover {
	transform:translateY(-3px) scale(1.02);
	background:rgba(255,255,255,0.8);
	box-shadow:0 8px 22px rgba(0,0,0,0.14);
}

.link:hover::after {
	opacity:0.32;
	transform:translateY(-50%) rotate(-4deg) scale(1.08);
}

.link svg {
	width:26px;
	height:26px;
	flex-shrink:0;
	fill:currentColor;
}

.link.twitch { color:#6441a5; }
.link.youtube { color:#ff0000; }
.link.instagram { color:#c1327a; }
.link.x { color:#000000; }
.link.tiktok { color:#fe2c55; }