/* A final presentation layer: reference spacing, type sizes, and photos stay intact. */
body.afp-experience {
	--paper: #fff;
	--ink: #080808;
	--label: #d4d4d4;
	--muted: #555;
	--home-ground: var(--paper);
	--profile-ink: var(--ink);
	--profile-border: #888;
	--afp-home-ink: #000;
	--afp-surface: #ddd;
	--afp-track: #c6c6c6;
	--afp-thumb: #888;
	--afp-thumb-border: #eee;
	--afp-primary-hover: #111;
	--afp-focus: #143ac4;
	--afp-backdrop: #ffffffec;
	--afp-over-artwork: #d4d4d4;
	--afp-name-shadow: rgb(0 0 0 / 4%);
	color-scheme: light;
	background: var(--paper);
	color: var(--ink);
}

body.afp-experience.afp-color-dark {
	--paper: #151515;
	--ink: #f2f2f2;
	--label: #515151;
	--muted: #b8b8b8;
	--profile-border: #929292;
	--afp-home-ink: #f2f2f2;
	--afp-surface: #363636;
	--afp-track: #515151;
	--afp-thumb: #c9c9c9;
	--afp-thumb-border: #151515;
	--afp-primary-hover: #d9d9d9;
	--afp-focus: #a6bdff;
	--afp-backdrop: #151515f2;
	--afp-over-artwork: #f2f2f2;
	--afp-name-shadow: rgb(0 0 0 / 18%);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	body.afp-experience.afp-color-auto {
		--paper: #151515;
		--ink: #f2f2f2;
		--label: #515151;
		--muted: #b8b8b8;
		--profile-border: #929292;
		--afp-home-ink: #f2f2f2;
		--afp-surface: #363636;
		--afp-track: #515151;
		--afp-thumb: #c9c9c9;
		--afp-thumb-border: #151515;
		--afp-primary-hover: #d9d9d9;
		--afp-focus: #a6bdff;
		--afp-backdrop: #151515f2;
		--afp-over-artwork: #f2f2f2;
		--afp-name-shadow: rgb(0 0 0 / 18%);
		color-scheme: dark;
	}
}

/* These original surfaces/text had fixed light colours rather than variables. */
body.afp-experience :is(.home-screen, .profile-sheet) { color: var(--afp-home-ink); }
body.afp-experience :is(.detail-story, .record-choice) { background: var(--paper); }
body.afp-experience .detail-copy .reference-detail { color: var(--muted); }
body.afp-experience :is(.detail-copy .text-background, .detail-copy dl) { background: var(--label); }
body.afp-experience :is(.error button, .size-control button, .image-arrow) { background: var(--afp-surface); color: var(--ink); }
body.afp-experience .size-control input { background: var(--afp-track); }
body.afp-experience .size-control input::-webkit-slider-thumb { background: var(--afp-thumb); border-color: var(--afp-thumb-border); }
body.afp-experience .size-control input::-moz-range-thumb { background: var(--afp-thumb); border-color: var(--afp-thumb-border); }
body.afp-experience .preview-note { background: var(--afp-surface); color: var(--ink); }
body.afp-experience :is(.skip, .close:hover, .image-arrow:hover:not(:disabled), .preview-note:hover) { background: var(--ink); color: var(--paper); }
body.afp-experience .about-dialog { box-shadow: 0 0 0 1px var(--label); }
body.afp-experience dialog::backdrop { background: var(--afp-backdrop); }
body.afp-experience .profile-button.primary:hover { background: var(--afp-primary-hover); color: var(--paper); }
body.afp-experience :is(.wp-element-button, .wp-block-button__link) { background: var(--ink); color: var(--paper); }
body.afp-experience :is(input, textarea, select) { color: var(--ink); background-color: var(--paper); }
body.afp-experience :is(a, button, input, textarea, select, summary):focus-visible { outline-color: var(--afp-focus); }
body.afp-experience :is(.site-nav .label, .index-menu .menu-link, .index-menu summary, .category-controls button, .row-heading .label, .row-controls > *, .detail-information .label).over-artwork { color: var(--afp-over-artwork); }
body.afp-experience .video-upload-progress progress { accent-color: var(--ink); }

/* Do not animate the menu or gate any navigation/content on JavaScript. */
body.afp-experience .home-center { animation: none; transform: none; opacity: 1; }
body.afp-experience .home-screen { overflow-x: clip; }
body.afp-experience .home-center h1 {
	transform: none;
	opacity: 1;
	text-shadow: 0 1px 2px var(--afp-name-shadow);
	transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
	body.afp-experience.afp-motion-bounce .home-center h1 {
		animation: afp-name-land 1.32s cubic-bezier(.22,.72,.18,1) 1 both;
	}
	body.afp-experience.afp-motion-soft .home-center h1 {
		animation: afp-name-soft .86s cubic-bezier(.22,.72,.18,1) 1 both;
	}
}

@keyframes afp-name-land {
	0% { transform: translate3d(0,-45svh,0) scale(1.65); text-shadow: 0 18px 28px rgb(0 0 0 / 24%); }
	62% { transform: translate3d(0,.45em,0) scale(.98); text-shadow: 0 3px 5px rgb(0 0 0 / 12%); }
	80% { transform: translate3d(0,-.12em,0) scale(1.01); text-shadow: 0 2px 3px rgb(0 0 0 / 8%); }
	100% { transform: none; text-shadow: 0 1px 2px var(--afp-name-shadow); }
}

@keyframes afp-name-soft {
	0% { transform: translate3d(0,-20svh,0) scale(1.2); text-shadow: 0 10px 18px rgb(0 0 0 / 16%); }
	100% { transform: none; text-shadow: 0 1px 2px var(--afp-name-shadow); }
}

/* Includes existing gallery/overlap transitions, not just the new name motion. */
@media (prefers-reduced-motion: reduce) {
	body.afp-experience *, body.afp-experience *::before, body.afp-experience *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	body.afp-experience .home-center h1 { transform: none !important; opacity: 1 !important; }
}

@media print {
	body.afp-experience:is(.afp-color-auto, .afp-color-light, .afp-color-dark) { --paper: #fff; --ink: #080808; --muted: #555; --afp-home-ink: #000; color-scheme: light; }
	body.afp-experience .home-center h1 { animation: none; transform: none; text-shadow: none; }
}