/*
 * Spacca - Home (front-page)
 * 1) Full screen + decorative background + dark veil
 * 2) Transparent fixed header / footer (16px from the edges)
 * 3) Centered infinite cover marquee (vanilla, height-based covers)
 * 4) Cover label / overlay (veil + scale on the inner element)
 * 5) Intro (logo composing, then flying into the header; once per session)
 *
 * Project breakpoints: mobile <=767px, tablet 768-1023px, desktop >=1024px.
 */

/* 1) Full screen + background --------------------------------------------- */
body.home {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background-color: var(--text);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

body.home::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--overlay);
}

@media (max-width: 767px) {
	body.home {
		background-image: url("../img/ponte-diy.webp");
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.home {
		background-image: url("../img/diy-building.webp");
	}
}

@media (min-width: 1024px) {
	body.home {
		background-image: url("../img/ro-sham-bo-ponte.webp");
	}
}

/* 2) Footer (transparent, fixed at the bottom over the background) --------- */
.home .site-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	max-width: none;
	margin: 0;
	padding: 16px;
	background: transparent;
	color: var(--white);
}

.home .site-footer,
.home .site-footer a,
.home .site-footer__copy {
	color: var(--white);
}

.home .site-footer a:hover {
	color: var(--text-hover);
}

.home .site-footer__inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--white);
}

/* 3) Carousel -------------------------------------------------------------- */
.home .site-main {
	position: relative;
	z-index: 1;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(88px, 13vh, 132px);
}

.spacca-carousel {
	--cover-h: 50vh;
	width: 100%;
	overflow: hidden;
}

.spacca-carousel__track {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 44px);
	width: max-content;
	will-change: transform;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.spacca-carousel__track:active {
	cursor: grabbing;
}

.spacca-cover {
	flex: 0 0 auto;
	height: var(--cover-h);
	display: block;
}

.spacca-cover__media {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s ease;
}

.spacca-cover__img {
	height: 100%;
	width: auto;
	display: block;
	-webkit-user-drag: none;
}

/* 4) Label / overlay ------------------------------------------------------- */
.spacca-cover__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--white);
	background: var(--overlay);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.spacca-cover__issue {
	font-family: var(--font-inter);
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
}

.spacca-cover__season {
	font-family: var(--font-inter);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
	.spacca-cover:hover .spacca-cover__label {
		opacity: 1;
	}

	.spacca-cover:hover .spacca-cover__media {
		transform: scale(0.98);
	}
}

/* Touch: overlay hidden by default, appears on tap (then the link navigates). */
.spacca-cover:active .spacca-cover__label {
	opacity: 1;
}

.spacca-cover:active .spacca-cover__media {
	transform: scale(0.98);
}

.spacca-cover__label--static {
	opacity: 1;
}

/* Placeholder (Issue 4 without a cover) */
.spacca-cover--placeholder .spacca-cover__media {
	width: calc(var(--cover-h) * 0.69);
	background: var(--bg-alt);
}

.spacca-cover--placeholder .spacca-cover__label {
	background: none;
	color: var(--text);
}

.spacca-cover--placeholder .spacca-cover__season {
	color: var(--text-muted);
}

/* 5) Intro -----------------------------------------------------------------
   Once per session, before the home shows: the logo composes from left to
   right on the dark background, then flies into the header logo's place
   while the background fades out. html.spacca-intro-on is set in the <head>
   (functions.php) before the first paint; without it (no JS, reduced motion,
   already seen in this session) the intro never appears. The flight itself
   is computed in home.js, since the header logo's size and position change
   with the screen. */
.spacca-intro {
	display: none;
}

.spacca-intro-on .spacca-intro {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--text);
	transition: background-color 0.8s ease;
}

.spacca-intro__logo {
	display: block;
	width: min(70vw, 560px);
	transform-origin: 0 0;
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.spacca-intro__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.spacca-intro-on .spacca-intro__logo svg {
	animation: spacca-intro-compose 1s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes spacca-intro-compose {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* The header logo waits hidden: the intro logo lands exactly on top of it. */
.spacca-intro-on .site-header__logo {
	visibility: hidden;
}

.spacca-intro-on .spacca-intro.is-leaving {
	background-color: transparent;
	pointer-events: none;
}