/* ==========================================
   HOMEPAGE HERO — ANIMATED GRADIENT ONLY
========================================== */

.home .wp-block-cover:first-of-type {
	position: relative !important;
	isolation: isolate !important;
	overflow: hidden !important;
	background: #f4f1ec !important;
}

/* ==========================================
   CANVAS BACKGROUND
========================================== */

.home #mg-three-hero {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	z-index: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: none !important;
}

.home #mg-three-hero canvas,
.home canvas#mg-three-hero {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/* ==========================================
   KEEP HERO TEXT ABOVE CANVAS
========================================== */

.home .wp-block-cover:first-of-type > .wp-block-cover__inner-container {
	position: relative !important;
	z-index: 5 !important;
}

/* ==========================================
   REMOVE WORDPRESS OVERLAY
========================================== */

.home .wp-block-cover:first-of-type > .wp-block-cover__background {
	background: transparent !important;
	background-color: transparent !important;
	opacity: 0 !important;
}

/* ==========================================
HERO TO SELECTED WORK — SMOOTH TRANSITION
========================================== */

.home .wp-block-cover:first-of-type {
--hero-content-opacity: 1;
--hero-content-y: 0px;
--hero-content-blur: 0px;
--hero-gradient-opacity: 1;
--hero-gradient-scale: 1;


position: relative !important;
isolation: isolate !important;
overflow: hidden !important;


}

/* Fade the gradient into the white section below */
.home .wp-block-cover:first-of-type::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: clamp(130px, 18vh, 220px);
z-index: 4;
pointer-events: none;


background: linear-gradient(
	to bottom,
	rgba(255, 255, 255, 0) 0%,
	rgba(255, 255, 255, 0.10) 22%,
	rgba(255, 255, 255, 0.48) 62%,
	#ffffff 100%
);


}

/* Fade and lift all hero content */
.home .wp-block-cover:first-of-type
.wp-block-cover__inner-container {
opacity: var(--hero-content-opacity) !important;
translate: 0 var(--hero-content-y);
filter: blur(var(--hero-content-blur));
will-change: opacity, translate, filter;
}

/* Make sure your social links also leave smoothly */
.home .wp-block-cover:first-of-type .hero-socials-row,
.home .wp-block-cover:first-of-type .scroll-indicator {
opacity: var(--hero-content-opacity) !important;
translate: 0 var(--hero-content-y);
will-change: opacity, translate;
}

/* Fade and gently enlarge the animated gradient */
.home #mg-three-hero {
opacity: var(--hero-gradient-opacity) !important;
transform: scale(var(--hero-gradient-scale)) !important;
transform-origin: center center !important;
will-change: opacity, transform;
}

/* Selected Work starts slightly lower only when JS is active */
html.mg-scroll-transition-ready
.home .selected-work-section {
opacity: var(--work-opacity, 0);
translate: 0 var(--work-y, 70px);
will-change: opacity, translate;
}

/* Prevent animation for users who disable motion */
@media (prefers-reduced-motion: reduce) {
.home .wp-block-cover:first-of-type
.wp-block-cover__inner-container,
.home .wp-block-cover:first-of-type .hero-socials-row,
.home .wp-block-cover:first-of-type .scroll-indicator,
.home #mg-three-hero,
html.mg-scroll-transition-ready
.home .selected-work-section {
opacity: 1 !important;
translate: none !important;
transform: none !important;
filter: none !important;
}
}