/* @layer globals {} */
html,
body {
	overflow: hidden;
}

body {
	display: flex;
	flex-direction: column;
}

/* @layer components {} */
.img-slider {
	.img-slide {
		transform: scale(1.04);
		animation: slowZoom 14s ease-in-out infinite alternate;
	}

	/* Slides 2-4 loaded lazily via JS */
	.slide-1 {
		background-image: url('../images/home/slide-1.webp');
	}
}

.social-strip {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	opacity: 0;
	animation: fadeIn 1s ease 1.5s forwards;

	&::before,
	&::after {
		content: '';
		display: block;
		width: 1px;
		height: 40px;
		background: linear-gradient(to bottom, transparent, var(--gold-light));
	}

	&::after {
		background: linear-gradient(to top, transparent, var(--gold-light));
	}

	@media (width < 768px) {
		display: none;
	}

	a {
		width: 32px;
		height: 80px;
		padding-left: 4px;
		font-family: 'Jost', sans-serif;
		font-size: 0.68rem;
		letter-spacing: 0.3em;
		font-weight: 400;
		text-transform: uppercase;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gold-light);
		text-decoration: none;
		transform: rotate(90deg);
		transition: color 0.2s;

		&:hover {
			color: var(--gold);
		}
	}
}

.hero-text {
	padding: 0 40px 56px;

	@media (width < 1024px) {
		padding: 0 40px 36px;
	}

	@media (width < 768px) {
		padding: 0 28px 40px;
	}

	.hero-subtitle {
		margin-bottom: 18px;
		opacity: 0;
		transform: translateY(16px);
		animation: fadeUp 0.9s ease 0.4s forwards;
	}

	.hero-title {
		opacity: 0;
		transform: translateY(20px);
		animation: fadeUp 1s ease 0.6s forwards;

		@media (width > 1024px) {
			font-size: clamp(2.4rem, 5.5vw, 5rem);
		}
	}

	.hero-tagline {
		font-size: clamp(1.1rem, 2vw, 1.5rem);
		margin-top: 16px;
		opacity: 0;
		transform: translateY(16px);
		animation: fadeUp 0.9s ease 0.8s forwards;
	}
}

footer {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 40px 56px;
	padding-bottom: max(44px, calc(44px + env(safe-area-inset-bottom)));
	opacity: 0;
	animation: fadeIn 1s ease 1.3s forwards;

	@media (width < 1024px) {
		padding: 0 40px 36px;
	}

	@media (width < 768px) {
		padding: 0 28px 40px;
	}

	p {
		font-family: 'Jost', sans-serif;
		font-size: 0.62rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--gold-dim);
	}

	address {
		font-family: 'Jost', sans-serif;
		font-style: normal;
		font-size: 0.8rem;
		color: var(--text-secondary);
		letter-spacing: 0.03em;
		line-height: 1.6;
	}
}

@keyframes slowZoom {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.06);
	}
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}