:root{
	--page-max: min(1080px, 100vw);
}

html, body{ height:100%; }

body{
    display: grid;
    margin-top: 6%;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    justify-items: center;
    align-content: center;
    gap: 0.5vh;
	background-color: var(--bg);
}
*, *::before, *::after{
	box-sizing: border-box;
}

/* override only the home page body */
.page-home{
	display:flex;				/* was grid */
	flex-direction:column;
	min-height:100dvh;			/* accounts for mobile UI chrome */
	align-items:stretch;		/* let children take full width */
	margin-top:0;				/* remove the % offset so layout is stable */
}

.page-home .theme-switch{
	position: fixed;
	top: 12px;
	right: 12px;
	left: auto;           /* <-- important: cancel any left positioning */
	z-index: 1000;        /* above the hero/banner */
}

/* reuse brand header sizing */
.brand-wrap{
	position: relative;
	width: var(--page-max, min(1080px, 100vw));
	aspect-ratio: 1080 / 320;
	margin: 8vh auto;
}
.banner{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}
.brand{
	position: absolute;
	left: 3%;
	top: 9%;
	max-width: 100%;
	height: auto;
	width: auto;
	z-index: 2;
	pointer-events: none;
}

/* Minecraft-style splash text */
.splash{
	font-family: grapeSoda, system-ui, sans-serif;
	font-size: 40px;
	position: absolute;
	right: 32px;
	top: 32px;
	z-index: 3;
	
	/* no bubble */
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
    
	background: none;
	color: #fff;
	transform: rotate(-8deg) translate(-50%, -50%);
	animation: bob 2.4s ease-in-out infinite;
	white-space: pre-line;
	
	/* tight glow that hugs the text */
	/* first few are subtle “stroke-ish” edges, then brighter outer bloom */
	/*text-shadow:
        -1px -1px 0 var(--accent-stroke),
         0   -1px 0 var(--accent-stroke),
         1px -1px 0 var(--accent-stroke),
         1px  0   0 var(--accent-stroke),
         1px  1px 0 var(--accent-stroke),
         0    1px 0 var(--accent-stroke),
        -1px  1px 0 var(--accent-stroke),
        -1px  0   0 var(--accent-stroke),
		0 0 2px  var(--button),
		0 0 4px  var(--button),
		0 0 14px var(--button)
    ;*/
    text-shadow: -2px 4px 0 var(--accent-stroke);
}

/* gentle bob and tiny scale pulse */
@keyframes bob{
	0%,100%{ transform: rotate(8deg); }
	50%{ transform: rotate(-16deg); }
}

/* prefers-reduced-motion: keep static */
@media (prefers-reduced-motion: reduce){
	.splash{ animation: none; }
}
@media (max-width: 640px){
	.home-hero{
		animation: none;
		border-radius: 0;
		box-shadow: none;
	}
	/* tighten page top spacing so content lands earlier */
	page-home{ margin-top: 12px; }
	.splash{
		top: 24px;
		font-size: 22px;
	}
}

/* full-bleed backdrop behind the page (no interaction) */
.home-hero{
	margin-bottom: 3.5vh;
	position: fixed;
	inset: 0;
	z-index: -5;
	background: #000 center/cover no-repeat;
	/* slow horizontal pan, ping-ponging forever */
	animation: hero-pan var(--hero-pan-duration, 90s) linear infinite alternate;
	border-radius: 8vw;
	box-shadow:
		inset 0 0 8vw var(--bg),
		inset 0 0 2vw var(--bg)
		;
}

/* pan from far left to far right; cover ensures no empty edges */
@keyframes hero-pan{
	from { background-position:   0% 50%; }
	to   { background-position: 100% 50%; }
}

/* tweak speed per theme if you want */
html[data-theme="spooky"] .home-hero{ --hero-pan-duration: 70s; }
html[data-theme="light"]  .home-hero{ --hero-pan-duration: 100s; }


/* main quick links */
.home-main{
	flex: 1 0 auto;
	width: var(--page-max, min(1080px, 100vw));
	margin: 1vh auto;
	padding-inline: clamp(8px, 2vw, 16px);
}
.cta-grid{
	display: grid;
	justify-content: center;
	justify-self: center;
	width: 50%;
	grid-template-columns: 1fr;
	gap: 1vh;
}
.cta{
	max-width: 100%;
	display: grid;
	justify-content: center;
	gap: 0.2vh;
	padding: 1vh 0.5vw;
	border-radius: 0.5vw;
	text-decoration: none;
	color: #fff;
	position: relative;
	overflow: hidden;
	background: transparent;
	transition: transform .08s ease, color .08s ease, border-color .08s ease;
}
.cta::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent-stroke);
	opacity: 0.78;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
}
.cta:hover{
	transform: translateY(-0.2vw);
	color: var(--button);
	border-color: var(--accent);
}
.cta-title{
	font-family: grapeSoda, system-ui, sans-serif;
	font-size: clamp(18px, 6vw, 24px);
	justify-self: center;
}
.cta-hint{
	font-size: 14px;
	color: #feec;
	justify-self: center;
}

/* responsive nudge for smaller screens */
@media (max-width: 640px){
	.splash{
		top: 24px;
		font-size: 22px;
	}
	.brand{ height: 92px; }
}

footer{
	display: flex;
	justify-content: center;
	padding: 0.5vh;
	position: static;
	margin-top: auto;
}