@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* {
	padding: 0;
	margin: 0;
}
html {
	font-size: 62.5%;
	font-family: "Poppins", sans-serif;
}

/* Performance & timing vars */
:root {
	--easing-standard: cubic-bezier(.4,0,.2,1);
	--easing-emphasized: cubic-bezier(.22,1,.36,1);
	--t-fast: .28s;
	--t-medium: .55s;
	--t-slow: .9s;
}

/* Hero desaturation control: 0.15 ~= 85% desaturated visually */
:root {
	--hero-desat: 0.85;
	--hero-desat-transition: var(--t-medium);
}

.wrapper-slider {
	position: relative;
	/* Shift upward to reclaim the body top padding (header height + extra spacing) so slider sits behind the header */
	top: calc(-1 * (var(--site-header-height) + 2rem));
	left: 0;
	width: 100%;
	height: 100vh; /* full viewport; header overlays top portion */
	margin: 0; /* eliminate vertical gaps */
	color: #262626;
	background: var(--mainbg);
	overflow: clip;
	/* Only height transitions (avoid 'all') */
	transition: height var(--t-medium) var(--easing-standard);
	/* Avoid keeping will-change permanently (can cause memory bloat). Add only when a collapse is imminent via a JS class if desired. */
}
	/* NORMAL STATE */
	.parent-text {
		/*position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
		padding: 0 2rem;
		text-align: center;
		z-index: 2;
		color: white;
		transition: all 0.6s ease;*/
		position: absolute;
		top: 50%; /* start at vertical center */
		left: 50%;
		transform: translate(-50%, -50%); /* perfect centering */
		text-align: center;
		z-index: 2;
		color: white;
		transition: all 0.6s ease;
	}

	.parent-text h2 {
	  font-size: 7.9rem;
	  font-weight: 900;
	  /* Target only properties that actually animate */
	  transition:
	    font-size var(--t-medium) var(--easing-emphasized),
	    font-weight var(--t-medium) var(--easing-emphasized),
	    transform var(--t-medium) var(--easing-standard),
	    text-shadow var(--t-medium) var(--easing-standard),
	    opacity var(--t-fast) var(--easing-standard);
	  text-shadow: 0 0.5rem calc(7.9rem / 4) var(--icon-2-trans);
	  will-change: transform;
	  backface-visibility: hidden;
	}

	.parent-text p {
	  font-size: 4.1rem;
	  font-weight: 450;
	  transition:
	    font-size var(--t-medium) var(--easing-emphasized),
	    font-weight var(--t-medium) var(--easing-emphasized),
	    transform var(--t-medium) var(--easing-standard),
	    text-shadow var(--t-medium) var(--easing-standard),
	    opacity var(--t-fast) var(--easing-standard);
	  text-shadow:
	    0 .1rem calc(4.1rem / 4) var(--icon-2-trans),
	    0 1rem  calc(4.1rem / 2) var(--icon-2-trans);
	  will-change: transform;
	  backface-visibility: hidden;
	}

.swiper,
.swiper-wrapper,
.swiper-slide {
	height: 100% !important; /* force reflow */
}

/* Containment to reduce paint / layout cost for each slide */
.swiper-slide {
	contain: layout paint style;
	content-visibility: auto;
	/* Helps skip rendering off-screen slides in supporting browsers */
}


.item {
	position: relative;
	width: 100%;
	height: 100% !important; /* force reflow */
}
.item picture,
.item .video,
.item video,
.item picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: -webkit-optimize-contrast;
	transform: translateZ(0); /* promote to its own layer */
	will-change: transform; /* only transform for smoother 120Hz motion */
}

/* Lazy image transition */
img.lazy-img {
	filter: blur(18px) saturate(120%);
	transform: scale(1.02);
	opacity: .55;
	transition: filter .6s var(--easing-standard), opacity .6s var(--easing-standard), transform .9s var(--easing-emphasized);
}
img.lazy-img.is-loaded {
	filter: blur(0) saturate(100%);
	opacity: 1;
	transform: scale(1);
}
video.lazy-video { opacity: 0; transition: opacity .6s var(--easing-standard); }
video.lazy-video[src] { opacity: 1; }

/* Desaturate only elements inside the document's <main> container.
	 This keeps the hero slider and header fully saturated while applying
	 the muted aesthetic to the main content (showcases, product images, etc.). */
main img,
main picture img,
main video,
main .product-half,
main .split-pair figure img {
	transition: filter var(--hero-desat-transition) var(--easing-standard), opacity var(--t-fast) var(--easing-standard);
	filter: saturate(var(--hero-desat)) contrast(.98);
}

/* Restore saturation when the area is interacted with (hover/focus-within) */
main:hover img,
main:focus-within img,
main:hover picture img,
main:focus-within picture img,
main:hover video,
main:focus-within video,
main:hover .product-half,
main:focus-within .product-half {
	filter: saturate(1) contrast(1);
}



.wrapper-slider.scrolled {
	height: 54vh; /* slightly tighter when collapsed */
}
	/* ALTerED STATE */
	.wrapper-slider.scrolled .parent-text {
		/*justify-content: flex-end;
		align-items: center;
		padding-bottom: 6rem; 
		text-align: center;*/
		top: auto;       /* unset center */
		bottom: 6rem;    /* stick to bottom */
		left: 50%;
		transform: translate(-50%, 0); /* slide down smoothly */
		transition: all 0.6s ease;
	}

	.wrapper-slider.scrolled .parent-text h2 {
	  font-size: 2.4rem;
	  font-weight: 450;
	  /* Slight opacity easing for smoother perception on high refresh */
	  opacity: .95;
	}

	.wrapper-slider.scrolled .parent-text p {
	  font-size: 1.6rem;
	  font-weight: 200;
	  opacity: .9;
	}

	.wrapper-slider.scrolled .parent-text a {
		transform: scale(0.85);
	}
	.wrapper-slider.scrolled .glow-button {
		transform: scale(0.65);
	}

	.wrapper-slider.scrolled .dual-button {
		transform: scale(0.65);
	}
	.swiper-pagination {
		width: 100%;
		bottom: 5rem;
		display: flex;
		align-items: center;
		gap: .5rem;
		font-size: 1.4rem;
		font-weight: 500;
		padding-inline: 4rem;
		.svg-icon {
			width: 1.5rem;
			height: 1.5rem;
			path {
			 	fill: var(--icon-5);
			}
		}
		.swiper-pagination-bullet {
			color: var(--icon-1);
			opacity: .77;
			width: initial;
			height: initial;
			background: transparent;
			button {
				background: transparent;
				border: 0;
				display: flex;
				cursor: pointer;
			}
		}
		.bullet-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.icon {
			position: absolute;
			z-index: 1;
		}
	}

/* Glow line: consolidate shadows (fewer large blurs -> cheaper) */
.glow-line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .3rem;
	background: linear-gradient(90deg,var(--theme),var(--icon-2) 60%,var(--theme));
	box-shadow: 0 0 12px var(--theme), 0 0 28px var(--theme);
	z-index: 3;
	transition: opacity var(--t-medium) var(--easing-standard), filter var(--t-slow) var(--easing-standard);
	mix-blend-mode: var(--glow-blend2);
	will-change: opacity, filter;
}

.glow-line

.percentage {
	width: 3.4rem;
	aspect-ratio: 1;
	mask: radial-gradient(transparent 55%, black 60% 100%);
	-webkit-mask: radial-gradient(transparent 55%, black 60% 100%);
	transition: opacity var(--t-fast) var(--easing-standard), transform var(--t-fast) var(--easing-standard);
	opacity: 0;
	background: conic-gradient(transparent 0, transparent var(--p), #c9d6d7 0),
							conic-gradient(var(--icon-4), var(--icon-2)),
							conic-gradient(transparent, transparent 10%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: opacity, transform;

	&.show { opacity: 1; transform: translateZ(0); }
	.number {
		width: 80%;
		aspect-ratio: 1;
		display: inherit;
		align-items: inherit;
		justify-content: inherit;
		background: white;
		border-radius: inherit;
		font-size: 16px;
		font-style: normal;
		font-weight: 800;
		line-height: 24px;
		color: var(--color13);
	}
}

/* High refresh rate (120Hz+) subtle improvement: prefer shorter, more direct easing where continuous motion is present */
@media (min-width: 480px) { /* arbitrary scope */
	.wrapper-slider:not(.scrolled) .parent-text h2,
	.wrapper-slider:not(.scrolled) .parent-text p {
		transition-timing-function: var(--easing-emphasized);
	}
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	.wrapper-slider,
	.parent-text h2,
	.parent-text p,
	.glow-line,
	.percentage { transition: none !important; animation: none !important; }
}

/* Ensure slider UI (SVG loading bar, play/pause controls, pagination) remain vivid
	 and are not affected by the page-level desaturation rules. These rules are
	 intentionally specific and use !important where necessary because some
	 controls are rendered via JS and inline SVGs that inherit filters. */
.wrapper-slider .percentage,
.wrapper-slider .percentage *,
.wrapper-slider svg,
.wrapper-slider .glow-button,
.wrapper-slider .play-button,
.wrapper-slider .pause-button,
.wrapper-slider .swiper-pagination-bullet,
.wrapper-slider .swiper-pagination-bullet * {
	filter: none !important;
	opacity: 1 !important;
	mix-blend-mode: normal !important;
}

/* Force a solid, readable gradient for the circular percentage loader */
.wrapper-slider .percentage {
	background: conic-gradient(transparent 0, transparent var(--p), #c9d6d7 0), conic-gradient(var(--icon-4), var(--icon-2)), conic-gradient(transparent, transparent 10%);
	background-blend-mode: normal;
	-webkit-mask: none; /* avoid mask interactions when browsers composite filters */
	mask: none; /* standard property for compatibility */
}

/* Make SVG icons inherit a clear color and fill from theme vars */
.wrapper-slider svg { color: var(--icon-2); fill: currentColor; }

/* Restore color to common control buttons (class names used by slider or custom controls) */
.wrapper-slider .glow-button,
.wrapper-slider .play-button,
.wrapper-slider .pause-button,
.wrapper-slider .dual-button {
	color: var(--icon-2) !important;
	background: linear-gradient(90deg, var(--gr1), var(--gr2)) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
}

/* Pagination bullets: ensure visible fill */
.wrapper-slider .swiper-pagination-bullet {
	background: transparent !important;
}
.wrapper-slider .swiper-pagination-bullet-active { opacity: 1 !important; }