/* Homepage — loaded only on the front page. */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--deep-purple);
}
.hero-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
	/* The poster is the permanent image under reduced-motion and on slow
	   connections, so this element must look finished without a video. */
	background: var(--deep-purple);
}
.hero-overlay {
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(26,11,46,.45) 0%, rgba(0,0,0,.25) 45%, rgba(26,11,46,.55) 100%);
}
.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--white);
	padding: 120px 20px 20px;
	max-width: 900px;
}
.hero h1 {
	font-size: clamp(2.4rem, 7vw, 4.5rem);
	color: var(--white);
	text-shadow: 0 4px 15px rgba(0,0,0,.8);
	margin: 0 0 18px;
	text-wrap: balance;
}
.hero p {
	font-size: clamp(1.05rem, 2.4vw, 1.5rem);
	text-shadow: 0 2px 4px rgba(0,0,0,.8);
	margin: 0 auto 34px;
	max-width: 620px;
}

/* --- Intro panel --- */
.intro-section {
	padding: var(--space-section) 10%;
	background: linear-gradient(180deg, var(--white) 0%, var(--light-purple) 100%);
}
.glass-panel {
	display: flex;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
	overflow: hidden;
	min-height: 450px;
	border: 1px solid rgba(0,0,0,.05);
}
.intro-image-container { width: 50%; }
.intro-image-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-text {
	width: 50%;
	padding: clamp(30px, 5vw, 70px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.intro-text h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--deep-purple); }
.intro-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 0 0 22px; text-wrap: balance; }
.intro-text p { font-size: 1.08rem; color: #555; line-height: 1.8; margin: 0 0 32px; }

.catalog { background: var(--white); }

/* --- Parallax --- */
.parallax-section {
	background-image: url('/wp-content/uploads/2026/01/world.png');
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 50px;
}
.parallax-content {
	position: relative;
	z-index: 2;
	width: 50%;
	margin-right: 8%;
	text-align: right;
	padding: 50px;
	background: rgba(255,255,255,.88);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(10px);
	box-shadow: 0 15px 35px rgba(0,0,0,.1);
}
.parallax-content h2 { font-size: clamp(2rem, 5vw, 3.5rem); color: var(--gold-dark); margin: 0 0 22px; }
.parallax-content p { font-size: 1.2rem; line-height: 1.6; color: #444; margin: 0 0 34px; }

/* --- Closing CTA --- */
.magic-cta {
	display: flex;
	align-items: center;
	gap: 40px;
	background: linear-gradient(135deg, #ffffff 0%, #FFF8E1 100%);
	padding: var(--space-section) 5%;
	border-top: 1px solid var(--hairline);
}
.magic-text { flex: 1; }
.magic-text h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 18px; text-wrap: balance; }
.magic-text p { color: var(--text-muted); font-size: 1.08rem; line-height: 1.7; margin: 0 0 30px; }
.magic-image {
	flex: 1;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.blob-video {
	width: 80%; height: 80%;
	object-fit: cover;
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	box-shadow: 0 20px 50px rgba(255,215,0,.4);
	animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
	0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
	50%      { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; }
}

@media (max-width: 900px) {
	.intro-text h3 { font-size: 1rem; }
	.glass-panel { flex-direction: column; }
	.intro-image-container { width: 100%; height: 240px; }
	.intro-text { width: 100%; }
	.magic-cta { flex-direction: column-reverse; }
	.magic-image { width: 100%; height: 280px; }
}
@media (max-width: 768px) {
	.intro-section { padding: 50px 5%; }
	.parallax-section {
		background-attachment: scroll;
		min-height: 0;
		padding: 60px 5%;
		justify-content: center;
	}
	.parallax-content { width: 100%; margin: 0; text-align: center; padding: 30px 22px; }
}