/* TANTS.EE — global motion system (tokens, reveals, page flow, menu integration). */

:root {
	--motion-fast: 180ms;
	--motion-normal: 320ms;
	--motion-slow: 650ms;
	--motion-reveal: 750ms;
	--motion-page: 420ms;

	--ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--reveal-distance: 22px;
	--reveal-distance-mobile: 12px;
	--stagger-delay: 65ms;

	/* Legacy aliases */
	--tm-ease: var(--ease-fluid);
	--tm-ink: #242222;
	--tm-paper: #faf9f5;
	--tm-accent: #88706f;
}

html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: calc(var(--anchor-offset, var(--tants-header-height, 80px)) + 0.75rem);
}

@view-transition {
	navigation: auto;
}

::view-transition-old(tants-page-main),
::view-transition-new(tants-page-main) {
	animation-duration: var(--motion-page);
	animation-timing-function: var(--ease-fluid);
}

::view-transition-old(tants-site-header),
::view-transition-new(tants-site-header) {
	animation: none;
}

/* No-JS / pre-init: content stays readable */
html:not(.js) .tm-reveal,
html:not(.js) .tm-stagger > * {
	opacity: 1;
	transform: none;
}

html.js.tm-motion-ready .tm-reveal:not(.tm-visible) {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--motion-reveal) var(--ease-fluid),
		transform var(--motion-reveal) var(--ease-fluid);
}

html.js.tm-motion-ready .tm-reveal.tm-visible {
	opacity: 1;
	transform: none;
}

/* Listing layout shells wrap animated panels — never hide the whole profile column. */
html.js.tm-motion-ready .tants-artist-layout,
html.js.tm-motion-ready .tants-org-layout,
html.js.tm-motion-ready .tants-production-layout {
	opacity: 1 !important;
	transform: none !important;
}

html.js.tm-motion-ready .tm-stagger:not(.tm-visible) > * {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity var(--motion-slow) var(--ease-fluid),
		transform var(--motion-slow) var(--ease-fluid);
	transition-delay: calc(min(var(--tm-index, 0), 5) * var(--stagger-delay));
}

html.js.tm-motion-ready .tm-stagger.tm-visible > * {
	opacity: 1;
	transform: none;
}

/* Page enter only after in-site navigation (not first paint) */
html.js.tm-page-enter .tm-page-main {
	animation: tm-page-enter var(--motion-page) var(--ease-fluid) both;
}

@keyframes tm-page-enter {
	from {
		opacity: 0.92;
		transform: translate3d(0, 12px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

html.js.tm-navigating .tm-page-main {
	transition:
		opacity var(--motion-fast) var(--ease-in-out),
		transform var(--motion-fast) var(--ease-in-out);
	opacity: 0.88;
	transform: translate3d(0, -6px, 0);
}

/* Dynamic content (filters, pagination) */
.tm-swap {
	transition: opacity var(--motion-normal) var(--ease-fluid);
}

.tm-swap.tm-swap-out {
	opacity: 0.4;
}

.tm-swap.tm-swap-in {
	opacity: 1;
}

.tm-soft-image,
.tants-prod-card__media,
.tants-home-artist-card__media {
	overflow: hidden;
}

.tm-soft-image img,
.tants-prod-card__media img {
	transition: transform var(--motion-slow) var(--ease-fluid);
}

@media (hover: hover) and (pointer: fine) {
	.tm-soft-image:hover img,
	.tm-card:hover .tants-prod-card__media img,
	.tants-prod-card.tm-card:hover .tants-prod-card__media img {
		transform: scale(1.025);
	}
}

.tm-img {
	opacity: 1;
}

html.js.tm-motion-ready .tm-img:not(.tm-img-loaded) {
	opacity: 0;
}

.tants-hero__track img {
	opacity: 1 !important;
}

html.js.tm-motion-ready .tm-img.tm-img-loaded {
	transition: opacity var(--motion-normal) var(--ease-soft);
	opacity: 1;
}

.tm-link {
	position: relative;
	text-decoration: none;
}

.tm-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms var(--ease-fluid);
}

@media (hover: hover) and (pointer: fine) {
	.tm-link:hover::after {
		transform: scaleX(1);
	}
}

.tm-card {
	transition:
		box-shadow var(--motion-normal) var(--ease-fluid),
		border-color var(--motion-fast) var(--ease-fluid);
}

.tants-chrome-header__btn,
.tants-hero__search-submit,
.tants-legal-cookie-btn,
.tants-artist-contact__cta {
	transition:
		background var(--motion-fast) var(--ease-fluid),
		border-color var(--motion-fast) var(--ease-fluid),
		color var(--motion-fast) var(--ease-fluid);
}

/* —— Mobile menu (base; chrome overrides in tants.css) —— */
.tm-menu {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	pointer-events: none;
	background: var(--tm-paper);
	color: var(--tm-ink);
	clip-path: inset(0 0 100% 0);
	transition:
		clip-path 520ms var(--ease-fluid),
		visibility 0s linear 520ms;
	overflow: auto;
	overscroll-behavior: contain;
}

.tm-menu.tm-open {
	visibility: visible;
	pointer-events: auto;
	clip-path: inset(0 0 0 0);
	transition:
		clip-path 560ms var(--ease-fluid),
		visibility 0s;
}

.tm-menu.tm-closing {
	transition:
		clip-path 340ms var(--ease-in-out),
		visibility 0s linear 340ms;
}

.tm-menu [data-tm-menu-item] {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition:
		opacity var(--motion-normal) var(--ease-fluid),
		transform var(--motion-normal) var(--ease-fluid);
	transition-delay: 0s;
}

.tm-menu.tm-open:not(.tm-closing) [data-tm-menu-item] {
	opacity: 1;
	transform: none;
	transition-delay: calc(120ms + min(var(--tm-index, 0), 5) * var(--stagger-delay));
}

.tm-menu.tm-closing [data-tm-menu-item] {
	opacity: 0;
	transition-duration: var(--motion-fast);
	transition-delay: 0ms;
}

.tm-menu button,
.tm-menu a {
	touch-action: manipulation;
}

body.tm-menu-locked {
	overflow: hidden;
}

@media (max-width: 991px) {
	:root {
		--stagger-delay: 45ms;
	}

	html.js.tm-motion-ready .tm-reveal {
		transform: translate3d(0, var(--reveal-distance-mobile), 0);
		transition-duration: 550ms;
	}

	html.js.tm-motion-ready .tm-stagger > * {
		transform: translate3d(0, 12px, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.tm-reveal,
	.tm-stagger > *,
	.tm-soft-image img,
	.tm-link::after,
	.tm-menu,
	.tm-menu [data-tm-menu-item],
	.tm-page-main,
	.tm-swap,
	.tm-img {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}

	.tm-reveal,
	.tm-stagger > *,
	.tm-page-main,
	.tm-img {
		opacity: 1 !important;
	}

	.tm-menu {
		clip-path: none !important;
	}

	.tm-menu:not(.tm-open) {
		display: none !important;
	}

	.tm-menu.tm-open [data-tm-menu-item] {
		opacity: 1 !important;
	}
}