@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./assets/fonts/syne-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./assets/fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

/*# sourceURL=animfolio-fonts-local-inline-css */


/**
 * AnimFolio Base Stylesheet
 *
 * Scoped reset, CSS custom properties, utility classes, base components.
 * ALL styles scoped inside .animfolio-container.
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

/* ========================================================================
   1. Scoped Reset
   ======================================================================== */

.animfolio-container *,
.animfolio-container *::before,
.animfolio-container *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ========================================================================
   2. Container
   ======================================================================== */

.animfolio-container {
	position: relative;
	width: 100%;
	min-height: 100vh;
	font-family: var(--animfolio-font-body);
	font-size: var(--animfolio-font-size-base, 16px);
	line-height: var(--animfolio-line-height, 1.6);
	letter-spacing: var(--animfolio-letter-spacing, 0);
	color: var(--animfolio-text);
	background-color: var(--animfolio-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Note: no overflow-x: hidden here — it breaks position: sticky on nav */
}

.animfolio-inner {
	width: 100%;
	max-width: var(--animfolio-container-width, 1200px);
	margin: 0 auto;
	padding: 0 32px;
}

/* ------------------------------------------------------------------------
   Smooth anchor scrolling
   ------------------------------------------------------------------------
   The JS UI module adds .animfolio-smooth-scroll to <html> when the user's
   "smooth scroll" setting is on and reduced-motion is NOT requested, gating
   native (mouse/keyboard/hash) smooth scrolling without any per-event JS.
   scroll-padding-top keeps a target from landing behind the sticky nav; the JS
   re-measures and sets the exact value inline, this is the no-JS fallback.
   The reduced-motion media query at the end of this file forces scroll-behavior
   back to auto, so this never overrides an accessibility preference. */
html.animfolio-smooth-scroll {
	scroll-behavior: smooth;
}

html {
	/* Fallback nav clearance (sticky bar is 64px) so anchored sections aren't
	   hidden under the nav even before JS measures the live height. */
	scroll-padding-top: 80px;
}

/* Section targets get the same clearance for scrollIntoView()-based jumps. */
.animfolio-section {
	scroll-margin-top: 80px;
}

/* ========================================================================
   3. Typography
   ======================================================================== */

.animfolio-container h1,
.animfolio-container h2,
.animfolio-container h3,
.animfolio-container h4,
.animfolio-container h5,
.animfolio-container h6 {
	font-family: var(--animfolio-font-heading);
	font-weight: var(--animfolio-font-weight-bold, 700);
	line-height: 1.2;
	color: var(--animfolio-text);
}

.animfolio-container h1 { font-size: var(--animfolio-font-size-h1, clamp(2.5rem, 5vw, 4rem)); }
.animfolio-container h2 { font-size: var(--animfolio-font-size-h2, clamp(1.75rem, 3.5vw, 2.5rem)); }
.animfolio-container h3 { font-size: var(--animfolio-font-size-h3, 1.5rem); }
.animfolio-container h4 { font-size: var(--animfolio-font-size-h4, 1.25rem); }
.animfolio-container h5 { font-size: var(--animfolio-font-size-h5, 1.125rem); }
.animfolio-container h6 { font-size: var(--animfolio-font-size-h6, 1rem); }

.animfolio-container p {
	margin-bottom: 1em;
	color: var(--animfolio-text-secondary);
	line-height: 1.7;
}

.animfolio-container a {
	/* Use accent-text variant where defined so link text meets WCAG AA
	   (>=4.5:1); falls back to --animfolio-accent for formats that pass as-is. */
	color: var(--animfolio-accent-text, var(--animfolio-accent));
	text-decoration: none;
	transition: color 0.2s ease;
}

.animfolio-container a:hover,
.animfolio-container a:focus {
	color: var(--animfolio-accent-hover, var(--animfolio-accent));
}

.animfolio-container code,
.animfolio-container pre {
	font-family: var(--animfolio-font-mono);
}

.animfolio-container img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ========================================================================
   4. Sections
   ======================================================================== */

.animfolio-section {
	/* max() floor: even if section_spacing is set very low (e.g. via an imported
	   JSON below the editor's 40px minimum), sections keep a readable gap so they
	   never cram together. The hero overrides this to 0 for its one-viewport rule. */
	padding: max(48px, var(--animfolio-section-spacing, 100px)) 0;
	position: relative;
}

.animfolio-section:nth-child(even) {
	background: var(--animfolio-bg-secondary);
}

.animfolio-section__header {
	margin-bottom: 48px;
	text-align: center;
}

.animfolio-section__title {
	/* No accent bar under the title — the title carries its own bottom margin so
	   the gap to the subtitle reads as intentional spacing, not a missing bar. */
	margin-bottom: 16px;
	position: relative;
}

/* The section-title accent bar has been removed by request. The base rule (and
   every per-format override) is suppressed so no underline/bar ever renders. */
.animfolio-section__title::after {
	content: none;
	display: none;
}

/* ---- Left-aligned titles ----
   Triggers cover the ways a format left-aligns its section heading:
   1. The explicit --left modifier class on the header.
   2. A format setting text-align:left inline on the header or the title.
   The subtitle drops its left auto margin so it starts at the text's left edge.
   These selectors are scoped tightly so centered formats — the default — are
   untouched. */
.animfolio-section__header--left,
.animfolio-section__header[style*="left"] {
	text-align: start;
}

.animfolio-section__header--left .animfolio-section__subtitle,
.animfolio-section__header[style*="left"] .animfolio-section__subtitle {
	margin-inline-start: 0;
}

/* ---- Per-section alignment ----
   Driven by each section's text_alignment setting (default centre), the renderer
   adds .animfolio-section--align-{left|center|right} to the wrapper. This aligns
   the header AND the section's loose text content together, so a centred title
   never sits over left-floating copy (or vice-versa). Structured components —
   cards, timeline items, and form controls — always read left internally for
   legibility, regardless of the section alignment. */
.animfolio-section--align-center > .animfolio-inner,
.animfolio-section--align-center .animfolio-section__header { text-align: center; }
.animfolio-section--align-left > .animfolio-inner,
.animfolio-section--align-left .animfolio-section__header { text-align: left; }
.animfolio-section--align-right > .animfolio-inner,
.animfolio-section--align-right .animfolio-section__header { text-align: right; }

.animfolio-section--align-center .animfolio-section__subtitle { margin-inline: auto; }
.animfolio-section--align-left .animfolio-section__subtitle { margin-inline-start: 0; }
.animfolio-section--align-right .animfolio-section__subtitle { margin-inline-end: 0; margin-inline-start: auto; }

/* Components keep left-aligned internals so body copy stays readable. */
.animfolio-section[class*="--align-"] .animfolio-card,
.animfolio-section[class*="--align-"] .animfolio-timeline__item,
.animfolio-section[class*="--align-"] form,
.animfolio-section[class*="--align-"] .animfolio-field,
.animfolio-section[class*="--align-"] input,
.animfolio-section[class*="--align-"] textarea,
.animfolio-section[class*="--align-"] label,
.animfolio-section[class*="--align-"] select { text-align: left; }

.animfolio-section__subtitle {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--animfolio-text-secondary);
	max-width: 600px;
	/* Gap to the title is owned by the title's margin-bottom; no extra top
	   margin here so the title/subtitle spacing stays balanced and intentional
	   now that the accent bar is gone. */
	margin-top: 0;
	margin-inline: auto;
}

/* ========================================================================
   5. Cards
   ======================================================================== */

.animfolio-card {
	background: var(--animfolio-bg-secondary);
	border-radius: var(--animfolio-radius, 12px);
	padding: 28px;
	/* Promote to its own compositor layer for jank-free hover animation */
	will-change: transform;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Remove will-change after interaction to free GPU memory */
.animfolio-card:not(:hover):not(:focus-visible) {
	will-change: auto;
}

.animfolio-card:hover {
	transform: translateY(-4px);
}

/* Keyboard-focusable cards (e.g. project links wrapping a card) */
.animfolio-card:focus-visible {
	outline: 3px solid var(--animfolio-accent);
	outline-offset: 2px;
	transform: translateY(-4px);
}

.animfolio-card--bordered {
	border: 1px solid var(--animfolio-border);
}

.animfolio-card--bordered:hover {
	border-color: var(--animfolio-accent);
	box-shadow: 0 8px 32px var(--animfolio-accent-subtle, rgba(127, 119, 221, 0.1));
}

.animfolio-card--shadowed {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.animfolio-card--shadowed:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.animfolio-card--glass {
	/* Dark mode: barely-there white film over dark bg */
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--animfolio-border);
}

/* Light mode glass: use a translucent dark tint so the card is distinguishable from white bg */
.animfolio-container--light .animfolio-card--glass,
.animfolio-container--auto .animfolio-card--glass {
	background: rgba(0, 0, 0, 0.03);
}

.animfolio-card--flat {
	background: var(--animfolio-bg-secondary);
}

.animfolio-card__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 8px;
}

.animfolio-card__meta {
	font-size: 0.875rem;
	color: var(--animfolio-text-muted);
}

.animfolio-card__footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--animfolio-border);
	display: flex;
	align-items: center;
	gap: 12px;
}

.animfolio-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.animfolio-card__tag {
	font-size: 0.6875rem;
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--animfolio-accent-light);
	color: var(--animfolio-accent);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.animfolio-card__icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--animfolio-accent-light);
	border-radius: 12px;
	margin-bottom: 16px;
	color: var(--animfolio-accent);
}

/* ---- Services ----
   Icon and title sit on ONE line (flex row, icon before title, vertically
   centered) instead of the icon stacking above the title. */
.animfolio-service__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

/* In the inline head the icon must not push the title down with its stacked
   bottom margin, and it should not shrink when the title wraps. */
.animfolio-service__head .animfolio-service__icon {
	margin-bottom: 0;
	flex-shrink: 0;
}

.animfolio-service__head .animfolio-service__title {
	margin-bottom: 0;
	/* Allow the title to shrink/wrap inside the flex row instead of forcing
	   the icon off the card edge when the title is long. */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ========================================================================
   6. Buttons
   ======================================================================== */

.animfolio-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Consistent padding + 44px min touch target (WCAG 2.5.5) across all variants. */
	padding: 13px 26px;
	min-height: 44px;
	border: none;
	border-radius: var(--animfolio-radius, 12px);
	font-family: var(--animfolio-font-body);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 0.01em;
	position: relative;
}

/* Focus ring — meets WCAG 2.4.11 (AA) for all button variants */
.animfolio-button:focus-visible {
	outline: 3px solid var(--animfolio-accent);
	outline-offset: 3px;
}

/* Disabled state */
.animfolio-button:disabled,
.animfolio-button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	transform: none !important;
	box-shadow: none !important;
}

/* Loading state — spinner via pseudo-element */
.animfolio-button--loading {
	color: transparent !important;
	pointer-events: none;
	cursor: wait;
}

.animfolio-button--loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--animfolio-on-accent, #fff);
	border-radius: 50%;
	animation: animfolio-spin 0.7s linear infinite;
}

@keyframes animfolio-spin {
	to { transform: rotate(360deg); }
}

.animfolio-container .animfolio-button--primary,
.animfolio-container a.animfolio-button--primary {
	background: linear-gradient(135deg, var(--animfolio-accent), var(--animfolio-accent-hover));
	/* Label color is a token so formats with a light accent can supply a
	   dark, legible label. Defaults to white for the standard dark accents. */
	color: var(--animfolio-on-accent, #fff);
	box-shadow: 0 4px 16px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

.animfolio-container .animfolio-button--primary:hover,
.animfolio-container a.animfolio-button--primary:hover {
	color: var(--animfolio-on-accent, #fff);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px var(--animfolio-accent-glow, rgba(127, 119, 221, 0.5));
}

.animfolio-button--secondary {
	background: transparent;
	color: var(--animfolio-accent);
	border: 2px solid var(--animfolio-accent);
}

.animfolio-button--secondary:hover {
	background: var(--animfolio-accent-light);
	color: var(--animfolio-accent);
	transform: translateY(-2px);
}

/* Secondary loading spinner should use accent color */
.animfolio-button--secondary.animfolio-button--loading::after {
	border-color: rgba(127, 119, 221, 0.35);
	border-top-color: var(--animfolio-accent);
}

/* Ghost: a low-emphasis text button for tertiary actions (e.g. "Create New Card"). */
.animfolio-button--ghost {
	background: transparent;
	color: var(--animfolio-text-secondary);
	border: 1px solid transparent;
	box-shadow: none;
}

.animfolio-button--ghost:hover {
	color: var(--animfolio-text);
	border-color: var(--animfolio-border);
	background: transparent;
	transform: none;
}

/* ========================================================================
   7. Grid Layouts
   ======================================================================== */

.animfolio-grid {
	display: grid;
	gap: 24px;
}

.animfolio-grid--2 { grid-template-columns: repeat(2, 1fr); }
.animfolio-grid--3 { grid-template-columns: repeat(3, 1fr); }
.animfolio-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Tablet: <=1024px — grids drop to 2 columns ---- */
@media (max-width: 1024px) {
	.animfolio-grid--3,
	.animfolio-grid--4 { grid-template-columns: repeat(2, 1fr); }

	/* Tablet: reduce hero from full viewport to sensible height */
	.animfolio-hero {
		min-height: 70vh;
		min-height: 70dvh;
	}

	.animfolio-section {
		padding: 80px 0;
	}

	.animfolio-section__header {
		margin-bottom: 40px;
	}
}

/* ---- Mobile/landscape: <=768px — grids collapse to a single column,
        hero stacks (text above image), sections tighten ---- */
@media (max-width: 768px) {
	.animfolio-inner { padding: 0 20px; }

	/* All content grids collapse to one column on mobile. */
	.animfolio-grid--2,
	.animfolio-grid--3,
	.animfolio-grid--4 { grid-template-columns: 1fr; }

	/* Stats / auto-fit grids: force single column so counters never
	   squash side-by-side on a phone. */
	.animfolio-stats {
		grid-template-columns: 1fr;
	}

	/* Section vertical rhythm: clamp the configured spacing down for
	   mobile so sections aren't 100px tall on a 360px screen. */
	.animfolio-section {
		padding: min(var(--animfolio-section-spacing, 100px), 64px) 0;
	}

	.animfolio-section__header { margin-bottom: 36px; }

	/* Hero: single column, text above image, reduced height. */
	.animfolio-hero {
		min-height: 60vh;
		min-height: 60dvh;
		padding: 40px 0;
	}

	.animfolio-hero__name {
		font-size: clamp(2rem, 5vw, 4rem);
	}

	.animfolio-hero__title {
		font-size: clamp(1.125rem, 4vw, 1.75rem);
	}

	.animfolio-hero__subtitle {
		margin-bottom: 24px;
	}

	/* CTA buttons stack full-width for easy tapping. */
	.animfolio-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.animfolio-hero__cta .animfolio-button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.animfolio-hero__photo-wrapper {
		width: 140px;
		height: 140px;
	}

	/* On mobile, center the CTA + social rows together for a tidy stacked hero. */
	.animfolio-hero {
		--animfolio-hero-justify: center;
	}

	.animfolio-hero--photo-left .animfolio-hero__photo-wrapper,
	.animfolio-hero--photo-right .animfolio-hero__photo-wrapper {
		float: none;
		margin-inline: 0;
	}

	/* About: smaller portrait on mobile. */
	.animfolio-about__photo-wrapper {
		width: 150px;
		height: 150px;
	}

	/* Card padding shrinks on mobile per spec (~20px). */
	.animfolio-card {
		padding: 20px;
	}

	.animfolio-testimonial__quote {
		font-size: 0.9375rem;
	}

	/* Timeline responsive — collapse the left rail cleanly so dots/line
	   don't overhang and cards run full width. */
	.animfolio-timeline {
		padding-inline-start: 26px;
	}

	.animfolio-timeline__item {
		padding-bottom: 36px;
	}

	.animfolio-timeline__item::before {
		inset-inline-start: -21px;
	}

	.animfolio-timeline__dot {
		inset-inline-start: -26px;
	}

	.animfolio-timeline__content {
		padding: 16px;
	}
}

/* ---- Small phones: <=480px — tighter gutters, spacing, type ---- */
@media (max-width: 480px) {
	.animfolio-inner { padding: 0 20px; }

	.animfolio-hero {
		min-height: auto;
		padding: 48px 0;
	}

	.animfolio-section {
		padding: min(var(--animfolio-section-spacing, 100px), 52px) 0;
	}

	.animfolio-section__header {
		margin-bottom: 32px;
	}

	.animfolio-about__photo-wrapper {
		width: 140px;
		height: 140px;
	}
}

/* Landscape on phones: reduce hero height, tighten spacing */
@media (max-height: 500px) and (orientation: landscape) {
	.animfolio-hero {
		min-height: auto;
		padding: 60px 0;
	}

	.animfolio-hero__photo-wrapper {
		width: 100px;
		height: 100px;
	}

	.animfolio-hero__name {
		font-size: clamp(1.5rem, 5vw, 2.5rem);
	}

	.animfolio-hero__subtitle {
		margin-bottom: 20px;
	}

	.animfolio-section {
		padding: 48px 0;
	}

	.animfolio-nav {
		height: 48px;
	}
}

/* Very small screens (≤360px, covers iPhone SE-mini) */
@media (max-width: 360px) {
	.animfolio-inner {
		padding: 0 16px;
	}

	.animfolio-hero__name {
		font-size: clamp(1.5rem, 8vw, 2.5rem);
	}

	.animfolio-button {
		padding: 12px 20px;
		font-size: 0.875rem;
	}

	.animfolio-card {
		padding: 16px;
	}

	.animfolio-section__header {
		margin-bottom: 24px;
	}

	.animfolio-hero__cta {
		gap: 10px;
	}

	/* Visitor card: reduce horizontal padding at narrow widths */
	.animfolio-visitor-card__card {
		padding: 24px 16px;
	}

	/* Visitor card form row: force single column */
	.animfolio-visitor-card__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	/* Visitor card layout/subtitle padding */
	.animfolio-visitor-card__layout,
	.animfolio-visitor-card__subtitle {
		padding-inline: 16px;
	}

	.animfolio-visitor-card__toggle {
		padding: 16px;
	}
}

/* Galaxy Fold (≤300px) — narrowest phone, prevent all overflow */
@media (max-width: 300px) {
	.animfolio-inner {
		padding: 0 12px;
	}

	/* Hero: tighter typography at ~256px usable width */
	.animfolio-hero__name {
		font-size: clamp(1.25rem, 7vw, 2rem);
		letter-spacing: -0.02em;
	}

	.animfolio-hero__title {
		font-size: clamp(1rem, 5vw, 1.5rem);
	}

	/* Buttons: constrained to viewport, never overflow */
	.animfolio-button {
		padding: 11px 16px;
		font-size: 0.8125rem;
		max-width: 100%;
	}

	.animfolio-card {
		padding: 14px;
	}

	/* Visitor card: ultra-compact layout */
	.animfolio-visitor-card__card {
		padding: 20px 12px;
	}

	.animfolio-visitor-card__layout,
	.animfolio-visitor-card__subtitle {
		padding-inline: 12px;
	}

	.animfolio-visitor-card__toggle {
		padding: 14px 12px;
	}

	/* Section spacing: tighter at 280px */
	.animfolio-section {
		padding: 40px 0;
	}

	/* Stats: counter numbers stay within content width */
	.animfolio-stat__number {
		font-size: clamp(2rem, 10vw, 2.5rem);
	}
}

/* ========================================================================
   8. Hero
   ======================================================================== */

.animfolio-section--hero {
	padding: 0 0 40px;
}

.animfolio-hero {
	min-height: 100vh;
	min-height: 100dvh; /* Modern: accounts for mobile address bar */
	display: flex;
	align-items: center;
	/* Centre the content block horizontally too (the hero is a row flex, so
	   without this the block sits at the start/left). Side-by-side photo layouts
	   opt back out below. */
	justify-content: center;
	position: relative;
}

.animfolio-hero__content {
	position: relative;
	z-index: 2;
	/* Centered hero by default — reads better across formats than left-aligned.
	   Side-by-side photo layouts (photo-left/right) restore left alignment below;
	   individual formats (e.g. the CLI terminal) can override as needed. The CTA
	   and social rows follow via --animfolio-hero-justify. */
	text-align: center;
	--animfolio-hero-justify: center;
}

.animfolio-hero__name {
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 800;
	margin-bottom: 8px;
	letter-spacing: -0.03em;
	color: var(--animfolio-text);
	background: linear-gradient(135deg, var(--animfolio-text) 0%, var(--animfolio-text-secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.animfolio-hero__title {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	color: var(--animfolio-accent-text, var(--animfolio-accent));
	margin-bottom: 16px;
	font-weight: 600;
}

.animfolio-hero__subtitle {
	font-size: 1.125rem;
	color: var(--animfolio-text-secondary);
	margin-bottom: 40px;
	min-height: 1.6em;
}

.animfolio-hero__photo-wrapper {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--animfolio-accent);
	/* Centered with the rest of the hero (float wins for photo-left/right). */
	margin-inline: auto;
	margin-bottom: 32px;
	box-shadow: 0 0 40px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

.animfolio-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The CTA buttons AND the social row both follow the hero's alignment via one
   variable, so they always line up with each other (default left; centered
   heroes set --animfolio-hero-justify: center). */
.animfolio-hero__cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: var(--animfolio-hero-justify, flex-start);
}

.animfolio-hero__social {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	justify-content: var(--animfolio-hero-justify, flex-start);
	flex-wrap: wrap;
}

/* QR block in the hero (qr_position = hero/both) — give it clear breathing room
   from the social icons above it (which had none, so the QR crowded them), and
   align it to the hero's text alignment. */
.animfolio-hero__qr {
	margin-top: 40px;
	display: flex;
	justify-content: var(--animfolio-hero-justify, flex-start);
}

/* Hero photo size (sm/md/lg) — md (180px) is the base size set above. */
.animfolio-hero__photo-wrapper--sm { width: 120px; height: 120px; }
.animfolio-hero__photo-wrapper--lg { width: 260px; height: 260px; }

/* Optional per-photo Width/Height on the hero avatar (the same size controls the
   About photo offers). A width-only value ("Keep aspect ratio" on) scales the
   avatar proportionally so a circular frame stays a circle instead of becoming an
   ellipse. Specificity (0,3,0) beats the per-format wrapper size (0,2,0), while
   the inline width itself still wins; when an explicit height is also set, that
   exact value applies instead. */
.animfolio-hero__photo-wrapper[style*="width"]:not([style*="height"]) {
	height: auto;
	aspect-ratio: 1;
}

/* Hero photo position — left/right float the avatar beside the text (top is the
   default stacked layout). */
.animfolio-hero--photo-left .animfolio-hero__photo-wrapper { float: inline-start; margin-inline-end: 32px; margin-bottom: 16px; }
.animfolio-hero--photo-right .animfolio-hero__photo-wrapper { float: inline-end; margin-inline-start: 32px; margin-bottom: 16px; }
.animfolio-hero--photo-left .animfolio-hero__cta,
.animfolio-hero--photo-right .animfolio-hero__cta { clear: both; }

/* Side-by-side photo layouts read better left-aligned (text wraps beside the
   floated photo), so they opt out of the centered default. */
.animfolio-hero--photo-left .animfolio-hero__content,
.animfolio-hero--photo-right .animfolio-hero__content {
	text-align: start;
	--animfolio-hero-justify: flex-start;
}

/* Formats whose hero is centered: center the CTA + social rows to match. */
.animfolio-container--format-03,
.animfolio-container--format-06,
.animfolio-container--format-11,
.animfolio-container--format-13 {
	--animfolio-hero-justify: center;
}

/* Project cards: push the tech-stack chips + action buttons to the bottom so
   they line up across cards regardless of description length. */
.animfolio-project {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.animfolio-project .animfolio-card__tags {
	margin-top: auto;
}

.animfolio-hero__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;  /* 44px minimum touch target (WCAG 2.5.5) */
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--animfolio-border);
	color: var(--animfolio-text-secondary);
	transition: all 0.3s ease;
	font-size: 0.875rem;
}

.animfolio-hero__social a:hover {
	color: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
	transform: translateY(-2px);
}

/* ===== Social icon styles (the social_icon_style setting) =====================
   Applied via .animfolio-social-icons--{outline|filled|rounded|square|text} on
   the hero AND footer social rows. The label span is hidden for icon styles and
   shown for the 'text' style. Placed AFTER .animfolio-hero__social a so these
   equal-specificity rules win for the chosen style. */
.animfolio-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.animfolio-social-icons .animfolio-social__label {
	display: none;
}
.animfolio-social-icons--outline a,
.animfolio-social-icons--filled a,
.animfolio-social-icons--rounded a,
.animfolio-social-icons--square a {
	width: 44px;
	height: 44px;
	border: 1px solid var(--animfolio-border);
	color: var(--animfolio-text-secondary);
}
.animfolio-social-icons--outline a { background: transparent; border-radius: 50%; }
.animfolio-social-icons--filled a  { background: var(--animfolio-surface, var(--animfolio-bg-secondary)); border-radius: 50%; }
.animfolio-social-icons--rounded a { background: var(--animfolio-surface, var(--animfolio-bg-secondary)); border-radius: 12px; }
.animfolio-social-icons--square a  { background: var(--animfolio-surface, var(--animfolio-bg-secondary)); border-radius: 0; }
.animfolio-social-icons--outline a:hover {
	color: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
	transform: translateY(-2px);
}
.animfolio-social-icons--filled a:hover,
.animfolio-social-icons--rounded a:hover,
.animfolio-social-icons--square a:hover {
	background: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	color: var(--animfolio-on-accent, #fff);
	transform: translateY(-2px);
}
/* Text style: hide the glyph, show the platform name. */
.animfolio-social-icons--text a {
	color: var(--animfolio-text-secondary);
	width: auto;
	height: auto;
	border: none;
	background: none;
	padding: 4px 6px;
}
.animfolio-social-icons--text a svg { display: none; }
.animfolio-social-icons--text .animfolio-social__label {
	display: inline;
	font-size: 0.95rem;
	font-weight: 600;
}
.animfolio-social-icons--text a:hover .animfolio-social__label {
	color: var(--animfolio-accent-text, var(--animfolio-accent));
}

/* Typed cursor */
.animfolio-typed-cursor::after {
	content: '|';
	animation: animfolio-blink 1s infinite;
	color: var(--animfolio-accent);
	margin-inline-start: 2px;
}

@keyframes animfolio-blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* ========================================================================
   9. About
   ======================================================================== */

.animfolio-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.animfolio-about__photo-wrapper {
	width: 200px;
	height: 200px;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid var(--animfolio-border);
	margin: 0 auto;
}

.animfolio-about__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.animfolio-about__bio {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--animfolio-text-secondary);
	max-width: 800px;
	margin-inline: auto;
}

.animfolio-about__fun-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
	justify-content: center;
}

.animfolio-about__fun-fact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--animfolio-bg-tertiary, var(--animfolio-bg-secondary));
	border: 1px solid var(--animfolio-border);
	border-radius: 40px;
	font-size: 0.875rem;
	color: var(--animfolio-text-secondary);
	transition: all 0.3s ease;
}

.animfolio-about__fun-fact:hover {
	border-color: var(--animfolio-accent);
	color: var(--animfolio-accent);
}

.animfolio-about__fun-fact::before {
	content: '\2022';
	color: var(--animfolio-accent);
	font-size: 1.2em;
}

/* ========================================================================
   10. Timeline (Experience / Education)
   ======================================================================== */

.animfolio-timeline {
	position: relative;
	padding-inline-start: 40px;
}

.animfolio-timeline__line {
	display: none;
}

.animfolio-timeline__item {
	position: relative;
	padding-bottom: 48px;
}

.animfolio-timeline__item::before {
	content: '';
	position: absolute;
	inset-inline-start: -35px;
	top: 18px;
	bottom: -6px;
	width: 2px;
	background: linear-gradient(180deg, var(--animfolio-accent), var(--animfolio-border) 80%);
}

.animfolio-timeline__item:last-child {
	padding-bottom: 0;
}

.animfolio-timeline__item:last-child::before {
	display: none;
}

.animfolio-timeline__dot {
	position: absolute;
	inset-inline-start: -40px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--animfolio-accent);
	border: 3px solid var(--animfolio-bg);
	box-shadow: 0 0 0 2px var(--animfolio-accent), 0 0 12px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

.animfolio-timeline__content {
	padding: 24px;
	border-inline-start: none;
}

/* Prevent card border from creating a double-line effect on timeline */
.animfolio-timeline .animfolio-card {
	border-inline-start: none;
}

.animfolio-timeline__role {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--animfolio-text);
}

.animfolio-timeline__company {
	font-size: 1rem;
	font-weight: 500;
	color: var(--animfolio-accent);
}

.animfolio-timeline__date {
	font-size: 0.875rem;
	color: var(--animfolio-text-muted);
	margin: 4px 0 12px;
}

.animfolio-timeline__description {
	color: var(--animfolio-text-secondary);
	line-height: 1.7;
}

.animfolio-timeline__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 16px;
}

.animfolio-timeline__logo {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	margin-bottom: 12px;
}

/* ========================================================================
   11. Skills
   ======================================================================== */

.animfolio-skills__category {
	margin-bottom: 40px;
}

.animfolio-skills__category-title {
	font-size: 1.125rem;
	margin-bottom: 20px;
	color: var(--animfolio-text);
}

.animfolio-skills__item {
	margin-bottom: 16px;
}

.animfolio-skills__label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 0.875rem;
	color: var(--animfolio-text-secondary);
}

.animfolio-skills__value {
	color: var(--animfolio-accent);
	font-weight: 600;
}

.animfolio-skills__bar {
	height: 8px;
	background: var(--animfolio-bg-tertiary, rgba(255, 255, 255, 0.05));
	border-radius: 4px;
	overflow: hidden;
}

.animfolio-skills__bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--animfolio-accent), var(--animfolio-secondary));
	border-radius: 4px;
	transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 0 8px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

/* ---- Skills: Tag Cloud ---- */

.animfolio-skills__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.animfolio-skills__tag {
	display: inline-block;
	padding: 8px 18px;
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: 40px;
	color: var(--animfolio-text);
	font-weight: 500;
	transition: all 0.3s ease;
}

.animfolio-skills__tag:hover {
	border-color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
	color: var(--animfolio-accent);
}

.animfolio-skills__tag--xl { font-size: 1.1rem; padding: 10px 24px; border-color: var(--animfolio-accent); color: var(--animfolio-accent); }
.animfolio-skills__tag--lg { font-size: 1rem; padding: 9px 20px; }
.animfolio-skills__tag--md { font-size: 0.9rem; }
/* --sm: use muted text color instead of opacity so contrast is preserved */
.animfolio-skills__tag--sm { font-size: 0.8rem; padding: 6px 14px; color: var(--animfolio-text-muted, var(--animfolio-text-secondary)); }

/* ---- Skills: Compact Grid ---- */

.animfolio-skills__compact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.animfolio-skills__compact-item {
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius, 12px);
	padding: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	transition: border-color 0.3s ease;
}

.animfolio-skills__compact-item:hover {
	border-color: var(--animfolio-accent);
}

.animfolio-skills__compact-name {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--animfolio-text);
}

.animfolio-skills__compact-level {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--animfolio-accent);
}

.animfolio-skills__compact-bar {
	width: 100%;
	height: 4px;
	background: var(--animfolio-bg-tertiary, rgba(255, 255, 255, 0.05));
	border-radius: 2px;
	overflow: hidden;
}

.animfolio-skills__compact-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--animfolio-accent), var(--animfolio-secondary));
	border-radius: 2px;
}

/* ---- Skills: Dot Rating ---- */

.animfolio-skills__dot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--animfolio-border);
}

.animfolio-skills__dot-name {
	font-size: 0.875rem;
	color: var(--animfolio-text-secondary);
}

.animfolio-skills__dots {
	display: flex;
	gap: 6px;
}

.animfolio-skills__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--animfolio-bg-tertiary, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--animfolio-border);
	transition: all 0.3s ease;
}

.animfolio-skills__dot--filled {
	background: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	box-shadow: 0 0 6px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

/* Skills — Constellation / Orbit visualization.
   Central hub with skill nodes positioned on a ring around it. Pure CSS,
   no JS dependency. The readable skill list lives in .animfolio-sr-only. */
.animfolio-skills__category--constellation {
	text-align: center;
}

.animfolio-constellation {
	--animfolio-constellation-size: clamp(220px, 60vw, 340px);
	--animfolio-constellation-radius: calc(var(--animfolio-constellation-size) / 2 - 44px);
	position: relative;
	width: var(--animfolio-constellation-size);
	height: var(--animfolio-constellation-size);
	margin: 24px auto 8px;
	max-width: 100%;
}

.animfolio-constellation__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: 8px;
	border-radius: 50%;
	background: var(--animfolio-bg-secondary);
	border: 2px solid var(--animfolio-accent);
	color: var(--animfolio-accent-text, var(--animfolio-accent));
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 0 24px var(--animfolio-accent-subtle, rgba(127, 119, 221, 0.18));
	z-index: 2;
}

/* The ring that carries the nodes. Rotating this rotates all nodes together;
   each node counter-rotates so its label stays upright. */
.animfolio-constellation::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: calc(var(--animfolio-constellation-radius) * 2);
	height: calc(var(--animfolio-constellation-radius) * 2);
	border: 1px dashed var(--animfolio-border);
	border-radius: 50%;
	opacity: 0.6;
	pointer-events: none;
}

.animfolio-constellation__node {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	max-width: 110px;
	padding: 7px 12px;
	border-radius: var(--animfolio-radius, 12px);
	background: var(--animfolio-bg-tertiary, rgba(255, 255, 255, 0.06));
	border: 1px solid var(--animfolio-border);
	color: var(--animfolio-text);
	font-size: 0.78rem;
	line-height: 1.2;
	text-align: center;
	opacity: var(--animfolio-constellation-alpha, 1);
	/* Position node i of N on the ring, then scale by skill level. */
	transform:
		translate(-50%, -50%)
		rotate(calc(360deg / var(--animfolio-constellation-count, 1) * var(--animfolio-constellation-index, 0)))
		translateY(calc(var(--animfolio-constellation-radius) * -1))
		rotate(calc(-360deg / var(--animfolio-constellation-count, 1) * var(--animfolio-constellation-index, 0)))
		scale(var(--animfolio-constellation-scale, 1));
	transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	will-change: transform;
}

.animfolio-constellation__node:hover {
	border-color: var(--animfolio-accent);
	box-shadow: 0 0 14px var(--animfolio-accent-subtle, rgba(127, 119, 221, 0.25));
	opacity: 1;
	z-index: 3;
}

.animfolio-constellation__label {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.animfolio-constellation {
		--animfolio-constellation-size: min(280px, 86vw);
	}

	.animfolio-constellation__node {
		font-size: 0.7rem;
		min-width: 48px;
		max-width: 88px;
		padding: 6px 9px;
	}

	.animfolio-constellation__hub {
		width: 72px;
		height: 72px;
		font-size: 0.72rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.animfolio-constellation__node {
		transition: none;
	}
}

/* ========================================================================
   12. Projects
   ======================================================================== */

.animfolio-project {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.animfolio-project__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--animfolio-radius, 12px) var(--animfolio-radius, 12px) 0 0;
}

/* Responsive video embed (YouTube/Vimeo oEmbed) — fills the card top, 16:9. */
.animfolio-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--animfolio-radius, 12px) var(--animfolio-radius, 12px) 0 0;
	overflow: hidden;
	background: #000;
}

.animfolio-video-embed iframe,
.animfolio-video-embed video,
.animfolio-video-embed embed,
.animfolio-video-embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Visually-hidden utility (screen-reader-only) for live regions/announcements. */
.animfolio-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Project gallery thumbnails (lightbox-enabled). */
.animfolio-project__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px 0;
}

.animfolio-project__gallery .animfolio-project__gallery-thumb {
	width: 60px;
	height: 60px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--animfolio-radius-sm, 6px);
	border: 1px solid var(--animfolio-border);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.animfolio-project__gallery .animfolio-project__gallery-thumb:hover {
	transform: scale(1.06);
}

/* Placeholder for projects without images */
.animfolio-project__placeholder {
	width: 100%;
	/* Compact "no screenshot" strip instead of a full 16:10 image-size void, so
	   image-less projects don't leave a large empty area in the card. */
	min-height: 120px;
	background: linear-gradient(135deg, var(--animfolio-bg-tertiary, #1e1e1e), var(--animfolio-bg-secondary));
	border-radius: var(--animfolio-radius, 12px) var(--animfolio-radius, 12px) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--animfolio-accent);
	opacity: 0.3;
}

/* Project text content inherits card padding (28px on desktop).
   No additional padding override needed — card handles it. */

.animfolio-project__title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 8px;
	margin-top: 20px;
}

.animfolio-project__description {
	color: var(--animfolio-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 0;
}

.animfolio-project__stack {
	display: flex;
	flex-wrap: wrap;
	/* ~8px both axes so chips never touch when they wrap onto multiple rows. */
	gap: 8px;
	margin-top: 16px;
}

.animfolio-project__links {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--animfolio-border);
	display: flex;
	align-items: center;
	/* ~12px between Live Demo / Source; row-gap keeps breathing room when they
	   wrap onto two lines on narrow cards. */
	gap: 12px;
	flex-wrap: wrap;
}

/* Card footer inside project: no border (project__links has its own treatment),
   but keep a clear vertical gap so the action buttons don't touch the tech-stack
   chips above them. */
.animfolio-project .animfolio-card__footer {
	border-top: none;
	padding-top: 0;
	margin-top: 18px;
}

.animfolio-project__links .animfolio-button {
	padding: 10px 20px;
	font-size: 0.875rem;
}

/* ========================================================================
   13. Stats / Counters
   ======================================================================== */

.animfolio-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	text-align: center;
}

.animfolio-stat {
	padding: 36px 24px;
	text-align: center;
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius, 12px);
	background: var(--animfolio-bg-secondary);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.animfolio-stat:hover {
	border-color: var(--animfolio-accent);
	box-shadow: 0 0 24px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.15));
}

.animfolio-stat__number {
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 800;
	font-family: var(--animfolio-font-heading);
	/* Gradient clip with solid color fallback for browsers that drop -webkit-background-clip */
	color: var(--animfolio-accent);
	background: linear-gradient(135deg, var(--animfolio-accent), var(--animfolio-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
	line-height: 1.1;
}

.animfolio-stat__label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--animfolio-text-secondary);
	margin-top: 12px;
	display: block;
	letter-spacing: 0.02em;
}

/* ========================================================================
   14. Testimonials — Carousel
   ======================================================================== */

.animfolio-testimonials-carousel {
	position: relative;
	/* The inner __track has its own overflow-x:auto, so the carousel itself must
	   stay visible — otherwise the navigation dots below the track get clipped. */
	overflow: visible;
}

.animfolio-testimonials-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 0;
}

.animfolio-testimonials-carousel__track::-webkit-scrollbar {
	display: none;
}

.animfolio-testimonials-carousel__slide {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding: 0 4px;
	box-sizing: border-box;
}

/* Trailing slide with one card (odd testimonial count): a single centered
   column so the carousel never ends on a half-empty slide. */
.animfolio-testimonials-carousel__slide--single {
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

@media (max-width: 768px) {
	.animfolio-testimonials-carousel__slide {
		grid-template-columns: 1fr;
	}

	.animfolio-testimonials-carousel__slide--single {
		grid-template-columns: 1fr;
	}
}

.animfolio-testimonials-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
}

.animfolio-testimonials-carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--animfolio-border);
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
}

.animfolio-testimonials-carousel__dot:hover,
.animfolio-testimonials-carousel__dot--active {
	background: var(--animfolio-accent);
	transform: scale(1.3);
}

.animfolio-testimonials-carousel__dot:focus-visible {
	outline: 3px solid var(--animfolio-accent);
	outline-offset: 3px;
}

/* ========================================================================
   14b. Testimonial Cards
   ======================================================================== */

/* Single testimonial: a centered, width-constrained card so one quote never
   leaves an empty half (which a 2-col grid would). */
.animfolio-testimonials-single {
	display: flex;
	justify-content: center;
}

.animfolio-testimonials-single .animfolio-testimonial {
	width: 100%;
	max-width: 640px;
}

.animfolio-testimonial {
	display: flex;
	flex-direction: column;
}

.animfolio-testimonial__quote {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--animfolio-text-secondary);
	position: relative;
	padding-inline-start: 20px;
	padding-bottom: 4px; /* prevent italic descenders from clipping */
	border-inline-start: 3px solid var(--animfolio-accent);
	font-style: italic;
	flex: 1;
	/* overflow: hidden removed — was clipping italic descenders on long quotes */
}

.animfolio-testimonial__quote::before {
	content: '\201C';
	position: absolute;
	top: -4px;
	inset-inline-start: 4px;
	font-size: 2rem;
	color: var(--animfolio-accent);
	opacity: 0.15;
	font-family: Georgia, serif;
	line-height: 1;
}

.animfolio-testimonial__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--animfolio-border);
}

.animfolio-testimonial__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--animfolio-accent), var(--animfolio-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.animfolio-testimonial__author {
	display: block;
	font-weight: 600;
	color: var(--animfolio-text);
	font-style: normal;
	font-size: 0.9375rem;
}

.animfolio-testimonial__role,
.animfolio-testimonial__company {
	font-size: 0.8125rem;
	color: var(--animfolio-text-muted);
	font-style: normal;
}

/* ========================================================================
   15. Contact
   ======================================================================== */

.animfolio-contact {
	max-width: 100%;
}

.animfolio-contact__heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--animfolio-text);
	margin-bottom: 8px;
}

.animfolio-contact__description {
	font-size: 1rem;
	color: var(--animfolio-text-secondary);
	margin-bottom: 32px;
	max-width: 640px;
}

.animfolio-contact__layout {
	display: grid;
	/* Two real columns so the QR has space to center within its own column
	   instead of collapsing to its content width and hugging the right edge.
	   align-items:center vertically centers the (short) QR against the form. */
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.animfolio-contact__form-wrapper {
	max-width: 560px;
	min-width: 0; /* allow shrink inside grid without overflow */
}

.animfolio-contact__qr-wrapper {
	text-align: center;
	padding-top: 16px;
	min-width: 180px;
}

.animfolio-contact__qr-wrapper .animfolio-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

@media (max-width: 768px) {
	.animfolio-contact__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ========================================================================
   16. Utility Classes
   ======================================================================== */

/* Skip-to-content link (accessibility). */
.animfolio-skip-link {
	position: absolute;
	top: -100px;
	inset-inline-start: 16px;
	background: var(--animfolio-accent);
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	z-index: 999;
	text-decoration: none;
	transition: top 0.2s ease;
}

.animfolio-skip-link:focus {
	top: 8px;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.animfolio-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.animfolio-hidden { display: none; }
.animfolio-no-scroll { overflow: hidden; }

/* ========================================================================
   17. Back to Top
   ======================================================================== */

.animfolio-back-to-top {
	position: fixed;
	bottom: max(24px, env(safe-area-inset-bottom, 0px) + 12px);
	right: max(24px, env(safe-area-inset-right, 0px) + 12px);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--animfolio-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 200;
	box-shadow: 0 4px 16px var(--animfolio-accent-shadow, rgba(127, 119, 221, 0.3));
}

.animfolio-back-to-top--visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.animfolio-back-to-top:hover {
	background: var(--animfolio-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px var(--animfolio-accent-glow, rgba(127, 119, 221, 0.5));
}

/* ========================================================================
   18. Progress Bar
   ======================================================================== */

.animfolio-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 400;
	background: transparent;
}

.animfolio-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--animfolio-accent), var(--animfolio-secondary));
	transition: width 0.1s linear;
}

/* ========================================================================
   19. Powered By
   ======================================================================== */

.animfolio-footer-social {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 32px 0 16px;
}

.animfolio-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--animfolio-border);
	color: var(--animfolio-text-secondary);
	transition: all 0.3s ease;
}

.animfolio-footer-social a:hover {
	color: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
}

/* Footer QR — centered like the other footer elements; the footer has room, so
   the QR is rendered larger here (size set in the renderer) for easy scanning. */
.animfolio-footer-qr {
	display: flex;
	justify-content: center;
	padding: 40px 0 8px;
}

/* Keep the larger footer QR from overflowing narrow viewports — scale the
   rendered canvas/svg down to fit while preserving the square aspect ratio. */
.animfolio-footer-qr .animfolio-qr {
	max-width: 100%;
}

.animfolio-footer-qr .animfolio-qr__code {
	max-width: 100%;
}

.animfolio-footer-qr .animfolio-qr__code canvas,
.animfolio-footer-qr .animfolio-qr__code svg,
.animfolio-footer-qr .animfolio-qr__code img {
	max-width: 100%;
	height: auto;
}

.animfolio-powered-by {
	text-align: center;
	padding: 24px 32px;
	font-size: 0.75rem;
	color: var(--animfolio-text-muted);
	border-top: 1px solid var(--animfolio-border);
	margin-top: 0;
}

.animfolio-powered-by a {
	color: var(--animfolio-accent);
}

/* ========================================================================
   20. Page Mode: Embedded
   ======================================================================== */

.animfolio-container--embedded {
	/* Embedded inside a host theme page: must NOT assume the full viewport.
	   Height is driven by content, not 100vh. */
	min-height: auto;
	border-radius: var(--animfolio-radius, 12px);
	/* clip:hidden keeps rounded corners crisp but would clip a position:absolute
	   menu — the mobile nav menu is position:fixed (in animfolio-nav.css) so it
	   escapes this clip and still paints above content. */
	overflow: hidden;
}

.animfolio-container--embedded .animfolio-section--hero {
	padding: 0;
}

/* Embedded hero: cap height so it sits comfortably inside a host page instead
   of forcing a near-full-viewport block. Falls back to a fixed cap; modern
   browsers use min(viewport, ceiling) so a very tall viewport can't blow it up
   and a very short host area can't be over-stretched. */
.animfolio-container--embedded .animfolio-hero {
	min-height: 0;
	min-height: min(60vh, 560px);
	min-height: min(60dvh, 560px);
	padding: 48px 0;
}

@media (max-height: 500px) and (orientation: landscape) {
	.animfolio-container--embedded .animfolio-hero {
		min-height: auto;
		padding: 40px 0;
	}
}

/* ========================================================================
   21. Empty State
   ======================================================================== */

.animfolio-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	text-align: center;
}

.animfolio-empty__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 360px;
	padding: 48px 24px;
}

/* Large illustrative icon */
.animfolio-empty__icon {
	font-size: 3rem;
	line-height: 1;
	opacity: 0.4;
}

.animfolio-empty__title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--animfolio-text);
	margin: 0;
}

.animfolio-empty__desc {
	font-size: 0.9375rem;
	color: var(--animfolio-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* ========================================================================
   21. Custom Cursor
   ======================================================================== */

.animfolio-cursor {
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 700;
}

.animfolio-cursor__dot {
	width: 6px;
	height: 6px;
	background: var(--animfolio-accent);
	border-radius: 50%;
	position: fixed;
	top: -3px;
	left: -3px;
	pointer-events: none;
}

.animfolio-cursor__circle {
	width: 36px;
	height: 36px;
	border: 1px solid var(--animfolio-accent);
	border-radius: 50%;
	position: fixed;
	top: -18px;
	left: -18px;
	pointer-events: none;
	transition: width 0.2s ease, height 0.2s ease;
}

.animfolio-cursor__circle--hover {
	width: 56px;
	height: 56px;
	top: -28px;
	left: -28px;
	opacity: 0.5;
}

/* ========================================================================
   22. Honeypot (spam protection)
   ======================================================================== */

.animfolio-form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* ========================================================================
   Visitor Card Creator
   ======================================================================== */

.animfolio-visitor-card {
	margin-top: 0;
	padding-top: 0;
}

.animfolio-section--visitor-card {
	padding: max(48px, var(--animfolio-section-spacing, 80px)) 0;
}

.animfolio-visitor-card__details {
	border: none;
}

.animfolio-visitor-card__toggle {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	list-style: none;
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius, 12px);
	transition: all 0.3s ease;
}

.animfolio-visitor-card__toggle:hover {
	border-color: var(--animfolio-accent);
}

.animfolio-visitor-card__toggle::-webkit-details-marker {
	display: none;
}

.animfolio-visitor-card__toggle-text {
	flex: 1;
}

.animfolio-visitor-card__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0;
	color: var(--animfolio-text);
}

.animfolio-visitor-card__expand-hint {
	font-size: 0.8125rem;
	color: var(--animfolio-text-muted);
	display: block;
	margin-top: 2px;
}

/* Anonymous "cards created" tally shown in the creator header. */
.animfolio-visitor-card__count {
	font-size: 0.8125rem;
	color: var(--animfolio-text-secondary);
	display: block;
	margin-top: 4px;
}

.animfolio-visitor-card__count strong {
	color: var(--animfolio-accent);
	font-weight: 700;
}

.animfolio-visitor-card__chevron {
	color: var(--animfolio-text-muted);
	transition: transform 0.3s ease;
	flex-shrink: 0;
	display: flex;
}

.animfolio-visitor-card__details[open] .animfolio-visitor-card__chevron {
	transform: rotate(180deg);
}

.animfolio-visitor-card__details[open] .animfolio-visitor-card__toggle {
	border-radius: var(--animfolio-radius, 12px) var(--animfolio-radius, 12px) 0 0;
	border-bottom-color: transparent;
}

.animfolio-visitor-card__subtitle {
	font-size: 0.9375rem;
	color: var(--animfolio-text-secondary);
	margin-bottom: 32px;
	line-height: 1.6;
	padding: 24px 24px 0;
}

/* Content wrapper when details is open — fill the expanded panel with the same
   surface as the toggle bar so the whole open card reads as one bordered box
   (without the background, the side borders just ran down an empty/transparent
   area, leaving the panel looking unbordered and uncolored). */
.animfolio-visitor-card__details[open] > .animfolio-visitor-card__subtitle,
.animfolio-visitor-card__details[open] > .animfolio-visitor-card__layout {
	border-inline-start: 1px solid var(--animfolio-border);
	border-inline-end: 1px solid var(--animfolio-border);
	background: var(--animfolio-bg-secondary);
}

.animfolio-visitor-card__details[open] > *:last-child {
	border-bottom: 1px solid var(--animfolio-border);
	border-radius: 0 0 var(--animfolio-radius, 12px) var(--animfolio-radius, 12px);
	padding-bottom: 24px;
}

.animfolio-visitor-card__layout {
	max-width: 100%;
	padding: 0 24px;
}

.animfolio-visitor-card__form {
	max-width: 100%;
}

.animfolio-visitor-card__fieldset {
	border: none;
	padding: 0;
	margin: 0 0 24px;
}

.animfolio-visitor-card__fieldset legend {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--animfolio-accent);
	margin-bottom: 12px;
	padding: 0;
}

.animfolio-visitor-card__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 12px;
}

.animfolio-visitor-card__form .animfolio-form__group {
	margin-bottom: 12px;
}

.animfolio-visitor-card__form .animfolio-form__label {
	font-size: 0.8125rem;
	color: var(--animfolio-text-secondary);
	margin-bottom: 4px;
}

.animfolio-visitor-card__form .animfolio-form__input,
.animfolio-visitor-card__form .animfolio-form__textarea {
	width: 100%;
	padding: 10px 14px;
	font-size: 0.9375rem;
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: 8px;
	color: var(--animfolio-text);
	transition: border-color 0.2s;
}

.animfolio-visitor-card__form .animfolio-form__input:focus,
.animfolio-visitor-card__form .animfolio-form__textarea:focus {
	border-color: var(--animfolio-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--animfolio-accent-light);
}

.animfolio-visitor-card__generate {
	margin-top: 20px;
	width: 100%;
	padding: 14px 28px;
	font-size: 1rem;
}

@media (min-width: 480px) {
	.animfolio-visitor-card__generate {
		width: auto;
	}
}

/* Preview card */
.animfolio-visitor-card__preview {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
}

.animfolio-visitor-card__card {
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: 16px;
	padding: 40px 32px;
	margin-bottom: 24px;
	text-align: center;
}

.animfolio-visitor-card__card-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--animfolio-text);
	margin-bottom: 4px;
}

.animfolio-visitor-card__card-title {
	font-size: 1rem;
	color: var(--animfolio-accent);
	margin-bottom: 4px;
}

.animfolio-visitor-card__card-company {
	font-size: 0.9375rem;
	color: var(--animfolio-text-secondary);
	margin-bottom: 16px;
}

.animfolio-visitor-card__card-details {
	font-size: 0.8125rem;
	color: var(--animfolio-text-muted);
	line-height: 1.8;
}

.animfolio-visitor-card__card-socials {
	font-size: 0.75rem;
	color: var(--animfolio-accent);
	margin-top: 8px;
	font-weight: 500;
}

.animfolio-visitor-card__qr {
	display: inline-block;
	margin: 20px auto;
	background: #fff;
	padding: 12px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.animfolio-visitor-card__scan-hint {
	font-size: 0.75rem;
	color: var(--animfolio-text-muted);
	margin: 0 0 16px;
}

/* Privacy reassurance under the generate button — all-client-side, no storage. */
.animfolio-visitor-card__privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--animfolio-text-secondary);
	background: var(--animfolio-accent-light);
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius-sm, 6px);
}

.animfolio-visitor-card__privacy-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--animfolio-accent);
}

.animfolio-visitor-card__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 480px) {
	.animfolio-visitor-card__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.animfolio-visitor-card__card {
		padding: 28px 20px;
	}

	.animfolio-visitor-card__actions {
		flex-direction: column;
	}

	.animfolio-visitor-card__actions .animfolio-button {
		width: 100%;
	}
}

/* ========================================================================
   Blog — "Load More" pagination
   ======================================================================== */

.animfolio-container .animfolio-blog-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--animfolio-space-lg, 2rem);
}

/* ========================================================================
   Project Case Study — modal
   ======================================================================== */

/* The hidden source container holding the case-study HTML — kept out of the
   normal flow but available to the JS that clones it into the modal. */
.animfolio-container .animfolio-project__casestudy {
	display: none;
}

/* Shared, single overlay element (created once by animfolio-casestudy.js and
   appended to <body>, so it is intentionally not nested under
   .animfolio-container). */
.animfolio-casestudy-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 24px;
	-webkit-overflow-scrolling: touch;
}

.animfolio-casestudy-modal__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 88vh;
	max-height: 88svh;
	overflow-y: auto;
	background: var(--animfolio-bg-secondary, #141414);
	color: var(--animfolio-text, #e5e5e5);
	border: 1px solid var(--animfolio-border, rgba(255, 255, 255, 0.1));
	border-radius: var(--animfolio-radius, 12px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	padding: clamp(24px, 5vw, 48px);
	outline: none;
}

.animfolio-casestudy-modal__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 16px;
	background: none;
	border: none;
	color: var(--animfolio-text-secondary, #a0a0a0);
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	padding: 8px;
	opacity: 0.8;
	transition: opacity 0.2s, color 0.2s;
}

.animfolio-casestudy-modal__close:hover,
.animfolio-casestudy-modal__close:focus-visible {
	opacity: 1;
	color: var(--animfolio-accent, #7f77dd);
}

.animfolio-casestudy-modal__title {
	margin: 0 0 1rem;
	padding-inline-end: 2rem;
	font-family: var(--animfolio-font-heading, inherit);
	color: var(--animfolio-text, #e5e5e5);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.2;
}

.animfolio-casestudy-modal__body {
	color: var(--animfolio-text-secondary, #a0a0a0);
	line-height: 1.7;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.animfolio-casestudy-modal__body > :first-child {
	margin-top: 0;
}

.animfolio-casestudy-modal__body > :last-child {
	margin-bottom: 0;
}

.animfolio-casestudy-modal__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--animfolio-radius, 12px);
}

.animfolio-casestudy-modal__body a {
	color: var(--animfolio-accent, #7f77dd);
}

@media (max-width: 600px) {
	.animfolio-casestudy-modal {
		padding: 0;
	}

	.animfolio-casestudy-modal__panel {
		max-height: 100vh;
		max-height: 100svh;
		border-radius: 0;
		border: none;
	}
}

/* ---- 'auto' colour scheme: no-JS fallback ----
   The theme-toggle script resolves the 'auto' scheme to an explicit dark/light
   class on load (and tracks the OS preference live). When JavaScript is
   unavailable the failsafe never adds the `animfolio-js` class to <html>, so we
   bridge the OS-light case here with the default light palette — the dark
   palette is already the rendered default, so only the light case needs an
   override. Scoped to html:not(.animfolio-js) so the JS path is untouched. */
@media (prefers-color-scheme: light) {
	html:not(.animfolio-js) .animfolio-container[data-animfolio-scheme="auto"] {
		--animfolio-bg: #ffffff;
		--animfolio-bg-secondary: #f5f5f5;
		--animfolio-bg-tertiary: #ebebeb;
		--animfolio-text: #1a1a1a;
		--animfolio-text-secondary: #555555;
		--animfolio-text-muted: #767676;
		--animfolio-border: rgba(0, 0, 0, 0.1);
		--animfolio-border-strong: rgba(0, 0, 0, 0.2);
		--animfolio-surface: #ffffff;
		--animfolio-surface-hover: #f9f9f9;
		--animfolio-overlay: rgba(0, 0, 0, 0.5);
	}
}

/* ---- Accessibility: visible keyboard focus (WCAG 2.4.7) + reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
	html,
	html.animfolio-smooth-scroll {
		scroll-behavior: auto;
	}
}

.animfolio-back-to-top:focus-visible,
.animfolio-testimonials-carousel__dot:focus-visible {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 2px;
}

.animfolio-skip-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/**
 * AnimFolio Animation Styles
 *
 * CSS-only animation fallbacks. These work without JavaScript.
 * Uses only transform and opacity (GPU-accelerated).
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

/* ========================================================================
   1. Initial Hidden State (before animation triggers)
   ======================================================================== */

/* The initial hidden state is gated on the .animfolio-js class, which the inline
   <head> failsafe adds synchronously before first paint. This makes the reveal
   bulletproof against caching/optimization plugins (WP Rocket, LiteSpeed, W3TC,
   Cloudflare Rocket Loader) that defer, combine, or delay-until-interaction the
   scripts: if the failsafe script never runs, .animfolio-js is never added, so
   elements stay fully VISIBLE rather than stuck at opacity:0 (a blank page). It
   also covers browsers without @media (scripting) support. */
.animfolio-js [data-animfolio-animate] {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-duration: var(--animfolio-duration, 0.6s);
	transition-timing-function: var(--animfolio-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ------------------------------------------------------------------------
   LCP fast-path — the hero is above the fold and usually holds the Largest
   Contentful Paint element (name/photo). Hiding it at opacity:0 until the
   footer JS engine runs pins LCP to JS execution time (and a cache plugin
   that defers/combines JS makes that worse). Here the hero paints at full
   opacity IMMEDIATELY and animates via a pure-CSS transform — no JS, no
   opacity ramp — so LCP fires at first paint. Below-the-fold sections keep
   the JS scroll-reveal. Reduced-motion users skip the animation entirely.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.animfolio-hero [data-animfolio-animate] {
		opacity: 1;
		animation: animfolio-hero-enter 0.7s var(--animfolio-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
	}
	.animfolio-hero [data-animfolio-animate][data-animfolio-delay="0.1"] { animation-delay: 0.1s; }
	.animfolio-hero [data-animfolio-animate][data-animfolio-delay="0.2"] { animation-delay: 0.2s; }
	.animfolio-hero [data-animfolio-animate][data-animfolio-delay="0.3"] { animation-delay: 0.3s; }
	.animfolio-hero [data-animfolio-animate][data-animfolio-delay="0.4"] { animation-delay: 0.4s; }
}

@keyframes animfolio-hero-enter {
	from { transform: translate3d(0, 20px, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* ========================================================================
   2. Animation Types (initial transforms)
   ======================================================================== */

.animfolio-animate--fade-up,
[data-animfolio-animate="fade-up"] {
	transform: translate3d(0, 40px, 0);
}

.animfolio-animate--fade-down,
[data-animfolio-animate="fade-down"] {
	transform: translate3d(0, -40px, 0);
}

.animfolio-animate--fade-left,
[data-animfolio-animate="fade-left"] {
	transform: translate3d(40px, 0, 0);
}

.animfolio-animate--fade-right,
[data-animfolio-animate="fade-right"] {
	transform: translate3d(-40px, 0, 0);
}

.animfolio-animate--scale-up,
[data-animfolio-animate="scale-up"] {
	transform: scale3d(0.9, 0.9, 1);
}

.animfolio-animate--slide-up,
[data-animfolio-animate="slide-up"] {
	transform: translate3d(0, 60px, 0);
}

.animfolio-animate--flip,
[data-animfolio-animate="flip"] {
	transform: perspective(1000px) rotateX(10deg);
}

.animfolio-animate--zoom-in,
[data-animfolio-animate="zoom-in"] {
	transform: scale3d(0.85, 0.85, 1);
}

.animfolio-animate--blur-in,
[data-animfolio-animate="blur-in"] {
	filter: blur(12px);
}

.animfolio-animate--rotate-in,
[data-animfolio-animate="rotate-in"] {
	transform: rotate(-6deg) scale3d(0.94, 0.94, 1);
}

.animfolio-animate--bounce-in,
[data-animfolio-animate="bounce-in"] {
	transform: translate3d(0, 40px, 0) scale3d(0.96, 0.96, 1);
}

.animfolio-animate--none,
[data-animfolio-animate="none"] {
	opacity: 1;
	transform: none;
}

/* ========================================================================
   3. Visible State (after animation triggers)
   ======================================================================== */

[data-animfolio-animate].animfolio-visible,
.animfolio-animate.animfolio-visible {
	opacity: 1;
	/* `none` resets ANY initial transform (translate/scale/rotate) and the
	   blur-in filter, so every type — including rotate-in — reveals fully. */
	transform: none;
	filter: none;
}

/* bounce-in gets a real overshoot keyframe (the transition can't bounce). */
[data-animfolio-animate="bounce-in"].animfolio-visible,
.animfolio-animate--bounce-in.animfolio-visible {
	animation: animfolio-bounce-in var(--animfolio-duration, 0.6s) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes animfolio-bounce-in {
	0%   { opacity: 0; transform: translate3d(0, 40px, 0) scale3d(0.96, 0.96, 1); }
	60%  { opacity: 1; transform: translate3d(0, -6px, 0) scale3d(1.02, 1.02, 1); }
	100% { opacity: 1; transform: none; }
}

/* ========================================================================
   4. Stagger Items
   ======================================================================== */

.animfolio-js .animfolio-stagger__item {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity var(--animfolio-duration, 0.6s) var(--animfolio-easing),
		transform var(--animfolio-duration, 0.6s) var(--animfolio-easing);
}

.animfolio-stagger__item.animfolio-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ========================================================================
   5. Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-animfolio-animate],
	.animfolio-animate,
	.animfolio-stagger__item {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
		animation: none;
	}
}

/* ========================================================================
   5b. Progressive Enhancement — No-JS Safety Net
   ------------------------------------------------------------------------
   The JS engine adds .animfolio-visible to reveal elements. If JavaScript
   never runs, those elements would stay at opacity:0 (blank portfolio).
   When the browser reports no scripting support, force everything visible.
   ======================================================================== */

@media (scripting: none) {
	.animfolio-container [data-animfolio-animate],
	.animfolio-container .animfolio-animate,
	.animfolio-container .animfolio-stagger__item {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* ========================================================================
   5c. Mobile Overflow Guard
   ------------------------------------------------------------------------
   .animfolio-container intentionally has no overflow-x:hidden (it would
   break the sticky nav). Horizontal-axis reveals (fade-left/right) start
   translated ±40px (±80px at full intensity), which can briefly push an
   element past the viewport edge on a narrow phone and trigger horizontal
   scroll. On <=768px we swap those to a vertical (fade-up style) offset so
   the reveal still plays but never overflows the x-axis.
   ======================================================================== */

@media (max-width: 768px) {
	.animfolio-animate--fade-left,
	[data-animfolio-animate="fade-left"],
	.animfolio-animate--fade-right,
	[data-animfolio-animate="fade-right"],
	/* Beat the intensity modifiers (subtle/full) which carry higher
	   specificity, so horizontal reveals stay vertical on mobile. */
	.animfolio-container[data-animfolio-intensity] [data-animfolio-animate="fade-left"],
	.animfolio-container[data-animfolio-intensity] [data-animfolio-animate="fade-right"] {
		transform: translate3d(0, 30px, 0);
	}
}

/* ========================================================================
   6. Animation Intensity Modifiers
   ======================================================================== */

/* Subtle: smaller movement */
.animfolio-container[data-animfolio-intensity="subtle"] [data-animfolio-animate="fade-up"] {
	transform: translate3d(0, 20px, 0);
}

.animfolio-container[data-animfolio-intensity="subtle"] [data-animfolio-animate="fade-down"] {
	transform: translate3d(0, -20px, 0);
}

.animfolio-container[data-animfolio-intensity="subtle"] [data-animfolio-animate="fade-left"] {
	transform: translate3d(20px, 0, 0);
}

.animfolio-container[data-animfolio-intensity="subtle"] [data-animfolio-animate="fade-right"] {
	transform: translate3d(-20px, 0, 0);
}

/* Full: bigger movement */
.animfolio-container[data-animfolio-intensity="full"] [data-animfolio-animate="fade-up"] {
	transform: translate3d(0, 80px, 0);
}

.animfolio-container[data-animfolio-intensity="full"] [data-animfolio-animate="slide-up"] {
	transform: translate3d(0, 100px, 0);
}

/* None: no animations */
.animfolio-container[data-animfolio-intensity="none"] [data-animfolio-animate] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ========================================================================
   7. Theme Transition
   ======================================================================== */

.animfolio-container {
	transition: background-color 0.4s ease, color 0.4s ease;
}

/* Theme transitions — use transition-property to not override base hover transitions. */
.animfolio-container .animfolio-card {
	transition-property: background-color, color, border-color, transform, box-shadow;
	transition-duration: 0.4s, 0.4s, 0.4s, 0.3s, 0.3s;
	transition-timing-function: ease;
}

.animfolio-container .animfolio-nav,
.animfolio-container .animfolio-section {
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/**
 * AnimFolio Navigation Styles
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

.animfolio-nav {
	display: flex;
	align-items: center;
	/* Comfortable, responsive side gutters so the brand never sits flush against
	   the viewport edge. clamp scales the gutter up on wide screens (closer to
	   where the centred page content begins) and keeps a sensible minimum on
	   small ones. Formats may still override this. */
	padding: 0 clamp(24px, 4vw, 48px);
	height: 64px;
	background: var(--animfolio-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--animfolio-border);
	/* High z-index keeps the bar above every .animfolio-section (each of which
	   is position:relative and can otherwise paint over the nav in source
	   order). 900 stays below the progress bar (400 is fine) yet dominates all
	   section content and cards. */
	z-index: 900;
	gap: 16px;
	position: relative;
	/* isolation:isolate forces the nav to be a top-level stacking context even
	   when position:relative, so its z-index reliably wins against the
	   position:relative sections rendered after it in the document. */
	isolation: isolate;
}

.animfolio-nav--sticky {
	position: sticky;
	top: 0;
}

/* Sticky Navigation toggle OFF: the nav must scroll away with the page. Every
   per-format style.css sets `.animfolio-container--format-NN .animfolio-nav {
   position: fixed }` unconditionally (higher specificity than this file's
   classes), which otherwise pins the bar regardless of the setting — making the
   toggle a no-op. Force the bar back in-flow when the --sticky modifier is
   absent. The dots rail is intentionally always a floating fixed rail, so it is
   excluded. !important is required to beat the per-format selector. */
.animfolio-nav:not(.animfolio-nav--sticky):not(.animfolio-nav--dots) {
	position: relative !important;
	top: auto !important;
}

/* Offset for WP admin bar */
.admin-bar .animfolio-nav--sticky {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .animfolio-nav--sticky {
		top: 46px;
	}
}

.animfolio-nav__list {
	display: flex;
	list-style: none;
	gap: 4px;
	margin: 0;
	padding: 0;
	margin-inline-start: auto;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.animfolio-nav__list::-webkit-scrollbar {
	display: none;
}

.animfolio-nav__link {
	display: block;
	padding: 8px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	/* Use the primary text token so links are legible in BOTH light and dark
	   schemes by default (the muted --text-secondary could wash out on some
	   backgrounds). Hover still lifts to full --text below. */
	color: var(--animfolio-text);
	border-radius: 6px;
	transition: all 0.2s ease;
	text-decoration: none;
	white-space: nowrap;
}

.animfolio-nav__link:hover {
	color: var(--animfolio-text);
	background: rgba(255, 255, 255, 0.05);
}

/* Separate focus from hover so keyboard users get a strong ring, not just a tint */
.animfolio-nav__link:focus-visible {
	color: var(--animfolio-text);
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.05);
}

.animfolio-nav__link--active {
	color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
	/* Inset border ensures visibility when accent-light is very faint (light mode) */
	box-shadow: inset 0 0 0 1px var(--animfolio-accent);
}

/* Mobile toggle */
.animfolio-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 11px;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.animfolio-nav__toggle:focus-visible {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 2px;
}

.animfolio-nav__toggle-bar,
.animfolio-nav__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--animfolio-text);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
	transform-origin: center;
}

/* Animate hamburger -> X when the menu is open (works with or without the
   .animfolio-nav__toggle-bar class, since the spans are the only children). */
.animfolio-nav__toggle[aria-expanded="true"] .animfolio-nav__toggle-bar:nth-child(1),
.animfolio-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.animfolio-nav__toggle[aria-expanded="true"] .animfolio-nav__toggle-bar:nth-child(2),
.animfolio-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.animfolio-nav__toggle[aria-expanded="true"] .animfolio-nav__toggle-bar:nth-child(3),
.animfolio-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Theme toggle */
.animfolio-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: none;
	border: 1px solid var(--animfolio-border);
	border-radius: 8px;
	cursor: pointer;
	color: var(--animfolio-text-secondary);
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.animfolio-theme-toggle:hover {
	color: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
	background: var(--animfolio-accent-light);
}

.animfolio-theme-toggle:focus-visible {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 2px;
	color: var(--animfolio-accent);
	border-color: var(--animfolio-accent);
}

/* Default: hide both, then show the correct one based on scheme.
   Dark mode shows sun (to switch to light). Light mode shows moon (to switch to dark).
   Auto mode: show based on OS prefers-color-scheme as a CSS-only fallback. */
.animfolio-theme-toggle__icon { display: none; }

.animfolio-container--dark .animfolio-theme-toggle__icon--sun { display: flex; }
.animfolio-container--dark .animfolio-theme-toggle__icon--moon { display: none; }
.animfolio-container--light .animfolio-theme-toggle__icon--sun { display: none; }
.animfolio-container--light .animfolio-theme-toggle__icon--moon { display: flex; }

/* Auto scheme: OS dark => show sun icon; OS light => show moon icon */
@media (prefers-color-scheme: dark) {
	.animfolio-container--auto .animfolio-theme-toggle__icon--sun { display: flex; }
	.animfolio-container--auto .animfolio-theme-toggle__icon--moon { display: none; }
}
@media (prefers-color-scheme: light) {
	.animfolio-container--auto .animfolio-theme-toggle__icon--sun { display: none; }
	.animfolio-container--auto .animfolio-theme-toggle__icon--moon { display: flex; }
}

/* Dot navigation
   ------------------------------------------------------------------
   A fixed vertical rail of dots on the right edge — one per section. The
   nav-generator suppresses the brand wordmark, hamburger and theme toggle for
   this style (they have no place in a dot rail), so the nav holds only the
   <ul> of dots. Each dot's text label is hidden but exposed to assistive tech
   via the link's aria-label, and shown as a hover/focus pill for sighted users. */
.animfolio-nav--dots {
	position: fixed;
	right: max(20px, env(safe-area-inset-right, 0px) + 10px);
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	align-items: flex-end;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	border-bottom: none;
	padding: 0;
	gap: 0;
	z-index: 300;
	height: auto;
}

.animfolio-nav--dots .animfolio-nav__list {
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.animfolio-nav--dots .animfolio-nav__item {
	list-style: none;
}

/* The link is a generous square hit area; the visible dot is drawn with ::before
   so the tap/click target stays a comfortable 24px while the dot reads as ~11px. */
.animfolio-nav--dots .animfolio-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.animfolio-nav--dots .animfolio-nav__link::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	/* Resting dot must be clearly visible (the old --animfolio-border fallback
	   is a ~10%-opacity hairline, so the rail looked empty). Use the muted text
	   colour at rest; accent on hover/active below. */
	background: var(--animfolio-text-secondary, var(--animfolio-text-muted, #8a8a8a));
	box-shadow: 0 0 0 1px var(--animfolio-border);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.animfolio-nav--dots .animfolio-nav__link:hover {
	background: transparent;
}

.animfolio-nav--dots .animfolio-nav__link:hover::before {
	background: var(--animfolio-accent);
	transform: scale(1.25);
}

.animfolio-nav--dots .animfolio-nav__link--active {
	background: transparent;
	transform: none;
	box-shadow: none;
}

.animfolio-nav--dots .animfolio-nav__link--active::before {
	background: var(--animfolio-accent);
	transform: scale(1.4);
}

.animfolio-nav--dots .animfolio-nav__link:focus-visible {
	outline: none;
	background: transparent;
}

.animfolio-nav--dots .animfolio-nav__link:focus-visible::before {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 3px;
}

/* Hover/focus label pill sitting to the LEFT of the dot. */
.animfolio-nav--dots .animfolio-nav__dot-label {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--animfolio-text);
	background: var(--animfolio-surface, var(--animfolio-bg-secondary));
	border: 1px solid var(--animfolio-border);
	box-shadow: var(--animfolio-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.animfolio-nav--dots .animfolio-nav__link:hover .animfolio-nav__dot-label,
.animfolio-nav--dots .animfolio-nav__link:focus-visible .animfolio-nav__dot-label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* Mobile navigation
   ------------------------------------------------------------------
   DOM order inside .animfolio-nav (from nav-generator):
     [brand] [hamburger toggle] [nav list (dropdown)] [theme toggle]
   On mobile the list is taken out of flow (position:fixed dropdown), so the
   flex row becomes: brand | toggle | theme-toggle. We push the toggle
   group to the trailing edge with margin-inline-start:auto on the hamburger
   so the brand stays on the leading edge and the controls sit on the
   trailing edge — they never overlap, even at 390px / 320px. */
@media (max-width: 768px) {
	.animfolio-nav {
		padding: 0 20px;
		gap: 12px;
		/* Per-format styles (.animfolio-container--format-NN .animfolio-nav) set
		   backdrop-filter (which makes the nav the containing block for the
		   position:fixed dropdown) AND overflow:hidden, which clips the open
		   menu to the 64px bar so it renders behind the hero. The dropdown only
		   exists at this breakpoint and the bar truncates the brand via the
		   logo's own overflow, so the nav itself must not clip here. !important
		   is required to beat the higher-specificity per-format rule. */
		overflow: visible !important;
	}

	.animfolio-nav__toggle {
		display: flex;
		/* Push hamburger + theme toggle to the trailing edge, away from brand. */
		margin-inline-start: auto;
		order: 2;
	}

	/* Brand stays on the leading edge and is allowed to truncate before it
	   ever reaches the controls. */
	.animfolio-nav__logo {
		order: 1;
		margin-inline-end: 8px;
	}

	/* Theme toggle sits next to the hamburger on the trailing side. */
	.animfolio-nav .animfolio-theme-toggle {
		order: 3;
		margin-inline-start: 0;
	}

	.animfolio-nav__list {
		/* position:fixed takes the open menu OUT of any ancestor's flow and
		   clipping. Combined with the high z-index below, the menu paints
		   above every .animfolio-section (and their transformed/will-change
		   cards) regardless of source order or stacking context — this is the
		   fix for the dropdown rendering behind the hero.
		   Anchored to the viewport top so it sits flush under the nav bar
		   (the bar is 64px tall). */
		position: fixed;
		top: 64px;
		inset-inline: 0;
		order: 4;
		flex-direction: column;
		gap: 4px;
		/* Solid opaque background so page content NEVER shows through the open
		   menu. backdrop-filter alone is not enough on some browsers, so the
		   base var(--animfolio-bg) is the solid floor. */
		background: var(--animfolio-bg);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--animfolio-border);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
		padding: 12px;
		display: none;
		overflow-x: visible;
		/* Cap the dropdown height so a long menu scrolls instead of
		   running off-screen; account for the nav bar itself. */
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
		/* Very high z-index: above the nav bar (900) and every page element.
		   Stays below the custom cursor (700) is irrelevant — the cursor is a
		   non-interactive overlay; the menu must beat all real content. */
		z-index: 1000;
	}

	/* With the WP admin bar present, the sticky nav is offset downward, so the
	   fixed menu must clear both the admin bar and the nav bar. Fixed elements
	   ignore the sticky ancestor's offset, so we restate it here. Inside this
	   <=768px block the admin bar is 46px tall. */
	.admin-bar .animfolio-nav--sticky .animfolio-nav__list {
		top: calc(64px + 46px);
		max-height: calc(100dvh - 64px - 46px);
	}

	/* Open mobile nav when toggle is expanded */
	.animfolio-nav:has(.animfolio-nav__toggle[aria-expanded="true"]) .animfolio-nav__list {
		display: flex;
	}

	/* Fallback for browsers without :has() support. The toggle is the 2nd
	   sibling (after the brand) and precedes the list, so the general
	   sibling combinator reliably matches regardless of the theme toggle. */
	.animfolio-nav__toggle[aria-expanded="true"] ~ .animfolio-nav__list {
		display: flex;
	}

	/* Dots stay visible on mobile as a compact right-edge rail (there is no
	   hamburger for the dots style, so hiding them would leave no nav at all).
	   Pull the rail up off centre a touch so it never overlaps the back-to-top
	   button at the bottom-right. */
	.animfolio-nav--dots {
		right: max(12px, env(safe-area-inset-right, 0px) + 8px);
		top: 45%;
	}

	/* Mobile nav links: full-width tap rows, comfortable 44px target — but NOT
	   for the dots rail, whose links are fixed-size round dots. */
	.animfolio-nav:not(.animfolio-nav--dots) .animfolio-nav__list .animfolio-nav__link {
		display: flex;
		align-items: center;
		min-height: 44px;
		width: 100%;
		padding: 10px 14px;
		font-size: 0.9375rem;
	}

	/* Keep dot links as fixed round hit areas on mobile (override the generic
	   mobile list-link sizing inheritance). */
	.animfolio-nav--dots .animfolio-nav__link {
		width: 24px;
		height: 24px;
		min-height: 0;
		padding: 0;
	}
}

/* Nav logo */
.animfolio-nav__logo {
	font-family: var(--animfolio-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--animfolio-text);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 1;   /* Allow shrinking on very narrow viewports */
	min-width: 0;     /* Let text truncate rather than overflow the flex row */
	overflow: hidden;
	text-overflow: ellipsis;
	/* Guaranteed leading breathing room that survives even when a format zeroes
	   the nav's own horizontal padding — the brand is never flush to the edge.
	   No format overrides the logo's padding, so this applies broadly. */
	padding-inline-start: 2px;
}

.animfolio-nav__logo:hover {
	color: var(--animfolio-accent);
}

/* Landscape phones: compact nav */
@media (max-height: 500px) and (orientation: landscape) {
	.animfolio-nav {
		height: 48px;
		padding: 0 16px;
	}

	.animfolio-nav__link {
		padding: 6px 10px;
		font-size: 0.75rem;
	}

	/* Nav bar shrinks to 48px here, so re-anchor the fixed mobile menu flush
	   under it (it would otherwise leave a 16px gap below the bar). */
	.animfolio-nav__list {
		top: 48px;
		max-height: calc(100dvh - 48px);
	}

	.admin-bar .animfolio-nav--sticky .animfolio-nav__list {
		top: calc(48px + 46px);
		max-height: calc(100dvh - 48px - 46px);
	}

	.animfolio-theme-toggle {
		width: 32px;
		height: 32px;
	}

	.animfolio-nav--dots {
		display: none;
	}
}

/* Small phones (≤480px) — tighten gutters so brand + controls fit. */
@media (max-width: 480px) {
	.animfolio-nav {
		padding: 0 16px;
		gap: 8px;
	}

	.animfolio-nav__logo {
		font-size: 0.9375rem;
	}
}

/* Galaxy Fold (≤300px) — ultra-narrow nav prevents overflow */
@media (max-width: 300px) {
	.animfolio-nav {
		padding: 0 10px;
		gap: 6px;
	}

	/* Shrink logo further to leave room for the hamburger toggle */
	.animfolio-nav__logo {
		font-size: 0.875rem;
		margin-inline-end: 4px;
	}

	/* Shrink theme toggle to save horizontal space */
	.animfolio-theme-toggle {
		width: 34px;
		height: 34px;
	}

	/* Hamburger toggle: keep 44×44 touch target */
	.animfolio-nav__toggle {
		min-width: 44px;
		min-height: 44px;
		padding: 10px 8px;
	}

	/* Mobile nav dropdown: tighter padding */
	.animfolio-nav__list {
		padding: 10px;
	}

	.animfolio-nav__list .animfolio-nav__link {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
}

/**
 * AnimFolio Contact Form Styles
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

.animfolio-form {
	width: 100%;
	max-width: 600px;
}

.animfolio-form__group {
	margin-bottom: 20px;
}

.animfolio-form__label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--animfolio-font-size-sm, 14px);
	font-weight: var(--animfolio-font-weight-medium, 500);
	color: var(--animfolio-text);
}

/*
 * Required field asterisk — add aria-hidden="true" on the <span class="animfolio-form__required">
 * in HTML; the field itself should carry aria-required="true". This class only handles visuals.
 */
.animfolio-form__label .animfolio-form__required {
	color: var(--animfolio-error, #ef4444);
	margin-inline-start: 3px;
	font-weight: 700;
}

.animfolio-form__input,
.animfolio-form__textarea,
.animfolio-form__select {
	width: 100%;
	padding: 12px 16px;
	font-family: var(--animfolio-font-body);
	font-size: var(--animfolio-font-size-base, 16px);
	color: var(--animfolio-text);
	background: var(--animfolio-bg-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius-sm);
	/* Transition both border-color and box-shadow for smooth feedback */
	transition: border-color var(--animfolio-transition-fast, 150ms ease),
	            box-shadow var(--animfolio-transition-fast, 150ms ease);
	outline: none;
}

/* Placeholder contrast — slightly dimmer than label but still readable */
.animfolio-form__input::placeholder,
.animfolio-form__textarea::placeholder {
	color: var(--animfolio-text-muted, rgba(160, 160, 160, 0.8));
	opacity: 1; /* Firefox adds its own opacity */
}

.animfolio-form__input:focus,
.animfolio-form__textarea:focus,
.animfolio-form__select:focus {
	border-color: var(--animfolio-accent);
	box-shadow: 0 0 0 3px var(--animfolio-accent-light);
}

.animfolio-form__textarea {
	min-height: 120px;
	resize: vertical;
}

.animfolio-form__error {
	display: none;
	margin-top: 6px;
	/* 14px minimum for error legibility; 13px was below comfortable reading size */
	font-size: 14px;
	color: var(--animfolio-error, #ef4444);
	/* Icon prefix for pattern-independent recognition (WCAG 1.3.3) */
	padding-inline-start: 20px;
	position: relative;
}

.animfolio-form__error::before {
	content: '!';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--animfolio-error, #ef4444);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 16px;
	text-align: center;
}

.animfolio-form__group--error .animfolio-form__error {
	display: flex;
	align-items: baseline;
}

.animfolio-form__group--error .animfolio-form__input,
.animfolio-form__group--error .animfolio-form__textarea {
	border-color: var(--animfolio-error, #ef4444);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.animfolio-form__submit {
	margin-top: 20px;
	width: 100%;
	font-size: 1rem;
	font-weight: 600;
	padding: 13px 26px;
}

/* Full-width submit on small phones; auto-width from the mobile breakpoint up. */
@media (min-width: 480px) {
	.animfolio-form__submit {
		width: auto;
	}
}

.animfolio-form__submit:focus-visible {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 2px;
}

/* Loading state: spinner replaces text — use animfolio-button--loading class too */
.animfolio-form__submit--loading {
	color: transparent !important;
	pointer-events: none;
	cursor: wait;
	opacity: 1;
}

.animfolio-form__submit--loading::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: animfolio-contact-spin 0.7s linear infinite;
}

@keyframes animfolio-contact-spin {
	to { transform: rotate(360deg); }
}

.animfolio-form__success {
	display: none;
	padding: 16px 20px;
	border-radius: var(--animfolio-radius-sm);
	background: rgba(34, 197, 94, 0.1);
	/* Ensure text meets contrast against the green-tinted bg */
	color: var(--animfolio-success, #16a34a);
	border: 1px solid rgba(34, 197, 94, 0.3);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	gap: 10px;
	align-items: flex-start;
}

/* Checkmark icon prefix */
.animfolio-form__success::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	background: var(--animfolio-success, #16a34a);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	margin-inline-end: 8px;
	flex-shrink: 0;
}

.animfolio-form__success--visible {
	display: flex;
}

.animfolio-form__honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* Accessibility: visible keyboard focus on form controls (WCAG 2.4.7). */
.animfolio-form__input:focus-visible,
.animfolio-form__textarea:focus-visible,
.animfolio-form__select:focus-visible {
	outline: 2px solid var(--animfolio-accent);
	outline-offset: 1px;
}

/**
 * AnimFolio Gallery Styles
 *
 * All gallery layout variants.
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

.animfolio-gallery {
	display: grid;
	gap: 16px;
}

.animfolio-gallery--grid {
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.animfolio-gallery--masonry {
	columns: 3;
	column-gap: 16px;
}

.animfolio-gallery--masonry .animfolio-gallery__item {
	break-inside: avoid;
	margin-bottom: 16px;
}

.animfolio-gallery--bento {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
}

.animfolio-gallery--bento .animfolio-gallery__item--wide {
	grid-column: span 2;
}

.animfolio-gallery--bento .animfolio-gallery__item--tall {
	grid-row: span 2;
}

.animfolio-gallery--bento .animfolio-gallery__item--featured {
	grid-column: span 2;
	grid-row: span 2;
}

.animfolio-gallery__item {
	overflow: hidden;
	border-radius: var(--animfolio-radius);
	position: relative;
}

.animfolio-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--animfolio-transition-slow);
}

.animfolio-gallery__item:hover img {
	transform: scale(1.05);
}

/* Filter bar */
.animfolio-gallery__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.animfolio-gallery__filter-btn {
	padding: 6px 16px;
	font-size: var(--animfolio-font-size-sm, 14px);
	background: transparent;
	color: var(--animfolio-text-secondary);
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius-sm);
	cursor: pointer;
	transition: all var(--animfolio-transition-fast);
}

.animfolio-gallery__filter-btn:hover,
.animfolio-gallery__filter-btn--active {
	background: var(--animfolio-accent);
	color: #fff;
	border-color: var(--animfolio-accent);
}

/* Note: Lightbox styles are in the dedicated .animfolio-lightbox block below. */

@media (max-width: 768px) {
	.animfolio-gallery--masonry {
		columns: 2;
	}

	.animfolio-gallery--bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
	}
}

@media (max-width: 480px) {
	.animfolio-gallery--masonry {
		columns: 1;
	}

	.animfolio-gallery--bento {
		grid-template-columns: 1fr;
	}

	.animfolio-gallery--bento .animfolio-gallery__item--wide,
	.animfolio-gallery--bento .animfolio-gallery__item--tall,
	.animfolio-gallery--bento .animfolio-gallery__item--featured {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Galaxy Fold (≤300px) — reduce bento row height so images aren't too tall */
@media (max-width: 300px) {
	.animfolio-gallery--bento {
		grid-auto-rows: 120px;
		gap: 10px;
	}

	.animfolio-gallery--masonry {
		column-gap: 10px;
	}

	/* Filter bar: wrap tightly and shrink buttons */
	.animfolio-gallery__filter {
		gap: 6px;
	}

	.animfolio-gallery__filter-btn {
		padding: 5px 12px;
		font-size: 0.8125rem;
	}
}

/* ========================================================================
   Lightbox
   ======================================================================== */

.animfolio-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.animfolio-lightbox__content {
	max-width: 90vw;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.animfolio-lightbox__img {
	max-width: 90vw;
	max-height: 75vh;
	max-height: 75svh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.animfolio-lightbox__caption {
	color: #fff;
	font-size: 1rem;
	margin-top: 16px;
	text-align: center;
}

.animfolio-lightbox__exif {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	margin-top: 8px;
	text-align: center;
}

.animfolio-lightbox__counter {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8125rem;
	margin-top: 8px;
}

.animfolio-lightbox__close,
.animfolio-lightbox__prev,
.animfolio-lightbox__next {
	position: absolute;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 2rem;
	padding: 16px;
	opacity: 0.7;
	transition: opacity 0.2s;
	z-index: 10;
}

.animfolio-lightbox__close:hover,
.animfolio-lightbox__prev:hover,
.animfolio-lightbox__next:hover {
	opacity: 1;
}

.animfolio-lightbox__close {
	top: 16px;
	inset-inline-end: 16px;
	font-size: 2.5rem;
}

.animfolio-lightbox__prev {
	inset-inline-start: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
}

.animfolio-lightbox__next {
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
}

/**
 * AnimFolio QR Code Styles
 *
 * @package AnimFolio
 * @author     Rahul Mahadik
 * @since   1.0.0
 */

.animfolio-qr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	/* Framed card so the QR reads as a deliberate, polished element in every
	   format (uses the format-owned surface/border tokens, never accent). */
	padding: 20px;
	background: var(--animfolio-surface, var(--animfolio-bg-secondary));
	border: 1px solid var(--animfolio-border);
	border-radius: var(--animfolio-radius, 12px);
	box-shadow: var(--animfolio-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
}

.animfolio-qr__code {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	/* Quiet-zone padding around the modules. content-box keeps the inline
	   width/height (set from the qr_size setting) as the actual drawing area, so
	   the canvas is rendered at full size and the padding frames it instead of
	   shrinking the code (which border-box would do and clip the QR). */
	box-sizing: content-box;
	padding: 14px;
	border-radius: var(--animfolio-radius-sm, 8px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.animfolio-qr__code canvas,
.animfolio-qr__code svg {
	display: block;
}

.animfolio-qr__caption {
	font-size: var(--animfolio-font-size-sm, 14px);
	color: var(--animfolio-text-muted);
	text-align: center;
}

.animfolio-qr__download {
	font-size: var(--animfolio-font-size-sm, 14px);
	color: var(--animfolio-accent);
	text-decoration: none;
}

.animfolio-qr__download:hover {
	text-decoration: underline;
}

.animfolio-qr__trigger {
	padding: 8px 16px;
	background: var(--animfolio-accent-light);
	color: var(--animfolio-accent);
	border: 1px solid var(--animfolio-accent);
	border-radius: var(--animfolio-radius-sm);
	cursor: pointer;
	font-size: var(--animfolio-font-size-sm, 14px);
	transition: all var(--animfolio-transition-fast);
}

.animfolio-qr__trigger:hover {
	background: var(--animfolio-accent);
	color: #fff;
}

/**
 * AnimFolio — Format 12: Creative Portfolio
 * Experimental layout with large Syne typography, asymmetric layouts, and bold visuals.
 */

.animfolio-container--format-12 {
	--af12-accent-rgb: 225, 29, 72;
	--af12-secondary-rgb: 168, 85, 247;
	--animfolio-font-heading: 'Syne', sans-serif;
	--animfolio-font-body: 'Inter', sans-serif;

	font-family: 'Inter', sans-serif;
	background: var(--af12-bg);
	color: var(--af12-text);
}

/* ──────────────────────────────────────────────────────────────
   DUAL-SCHEME PALETTE
   Both private --af12-* vars and the --animfolio-* mapping (read by
   base.css) are scoped per scheme so the toggle works in both modes.
   The no-scheme block (dark, default_scheme) doubles as the pre-JS
   fallback. --af12-accent-text carries the AA-safe rose used for
   link/title/category text (raw --af12-accent is decorative only).
   ────────────────────────────────────────────────────────────── */

/* Dark scheme (config default_colors.dark) + no-scheme fallback */
.animfolio-container--format-12,
.animfolio-container--format-12.animfolio-container--dark {
	--af12-accent: var(--animfolio-accent, #E11D48);
	--af12-secondary: var(--animfolio-secondary, #A855F7);
	--af12-bg: #0A0A0A;
	--af12-bg-secondary: #161616;
	--af12-text: #FAFAFA;
	--af12-text-muted: #A3A3A3;
	--af12-border: color-mix(in srgb, var(--animfolio-accent, #E11D48) 15%, transparent);
	/* AA-safe rose for text (raw #E11D48 = 4.21/3.85 fails on dark) */
	--af12-accent-text: #F43F5E;

	--animfolio-accent: #E11D48;
	--animfolio-accent-hover: #F43F5E;
	--animfolio-accent-text: #F43F5E;
	--animfolio-accent-light: color-mix(in srgb, var(--animfolio-accent, #E11D48) 10%, transparent);
	--animfolio-secondary: #A855F7;
	--animfolio-bg: #0A0A0A;
	--animfolio-bg-secondary: #161616;
	--animfolio-bg-tertiary: #222222;
	--animfolio-text: #FAFAFA;
	--animfolio-text-secondary: #D4D4D4;
	--animfolio-text-muted: #A3A3A3;
	--animfolio-border: color-mix(in srgb, var(--animfolio-accent, #E11D48) 15%, transparent);
}

/* Light scheme (config default_colors.light) */
.animfolio-container--format-12.animfolio-container--light {
	--af12-accent: var(--animfolio-accent, #BE123C);
	--af12-secondary: var(--animfolio-secondary, #9333EA);
	--af12-bg: #FAFAFA;
	--af12-bg-secondary: #F5F5F5;
	--af12-text: #0A0A0A;
	--af12-text-muted: #525252;
	--af12-border: rgba(10, 10, 10, 0.1);
	/* config accent #BE123C passes AA on light (6.02/5.76); use directly as text */
	--af12-accent-text: var(--animfolio-accent, #BE123C);

	--animfolio-accent: #BE123C;
	--animfolio-accent-hover: #9F0F32;
	--animfolio-accent-text: var(--animfolio-accent, #BE123C);
	--animfolio-accent-light: color-mix(in srgb, var(--animfolio-accent, #BE123C) 10%, transparent);
	--animfolio-secondary: #9333EA;
	--animfolio-bg: #FAFAFA;
	--animfolio-bg-secondary: #F5F5F5;
	--animfolio-bg-tertiary: #EAEAEA;
	--animfolio-text: #0A0A0A;
	--animfolio-text-secondary: #404040;
	--animfolio-text-muted: #525252;
	--animfolio-border: rgba(10, 10, 10, 0.1);
}

/* ── Nav: Oversized bold nav links ── */

.animfolio-container--format-12 .animfolio-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--af12-bg) 80%, transparent);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	padding: 0 2rem;
	border-bottom: none;
}

.animfolio-container--format-12 .animfolio-nav__logo {
	font-family: 'Syne', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	/* Use the legibility-tuned accent-text variant, not the raw accent: the raw
	   --af12-accent (#E11D48) on the dark #0A0A0A nav bg is only 4.21:1 (fails
	   AA). --af12-accent-text brightens to #F43F5E in dark (5.39:1) and stays
	   #BE123C in light (6.02:1). */
	color: var(--af12-accent-text, var(--af12-accent));
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

.animfolio-container--format-12 .animfolio-nav__link {
	font-family: 'Syne', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--af12-text-muted);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
	position: relative;
}

.animfolio-container--format-12 .animfolio-nav__link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--af12-accent);
	transition: width 0.3s ease;
}

.animfolio-container--format-12 .animfolio-nav__link:hover,
.animfolio-container--format-12 .animfolio-nav__link--active {
	color: var(--af12-text);
}

.animfolio-container--format-12 .animfolio-nav__link:hover::after,
.animfolio-container--format-12 .animfolio-nav__link--active::after {
	width: 100%;
}

/* ── Hero: Full viewport, massive type ── */

.animfolio-container--format-12 .animfolio-hero {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 96px 0 80px;
	position: relative;
	overflow: hidden;
}

/* Experimental left-anchored hero: keep the whole block left-aligned so the
   CTA/social rows line up with the big type instead of orphan-centering (the
   base default). */
.animfolio-container--format-12 .animfolio-hero__content {
	text-align: start;
	--animfolio-hero-justify: flex-start;
}

.animfolio-container--format-12 .animfolio-hero__title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(1.75rem, 7vw, 5rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color: var(--animfolio-accent);
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-hero__name {
	font-family: 'Syne', sans-serif;
	font-size: clamp(2.25rem, 9vw, 7rem);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	color: var(--animfolio-text);
	-webkit-text-fill-color: var(--animfolio-text);
	background: none;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-hero__title span:nth-child(even) {
	color: var(--af12-accent);
	-webkit-text-stroke: 0;
}

.animfolio-container--format-12 .animfolio-hero__subtitle {
	font-size: 1.1rem;
	color: var(--af12-text-muted);
	max-width: 400px;
	margin-top: 32px;
	line-height: 1.7;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-hero__scroll-indicator {
	position: absolute;
	right: 40px;
	bottom: 80px;
	writing-mode: vertical-lr;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--af12-text-muted);
}

/* ── Section titles: Oversized + offset ── */

.animfolio-container--format-12 .animfolio-section {
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

.animfolio-container--format-12 .animfolio-section__title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(2rem, 7vw, 6rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 48px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-section__title--outline {
	-webkit-text-stroke: 1.5px var(--af12-text);
	color: transparent;
}

.animfolio-container--format-12 .animfolio-section__number {
	font-family: 'Syne', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--af12-accent-text);
	margin-bottom: 16px;
}

/* ── Section alternating backgrounds ── */

.animfolio-container--format-12 .animfolio-section:nth-child(even) {
	background: var(--af12-bg-secondary);
}

/* ── Button overrides ── */

.animfolio-container--format-12 .animfolio-button--primary,
.animfolio-container--format-12 a.animfolio-button--primary {
	background: var(--af12-accent);
	color: var(--animfolio-on-accent, #fff);
	border: none;
	border-radius: 4px;
	padding: 14px 32px;
	font-weight: 700;
	font-family: 'Syne', sans-serif;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
}

.animfolio-container--format-12 .animfolio-button--primary:hover,
.animfolio-container--format-12 a.animfolio-button--primary:hover {
	color: var(--animfolio-on-accent, #fff);
	opacity: 0.85;
	transform: translateY(-2px);
}

.animfolio-container--format-12 .animfolio-button--secondary,
.animfolio-container--format-12 a.animfolio-button--secondary {
	color: var(--af12-text-muted);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--af12-accent) 30%, transparent);
	border-radius: 4px;
	padding: 14px 32px;
	font-weight: 700;
	font-family: 'Syne', sans-serif;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.animfolio-container--format-12 .animfolio-button--secondary:hover,
.animfolio-container--format-12 a.animfolio-button--secondary:hover {
	color: var(--af12-text);
	border-color: var(--af12-accent);
}

/* ── Asymmetric project layout ── */

.animfolio-container--format-12 .animfolio-project-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 120px;
	overflow: hidden;
}

.animfolio-container--format-12 .animfolio-project-row:nth-child(even) {
	direction: rtl;
}

.animfolio-container--format-12 .animfolio-project-row:nth-child(even) > * {
	direction: ltr;
}

.animfolio-container--format-12 .animfolio-project-image-wrap {
	overflow: hidden;
	border-radius: 4px;
}

.animfolio-container--format-12 .animfolio-project-image {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	filter: grayscale(0.3);
	transition: filter 0.4s ease, transform 0.5s ease;
}

.animfolio-container--format-12 .animfolio-project-image-wrap:hover .animfolio-project-image {
	filter: grayscale(0);
	transform: scale(1.03);
}

.animfolio-container--format-12 .animfolio-project-info__title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(1.25rem, 3vw, 2rem);
	font-weight: 700;
	margin-bottom: 16px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-project-info__category {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--af12-accent-text);
	margin-bottom: 16px;
}

.animfolio-container--format-12 .animfolio-project-info__text {
	color: var(--af12-text-muted);
	line-height: 1.8;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-project-info__text p {
	margin: 0 0 1em;
}

.animfolio-container--format-12 .animfolio-project-info__text p:last-child {
	margin-bottom: 0;
}

/* ── Image-first projects showcase (section-projects.php) ── */

.animfolio-container--format-12 .animfolio-project-showcase {
	display: block;
}

/* Image should dominate the row — stretch it to fill, not center-align. */
.animfolio-container--format-12 .animfolio-project-row {
	align-items: stretch;
}

.animfolio-container--format-12 .animfolio-project-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding: 8px 0;
}

/* Oversized ghosted index number — creative-director portfolio convention. */
.animfolio-container--format-12 .animfolio-project-info__index {
	font-family: 'Syne', sans-serif;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--af12-border);
	margin-bottom: 12px;
}

/* Expressive "View Project" link — no dev-style buttons. */
.animfolio-container--format-12 .animfolio-project-info__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	font-family: 'Syne', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--af12-text);
	width: -moz-fit-content;
	width: fit-content;
	transition: color 0.25s ease, gap 0.25s ease;
}

.animfolio-container--format-12 .animfolio-project-info__link-label {
	position: relative;
}

.animfolio-container--format-12 .animfolio-project-info__link-label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--af12-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.animfolio-container--format-12 .animfolio-project-info__link:hover,
.animfolio-container--format-12 .animfolio-project-info__link:focus-visible {
	color: var(--af12-accent-text);
	gap: 18px;
}

.animfolio-container--format-12 .animfolio-project-info__link:hover .animfolio-project-info__link-label::after,
.animfolio-container--format-12 .animfolio-project-info__link:focus-visible .animfolio-project-info__link-label::after {
	transform: scaleX(1);
}

.animfolio-container--format-12 .animfolio-project-info__link-arrow {
	font-size: 1.25rem;
	line-height: 1;
}

/* Graceful fallback when a project has no image. */
.animfolio-container--format-12 .animfolio-project-image--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 100%;
	padding: 40px;
	text-align: center;
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--af12-accent) 18%, transparent) 0%,
			color-mix(in srgb, var(--af12-secondary) 18%, transparent) 100%),
		var(--af12-bg-secondary);
	filter: none;
	transform: none;
}

.animfolio-container--format-12 .animfolio-project-image-wrap:hover .animfolio-project-image--empty {
	filter: none;
	transform: none;
}

.animfolio-container--format-12 .animfolio-project-image__glyph {
	font-family: 'Syne', sans-serif;
	font-size: clamp(3rem, 10vw, 6rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 2px var(--af12-accent);
}

.animfolio-container--format-12 .animfolio-project-image__caption {
	font-family: 'Syne', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--af12-text);
	max-width: 80%;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ── Horizontal scroll section ── */

.animfolio-container--format-12 .animfolio-hscroll-outer {
	overflow: hidden;
	width: 100%;
}

.animfolio-container--format-12 .animfolio-hscroll {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 20px 0 24px;
	/* Extend beyond visible to allow scroll without outer overflow */
	margin: 0 -20px;
	padding-inline: 20px;
}

.animfolio-container--format-12 .animfolio-hscroll::-webkit-scrollbar {
	display: none;
}

.animfolio-container--format-12 .animfolio-hscroll__item {
	flex: 0 0 min(400px, 80vw);
	scroll-snap-align: start;
	overflow: hidden;
}

/* ── Bold statement block ── */

.animfolio-container--format-12 .animfolio-statement {
	font-family: 'Syne', sans-serif;
	font-size: clamp(1.5rem, 4vw, 4rem);
	font-weight: 700;
	line-height: 1.2;
	padding: 80px 0;
	border-top: 1px solid var(--animfolio-border);
	border-bottom: 1px solid var(--animfolio-border);
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-statement em {
	color: var(--af12-accent);
	font-style: normal;
}

/* ── Cards: Minimal with accent line ── */

.animfolio-container--format-12 .animfolio-card {
	padding: 32px 0;
	/* Single border: top accent line only — no base border override */
	border: none;
	border-top: 2px solid var(--af12-accent);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
}

.animfolio-container--format-12 .animfolio-card:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--af12-secondary);
}

.animfolio-container--format-12 .animfolio-card__title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(1.1rem, 3vw, 1.5rem);
	font-weight: 700;
	margin-bottom: 8px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-12 .animfolio-card__description {
	color: var(--af12-text-muted);
	line-height: 1.7;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ── Mood board grid ── */

.animfolio-container--format-12 .animfolio-mood-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: 4px;
	overflow: hidden;
	width: 100%;
}

.animfolio-container--format-12 .animfolio-mood-grid__item {
	overflow: hidden;
}

.animfolio-container--format-12 .animfolio-mood-grid__item:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.animfolio-container--format-12 .animfolio-mood-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.animfolio-container--format-12 .animfolio-mood-grid__item:hover img {
	transform: scale(1.04);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
	.animfolio-container--format-12 .animfolio-section {
		padding: 80px 0;
	}

	.animfolio-container--format-12 .animfolio-project-row {
		gap: 28px;
		margin-bottom: 80px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 180px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid__item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.animfolio-container--format-12 .animfolio-nav__link {
		font-size: 0.9375rem;
	}
}

@media (max-width: 768px) {
	.animfolio-container--format-12 .animfolio-section {
		padding: 60px 0;
	}

	.animfolio-container--format-12 .animfolio-project-row {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 60px;
	}

	.animfolio-container--format-12 .animfolio-project-row:nth-child(even) {
		direction: ltr;
	}

	.animfolio-container--format-12 .animfolio-project-info {
		padding: 0;
	}

	.animfolio-container--format-12 .animfolio-project-info__index {
		margin-bottom: 8px;
	}

	.animfolio-container--format-12 .animfolio-project-info__link {
		margin-top: 20px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid__item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.animfolio-container--format-12 .animfolio-hero__scroll-indicator {
		display: none;
	}

	.animfolio-container--format-12 .animfolio-statement {
		padding: 48px 0;
	}
}

@media (max-width: 480px) {
	.animfolio-container--format-12 .animfolio-hero {
		padding: 72px 0 48px;
	}

	.animfolio-container--format-12 .animfolio-section {
		padding: 48px 0;
	}

	.animfolio-container--format-12 .animfolio-section__title {
		font-size: clamp(1.5rem, 9vw, 3rem);
		margin-bottom: 32px;
	}

	.animfolio-container--format-12 .animfolio-project-row {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 48px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 130px;
		gap: 3px;
	}

	.animfolio-container--format-12 .animfolio-mood-grid__item:nth-child(1) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.animfolio-container--format-12 .animfolio-button--primary,
	.animfolio-container--format-12 .animfolio-button--secondary {
		width: 100%;
		justify-content: center;
	}

	.animfolio-container--format-12 .animfolio-hscroll {
		gap: 16px;
	}

	.animfolio-container--format-12 .animfolio-hscroll__item {
		flex: 0 0 min(320px, 88vw);
	}
}

/* Hero is one full viewport: the inner .animfolio-hero owns the 100vh + its own
   nav-clearance padding, so the hero SECTION must not add the standard section
   spacing on top (that pushed the hero past one screen and the content low).
   Higher specificity (.animfolio-section.animfolio-section--hero) beats the
   format's own .animfolio-section padding at every breakpoint. */
.animfolio-container--format-12 .animfolio-section.animfolio-section--hero {
	padding-top: 0;
	padding-bottom: 0;
}


.animfolio-container {
	--animfolio-accent: #E11D48 !important;
	--animfolio-accent-hover: #d7133e !important;
	--animfolio-accent-light: rgba(225, 29, 72, 0.1) !important;
	--animfolio-accent-subtle: rgba(225, 29, 72, 0.12) !important;
	--animfolio-accent-shadow: rgba(225, 29, 72, 0.3) !important;
	--animfolio-accent-glow: rgba(225, 29, 72, 0.5) !important;
	--animfolio-secondary: #A855F7 !important;
	--animfolio-secondary-hover: #9e4bed !important;
	--animfolio-secondary-light: rgba(168, 85, 247, 0.1) !important;
	--animfolio-on-accent: #ffffff !important;
	--animfolio-on-secondary: #14110f !important;
	--animfolio-bg: #0A0A0A;
	--animfolio-bg-secondary: #161616;
	--animfolio-bg-tertiary: #1e1e1e;
	--animfolio-text: #FAFAFA;
	--animfolio-text-secondary: #a0a0a0;
	--animfolio-text-muted: #8a8a8a;
	--animfolio-border: rgba(255, 255, 255, 0.1);
	--animfolio-border-strong: rgba(255, 255, 255, 0.2);
	--animfolio-surface: #1a1a1a;
	--animfolio-surface-hover: #222222;
	--animfolio-overlay: rgba(0, 0, 0, 0.75);
	--animfolio-success: #22c55e;
	--animfolio-warning: #f59e0b;
	--animfolio-error: #ef4444;
	--animfolio-info: #3b82f6;
	--animfolio-font-heading: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
	--animfolio-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--animfolio-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	--animfolio-font-size-base: 16px;
	--animfolio-font-size-h1: clamp(2.5rem, 5vw, 4rem);
	--animfolio-font-size-h2: clamp(1.75rem, 3.5vw, 2.5rem);
	--animfolio-font-size-h3: 1.5rem;
	--animfolio-font-size-h4: 1.25rem;
	--animfolio-font-weight-bold: 700;
	--animfolio-font-weight-medium: 500;
	--animfolio-line-height: 1.6;
	--animfolio-letter-spacing: 0em;
	--animfolio-container-width: 1200px;
	--animfolio-section-spacing: 100px;
	--animfolio-radius: 12px;
	--animfolio-radius-sm: 6px;
	--animfolio-radius-lg: 16px;
	--animfolio-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
	--animfolio-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--animfolio-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
	--animfolio-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.3);
	--animfolio-duration: 0.6s;
	--animfolio-delay: 0s;
	--animfolio-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--animfolio-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--animfolio-stagger: 0.1s;
	--animfolio-transition-fast: 150ms ease;
	--animfolio-transition-normal: 300ms ease;
	--animfolio-transition-slow: 500ms ease;
	--animfolio-z-base: 1;
	--animfolio-z-dropdown: 100;
	--animfolio-z-sticky: 200;
	--animfolio-z-nav: 300;
	--animfolio-z-modal: 400;
	--animfolio-z-lightbox: 500;
	--animfolio-z-tooltip: 600;
	--animfolio-z-cursor: 700;
}
.animfolio-container--light, .animfolio-container[data-animfolio-scheme="light"] {
	--animfolio-bg: #FAFAFA;
	--animfolio-bg-secondary: #f5f5f5;
	--animfolio-bg-tertiary: #ebebeb;
	--animfolio-text: #0A0A0A;
	--animfolio-text-secondary: #555555;
	--animfolio-text-muted: #767676;
	--animfolio-border: rgba(0, 0, 0, 0.1);
	--animfolio-border-strong: rgba(0, 0, 0, 0.2);
	--animfolio-surface: #ffffff;
	--animfolio-surface-hover: #f9f9f9;
	--animfolio-overlay: rgba(0, 0, 0, 0.5);
	--animfolio-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--animfolio-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--animfolio-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
	--animfolio-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
	--animfolio-accent-light: rgba(225, 29, 72, 0.08) !important;
	--animfolio-accent-subtle: rgba(225, 29, 72, 0.05) !important;
	--animfolio-accent-shadow: rgba(225, 29, 72, 0.2) !important;
	--animfolio-accent-glow: rgba(225, 29, 72, 0.15) !important;
	--animfolio-on-accent: #ffffff !important;
	--animfolio-on-secondary: #14110f !important;
}
@media (prefers-color-scheme: light) {
	.animfolio-container--auto {
		--animfolio-bg: #FAFAFA;
		--animfolio-bg-secondary: #f5f5f5;
		--animfolio-bg-tertiary: #ebebeb;
		--animfolio-text: #0A0A0A;
		--animfolio-text-secondary: #555555;
		--animfolio-text-muted: #767676;
		--animfolio-border: rgba(0, 0, 0, 0.1);
		--animfolio-border-strong: rgba(0, 0, 0, 0.2);
		--animfolio-surface: #ffffff;
		--animfolio-surface-hover: #f9f9f9;
		--animfolio-overlay: rgba(0, 0, 0, 0.5);
		--animfolio-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--animfolio-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
		--animfolio-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
		--animfolio-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
		--animfolio-accent-light: rgba(225, 29, 72, 0.08) !important;
		--animfolio-accent-subtle: rgba(225, 29, 72, 0.05) !important;
		--animfolio-accent-shadow: rgba(225, 29, 72, 0.2) !important;
		--animfolio-accent-glow: rgba(225, 29, 72, 0.15) !important;
		--animfolio-on-accent: #ffffff !important;
		--animfolio-on-secondary: #14110f !important;
	}
}

.animfolio-container *,.animfolio-container *::before,.animfolio-container *::after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;background:#0A0A0A;color:#FAFAFA;font-family:var(--animfolio-font-body,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-size:var(--animfolio-font-size-base,16px);line-height:var(--animfolio-line-height,1.6);overflow-x:hidden}body.admin-bar{padding-top:32px}body.admin-bar .animfolio-nav--sticky{top:32px}@media screen and (max-width:782px){body.admin-bar{padding-top:46px}body.admin-bar .animfolio-nav--sticky{top:46px}}.wp-site-blocks,.entry-content,.page-content,.post-content{all:unset;display:block}
/*# sourceURL=animfolio-base-inline-css */