/* UI mocks — narrative infinite animations (business + feature landings) */

.ui-mock[data-ui-mock] {
	position: relative;
	overflow: visible;
}

.ui-mock__cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	opacity: 0;
	pointer-events: none;
	will-change: transform;
	transition: transform 0.08s ease-out, opacity 0.25s var(--ease-out);
}

.ui-mock.is-ui-ready .ui-mock__cursor {
	opacity: 1;
}

.ui-mock__cursor.is-pressing {
	transition: transform 0.06s ease-in;
}

/* —— Toggle: proper knob slide (no CSS keyframe fighting transform) —— */
.ui-mock__toggle.is-toggling {
	transition: background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-mock__toggle.is-toggling::after {
	transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* —— Shared keyframes —— */
@keyframes ui-row-highlight {
	0%,
	100% {
		background: var(--color-card);
		border-color: var(--color-rule-2);
		transform: translateX(0);
	}
	40%,
	55% {
		background: var(--color-accent-soft);
		border-color: var(--color-accent);
		transform: translateX(2px);
	}
}

@keyframes ui-badge-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.72;
	}
}

@keyframes ui-status-flash {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.15);
	}
}

@keyframes ui-bubble-in {
	0%,
	8% {
		opacity: 0;
		transform: translateY(8px);
	}
	18%,
	72% {
		opacity: 1;
		transform: translateY(0);
	}
	88%,
	100% {
		opacity: 0.65;
		transform: translateY(-2px);
	}
}

@keyframes ui-bar-grow {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@keyframes ui-count-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

@keyframes ui-stamp-fill {
	0%,
	12% {
		opacity: 0.35;
		background: oklch(100% 0 0 / 0.4);
		border-color: var(--color-rule);
		border-style: dashed;
		box-shadow: none;
	}
	22%,
	78% {
		opacity: 1;
		background: var(--color-accent);
		border-color: var(--color-accent);
		border-style: solid;
		box-shadow: inset 0 0 0 2px var(--color-accent-ink);
	}
	90%,
	100% {
		opacity: 0.35;
		background: oklch(100% 0 0 / 0.4);
		border-color: var(--color-rule);
		border-style: dashed;
		box-shadow: none;
	}
}

@keyframes ui-check-on {
	0%,
	15% {
		opacity: 0.3;
		background: var(--color-card);
		border-color: var(--color-rule);
	}
	28%,
	70% {
		opacity: 1;
		background: var(--color-accent-soft);
		border-color: var(--color-accent);
	}
	85%,
	100% {
		opacity: 0.3;
		background: var(--color-card);
		border-color: var(--color-rule);
	}
}

@keyframes ui-dot-appear {
	0%,
	18% {
		opacity: 0.2;
	}
	30%,
	65% {
		opacity: 1;
	}
	80%,
	100% {
		opacity: 0.2;
	}
}

@keyframes ui-pill-swap {
	0%,
	35% {
		background: var(--color-paper-2);
		color: var(--color-muted);
	}
	50%,
	90% {
		background: var(--color-accent-soft);
		color: var(--color-accent-deep);
	}
	100% {
		background: var(--color-paper-2);
		color: var(--color-muted);
	}
}

@keyframes ui-card-lift {
	0%,
	100% {
		box-shadow: var(--shadow-soft);
	}
	50% {
		box-shadow: 0 6px 18px oklch(55% 0.13 195 / 0.12);
	}
}

@keyframes ui-typing-caret {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes ui-chev-nudge {
	0%,
	100% {
		transform: translateX(0);
		opacity: 0.55;
	}
	50% {
		transform: translateX(3px);
		opacity: 1;
	}
}

@keyframes ui-note-type {
	0% {
		opacity: 0.4;
		max-width: 0;
	}
	25%,
	75% {
		opacity: 1;
		max-width: 100%;
	}
	100% {
		opacity: 0.4;
		max-width: 100%;
	}
}

@keyframes ui-slot-glow {
	0%,
	100% {
		box-shadow: none;
	}
	50% {
		box-shadow: 0 0 0 2px var(--color-accent);
	}
}

.ui-mock.is-ui-play .ui-mock__slot {
	transition: background-color 0.22s var(--ease-out), border-color 0.22s var(--ease-out), color 0.22s var(--ease-out), transform 0.12s var(--ease-out);
}

.ui-mock.is-ui-play .ui-mock__slot.is-tap {
	transform: scale(0.94);
}

.ui-mock.is-ui-play .ui-mock__slot.ui-mock__slot--on {
	animation: ui-slot-glow 1.8s ease-in-out infinite;
}

.ui-mock.is-ui-play .ui-mock__cta.is-pressed {
	opacity: 0.85;
}

/* —— Agenda: day filling, new badge pulses, row focus —— */
.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__rows li {
	animation: ui-row-highlight 6s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__rows li:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__rows li:nth-child(2) {
	animation-delay: 2s;
}

.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__rows li:nth-child(3) {
	animation-delay: 4s;
}

.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__badge--new {
	animation: ui-badge-pulse 1.8s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="agenda"] .ui-mock__pill {
	animation: ui-count-pulse 3s ease-in-out infinite;
}

/* —— Record: notes appear like typing / focus —— */
.ui-mock.is-ui-play[data-ui-mock="record"] .ui-mock__notes li {
	animation: ui-row-highlight 5s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="record"] .ui-mock__notes li:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="record"] .ui-mock__notes li:nth-child(2) {
	animation-delay: 2.5s;
}

.ui-mock.is-ui-play[data-ui-mock="record"] .ui-mock__next {
	animation: ui-badge-pulse 2.8s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="record"] .ui-mock__avatar {
	animation: ui-count-pulse 3.2s ease-in-out infinite;
}

/* —— Reminder —— */
.ui-mock.is-ui-play[data-ui-mock="reminder"] .ui-mock__bubble {
	animation: ui-bubble-in 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.ui-mock.is-ui-play[data-ui-mock="reminder"] .ui-mock__confirm {
	transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.25s var(--ease-out);
}

[data-ui-mock="reminder"] .ui-mock__confirm.is-confirmed {
	background: oklch(52% 0.14 145);
	color: oklch(98% 0.02 145);
}

/* —— Team: invite → active —— */
.ui-mock.is-ui-play[data-ui-mock="team"] .ui-mock__rows li {
	animation: ui-row-highlight 5.5s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="team"] .ui-mock__rows li:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="team"] .ui-mock__rows li:nth-child(2) {
	animation-delay: 1.8s;
}

.ui-mock.is-ui-play[data-ui-mock="team"] .ui-mock__rows li:nth-child(3) {
	animation-delay: 3.6s;
}

.ui-mock.is-ui-play[data-ui-mock="team"] .ui-mock__rows li:nth-child(3) .ui-mock__pill {
	animation: ui-pill-swap 5.5s ease-in-out infinite;
}

/* —— Services: row focus + JS toggles —— */
.ui-mock.is-ui-play[data-ui-mock="services"] .ui-mock__rows li {
	animation: ui-row-highlight 5.5s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="services"] .ui-mock__rows li:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="services"] .ui-mock__rows li:nth-child(2) {
	animation-delay: 1.8s;
}

.ui-mock.is-ui-play[data-ui-mock="services"] .ui-mock__rows li:nth-child(3) {
	animation-delay: 3.6s;
}

/* —— Matrix: checks fill via JS; subtle pulse when on —— */
.ui-mock.is-ui-play[data-ui-mock="matrix"] .ui-mock__check--on {
	transition: background-color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
	animation: ui-count-pulse 2.4s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="matrix"] .ui-mock__check {
	transition: background-color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
}

/* —— Calendars: occupancy lighting up —— */
.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal {
	animation: ui-card-lift 4.5s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal:nth-child(2) {
	animation-delay: 0.9s;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal-dots i.ui-mock__dot--a,
.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal-dots i.ui-mock__dot--b {
	animation: ui-dot-appear 4s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal:nth-child(1) .ui-mock__dot--a {
	animation-delay: 0.15s;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal:nth-child(1) .ui-mock__dot--b {
	animation-delay: 0.55s;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal:nth-child(2) .ui-mock__dot--a {
	animation-delay: 0.95s;
}

.ui-mock.is-ui-play[data-ui-mock="calendars"] .ui-mock__cal:nth-child(2) .ui-mock__dot--b {
	animation-delay: 1.35s;
}

/* —— Stats —— */
.ui-mock__bars--anim span {
	transform-origin: bottom center;
	transform: scaleY(0);
}

.ui-mock__bars--anim.is-ui-animate span {
	animation: ui-bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ui-mock__bars--anim.is-ui-animate span:nth-child(1) {
	animation-delay: 0.05s;
}

.ui-mock__bars--anim.is-ui-animate span:nth-child(2) {
	animation-delay: 0.12s;
}

.ui-mock__bars--anim.is-ui-animate span:nth-child(3) {
	animation-delay: 0.2s;
}

.ui-mock__bars--anim.is-ui-animate span:nth-child(4) {
	animation-delay: 0.28s;
}

.ui-mock__bars--anim.is-ui-animate span:nth-child(5) {
	animation-delay: 0.36s;
}

.ui-mock.is-ui-play[data-ui-mock="stats"] .ui-mock__stat-row strong {
	animation: ui-count-pulse 3.5s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="stats"] .ui-mock__stat-foot {
	animation: ui-badge-pulse 2.8s ease-in-out infinite;
}

/* —— Loyalty: stamps fill in sequence —— */
.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__loyalty-card {
	animation: ui-card-lift 4s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp {
	animation: ui-stamp-fill 7s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(2) {
	animation-delay: 0.18s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(3) {
	animation-delay: 0.36s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(4) {
	animation-delay: 0.54s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(5) {
	animation-delay: 0.72s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(6) {
	animation-delay: 0.9s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(7) {
	animation-delay: 1.08s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(8) {
	animation-delay: 1.26s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(9),
.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__stamp:nth-child(10) {
	animation: ui-dot-appear 3.2s ease-in-out infinite;
	animation-delay: 1.5s;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__loyalty-tier {
	animation: ui-count-pulse 2.6s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="loyalty"] .ui-mock__loyalty-reward {
	animation: ui-badge-pulse 2.8s ease-in-out infinite;
}

/* —— Admin: chevron nudge; toggles via JS —— */
.ui-mock.is-ui-play[data-ui-mock="admin"] .ui-mock__rows li {
	animation: ui-row-highlight 6s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="admin"] .ui-mock__rows li:nth-child(1) {
	animation-delay: 0s;
}

.ui-mock.is-ui-play[data-ui-mock="admin"] .ui-mock__rows li:nth-child(2) {
	animation-delay: 2s;
}

.ui-mock.is-ui-play[data-ui-mock="admin"] .ui-mock__rows li:nth-child(3) {
	animation-delay: 4s;
}

.ui-mock.is-ui-play[data-ui-mock="admin"] .ui-mock__chev {
	display: inline-block;
	animation: ui-chev-nudge 1.6s ease-in-out infinite;
}

/* —— Client —— */
.ui-mock.is-ui-play[data-ui-mock="client"] .ui-mock__client-card {
	animation: ui-card-lift 3.2s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="client"] .ui-mock__client-links span {
	animation: ui-badge-pulse 2.8s ease-in-out infinite;
}

.ui-mock.is-ui-play[data-ui-mock="client"] .ui-mock__client-links span:nth-child(2) {
	animation-delay: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
	.ui-mock.is-ui-play * {
		animation: none !important;
	}

	.ui-mock__bars--anim span {
		transform: scaleY(1) !important;
	}

	.ui-mock__cursor {
		display: none !important;
	}
}