/*
 * ANIMOTION Public Showcase -- cinematic frontend styles for the showcase
 * grid, project cards, single project page, gallery/lightbox, and creator
 * profile. Depends on design-system.css (loaded first, see Showcase\Assets)
 * for palette/typography/spacing/motion tokens and shared button/badge/
 * form/notice/pagination/empty-state primitives.
 */

.animotion-showcase,
.animotion-single-project,
.animotion-creator-profile {
	padding: var(--animotion-space-6) var(--animotion-space-5) var(--animotion-space-8);
}

/* Showcase hero -- a compact, cinematic banner, deliberately smaller and
   quieter than the homepage hero (no animated gradient, no dual CTAs). The
   optional backdrop (--animotion-showcase-hero-image, set inline only when
   a lead featured project has a poster) sits behind a dark scrim so the
   text always stays readable regardless of the image. */

.animotion-showcase__hero {
	max-width: var(--animotion-max-width);
	margin: 0 auto var(--animotion-space-5);
	padding: var(--animotion-space-6);
	border-radius: var(--animotion-radius-lg);
	text-align: center;
	background: var(--animotion-surface);
	position: relative;
	overflow: hidden;
}

.animotion-showcase__hero.has-backdrop {
	background-image: linear-gradient(180deg, rgba(5, 6, 8, 0.82) 0%, rgba(5, 6, 8, 0.94) 100%), var(--animotion-showcase-hero-image);
	background-size: cover;
	background-position: center 25%;
}

.animotion-showcase__hero-inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}

.animotion-showcase__title {
	font-size: var(--animotion-font-size-2xl);
	font-weight: 800;
	letter-spacing: var(--animotion-tracking-tight);
	margin: 0 0 var(--animotion-space-2);
}

.animotion-showcase__subtitle {
	color: var(--animotion-text-muted);
	margin: 0 0 var(--animotion-space-4);
}

.animotion-showcase__hero-count {
	display: inline-block;
	margin: 0;
	padding: 0.35rem 0.9rem;
	border-radius: var(--animotion-radius-pill);
	border: 1px solid var(--animotion-border-strong);
	background: var(--animotion-surface-raised);
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--animotion-tracking-wide);
}

/* Permanent Showcase vs Annual Awards (Sprint 20) -- a small editorial
   callout distinguishing the two, with a real link to each. */

.animotion-showcase__distinction {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--animotion-space-5);
	max-width: var(--animotion-max-width);
	margin: 0 auto var(--animotion-space-7);
	padding: 0 var(--animotion-space-5);
}

.animotion-showcase__distinction-item {
	display: flex;
	gap: var(--animotion-space-4);
	padding: var(--animotion-space-5);
	background: var(--animotion-surface);
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-lg);
}

.animotion-showcase__distinction-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	color: var(--animotion-accent);
	background: var(--animotion-surface-raised);
	border-radius: 50%;
}

.animotion-showcase__distinction-item h2 {
	font-size: var(--animotion-font-size-md);
	margin: 0 0 var(--animotion-space-1);
}

/* Direct <a> child (the heading doubles as the link), same specificity fix
   as every other component-scoped anchor color in this design system. */
.animotion-showcase__distinction-item h2 a {
	color: var(--animotion-white) !important;
}

.animotion-showcase__distinction-item h2 a:hover {
	color: var(--animotion-accent) !important;
}

.animotion-showcase__distinction-item p {
	margin: 0;
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-sm);
	line-height: 1.6;
}

/* A winning project's own award section (Sprint 20) -- reuses
   .animotion-award-card (design-system.css) but constrained to a narrower
   width than the page's other full-width sections, since it's a single
   compact card, not a multi-column layout. Renders nothing at all unless
   Config::META_AWARD_TIER is actually set on this project -- see
   single-project.php's own comment. */

.animotion-single-project__award {
	max-width: 360px;
}

/* Featured Project Area */

.animotion-showcase__featured {
	max-width: var(--animotion-max-width);
	margin: 0 auto var(--animotion-space-6);
}

.animotion-showcase__featured-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
	gap: var(--animotion-space-6);
	align-items: stretch;
}

.animotion-showcase__featured-lead {
	display: flex;
	flex-direction: column;
	background: var(--animotion-surface);
	border-radius: var(--animotion-radius-lg);
	overflow: hidden;
	box-shadow: var(--animotion-shadow-md);
}

.animotion-showcase__featured-lead-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--animotion-surface-raised);
	overflow: hidden;
}

.animotion-showcase__featured-lead-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--animotion-transition-slow);
}

.animotion-showcase__featured-lead:hover .animotion-showcase__featured-lead-media img {
	transform: scale(1.03);
}

.animotion-showcase__featured-lead-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--animotion-surface-raised), var(--animotion-surface));
	color: var(--animotion-gray-dim);
}

.animotion-showcase__featured-lead-badges {
	position: absolute;
	top: var(--animotion-space-3);
	left: var(--animotion-space-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--animotion-space-1);
}

.animotion-showcase__featured-lead-body {
	display: flex;
	flex-direction: column;
	gap: var(--animotion-space-2);
	padding: var(--animotion-space-5);
	flex: 1 1 auto;
}

.animotion-showcase__featured-lead-title {
	margin: 0;
	font-size: var(--animotion-font-size-lg);
	font-weight: 800;
	letter-spacing: var(--animotion-tracking-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.animotion-showcase__featured-lead-title a {
	color: var(--animotion-white) !important;
}

.animotion-showcase__featured-lead-title a:hover {
	color: var(--animotion-accent) !important;
}

.animotion-showcase__featured-lead-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-3);
	font-size: var(--animotion-font-size-sm);
	color: var(--animotion-text-muted);
}

.animotion-showcase__featured-lead-footer {
	margin-top: auto;
	padding-top: var(--animotion-space-3);
	border-top: 1px solid var(--animotion-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--animotion-space-3);
	flex-wrap: wrap;
}

.animotion-showcase__featured-secondary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--animotion-space-4);
}

.animotion-showcase__featured-secondary .animotion-card {
	flex-direction: row;
	height: auto;
}

.animotion-showcase__featured-secondary .animotion-card__poster-link {
	flex: 0 0 96px;
}

.animotion-showcase__featured-secondary .animotion-card__poster {
	aspect-ratio: 2 / 3;
	height: 100%;
}

.animotion-showcase__featured-secondary .animotion-card__body {
	padding: var(--animotion-space-3);
	gap: var(--animotion-space-1);
}

/* Toolbar: mobile filter-drawer toggle + Grid/Compact view switch. Both
   buttons start [hidden] in the markup and are only revealed by JS (see
   assets/js/showcase-view.js) -- pure progressive enhancement: without
   JavaScript the filter form is simply always visible (no drawer to open)
   and there is no client-side view mode to switch (grid is the only view). */

.animotion-showcase__toolbar {
	max-width: var(--animotion-max-width);
	margin: 0 auto var(--animotion-space-3);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--animotion-space-3);
}

.animotion-showcase__filters-toggle {
	margin-right: auto;
}

.animotion-showcase__view-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-pill);
}

.animotion-showcase__view-btn {
	padding: 0.35rem 0.9rem;
	border-radius: var(--animotion-radius-pill);
	border: 0;
	background: transparent;
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-xs);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--animotion-transition), color var(--animotion-transition);
}

.animotion-showcase__view-btn:hover {
	color: var(--animotion-white);
}

.animotion-showcase__view-btn:focus-visible {
	outline: 2px solid var(--animotion-blue);
	outline-offset: 2px;
}

.animotion-showcase__view-btn.is-active {
	/* -dim, not --animotion-blue: white text on the brighter accent measures
	   ~3.2:1 at this size, short of WCAG AA -- see the button-contrast fix
	   earlier in design-system.css for the full rationale. */
	background: var(--animotion-blue-dim);
	color: #fff;
}

/* Compact view -- applied on a stable ancestor (.animotion-showcase itself,
   never replaced by the AJAX results swap) rather than on .animotion-card-grid
   directly (which IS replaced on every filter change), so the chosen view
   keeps applying via plain CSS descendant matching with no need to
   re-toggle any class after each AJAX update. */

.animotion-showcase.is-compact-view .animotion-card-grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--animotion-space-3);
}

.animotion-showcase.is-compact-view .animotion-card__body {
	padding: var(--animotion-space-3);
	gap: var(--animotion-space-1);
}

.animotion-showcase__filters {
	max-width: var(--animotion-max-width);
	margin: 0 auto var(--animotion-space-6);
	background: var(--animotion-surface);
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-md);
	padding: var(--animotion-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--animotion-space-3);
}

.animotion-showcase__filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-3);
	align-items: center;
}

.animotion-showcase__search {
	flex: 1 1 220px;
	min-width: 180px;
}

.animotion-showcase__year {
	width: 110px;
}

.animotion-showcase__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--animotion-space-2);
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-sm);
}

.animotion-showcase__checkbox input {
	width: auto;
}

/* Results: count + active filter chips + loading state */

.animotion-showcase__results {
	max-width: var(--animotion-max-width);
	margin: 0 auto;
	transition: opacity var(--animotion-transition-slow);
}

.animotion-showcase__results.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.animotion-showcase__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--animotion-space-3);
	margin-bottom: var(--animotion-space-5);
}

.animotion-showcase__count {
	margin: 0;
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-sm);
	white-space: nowrap;
}

.animotion-showcase__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--animotion-space-2);
}

.animotion-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--animotion-surface-raised);
	border: 1px solid var(--animotion-border-strong);
	color: var(--animotion-text) !important;
	font-size: var(--animotion-font-size-xs);
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: var(--animotion-radius-pill);
	transition: border-color var(--animotion-transition), color var(--animotion-transition);
}

.animotion-chip:hover {
	border-color: var(--animotion-accent);
	color: var(--animotion-accent) !important;
}

.animotion-chip__remove {
	font-size: 0.9em;
	opacity: 0.7;
}

.animotion-showcase__clear-all {
	font-size: var(--animotion-font-size-xs);
	font-weight: 600;
	color: var(--animotion-text-muted) !important;
	text-decoration: underline !important;
}

.animotion-showcase__clear-all:hover {
	color: var(--animotion-white) !important;
}

/* Card grid + card */

/* Explicit stepped column counts for the Showcase's own results grid only
   (scoped under .animotion-showcase; the shared .animotion-card-grid base
   rule in design-system.css -- used as-is by the homepage and creator
   profile pages -- is untouched, so those pages render exactly as before).
   Deliberately a fixed count per breakpoint rather than the shared rule's
   fluid auto-fill, so the Showcase reads as its own, more deliberate grid
   rhythm distinct from the homepage's. */
.animotion-showcase .animotion-card-grid {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1700px) {
	.animotion-showcase .animotion-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 1150px) {
	.animotion-showcase .animotion-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.animotion-showcase .animotion-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.animotion-showcase .animotion-card-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* Base .animotion-card/.animotion-card__* rules live in design-system.css
   (Sprint 24) -- promoted there so pages that don't load showcase.css (the
   homepage, institutional pages) still render cards correctly. Only
   Showcase-page-specific overrides stay here. */

/* Single project page */

.animotion-single-project {
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 0;
}

.animotion-single-project__hero {
	position: relative;
	border-radius: var(--animotion-radius-lg);
	overflow: hidden;
	margin-bottom: var(--animotion-space-6);
	background: var(--animotion-surface);
}

/* Composes .animotion-media (Sprint 25): a fixed aspect-ratio replaces the
   old max-height-only cap, so the cover's rendered height no longer
   depends on each upload's natural proportions -- it was previously the
   image, not the container, that carried width/max-height/object-fit. */
.animotion-single-project__cover {
	aspect-ratio: 2.75 / 1;
	max-height: 440px;
}

.animotion-single-project__cover img {
	opacity: 0.5;
}

.animotion-single-project__intro {
	display: flex;
	gap: var(--animotion-space-6);
	padding: var(--animotion-space-6);
	margin-top: -6rem;
	position: relative;
	flex-wrap: wrap;
}

/* Composes .animotion-media--poster (fixed 2:3 ratio + object-fit: cover);
   previously the <img> had a fixed width with no ratio at all, so poster
   height varied per upload -- now every poster is a uniform 190x285. */
.animotion-single-project__poster {
	width: 190px;
	border-radius: var(--animotion-radius-md);
	box-shadow: var(--animotion-shadow-lg);
}

.animotion-single-project__headline {
	flex: 1 1 300px;
	min-width: 240px;
	align-self: flex-end;
}

.animotion-single-project__headline h1 {
	font-size: var(--animotion-font-size-2xl);
	font-weight: 800;
	letter-spacing: var(--animotion-tracking-tight);
	margin: 0.3rem 0 0.2rem;
}

.animotion-single-project__original-title {
	color: var(--animotion-text-muted);
	font-style: italic;
	margin: 0 0 var(--animotion-space-3);
}

.animotion-single-project__facts {
	list-style: none;
	margin: 0 0 var(--animotion-space-3);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-3);
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-sm);
}

.animotion-single-project__tags {
	margin: 0 0 var(--animotion-space-3);
}

.animotion-single-project__creator {
	display: flex;
	align-items: center;
	gap: var(--animotion-space-2);
	font-size: var(--animotion-font-size-sm);
}

.animotion-single-project__creator img {
	border-radius: 50%;
}

.animotion-single-project__creator-link {
	display: flex;
	align-items: center;
	gap: var(--animotion-space-2);
}

/* Favorite/support interaction buttons */

.animotion-interaction-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--animotion-space-3);
	margin-top: var(--animotion-space-4);
}

.animotion-interaction-button {
	display: inline-flex;
	align-items: center;
	gap: var(--animotion-space-2);
	padding: 0.55rem 1rem;
	border-radius: var(--animotion-radius-pill);
	border: 1px solid var(--animotion-border-strong);
	background: var(--animotion-surface-raised);
	color: var(--animotion-text);
	cursor: pointer;
	font-size: var(--animotion-font-size-sm);
	font-weight: 600;
	transition: transform var(--animotion-transition), border-color var(--animotion-transition), color var(--animotion-transition);
}

.animotion-interaction-button:hover {
	transform: translateY(-1px);
}

.animotion-interaction-button:disabled {
	background: var(--animotion-surface-raised);
	border-color: var(--animotion-border);
	color: var(--animotion-text-muted);
	cursor: default;
	transform: none;
}

.animotion-interaction-button--favorite.is-active {
	border-color: var(--animotion-blue);
	color: var(--animotion-blue);
}

.animotion-interaction-button--support.is-active {
	border-color: var(--animotion-magenta);
	color: var(--animotion-magenta);
}

.animotion-interaction-button__icon {
	display: inline-flex;
}

.animotion-interaction-button__count {
	color: var(--animotion-text-muted);
}

.animotion-interaction-message {
	flex-basis: 100%;
	font-size: var(--animotion-font-size-xs);
	color: var(--animotion-text-muted);
	margin: 0;
}

.animotion-interaction-message[hidden] {
	display: none;
}

.animotion-single-project section {
	margin: 0 auto var(--animotion-space-6);
	padding: 0 var(--animotion-space-6);
}

.animotion-single-project h2 {
	font-size: var(--animotion-font-size-lg);
	font-weight: 700;
	letter-spacing: var(--animotion-tracking-tight);
	margin: 0 0 var(--animotion-space-4);
}

.animotion-video-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #000;
	border-radius: var(--animotion-radius-md);
	overflow: hidden;
	box-shadow: var(--animotion-shadow-md);
}

.animotion-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.animotion-single-project__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-4);
}

/* Gallery + lightbox */

.animotion-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--animotion-space-3);
}

.animotion-gallery__item {
	padding: 0;
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-sm);
	overflow: hidden;
	cursor: pointer;
	background: var(--animotion-surface-raised);
	transition: border-color var(--animotion-transition), transform var(--animotion-transition);
}

.animotion-gallery__item:hover {
	border-color: var(--animotion-accent);
	transform: translateY(-2px);
}

.animotion-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 1 / 1;
}

.animotion-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(3, 4, 8, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: var(--animotion-space-6);
	animation: animotion-fade-in var(--animotion-transition-slow);
}

.animotion-lightbox[hidden] {
	display: none;
}

.animotion-lightbox img {
	max-width: 100%;
	max-height: 85vh;
	border-radius: var(--animotion-radius-sm);
	box-shadow: var(--animotion-shadow-lg);
}

.animotion-lightbox__close,
.animotion-lightbox__prev,
.animotion-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--animotion-border-strong);
	color: #fff;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 1.2rem;
	cursor: pointer;
	transition: background var(--animotion-transition), border-color var(--animotion-transition);
}

.animotion-lightbox__close:hover,
.animotion-lightbox__prev:hover,
.animotion-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: var(--animotion-accent);
}

.animotion-lightbox__close {
	top: var(--animotion-space-5);
	right: var(--animotion-space-5);
}

.animotion-lightbox__prev {
	left: var(--animotion-space-5);
	top: 50%;
	transform: translateY(-50%);
}

.animotion-lightbox__next {
	right: var(--animotion-space-5);
	top: 50%;
	transform: translateY(-50%);
}

/* Creator profile (Sprint 25 -- Premium Public Creator Portfolio) */

.animotion-creator-profile {
	max-width: var(--animotion-max-width);
	margin: 0 auto;
}

.animotion-creator-profile__hero {
	display: flex;
	align-items: flex-start;
	gap: var(--animotion-space-6);
	flex-wrap: wrap;
	margin-bottom: var(--animotion-space-6);
	padding: var(--animotion-space-7);
	background: var(--animotion-surface);
	background-image: linear-gradient(160deg, rgba(79, 139, 255, 0.08), transparent 60%);
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-lg);
}

.animotion-creator-profile__avatar img {
	border-radius: 50%;
	box-shadow: var(--animotion-shadow-md);
	border: 2px solid var(--animotion-border);
}

.animotion-creator-profile__identity {
	flex: 1;
	min-width: 16rem;
}

.animotion-creator-profile__name {
	margin: 0 0 var(--animotion-space-3);
	font-size: var(--animotion-font-size-2xl);
	font-weight: 800;
	letter-spacing: var(--animotion-tracking-tight);
}

.animotion-creator-profile__facts {
	list-style: none;
	margin: 0 0 var(--animotion-space-3);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-4);
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-sm);
}

.animotion-creator-profile__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--animotion-space-1);
}

.animotion-creator-profile__badges {
	list-style: none;
	margin: 0 0 var(--animotion-space-4);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-2);
}

.animotion-creator-profile__badges .animotion-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.animotion-creator-profile__bio {
	max-width: var(--animotion-content-width);
	margin: 0 0 var(--animotion-space-4);
	color: var(--animotion-text-muted);
	font-size: var(--animotion-font-size-md);
	line-height: 1.6;
}

.animotion-creator-profile__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--animotion-space-3);
	margin: 0;
	padding: 0;
}

.animotion-creator-profile__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--animotion-surface-raised);
	border: 1px solid var(--animotion-border);
	color: var(--animotion-text-muted);
	transition: color var(--animotion-transition), border-color var(--animotion-transition);
}

.animotion-creator-profile__links a:hover,
.animotion-creator-profile__links a:focus-visible {
	color: var(--animotion-white) !important;
	border-color: var(--animotion-accent);
}

.animotion-creator-profile__stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--animotion-space-4);
	margin-bottom: var(--animotion-space-6);
}

.animotion-creator-profile__stat {
	text-align: center;
	padding: var(--animotion-space-4) var(--animotion-space-3);
	background: var(--animotion-surface);
	border: 1px solid var(--animotion-border);
	border-radius: var(--animotion-radius-md);
}

.animotion-creator-profile__stat-value {
	display: block;
	font-size: var(--animotion-font-size-xl);
	font-weight: 800;
	color: var(--animotion-white);
}

.animotion-creator-profile__stat-label {
	display: block;
	margin-top: var(--animotion-space-1);
	font-size: var(--animotion-font-size-xs);
	color: var(--animotion-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.animotion-creator-profile__recognitions {
	margin-bottom: var(--animotion-space-6);
}

.animotion-creator-profile__recognitions h2,
.animotion-creator-profile__projects h2 {
	font-size: var(--animotion-font-size-lg);
	font-weight: 700;
	letter-spacing: var(--animotion-tracking-tight);
	margin-bottom: var(--animotion-space-4);
}

.animotion-creator-profile__recognitions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: var(--animotion-space-3);
}

.animotion-creator-profile__recognition {
	display: flex;
	align-items: center;
	gap: var(--animotion-space-2);
	padding: var(--animotion-space-4);
	font-size: var(--animotion-font-size-sm);
	font-weight: 600;
}

.animotion-creator-profile__recognition-icon {
	display: inline-flex;
	color: var(--animotion-accent);
	flex-shrink: 0;
}

.animotion-creator-profile__back {
	margin-top: var(--animotion-space-6);
}

/* Responsive */

@media (max-width: 960px) {
	.animotion-single-project__intro {
		margin-top: -4rem;
	}

	.animotion-single-project__poster {
		width: 130px;
	}

	.animotion-showcase__featured-layout {
		grid-template-columns: 1fr;
	}

	.animotion-showcase__featured-secondary {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	.animotion-showcase__featured-secondary .animotion-card {
		flex-direction: column;
	}

	.animotion-showcase__featured-secondary .animotion-card__poster-link {
		flex: none;
	}

	.animotion-showcase__featured-secondary .animotion-card__poster {
		height: auto;
	}
}

@media (max-width: 600px) {
	.animotion-showcase__hero {
		padding: var(--animotion-space-5) var(--animotion-space-4);
	}

	.animotion-showcase__title {
		font-size: var(--animotion-font-size-xl);
	}

	.animotion-showcase__featured-lead-body {
		padding: var(--animotion-space-4);
	}

	.animotion-showcase__filters {
		padding: var(--animotion-space-3);
	}

	.animotion-showcase__filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.animotion-showcase__filter-row select,
	.animotion-showcase__filter-row .animotion-showcase__year,
	.animotion-showcase__filter-row .animotion-button {
		width: 100%;
	}

	.animotion-showcase__meta-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.animotion-single-project__intro {
		flex-direction: column;
		margin-top: 0;
		text-align: center;
	}

	.animotion-single-project__poster {
		margin: 0 auto;
	}

	.animotion-single-project__headline {
		align-self: center;
	}

	.animotion-single-project__facts,
	.animotion-single-project__link-list {
		justify-content: center;
	}

	.animotion-single-project section {
		padding: 0 var(--animotion-space-4);
	}

	.animotion-creator-profile__hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.animotion-creator-profile__facts,
	.animotion-creator-profile__badges,
	.animotion-creator-profile__links {
		justify-content: center;
	}

	.animotion-creator-profile__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}