/* ============================================================
 * Novara v7.3.0 — LUXURY MOTION SYSTEM
 *
 * Editorial-grade motion language. Cohesive timing, easing,
 * hierarchy, and respect for user motion preferences.
 *
 * Loaded AFTER luxury-refine.css so it can fine-tune motion only.
 * Pure refinement — no visual redesign.
 * ============================================================ */

/* ──────────────────────────────────────────────
 * 1) MOTION TOKENS — single source of truth
 * ────────────────────────────────────────────── */
:root {
	/* Durations (consistent rhythm — multiples of 60ms-ish) */
	--motion-instant: 100ms;
	--motion-fast:    180ms;
	--motion-base:    260ms;
	--motion-medium:  380ms;
	--motion-slow:    540ms;
	--motion-epic:    720ms;

	/* Easings — luxury editorial curves */
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);    /* hero entrance */
	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* SPA crossfade */
	--ease-soft-spring:  cubic-bezier(0.34, 1.4, 0.64, 1); /* gentle bounce */
	--ease-precise:   cubic-bezier(0.4, 0, 0.2, 1);      /* Material micro */
}

/* ──────────────────────────────────────────────
 * 2) MOTION HIERARCHY OVERRIDES
 * Re-tune existing components to use unified tokens
 * ────────────────────────────────────────────── */

/* Cards — silkier entrance + hover */
.novara-card,
.novara-post-card,
article.post,
.novara-trending__item {
	transition:
		transform var(--motion-medium) var(--ease-out-quart),
		box-shadow var(--motion-medium) var(--ease-out-quart),
		border-color var(--motion-base) var(--ease-precise),
		background-color var(--motion-base) var(--ease-precise);
}

/* Buttons — sharper micro-interaction */
.novara-btn,
.button,
.novara-icon-btn,
.novara-subscribe-btn,
.novara-newsletter__btn {
	transition:
		background-color var(--motion-fast) var(--ease-precise),
		color var(--motion-fast) var(--ease-precise),
		transform var(--motion-fast) var(--ease-soft-spring),
		box-shadow var(--motion-fast) var(--ease-precise),
		border-color var(--motion-fast) var(--ease-precise);
}

/* Links — instant color, gentle underline */
a {
	transition:
		color var(--motion-fast) var(--ease-precise),
		text-decoration-color var(--motion-base) var(--ease-out-quart);
}

/* Nav links — smooth tint */
.novara-nav__link,
.novara-nav__list > li > a,
.novara-topbar__menu-list a,
.novara-topbar__social-link {
	transition:
		color var(--motion-fast) var(--ease-precise),
		background-color var(--motion-fast) var(--ease-precise),
		transform var(--motion-fast) var(--ease-soft-spring);
}

/* Widget titles & headings inside cards — no transition jank */
.novara-widget,
.novara-widget__title {
	transition:
		border-color var(--motion-base) var(--ease-precise),
		box-shadow var(--motion-base) var(--ease-out-quart);
}

/* Images — premium fade-in */
img:not([loading="eager"]) {
	transition: opacity var(--motion-medium) var(--ease-out-quart),
				transform var(--motion-medium) var(--ease-out-quart),
				filter var(--motion-medium) var(--ease-out-quart);
}

/* ──────────────────────────────────────────────
 * 3) HOVER FLUIDITY
 * Replace harsh translateY with subtle, layered moves
 * ────────────────────────────────────────────── */
.novara-card:hover,
.novara-post-card:hover,
article.post:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 18px 40px -12px rgba(15, 22, 32, 0.12);
}
[data-theme="dark"] .novara-card:hover,
[data-theme="dark"] .novara-post-card:hover,
[data-theme="dark"] article.post:hover {
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5);
}

/* Image hover — premium zoom inside thumb wrapper */
.novara-post-card__thumb,
.novara-card__thumb,
.novara-trending__thumb,
.novara-thumb-wrap {
	overflow: hidden;
	border-radius: inherit;
}
.novara-post-card__thumb img,
.novara-card__thumb img,
.novara-trending__thumb img,
.novara-thumb-wrap img {
	transition: transform var(--motion-epic) var(--ease-out-quart),
				filter var(--motion-medium) var(--ease-out-quart);
	will-change: transform;
}
.novara-post-card:hover .novara-post-card__thumb img,
.novara-card:hover .novara-card__thumb img,
.novara-trending__item:hover .novara-trending__thumb img,
a:hover > .novara-thumb-wrap img {
	transform: scale(1.04);
}

/* ──────────────────────────────────────────────
 * 4) SPA TRANSITION COHESION
 * Synchronized opacity + tiny upward drift
 * ────────────────────────────────────────────── */
.novara-main,
[data-novara-spa-region] {
	transition:
		opacity var(--motion-medium) var(--ease-in-out-quart),
		transform var(--motion-medium) var(--ease-in-out-quart);
}
[data-novara-spa-loading="true"] .novara-main,
[data-novara-spa-loading="true"] [data-novara-spa-region] {
	opacity: 0.45;
	transform: translateY(2px);
}

/* SPA transition done — luxury drift */
.novara-main {
	animation: novaraSpaEnter var(--motion-medium) var(--ease-out-expo) both;
}
@keyframes novaraSpaEnter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* SPA progress indicator (top bar) */
.novara-spa-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		var(--novara-gold, #F4B942) 0%,
		var(--novara-crimson, #E63946) 100%);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 99999;
	transition: transform var(--motion-medium) var(--ease-out-quart),
				opacity var(--motion-fast) var(--ease-precise);
}
.novara-spa-progress.is-loading {
	transform: scaleX(0.7);
}
.novara-spa-progress.is-done {
	transform: scaleX(1);
	opacity: 0;
	transition: transform var(--motion-fast) var(--ease-precise),
				opacity var(--motion-medium) var(--ease-precise) var(--motion-fast);
}

/* ──────────────────────────────────────────────
 * 5) LOADING ANIMATION QUALITY
 * ────────────────────────────────────────────── */

/* Refined spinner */
.novara-spinner,
.novara-loading::after {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-top-color: var(--novara-crimson, #E63946);
	animation: novaraSpin var(--motion-epic) linear infinite;
	display: inline-block;
}
@keyframes novaraSpin {
	to { transform: rotate(360deg); }
}
[data-theme="dark"] .novara-spinner,
[data-theme="dark"] .novara-loading::after {
	border-color: rgba(255, 255, 255, 0.08);
	border-top-color: var(--novara-gold, #F4B942);
}

/* Refined dots loader */
.novara-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.novara-dots span {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--novara-crimson, #E63946);
	animation: novaraDot 1.2s var(--ease-in-out-quart) infinite both;
}
.novara-dots span:nth-child(2) { animation-delay: 0.15s; }
.novara-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes novaraDot {
	0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1;   }
}

/* Skeleton shimmer — slightly slower, more luxurious */
.novara-skeleton::after,
.novara-skeleton-card::after {
	animation-duration: 1.8s !important;
	animation-timing-function: var(--ease-in-out-quart) !important;
}

/* ──────────────────────────────────────────────
 * 6) MICRO-INTERACTIONS
 * ────────────────────────────────────────────── */

/* Bookmark / heart pop */
.novara-icon-btn--active,
.novara-bookmark.is-active,
.novara-reaction.is-active {
	animation: novaraPopIn var(--motion-base) var(--ease-soft-spring) both;
}
@keyframes novaraPopIn {
	0%   { transform: scale(0.9); }
	60%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* Newsletter success */
.novara-newsletter__msg.is-success,
.novara-newsletter__form.is-success .novara-newsletter__btn {
	animation: novaraSuccessPulse var(--motion-medium) var(--ease-soft-spring) both;
}
@keyframes novaraSuccessPulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* Form input focus */
input,
textarea,
select {
	transition:
		border-color var(--motion-fast) var(--ease-precise),
		box-shadow var(--motion-fast) var(--ease-precise),
		background-color var(--motion-fast) var(--ease-precise);
}
input:focus,
textarea:focus,
select:focus {
	box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

/* Subtle copy-link confirmation */
.novara-share__copy.is-copied {
	animation: novaraCopied var(--motion-medium) var(--ease-soft-spring);
}
@keyframes novaraCopied {
	0%   { transform: scale(1);    }
	50%  { transform: scale(1.1); }
	100% { transform: scale(1);    }
}

/* ──────────────────────────────────────────────
 * 7) MOBILE ANIMATION FEEL
 * Snappier, more responsive on touch
 * ────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
	.novara-card,
	.novara-post-card,
	.novara-btn,
	.novara-nav__link {
		transition-duration: var(--motion-fast);
	}
	.novara-card:active,
	.novara-post-card:active {
		transform: scale(0.985);
		transition-duration: var(--motion-instant);
	}
	.novara-btn:active,
	.novara-icon-btn:active,
	.novara-subscribe-btn:active {
		transform: scale(0.96);
		transition-duration: var(--motion-instant);
	}
}

/* ──────────────────────────────────────────────
 * 8) MOBILE MENU SLIDE — silky
 * ────────────────────────────────────────────── */
.novara-mobile-menu {
	transition:
		transform var(--motion-medium) var(--ease-out-expo),
		opacity var(--motion-base) var(--ease-precise),
		visibility 0s linear var(--motion-medium);
}
.novara-mobile-menu.is-open,
.novara-mobile-menu[aria-hidden="false"] {
	transition:
		transform var(--motion-medium) var(--ease-out-expo),
		opacity var(--motion-base) var(--ease-precise),
		visibility 0s;
}

/* Backdrop fade */
.novara-mobile-menu-backdrop,
.novara-overlay-backdrop {
	transition:
		opacity var(--motion-base) var(--ease-precise),
		visibility 0s linear var(--motion-base);
}
.novara-mobile-menu-backdrop.is-visible,
.novara-overlay-backdrop.is-visible {
	transition:
		opacity var(--motion-base) var(--ease-precise),
		visibility 0s;
}

/* ──────────────────────────────────────────────
 * 9) STICKY HEADER MOTION
 * Smoother hide-on-scroll, no jank
 * ────────────────────────────────────────────── */
.novara-header {
	transition:
		transform var(--motion-medium) var(--ease-out-quart),
		background-color var(--motion-base) var(--ease-precise),
		box-shadow var(--motion-base) var(--ease-out-quart),
		backdrop-filter var(--motion-base) var(--ease-precise);
	will-change: transform;
}

/* ──────────────────────────────────────────────
 * 10) RESPECT REDUCED MOTION (override fully)
 * ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.novara-card:hover,
	.novara-post-card:hover {
		transform: none !important;
	}
	.novara-post-card:hover .novara-post-card__thumb img,
	.novara-card:hover .novara-card__thumb img {
		transform: none !important;
	}
}