/* ------------------------------------------------------------- about me --- */

/* Copy rides above the fluid layer and is never distorted by it. The mark's
   own box stays transparent — the shader paints the logo there. */
.gb-about__copy,
.gb-about__hint {
	position: relative;
	z-index: 2;
}

.gb-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 90px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

/* ------------------------------------------------------------ liquid mark --- */

.gb-about__mark {
	position: relative;
}

.gb-liquid {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: crosshair;
}

/* Faint pool the mark sits in, so the liquid has something to float on. */
.gb-liquid::before {
	content: '';
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, rgba(120, 140, 180, 0.16), transparent 62%);
	filter: blur(14px);
	pointer-events: none;
}

.gb-liquid__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	object-fit: contain;
	transition: opacity 0.6s ease;
}

/* The fluid is a page-wide layer, not a widget: the canvas is pinned to the
   viewport and painted behind everything. The shader draws the logo into
   whatever rectangle .gb-liquid currently occupies, so the mark still sits in
   the layout while the ripples run across the whole page. */
.gb-liquid__canvas {
	position: fixed;
	inset: 0;
	display: block;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.8s ease;
}

/* Only once WebGL is actually running do we hand the mark over to the canvas.
   Without .is-live the plain <img> is the whole component. */
.gb-liquid.is-live .gb-liquid__img {
	opacity: 0;
}

/* Body-level, not descendant: the canvas is reparented to <body> on init so
   its fixed positioning resolves against the viewport. That reparenting also
   takes it out from under .gb-about__mark's opacity-0 entrance state, so
   without a delay of its own it would fade the logo in as soon as WebGL is
   ready — well ahead of the title band and the rest of the entrance
   sequence. Matching .gb-about__mark's own animation-delay here keeps the
   two in step. */
body.gb-liquid-on .gb-liquid__canvas {
	opacity: 1;
	transition-delay: calc(var(--gb-intro-total) + 0.05s);
}

.gb-about__hint {
	margin: 26px 0 0;
	font-family: var(--gb-font-label);
	font-size: 11px;
	line-height: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gb-label);
	text-align: center;
}

/* Nothing to move the cursor over on touch, and no canvas when motion is off. */
@media (hover: none) {
	.gb-about__hint {
		display: none;
	}
}

/* ------------------------------------------------------------------ copy --- */

.gb-about__headline {
	margin: 6px 0 34px;
	font-size: 44px;
	line-height: 52px;
}

.gb-about__welcome {
	margin: 0 0 18px;
	font-family: var(--gb-font-head);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gb-ink);
}

.gb-about__rte p:last-child {
	margin-bottom: 0;
}

.gb-about__extra {
	margin-top: 34px;
	padding-top: 34px;
	border-top: 1px solid var(--gb-line);
}

/* --------------------------------------------------------------- entrance --- */

@keyframes gb-about-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.gb-about__mark,
.gb-about__copy > * {
	opacity: 0;
	animation: gb-about-in 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}

/* Delays stack on top of the page-title band finishing (--gb-intro-total,
   set in main.css) — this sequence only starts once that one has. */
.gb-about__mark { animation-delay: calc(var(--gb-intro-total) + 0.05s); }
.gb-about__copy .gb-eyebrow { animation-delay: calc(var(--gb-intro-total) + 0.15s); }
.gb-about__copy .gb-about__headline { animation-delay: calc(var(--gb-intro-total) + 0.25s); }
.gb-about__copy .gb-about__rte { animation-delay: calc(var(--gb-intro-total) + 0.35s); }
.gb-about__copy .gb-about__extra { animation-delay: calc(var(--gb-intro-total) + 0.45s); }

@media (prefers-reduced-motion: reduce) {
	.gb-about__mark,
	.gb-about__copy > * {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
	.gb-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
		justify-items: center;
		text-align: left;
	}

	.gb-about__mark {
		width: min(320px, 70vw);
	}

	.gb-about__headline {
		font-size: 34px;
		line-height: 42px;
	}
}