/* The accent, for pages that never load the portal stylesheet. Overridden on
   .vc-portal in portal.css and again on the dashboard's .vc-dash block. */
:root {
	--acc-rgb: 212, 175, 55;
	--acc-a: 1;
	--acc-a-strong: 1;
}

/* ==========================================================================
   Velmora — motion
   --------------------------------------------------------------------------
   Everything here is about one thing: making a tap or a click feel answered.
   A control that moves the instant it is pressed reads as solid; one that sits
   there reads as broken, even when it is working perfectly.

   Rules that apply throughout:
     - transform and opacity only, so nothing here costs a layout pass
     - hover effects sit behind (hover: hover), so a phone never shows a
       stuck hover state after a tap
     - the whole file yields to prefers-reduced-motion at the bottom
   ========================================================================== */

/* ---------- Buttons: press, lift, and something under the finger ---------- */

.btn,
.vc-btn,
.vc-pill,
.vc-nav-btn,
.vc-icon-btn,
.auth-tab,
.vc-account-btn {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition:
		transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		background-color 0.22s ease,
		border-color 0.22s ease,
		color 0.22s ease,
		box-shadow 0.28s ease,
		opacity 0.2s ease;
}

@media (hover: hover) {
	.vc-btn:hover:not(:disabled),
	.vc-account-btn:hover:not(:disabled) {
		transform: translateY(-1px);
	}

	.vc-btn-gold:hover:not(:disabled) {
		box-shadow: 0 8px 22px -12px rgba(var(--acc-rgb), calc(0.75 * var(--acc-a-strong)));
	}
}

/* The press itself. Deliberately quick and slightly overshot on release. */
.btn:active,
.vc-btn:not(:disabled):active,
.vc-pill:active,
.vc-icon-btn:active,
.auth-tab:active,
.vc-account-btn:not(:disabled):active {
	transform: translateY(0) scale(0.972);
	transition-duration: 0.06s;
}

/* A full-width sidebar row is the wrong shape to shrink — it wobbles. It gets
   the tint and the ink instead. */
.vc-nav-btn:active {
	background: rgba(var(--acc-rgb), calc(0.11 * var(--acc-a)));
	transition-duration: 0.06s;
}

.vc-link-btn,
.nav-links a,
.site-logo,
.footer-col a {
	-webkit-tap-highlight-color: transparent;
	transition: color 0.22s ease, opacity 0.22s ease, transform 0.18s ease;
}

.vc-link-btn:active,
.footer-col a:active {
	transform: scale(0.97);
}

/* The ink that spreads from the point of contact. Drawn in currentColor, so
   it is dark on the gold buttons and light on the ghost ones without anyone
   having to maintain two palettes. */
.vc-ink {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: currentColor;
	opacity: 0.28;
	transform: scale(0);
	animation: vc-ink 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes vc-ink {
	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* ---------- Cards and panels: they rise slightly to meet the cursor ------- */

.card,
.vc-section,
.vc-kpi,
.vc-note-card,
.vc-article,
.vc-side-block,
.vc-account,
.vc-ref-callout {
	transition:
		transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.38s ease,
		background-color 0.38s ease,
		box-shadow 0.38s ease;
}

@media (hover: hover) and (min-width: 900px) {
	.card:hover {
		background: rgba(18, 18, 18, 0.86);
	}

	.vc-kpi:hover,
	.vc-note-card:hover,
	.vc-article:hover,
	.vc-account:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.95);
	}
}

/* A row in a table or a list is not a card, so it gets a tint rather than a
   lift — a moving row makes a table feel unstable. */
.vc-table tbody tr,
.vc-row,
.vc-alloc-row,
.vc-payto-row {
	transition: background-color 0.22s ease;
}

@media (hover: hover) {
	.vc-table tbody tr:hover {
		background: rgba(255, 255, 255, 0.025);
	}
}

/* ---------- Inputs ---------- */

.vc-field input,
.vc-field select,
.vc-field textarea,
.auth-form input,
.auth-form select {
	transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.vc-field input:focus,
.vc-field select:focus,
.vc-field textarea:focus,
.auth-form input:focus {
	box-shadow: 0 0 0 3px rgba(var(--acc-rgb), calc(0.12 * var(--acc-a)));
}

/* ---------- Keyboard focus ----------
   Visible for people navigating by keyboard, invisible to everyone else. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid rgba(var(--acc-rgb), calc(0.7 * var(--acc-a)));
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Page arrival ----------
   A short settle on the first paint of each page, after the loading screen has
   gone. Content is visible either way; this only softens the hand-off. */

@media (prefers-reduced-motion: no-preference) {
	.vc-settle {
		animation: vc-settle 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes vc-settle {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Someone asked for less movement ---------- */

@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;
	}

	.vc-ink {
		display: none !important;
	}

	/* The reveal classes hide content until they animate, so with animation
	   turned off they have to be neutralised rather than merely shortened. */
	.reveal,
	.vc-reveal,
	.vc-settle {
		opacity: 1 !important;
		transform: none !important;
	}
}