/* ===================================================================
	 Qui nous sommes — team + skills
	 =================================================================== */

section#about {
	padding-block: 4rem 6rem;
}

.about__head {
	margin-block-end: var(--space-2xl);
}
.about__head h2 {
	font-size: var(--step-3xl);
	font-weight: 500;
	letter-spacing: -0.035em; max-width: 16ch;
}

.about__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

/* Team — SVG people row */
.team {
	display: grid;
	gap: var(--space-lg);

	--team-body: #131415;
	--team-body-opacity: 0.2;

	--team-contour-2: #9a9a97;
	--team-contour-3: #414142;
	--team-contour-4: #f4f4f3;
	--team-contour-1: rgba(255, 77, 46, 0.80);
}
.team__row {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
	align-items: flex-end;
}
.team__svg {
	width: 100%;
	max-width: 1600px;
	height: auto;
}
.team__svg .team__body {
	fill: var(--team-body);
	fill-opacity: var(--team-body-opacity);
	fill-rule: nonzero;
	stroke: none;
}
.team__svg .team__contour { fill-rule: nonzero; stroke: none; }
.team__svg .team__contour--1 { fill: var(--team-contour-1); }
.team__svg .team__contour--2 { fill: var(--team-contour-2); }
.team__svg .team__contour--3 { fill: var(--team-contour-3); }
.team__svg .team__contour--4 { fill: var(--team-contour-4); }


.team__traits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	padding-block-start: var(--space-lg);
}
.team__trait .k { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-accent); letter-spacing: 0.1em; text-transform: uppercase; }
.team__trait h4 { font-size: var(--step-md); font-weight: 500; margin-block-start: var(--space-2xs); }
.team__trait p { color: var(--color-fg-muted); font-size: var(--step-xs); margin-block-start: var(--space-2xs); }

/* Skills — moving ticker columns */
.skills {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	background: var(--color-bg-sunken);
	overflow: hidden;
	position: relative;
}
.skills__head { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--space-lg); }
.skills__head h3 { font-size: var(--step-lg); font-weight: 500; }
.skills__head .label { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-fg-dim); letter-spacing: 0.12em; text-transform: uppercase; }

.skills__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
.skills__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	position: relative;
}
.skill {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.8em 1em;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	font-family: var(--font-mono);
	font-size: var(--step-xs);
	letter-spacing: 0.02em;
	transition: border-color var(--dur), color var(--dur), background var(--dur);
	white-space: nowrap;
	position: relative;
}
.skill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-fg-dim); }

/* Glitch effect on skill swap — chromatic split + jitter, adapted from rotator */
.skill.is-glitch {
	animation: skill-glitch-shift 0.36s steps(2, end) 1;
	border-color: var(--color-accent); color: var(--color-accent);
}
.skill.is-glitch::before,
.skill.is-glitch::after {
	content: attr(data-text);
	position: absolute;
	left: 0.8em; top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: var(--step-xs);
	letter-spacing: 0.02em;
	opacity: 0.85;
	pointer-events: none;
	mix-blend-mode: screen;
	white-space: nowrap;
}
.skill.is-glitch::before { color: #ff0044; animation: skill-glitch-r 0.36s steps(2, end) 1; }
.skill.is-glitch::after  { color: #00e5ff; animation: skill-glitch-b 0.36s steps(2, end) 1; }
@keyframes skill-glitch-shift {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-1px, 1px); }
	50%  { transform: translate(1px, -1px); }
	75%  { transform: translate(-1px, 0); }
	100% { transform: translate(0, 0); }
}
@keyframes skill-glitch-r {
	0%   { transform: translate(0, -50%); clip-path: inset(0 0 0 0); }
	20%  { transform: translate(-4px, -50%); clip-path: inset(10% 0 60% 0); }
	40%  { transform: translate(3px, -50%); clip-path: inset(50% 0 30% 0); }
	60%  { transform: translate(-2px, -50%); clip-path: inset(20% 0 50% 0); }
	80%  { transform: translate(2px, -50%); clip-path: inset(70% 0 10% 0); }
	100% { transform: translate(0, -50%); clip-path: inset(0 0 0 0); }
}
@keyframes skill-glitch-b {
	0%   { transform: translate(0, -50%); clip-path: inset(0 0 0 0); }
	20%  { transform: translate(4px, -50%); clip-path: inset(60% 0 10% 0); }
	40%  { transform: translate(-3px, -50%); clip-path: inset(30% 0 50% 0); }
	60%  { transform: translate(2px, -50%); clip-path: inset(50% 0 20% 0); }
	80%  { transform: translate(-2px, -50%); clip-path: inset(10% 0 70% 0); }
	100% { transform: translate(0, -50%); clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
	.skill.is-glitch { animation: none; }
	.skill.is-glitch::before, .skill.is-glitch::after { display: none; }
}

@media (max-width: 880px) {
	.about__grid { grid-template-columns: 1fr; }
	.skills__cols { grid-template-columns: 1fr; }
	.team__traits { grid-template-columns: 1fr; }
}