/**
 * TCC Group – Animation & Motion Token System
 *
 * Rules: .agents/skills/review-animations/STANDARDS.md
 * Philosophy: Emil Kowalski / Apple design principles
 *
 * ENFORCEMENT:
 * - Never animate keyboard-initiated actions
 * - High-frequency elements (nav hover): colour transitions only, no transforms
 * - Always honour prefers-reduced-motion
 * - Never use ease-in on UI elements
 */

/* ─── Motion tokens ─────────────────────────────────────────────────── */
:root {
	--tcc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* enter/exit */
	--tcc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen moves */
	--tcc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like drawer */
	--tcc-ease-color:  ease;                               /* hover colour changes */

	--tcc-duration-instant: 100ms;
	--tcc-duration-fast:    150ms;
	--tcc-duration-base:    200ms;
	--tcc-duration-slow:    300ms;
	--tcc-duration-drawer:  320ms;
}

/* ─── Reduce motion: kill everything ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration:        0.01ms !important;
		animation-iteration-count: 1      !important;
		transition-duration:       0.01ms !important;
		scroll-behavior:           auto   !important;
	}

	/* Kill hover/focus movement too — zeroing the transition alone still lets
	   the transform jump instantly. Covers archive cards (.tcc-card) and any
	   other card that translates on hover. */
	.tcc-card:hover,
	.tcc-card:focus-visible {
		transform: none;
	}
}

/* ─── Focus rings – never animated ─────────────────────────────────── */
:focus-visible {
	outline:        2px solid var(--wp--preset--color--accent, #ef6a4d);
	outline-offset: 2px;
	border-radius:  2px;
	transition:     none; /* focus rings are instant */
}

/* ─── Navigation links (high frequency – colour only) ──────────────── */
/* STANDARDS.md: "tens of times/day → remove or drastically reduce"    */
.tcc-nav-top {
	transition:
		color            var(--tcc-duration-fast) var(--tcc-ease-color),
		border-bottom-color var(--tcc-duration-fast) var(--tcc-ease-color);
	/* NO transform, NO opacity – high frequency element */
}

/* ─── Dropdown chevron ──────────────────────────────────────────────── */
.tcc-nav-chevron {
	transition: transform var(--tcc-duration-fast) var(--tcc-ease-color);
}
.tcc-nav-item[data-open] .tcc-nav-chevron {
	transform: rotate(180deg);
}

/* ─── Dropdown panel (occasional – standard animation) ─────────────── */
.tcc-nav-panel {
	opacity:    0;
	transform:  translateY(-6px);
	transition:
		opacity   var(--tcc-duration-base) var(--tcc-ease-out),
		transform var(--tcc-duration-base) var(--tcc-ease-out),
		visibility 0s linear var(--tcc-duration-base);
	visibility: hidden;
	pointer-events: none;
}
.tcc-nav-item[data-open] .tcc-nav-panel {
	opacity:    1;
	transform:  translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity   var(--tcc-duration-base) var(--tcc-ease-out),
		transform var(--tcc-duration-base) var(--tcc-ease-out),
		visibility 0s linear 0s;
}

/* ─── Burger menu icon → X morph ───────────────────────────────────── */
.tcc-burger-bar {
	transition:
		transform var(--tcc-duration-base) var(--tcc-ease-in-out),
		opacity   var(--tcc-duration-fast)  var(--tcc-ease-out);
}
.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.tcc-burger[aria-expanded="true"] .tcc-burger-bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ─── Mobile nav drawer ─────────────────────────────────────────────── */
.tcc-mobile-nav {
	max-height: 0;
	overflow:   hidden;
	transition: max-height var(--tcc-duration-drawer) var(--tcc-ease-drawer);
}
.tcc-mobile-nav.is-open {
	max-height: 100vh;
}

/* ─── Mobile accordion sub-menu ────────────────────────────────────── */
.tcc-mobile-submenu {
	max-height: 0;
	overflow:   hidden;
	transition: max-height var(--tcc-duration-slow) var(--tcc-ease-drawer);
}
.tcc-mobile-submenu.is-open {
	max-height: 500px;
}

/* ─── Interactive card / panel hover lift ───────────────────────────── */
/* Occasional interactions on cards – subtle transform allowed          */
.tcc-card {
	transition:
		transform var(--tcc-duration-base) var(--tcc-ease-out),
		box-shadow var(--tcc-duration-base) var(--tcc-ease-out);
}
.tcc-card:hover {
	transform:  translateY(-3px);
	box-shadow: 0 12px 32px -12px rgba(11, 70, 66, 0.25);
}

/* ─── CTA button press ──────────────────────────────────────────────── */
.wp-block-button__link,
.tcc-btn {
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-out),
		color            var(--tcc-duration-fast) var(--tcc-ease-out),
		transform        var(--tcc-duration-instant) var(--tcc-ease-out);
}
.wp-block-button__link:active,
.tcc-btn:active {
	transform: scale(0.97);
}

/* ─── Page-level fade-in (once, on load) ───────────────────────────── */
@keyframes tcc-fade-up {
	from {
		opacity:   0;
		transform: translateY(12px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

.tcc-animate-in {
	animation: tcc-fade-up var(--tcc-duration-slow) var(--tcc-ease-out) both;
}

/* ─── AI media badge pulse (draws attention once) ───────────────────── */
@keyframes tcc-badge-appear {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: scale(1); }
}
.tcc-ai-badge {
	animation: tcc-badge-appear var(--tcc-duration-base) var(--tcc-ease-out) both;
}