:root{
	--about-max-width:1100px;
	--gap:28px;
	--accent-shadow: rgba(10,10,20,0.12);
	--muted: #6b6b6b;
}

/* Container */
.about{
	padding: 60px 20px;
	max-width: var(--about-max-width);
	margin: 0 auto;
}
.about h2{ text-align:center; margin-bottom:36px; font-size:2rem; }

/* Row layout */
.about-row{ display:flex; align-items:center; gap:var(--gap); margin-bottom:48px; }
.about-row.left .about-img{ order:0 }
.about-row.left .about-text{ order:1 }
.about-row.right .about-img{ order:1 }
.about-row.right .about-text{ order:0 }

.about-img, .about-text{ flex:1; }

/* Images: constrain rendering size to avoid huge layout paintings */
.about-img img{
	width:100%;
	height:auto;
	display:block;
	border-radius:12px;
	box-shadow:0 12px 30px var(--accent-shadow);
	transform:translateZ(0);
	transition: transform .6s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease, filter .3s ease;
	max-width:900px; /* caps the visual size */
	object-fit:cover;
}

/* Text box */
.about-text{
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
	padding:26px;
	border-radius:12px;
	box-shadow:0 8px 20px rgba(10,10,20,0.06);
}
.about-text p{ margin:0 0 12px 0; line-height:1.65; color:#2d2d2d; opacity:0; transform:translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.about-text p:last-child{ margin-bottom:0 }

/* initial offscreen states for slide-in */
.about-row.left .about-img{ transform: translateX(-40px); opacity:0 }
.about-row.left .about-text{ transform: translateX(40px); opacity:0 }
.about-row.right .about-img{ transform: translateX(40px); opacity:0 }
.about-row.right .about-text{ transform: translateX(-40px); opacity:0 }

/* visible state */
.about-row.in-view .about-img,
.about-row.in-view .about-text{ transform: translateX(0); opacity:1; transition: transform .75s cubic-bezier(.2,.9,.2,1), opacity .75s ease; }
.about-row.in-view .about-text p{ opacity:1; transform:translateY(0) }

/* staggered delays for paragraphs inside the text box */
.about-row.in-view .about-text p:nth-child(1){ transition-delay:.05s }
.about-row.in-view .about-text p:nth-child(2){ transition-delay:.12s }
.about-row.in-view .about-text p:nth-child(3){ transition-delay:.20s }
.about-row.in-view .about-text p:nth-child(4){ transition-delay:.28s }

/* hover effects */
.about-img:hover img{ transform: scale(1.03) translateZ(0); box-shadow:0 20px 40px rgba(10,10,20,0.16) }

/* framed-effect enhancement */
.framed-effect{ position:relative; overflow:visible }
.framed-effect::after{ content:''; position:absolute; inset:8px; border-radius:10px; pointer-events:none; box-shadow:0 6px 24px rgba(8,8,20,0.04) }

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
	.about-row, .about-img img, .about-text p{ transition:none !important; animation:none !important; }
	.about-row.left .about-img, .about-row.right .about-img,
	.about-row.left .about-text, .about-row.right .about-text,
	.about-text p{ transform:none; opacity:1 }
}

/* Responsive: stack rows on small screens and reduce gaps */
@media (max-width: 900px){
	:root{ --about-max-width:940px }
	.about-row{ gap:22px }
	.about-img img{ max-width:720px }
}

@media (max-width: 768px){
	.about{ padding: 40px 15px; }
	.about h2{ font-size: 1.8rem; margin-bottom: 28px; }
	.about-row{ flex-direction:column; gap:18px; margin-bottom: 32px; }
	.about-row .about-img, .about-row .about-text{ width:100% }
	.about-row.left .about-img, .about-row.right .about-img,
	.about-row.left .about-text, .about-row.right .about-text{ transform:none; opacity:1 }
	.about-text{ padding: 20px; }
	.about-text p{ opacity:1; transform:none; font-size: 0.95rem; line-height: 1.6; }
}

@media (max-width: 480px){
	.about{ padding: 30px 10px; }
	.about h2{ font-size: 1.6rem; margin-bottom: 24px; }
	.about-row{ gap: 15px; margin-bottom: 25px; }
	.about-text{ padding: 16px; border-radius: 10px; }
	.about-text p{ font-size: 0.9rem; margin-bottom: 10px; }
	.about-img img{ border-radius: 8px; }
}

/* small helper for very wide images: avoid extremely tall renders */
@media (min-width:1200px){
	.about-img img{ max-height:520px; object-fit:cover }
}