/**
 * Transformation Section Styles
 * Section with gradient background and positioned images
 */

/* ============================================
   TRANSFORMATION SECTION
   ============================================ */

.transformation-section {
	position: relative;
	padding: 150px 0;
	min-height: 100vh;
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1080px;
}

.transformation-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
	z-index: 1;
}

/* ============================================
   CONTENT
   ============================================ */

.transformation-section .container {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.transformation-content {
	position: relative;
	z-index: 10;
	text-align: center;
	width: 100%;
	max-width: 800px;
	/* Do not rely on global container padding (it can be 0 in tokens) */
	padding: 0 clamp(20px, 4vw, 60px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s;
}

.transformation-content.animated {
	opacity: 1;
	transform: translateY(0);
}

.transformation-title {
	font-family: var(--font-family-h2);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	font-weight: var(--font-weight-h2);
	color: var(--color-text-primary);
	margin: 0;
}

.transformation-title .title-accent {
	color: var(--color-sky-pulse);
}

.transformation-description {
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-weight: var(--font-weight-regular);
	color: var(--color-steel-mist);
	margin: 0;
	width: clamp(280px, 40vw, 509px);
	max-width: 509px;
}

.transformation-actions {
	margin: 0;
}

/* ============================================
   POSITIONED IMAGES
   ============================================ */

.transformation-image {
	position: absolute;
	z-index: 2;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	pointer-events: none;
}

/* Fade in on animation; do not override per-image transforms */
.transformation-image.animated {
	opacity: 1;
}

/* NOTE:
 * We intentionally do NOT set a generic "transform: translateX(0)" for .animated here.
 * Each image has its own target transform so it stays clipped by viewport edges instead
 * of drifting towards the center on responsive widths.
 */

.transformation-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Top Left Image */
.image-top-left {
	width: clamp(120px, 12vw + 40px, 195.69px);
	height: clamp(165px, 16vw + 50px, 268.85px);
	left: clamp(20px, 17.7%, 230.16px);
	top: clamp(40px, 8vh, 150px);
	transform: translateX(-100%);
}

.image-top-left.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Bottom Left Image */
.image-bottom-left {
	width: clamp(150px, 18vw + 50px, 293px);
	height: clamp(200px, 24vw + 70px, 398px);
	left: clamp(30px, 15%, 336.49px);
	bottom: clamp(40px, 8vh, 150px);
	transform: translateX(-100%);
}

.image-bottom-left.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Top Right Image */
.image-top-right {
	width: clamp(140px, 16vw + 45px, 268.92px);
	height: clamp(170px, 20vw + 60px, 328.98px);
	right: clamp(20px, 17.7%, 230.16px);
	top: clamp(40px, 8vh, 150px);
	transform: translateX(100%);
}

.image-top-right.animated {
	opacity: 1;
	transform: translateX(0);
}

/* Bottom Right Image */
.image-bottom-right {
	width: clamp(130px, 15vw + 40px, 245.2px);
	height: clamp(160px, 19vw + 55px, 301.63px);
	right: 15%;
	bottom: clamp(40px, 8vh, 150px);
	transform: translateX(100%);
}

.image-bottom-right.animated {
	opacity: 1;
	transform: translateX(0);
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */

.transformation-decor {
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: opacity 1s ease-out 0.6s, transform 1s ease-out 0.6s;
	pointer-events: none;
}

.transformation-decor.animated {
	opacity: 1;
}

.transformation-decor img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.decor-left {
	width: clamp(150px, 20vw, 277.54px);
	height: clamp(150px, 20vw, 271.9px);
	left: 15%;
	top: clamp(210px, calc(25vh + 60px), 459px);
}

.decor-right {
	width: clamp(120px, 16vw, 226.04px);
	height: clamp(120px, 16vw, 221.45px);
	right: 15%;
	top: clamp(310px, calc(30vh + 110px), 606px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1600px) {
	.decor-left {
		width: clamp(150px, 20vw, 277.54px);
		height: clamp(150px, 20vw, 271.9px);
		left: 5%;
		top: 30%;
	}

	.decor-right {
		width: clamp(120px, 16vw, 226.04px);
		height: clamp(120px, 16vw, 221.45px);
		right: 5%;
		top: clamp(310px, calc(30vh + 110px), 606px);
	}

	.image-top-left {
		width: clamp(120px, 12vw + 40px, 195.69px);
		height: clamp(165px, 16vw + 50px, 268.85px);
		left: 5%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(-100%);
	}

	.image-top-right {
		width: clamp(140px, 16vw + 45px, 268.92px);
		height: clamp(170px, 20vw + 60px, 328.98px);
		right: 5%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(100%);
	}

	.image-bottom-left {
		width: clamp(150px, 18vw + 50px, 293px);
		height: clamp(200px, 24vw + 70px, 398px);
		left: 5%;
		bottom: clamp(40px, 8vh, 150px);
		transform: translateX(-100%);
	}

	.image-bottom-right {
		width: clamp(130px, 15vw + 40px, 245.2px);
		height: clamp(160px, 19vw + 55px, 301.63px);
		right: 5%;
		bottom: clamp(40px, 8vh, 150px);
		transform: translateX(100%);
	}
}

@media (max-width: 1440px) {
	.image-bottom-right {
		width: 200px;
		height: 250px;
		right: 10%;
		bottom: 8%;
		transform: translateX(100%);
	}

	.image-bottom-left {
		width: 260px;
		height: 320px;
		left: 10%;
		bottom: 5%;
	}
}

@media (max-width: 1200px) {
	.image-top-left {
		width: clamp(120px, 12vw + 40px, 195.69px);
		height: clamp(165px, 16vw + 50px, 268.85px);
		left: 0%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(-100%);
	}

	.image-top-right {
		width: clamp(140px, 16vw + 45px, 268.92px);
		height: clamp(170px, 20vw + 60px, 328.98px);
		right: 0%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(100%);
	}
}

@media (max-width: 1100px) {
	.decor-right {
		width: clamp(120px, 16vw, 226.04px);
		height: clamp(120px, 16vw, 221.45px);
		right: 0%;
		top: clamp(310px, calc(30vh + 110px), 606px);
	}

	.decor-left {
		width: clamp(150px, 20vw, 277.54px);
		height: clamp(150px, 20vw, 271.9px);
		left: 0%;
		top: 30%;
	}
}

@media (max-width: 1024px) {
	.transformation-section {
		padding: var(--spacing-4xl) 0;
	}
	
	.transformation-image {
		opacity: 0.7;
	}
	
	.image-top-left {
		width: clamp(120px, 12vw + 40px, 195.69px);
		height: clamp(165px, 16vw + 50px, 268.85px);
		left: 3%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(-100%);
	}
	
	.image-top-right {
		width: clamp(140px, 16vw + 45px, 268.92px);
		height: clamp(170px, 20vw + 60px, 328.98px);
		right: 3%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(100%);
	}
	
	.image-bottom-left {
		width: 260px;
		height: 320px;
		left: 4%;
		bottom: 5%;
	}
	
	.image-bottom-right {
		width: 200px;
		height: 250px;
		right: 4%;
		bottom: 8%;
		transform: translateX(100%);
	}
}

@media (max-width: 1000px) {
	.transformation-decor.animated {
		opacity: 0;
	}
}

@media (max-width: 768px) {
	.transformation-section {
		position: relative;
		padding: 150px 0;
		min-height: 100vh;
		overflow: hidden;
		background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1300px;
	}
	
	.transformation-image {
		opacity: 0.5;
	}
	
	.transformation-decor {
		display: none;
	}
	
	.transformation-content {
		padding: 0 var(--spacing-lg);
	}
	
	.image-top-left {
		width: 260px;
		height: 320px;
		left: 23%;
		top: clamp(40px, 8vh, 150px);
		transform: translateX(-100%);
	}
	
	.image-top-right {
		width: 200px;
		height: 260px;
		right: 23%;
		top: 7%;
		transform: translateX(100%);
	}
	
	.image-bottom-left {
		width: 260px;
		height: 320px;
		left: 23%;
		bottom: 5%;
	}
	
	.image-bottom-right {
		width: 200px;
		height: 250px;
		right: 23%;
		bottom: 8%;
		transform: translateX(100%);
	}
}

@media (max-width: 700px) {
	.image-top-right {
		width: clamp(140px, 16vw + 45px, 268.92px);
		height: clamp(170px, 20vw + 60px, 328.98px);
		right: 35%;
		top: 10%;
		transform: translateX(100%);
	}
	.image-top-left {
        width: 260px;
        height: 320px;
        left: 20%;
        top: clamp(40px, 8vh, 150px);
        /* transform: translateX(-100%); */
    }
	.transformation-section {
		position: relative;
		overflow: hidden;
		background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1260px;
	}
	.image-top-right {
        width: 200px;
        height: 250px;
        right: 20%;
        /* top: clamp(40px, 8vh, 150px); */
        transform: translateX(100%);
        top: 8%;
    }
	.image-bottom-left {
        width: 260px;
        height: 320px;
        left: 20%;
        bottom: 5%;
    }
	.image-bottom-right {
        width: 200px;
        height: 250px;
        right: 20%;
       
       
        bottom: 8%;
    }
}

@media (max-width: 465px) {
	.image-top-left {
		width: 260px;
		height: 320px;
		left: 8%;
		top: clamp(40px, 8vh, 150px);
		/* transform: translateX(-100%); */
	}
	.transformation-section {
		position: relative;
		overflow: hidden;
		background: linear-gradient(180deg, #FFFFFF 0%, #CCE3FB 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		height: 1260px;
	}

	.image-top-right {
		width: 200px;
		height: 250px;
		right: 8%;
		top: 8%;
		transform: translateX(100%);
	}

	.image-bottom-left {
		width: 260px;
		height: 320px;
		left: 8%;
		bottom: 5%;
		transform: translateX(-100%);
	}

	.image-bottom-right {
		width: 200px;
		height: 250px;
		right: 8%;
		transform: translateX(100%);
		bottom: 8%;
	}
}

@media (max-width: 480px) {
	/* Images are now visible on mobile */
}