/* Content is readable before JavaScript, with failed scripts, and in reduced motion. */
.aa-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

.aa-scroll-progress {
	position: fixed;
	z-index: 55;
	inset: 0 0 auto;
	height: 2px;
	background: var(--aa-accent);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	transition: opacity 220ms ease;
}

.aa-menu-open .aa-scroll-progress,
.aa-lightbox-open .aa-scroll-progress {
	opacity: 0;
}

.aa-image-window {
	overflow: hidden;
}

.aa-button,
.aa-glass-button {
	--aa-magnet-x: 0px;
	--aa-magnet-y: 0px;
	translate: var(--aa-magnet-x) var(--aa-magnet-y);
	scale: 1;
	transition: background-color var(--aa-motion-fast) ease,
		border-color var(--aa-motion-fast) ease,
		color var(--aa-motion-fast) ease,
		transform var(--aa-motion-medium) var(--aa-motion-ease),
		box-shadow var(--aa-motion-medium) var(--aa-motion-ease),
		scale var(--aa-motion-fast) var(--aa-motion-ease);
}

.aa-button:active,
.aa-glass-button:active {
	scale: .97;
}

.aa-form label {
	position: relative;
}

.aa-form label::after {
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: var(--aa-ink);
	content: '';
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--aa-motion-medium) var(--aa-motion-ease);
	pointer-events: none;
}

.aa-form label:focus-within::after {
	transform: scaleX(1);
}

.aa-project a,
.aa-project-index-card > a,
.aa-press-card > a {
	position: relative;
	display: block;
}

.aa-project a::after,
.aa-project-index-card > a::after,
.aa-press-card > a::after {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(23, 24, 22, .15);
	border-radius: 50%;
	background: var(--aa-paper);
	color: var(--aa-ink);
	font-size: 1.25rem;
	content: '↗';
	opacity: 0;
	translate: 0 8px;
	transition: opacity var(--aa-motion-medium) ease,
		translate var(--aa-motion-medium) var(--aa-motion-ease);
	pointer-events: none;
}

.aa-project a:focus-visible::after,
.aa-project-index-card > a:focus-visible::after,
.aa-press-card > a:focus-visible::after {
	opacity: 1;
	translate: 0 0;
}

@media (hover: hover) and (pointer: fine) {
	.aa-project a:hover::after,
	.aa-project-index-card > a:hover::after,
	.aa-press-card > a:hover::after {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aa-scroll-progress { display: none; }
	.aa-button, .aa-glass-button { translate: none; scale: 1; }
	.aa-form label::after,
	.aa-project a::after,
	.aa-project-index-card > a::after,
	.aa-press-card > a::after { transition-duration: .01ms; }
}