/* ── About page ── */

/* ── Hero ── */
.about-hero {
	padding: var(--space-3xl) var(--space-md) var(--space-xl);
	display: grid;
	gap: var(--space-sm);
}

.about-hero .micro-text {
	text-align: left;
}

.about-hero__name {
	font-family: var(--font-title);
	font-size: clamp(3rem, 10vw, 7rem);
	font-weight: 800;
	line-height: 1;
	margin: 0;
}

.about-hero__sub {
	font-family: var(--font-mono);
	font-size: clamp(0.85rem, 2vw, 1rem);
	text-transform: uppercase;
	opacity: 0.5;
	margin: 0;
}

.about-hero__titles {
	list-style: none;
	padding: 0;
	margin: var(--space-lg) 0 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.about-hero__titles li {
	font-family: var(--font-body);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	font-weight: 500;
	line-height: 1.3;
	padding: var(--space-xs) 0;
	border-top: 1px solid rgba(255, 238, 214, 0.15);
	color: var(--color-text);
	opacity: 0.5;
	transition: opacity 200ms var(--ease-out);
}

.about-hero__titles li:last-child {
	border-bottom: 1px solid rgba(255, 238, 214, 0.15);
}

.about-hero__titles li:hover {
	opacity: 1;
}

/* ── Bio ── */
.about-bio {
	padding: 6rem 1rem;
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (width > 768px) {
	.about-bio {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3xl);
	}
}

.about-bio__text p {
	font-family: var(--font-body);
	font-size: clamp(1.25rem, 4vw, 2rem);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	color: var(--color-text);
}

.about-bio__photo {
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	background-color: rgba(255, 238, 214, 0.08);
	border: 1px solid rgba(255, 238, 214, 0.12);
}

/* ── Background ── */
.about-background {
	padding: var(--space-3xl) var(--space-md);
	display: grid;
	gap: var(--space-xl);
	max-width: 72ch;
	margin-inline: auto;
	text-align: center;
}

.about-background__header {
	display: grid;
	gap: var(--space-xs);
}

.about-background__title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	margin: 0;
}

.about-background__body p {
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	line-height: 1.7;
	opacity: 0.8;
	margin: 0 0 1em;
}

.about-background__body p:last-child {
	margin-bottom: 0;
}

/* ── Values ── */
.about-values {
	position: relative;
	min-height: 350vh;
}

.about-values__header {
	padding: var(--space-xl) var(--space-md) var(--space-xs);
	display: grid;
	gap: var(--space-xs);
}

.about-values .micro-text {
	text-align: center;
}

.about-values__title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	margin: 0;
	text-align: center;
}

.about-values__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	align-items: center;
	gap: clamp(2rem, 6vw, 6rem);
	padding: 0 var(--space-md);
}

.about-values__star-wrap {
	flex-shrink: 0;
	width: clamp(8rem, 28vw, 18rem);
	display: flex;
	align-items: center;
}

.about-values__star-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Value text */
.about-values__stage {
	position: relative;
	flex: 1;
	min-height: 3rem;
}

.value-item {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	opacity: 0;
}

.value-number {
	font-family: var(--font-mono);
	font-size: clamp(0.75rem, 1.5vw, 0.85rem);
	opacity: 0.4;
	line-height: 1;
}

.value-text {
	font-family: var(--font-body);
	font-size: clamp(1.2rem, 2.5vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
}

@supports (animation-timeline: view()) {
	.about-values {
		view-timeline-name: --values-vt;
		view-timeline-axis: block;
	}

	.about-values__star-wrap {
		animation: values-star-spin linear both;
		animation-timeline: --values-vt;
		animation-range: entry 0% exit 100%;
	}

	@keyframes values-star-spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(540deg); }
	}

	.value-item {
		animation: value-show linear both;
		animation-timeline: --values-vt;
	}

	.value-item:nth-child(1) { animation-range: entry 20% 48%; }
	.value-item:nth-child(2) { animation-range: 42% 68%; }
	.value-item:nth-child(3) { animation-range: 62% exit 20%; }

	@keyframes value-show {
		0%   { opacity: 0; transform: translateY(0.5rem); }
		15%  { opacity: 1; transform: translateY(0); }
		85%  { opacity: 1; transform: translateY(0); }
		100% { opacity: 0; transform: translateY(-0.5rem); }
	}
}

/* ── Card Swiper ── */
.card-swiper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.card-groups,
.card-group,
.card {
	aspect-ratio: 5 / 7;
}

.card-groups,
.card-group,
.big-card {
	width: 30vmin;
}

.card-groups {
	position: relative;
}

.card-group {
	position: absolute;
	transition: transform 400ms ease;
}

.card-group[data-status="unknown"] {
	transform: scale(0);
	transition: none;
}

.card-group[data-status="active"] {
	transition-delay: 300ms;
}

.card-group[data-status="after"] {
	transform: translateX(50%) scale(0);
}

.card-group[data-status="before"] {
	transform: translateX(-50%) scale(0);
}

.card-group[data-status="becoming-active-from-after"] {
	transform: translateX(50%) scale(0);
	transition: none;
}

.card-group[data-status="becoming-active-from-before"] {
	transform: translateX(-50%) scale(0);
	transition: none;
}

.card {
	background-color: rgba(255, 255, 255, 0.05);
	position: absolute;
	transition: transform 800ms cubic-bezier(.05, .43, .25, .95);
	background-position: center;
	background-size: cover;
}

.big-card {
	border-radius: 1vmin;
}

.little-card {
	width: 12vmin;
	border-radius: 2vmin;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: -1vmin 1vmin 2vmin rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

.big-card:nth-child(2) {
	background-image: url("https://images.unsplash.com/photo-1568572933382-74d440642117?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8ZG9nc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
	transform: translateX(-10%) rotate(-1deg);
}

.big-card:nth-child(4) {
	background-image: url("https://images.unsplash.com/photo-1534351450181-ea9f78427fe8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
	transform: rotate(2deg);
}

.big-card:nth-child(6) {
	background-image: url("https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
	transform: translateX(-6%) rotate(-3deg);
}

.big-card:nth-child(8) {
	background-image: url("https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
	transform: translate(10%, 3%) rotate(5deg);
}

.card-group[data-index="1"] > .big-card:nth-child(6) {
	background-image: url("https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.card-group[data-index="1"] > .big-card:nth-child(8) {
	background-image: url("https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.card-group[data-index="2"] > .big-card:nth-child(4) {
	background-image: url("https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.card-group[data-index="2"] > .big-card:nth-child(8) {
	background-image: url("https://images.unsplash.com/photo-1534351450181-ea9f78427fe8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGRvZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.little-card:nth-child(1) {
	background-image: url("https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2F0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
}

.little-card:nth-child(3) {
	background-image: url("https://images.unsplash.com/photo-1548546738-8509cb246ed3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2F0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
}

.little-card:nth-child(5) {
	background-image: url("https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGNhdHN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.little-card:nth-child(7) {
	background-image: url("https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGNhdHN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}

.card-group:hover > .card,
.card-swiper.is-visible .card-group[data-status="active"] > .card {
	box-shadow: -2vmin 2vmin 3vmin rgba(0, 0, 0, 0.4);
}

.card-group:hover > .big-card:nth-child(2),
.card-swiper.is-visible .card-group[data-status="active"] > .big-card:nth-child(2) {
	transform: translate(-75%, 16%) rotate(-24deg);
}

.card-group:hover > .big-card:nth-child(4),
.card-swiper.is-visible .card-group[data-status="active"] > .big-card:nth-child(4) {
	transform: translate(-25%, 8%) rotate(-8deg);
}

.card-group:hover > .big-card:nth-child(6),
.card-swiper.is-visible .card-group[data-status="active"] > .big-card:nth-child(6) {
	transform: translate(25%, 8%) rotate(8deg);
}

.card-group:hover > .big-card:nth-child(8),
.card-swiper.is-visible .card-group[data-status="active"] > .big-card:nth-child(8) {
	transform: translate(75%, 16%) rotate(24deg);
}

.card-group:hover > .little-card:nth-child(1),
.card-swiper.is-visible .card-group[data-status="active"] > .little-card:nth-child(1) {
	transform: translate(200%, -160%) rotate(-15deg);
}

.card-group:hover > .little-card:nth-child(3),
.card-swiper.is-visible .card-group[data-status="active"] > .little-card:nth-child(3) {
	transform: translate(160%, 170%) rotate(15deg);
}

.card-group:hover > .little-card:nth-child(5),
.card-swiper.is-visible .card-group[data-status="active"] > .little-card:nth-child(5) {
	transform: translate(-200%, -170%) rotate(15deg);
}

.card-group:hover > .little-card:nth-child(7),
.card-swiper.is-visible .card-group[data-status="active"] > .little-card:nth-child(7) {
	transform: translate(-280%, 140%) rotate(-15deg);
}

.card-swiper-buttons {
	margin-top: 8vmin;
	display: flex;
	justify-content: space-around;
	padding: 0 4vmin;
	width: 30vmin;
}

.card-swiper-buttons > button {
	font-size: 2.5vmin;
	border: 0.4vmin solid rgba(255, 238, 214, 0.4);
	border-radius: 100%;
	color: var(--color-text);
	background-color: transparent;
	height: 7vmin;
	width: 7vmin;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 200ms ease, color 200ms ease;
}

#love-button {
	color: #6db9ee;
	border-color: #6db9ee;
}

/* ── Experience / Timeline ── */
.experience {
	padding: var(--space-xl) var(--space-md) var(--space-3xl);
	display: grid;
	gap: var(--space-xl);
}

.experience__header {
	display: grid;
	gap: var(--space-xs);
}

.experience .micro-text {
	text-align: center;
}

.experience__title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	margin: 0;
}

/* ── Mobile: vertical single-column ── */
.timeline {
	position: relative;
}

.timeline__track {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Vertical line — sits at center of the dot column (1rem) */
.timeline__track::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 238, 214, 0.15);
}

.timeline__item {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0 1rem;
	position: relative;
	padding: var(--space-xl) 0;
	border-bottom: 1px solid rgba(255, 238, 214, 0.08);
}

.timeline__item:last-child {
	border-bottom: none;
}

/* Star marker */
.timeline__dot {
	width: 1rem;
	height: 1rem;
	justify-self: center;
	align-self: start;
	margin-top: 0.15rem;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.timeline__content {
	min-width: 0;
}

.timeline__label {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: clamp(0.7rem, 1.8vw, 0.8rem);
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.45;
	margin-bottom: var(--space-xs);
}

.timeline__role {
	font-family: var(--font-body);
	font-size: clamp(1.1rem, 3vw, 1.4rem);
	font-weight: 600;
	margin: 0 0 var(--space-2xs);
}

.timeline__org {
	font-family: var(--font-mono);
	font-size: clamp(0.75rem, 1.8vw, 0.85rem);
	opacity: 0.5;
	margin: 0 0 var(--space-sm);
}

.timeline__desc {
	font-family: var(--font-body);
	font-size: clamp(0.9rem, 2.5vw, 1rem);
	line-height: 1.6;
	opacity: 0.7;
	margin: 0;
	max-width: 52ch;
}

/* ── Desktop: horizontal ── */
@media (width > 768px) {
	.timeline__track {
		flex-direction: row;
		align-items: flex-start;
		display: flex;
		padding-top: 2rem;
		gap: 0;
		overflow-x: visible;
	}

	/* Horizontal line spans full width */
	.timeline__track::before {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.timeline__item {
		flex: 1 0 0;
		display: block;
		padding: 0 var(--space-lg) 0 0;
		border-bottom: none;
		position: relative;
	}

	.timeline__item:last-child {
		padding-right: 0;
	}

	/* Star sits on the horizontal line */
	.timeline__dot {
		position: absolute;
		top: -2rem;
		left: 0;
		width: 1rem;
		height: 1rem;
		justify-self: unset;
		align-self: unset;
		transform: translateY(-50%);
	}

	.timeline__content {
		padding-top: var(--space-md);
	}
}

/* ── Outside of Design ── */
.personal {
	padding: var(--space-xl) var(--space-md) var(--space-3xl);
	display: grid;
	gap: var(--space-xl);
}

.personal__header {
	display: grid;
	gap: var(--space-xs);
}

.personal .micro-text {
	text-align: center;
}

.personal__title {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	margin: 0;
}

.personal__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0;
}

.personal__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: var(--space-lg) 0;
	border-top: 1px solid rgba(255, 238, 214, 0.1);
}

.personal__item:last-child {
	border-bottom: 1px solid rgba(255, 238, 214, 0.1);
}

.personal__emoji {
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1;
	flex-shrink: 0;
	margin-top: 0.1em;
}

.personal__text h3 {
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	font-weight: 600;
	margin: 0 0 var(--space-2xs);
}

.personal__text p {
	font-family: var(--font-body);
	font-size: clamp(0.9rem, 2vw, 1rem);
	line-height: 1.6;
	opacity: 0.6;
	margin: 0;
	max-width: 48ch;
}

@media (width > 768px) {
	.personal__list {
		grid-template-columns: 1fr 1fr;
	}

	.personal__item:nth-child(1),
	.personal__item:nth-child(2) {
		border-top: 1px solid rgba(255, 238, 214, 0.1);
	}

	.personal__item:nth-child(3),
	.personal__item:nth-child(4) {
		border-top: none;
	}

	.personal__item:nth-child(3),
	.personal__item:nth-child(4) {
		border-bottom: 1px solid rgba(255, 238, 214, 0.1);
	}
}

/* ── Viewport-triggered entrance animations (IntersectionObserver adds .in-view) ── */
@media (prefers-reduced-motion: no-preference) {

	/* Hero: slide up from just below */
	.about-hero .micro-text,
	.about-hero__name,
	.about-hero__sub,
	.about-hero__titles {
		opacity: 0;
		transform: translateY(1.2rem);
		transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
	}

	/* Below-fold elements: fade up */
	.about-bio__text,
	.about-background__header,
	.about-background__body,
	.about-values__header,
	.experience__header,
	.timeline__item,
	.personal__header,
	.personal__item {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
	}

	/* Card swiper: scale in */
	.card-swiper {
		opacity: 0;
		transform: scale(0.88);
		transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
	}

	/* Timeline dot: spin in using standalone rotate/scale so it doesn't
	   clobber the desktop layout's transform: translateY(-50%) */
	.timeline__dot {
		opacity: 0;
		rotate: -120deg;
		scale: 0.4;
		transition: opacity 500ms var(--ease-out), rotate 500ms var(--ease-out), scale 500ms var(--ease-out);
	}

	/* Personal emoji: pop in */
	.personal__emoji {
		opacity: 0;
		scale: 0;
		rotate: -20deg;
		transition: opacity 400ms var(--ease-out), scale 400ms var(--ease-out), rotate 400ms var(--ease-out);
	}

	/* Hero stagger — delays carry through to the .in-view transition */
	.about-hero .micro-text { transition-delay: 80ms; }
	.about-hero__name       { transition-delay: 180ms; }
	.about-hero__sub        { transition-delay: 320ms; }
	.about-hero__titles     { transition-delay: 440ms; }

	/* ── Visible states ── */
	.about-hero .micro-text.in-view,
	.about-hero__name.in-view,
	.about-hero__sub.in-view,
	.about-hero__titles.in-view,
	.about-bio__text.in-view,
	.about-background__header.in-view,
	.about-background__body.in-view,
	.about-values__header.in-view,
	.experience__header.in-view,
	.timeline__item.in-view,
	.personal__header.in-view,
	.personal__item.in-view {
		opacity: 1;
		transform: translateY(0);
	}

	.card-swiper.in-view {
		opacity: 1;
		transform: scale(1);
	}

	/* Dot and emoji animate as parent becomes visible */
	.timeline__item.in-view .timeline__dot {
		opacity: 1;
		rotate: 0deg;
		scale: 1;
	}

	.personal__item.in-view .personal__emoji {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}