/*
 * CellQual — motion layer.
 *
 * Everything animated here is transform, opacity, clip-path or filter, so the
 * compositor does the work and nothing triggers reflow. Layout properties
 * (width, height, top, margin) are never transitioned.
 *
 * Levels are set once in Theme Options and land on <body>:
 *   cq-motion--full    every effect
 *   cq-motion--subtle  hover and focus only, no scroll reveals
 *   cq-motion--off     nothing beyond an instant state change
 */

/* ===================================================== Reveal on scroll */
.cq-motion--full [data-reveal] {
	opacity: 0;
	will-change: transform, opacity;
}

.cq-motion--full [data-reveal="up"]    { transform: translate3d(0, 38px, 0); }
.cq-motion--full [data-reveal="down"]  { transform: translate3d(0, -38px, 0); }
.cq-motion--full [data-reveal="left"]  { transform: translate3d(-46px, 0, 0); }
.cq-motion--full [data-reveal="right"] { transform: translate3d(46px, 0, 0); }
.cq-motion--full [data-reveal="scale"] { transform: scale(.94); }
.cq-motion--full [data-reveal="blur"]  { filter: blur(12px); transform: translate3d(0, 20px, 0); }

.cq-motion--full [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity var(--d-reveal, 820ms) var(--e-out),
		transform calc(var(--d-reveal, 820ms) * 1.1) var(--e-out),
		filter var(--d-reveal, 820ms) var(--e-out);
	transition-delay: var(--rd, 0ms);
}

.cq-motion--full [data-reveal].is-in { will-change: auto; }

/* Individual effects are switchable from Theme Options → Motion. Each writes a
   single class on <body>, so turning one off costs nothing at runtime. */
.cq-no-sheen .cq-btn::after,
.cq-no-sheen .qb-hh__btn::after { display: none; }

.cq-no-aura .cq-card__aura { display: none; }

.cq-no-drift .cq-hero__media img,
.cq-no-drift .cq-hero__media .cq-ph { animation: none; }

/* Headline reveal — the line wipes up from behind its own baseline. */
.cq-motion--full [data-reveal="text"] {
	clip-path: inset(0 0 105% 0);
	transform: translate3d(0, .18em, 0);
	opacity: 1;
}
.cq-motion--full [data-reveal="text"].is-in {
	clip-path: inset(-25% -8% -25% -8%);
	transform: none;
	transition:
		clip-path 1050ms cubic-bezier(.16,1,.3,1),
		transform 1050ms cubic-bezier(.16,1,.3,1);
	transition-delay: var(--rd, 0ms);
}

/* An eyebrow's rule draws itself. */
.cq-motion--full .cq-eyebrow::before {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 640ms cubic-bezier(.16,1,.3,1) 120ms;
}
.cq-motion--full .cq-eyebrow.is-in::before,
.cq-motion--full .is-in .cq-eyebrow::before { transform: scaleX(1); }

/* ============================================================== Buttons */
/*
 * A light sweep crosses the button on hover and the label lifts a hair. The
 * sweep is a pseudo-element transform, so it costs nothing.
 */
.cq-btn,
.qb-hh__btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cq-motion--off .cq-btn::after,
.cq-motion--off .qb-hh__btn::after { display: none; }

.cq-btn::after,
.qb-hh__btn::after {
	content: "";
	position: absolute;
	inset-block: -60%;
	inset-inline-start: -40%;
	width: 32%;
	z-index: -1;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255,255,255,.34),
		transparent
	);
	transform: translateX(-160%) skewX(-18deg);
	transition: transform var(--d-sweep, 760ms) var(--e-out);
	pointer-events: none;
}
.cq-btn:hover::after,
.qb-hh__btn:hover::after { transform: translateX(420%) skewX(-18deg); }

.cq-btn--p,
.qb-hh__b1 {
	transition:
		background var(--d-btn) var(--e-ui),
		transform 280ms var(--e-card),
		box-shadow 340ms var(--e-card);
}
.cq-btn--p:hover,
.qb-hh__b1:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 16px 34px -8px rgba(45,162,55,.55);
}
.cq-btn--p:active,
.qb-hh__b1:active { transform: translate3d(0, -1px, 0); }

/* Secondary: the border lights up and a faint glow blooms behind it. */
.cq-btn--s {
	transition:
		background var(--d-btn) var(--e-ui),
		border-color var(--d-btn) var(--e-ui),
		transform 280ms var(--e-card),
		box-shadow 340ms var(--e-card);
}
.cq-btn--s:hover {
	transform: translate3d(0, -3px, 0);
	box-shadow: 0 0 0 1px rgba(105,185,75,.45), 0 14px 30px -10px rgba(105,185,75,.35);
}

/* ================================================================ Cards */
.cq-card {
	transform: translate3d(0, 0, 0);
	transition:
		transform 460ms var(--e-card),
		box-shadow 460ms var(--e-card),
		border-color 340ms var(--e-ui);
}

/* The tint rule on top grows from the left rather than just sitting there. */
.cq-card::before {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 520ms var(--e-card);
}
.cq-card:hover::before,
.cq-card:focus-within::before { transform: scaleX(1); }
.cq-motion--off .cq-card::before { transform: scaleX(1); }

/* A pointer-tracked glow. --mx / --my are written by motion.js. */
.cq-card__aura {
	position: absolute;
	inset: -1px;
	z-index: 1;
	border-radius: inherit;
	background: radial-gradient(
		260px circle at var(--mx, 50%) var(--my, 50%),
		rgba(105,185,75,.16),
		transparent 62%
	);
	opacity: 0;
	transition: opacity 420ms var(--e-ui);
	pointer-events: none;
}
.cq-card:hover .cq-card__aura { opacity: 1; }
.cq-motion--off .cq-card__aura,
.cq-motion--subtle .cq-card__aura { display: none; }

.cq-card:hover {
	transform: translate3d(0, var(--m-lift, -8px), 0);
	box-shadow: 0 34px 64px -18px rgba(0,0,0,.72);
	border-color: rgba(105,185,75,.3);
}

.cq-card__ico {
	transition: transform 520ms var(--e-card);
}
.cq-card:hover .cq-card__ico {
	transform: translate3d(0, -3px, 0) scale(1.08);
}

.cq-card__bg img,
.cq-card__bg .cq-ph {
	transition:
		transform 900ms var(--e-card),
		opacity 460ms var(--e-ui);
}
.cq-card:hover .cq-card__bg img,
.cq-card:hover .cq-card__bg .cq-ph {
	transform: scale(var(--m-zoom, 1.09)) translate3d(0, -1%, 0);
}

/* ========================================================= Checklists */
.cq-kitem {
	transition: background 320ms var(--e-ui), padding-inline-start 0ms;
}
.cq-kitem .cq-tick,
.cq-kitem__n {
	transition: transform 420ms var(--e-card), color 260ms var(--e-ui);
}
.cq-kitem:hover .cq-tick,
.cq-kitem:hover .cq-kitem__n {
	transform: scale(1.22) rotate(-6deg);
}
.cq-kitem:hover { background: linear-gradient(90deg, rgba(105,185,75,.06), transparent 70%); }

/* ============================================================== Steps */
.cq-step__n {
	transition:
		transform 460ms var(--e-card),
		border-color 300ms var(--e-ui),
		background 300ms var(--e-ui),
		color 300ms var(--e-ui),
		box-shadow 460ms var(--e-card);
}
.cq-step:hover .cq-step__n {
	transform: scale(1.12);
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	box-shadow: 0 0 0 6px rgba(45,162,55,.16);
}

/* =============================================================== Why */
.cq-why__i { position: relative; overflow: hidden; }
.cq-why__i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 90% 8%, rgba(105,185,75,.14), transparent 60%);
	opacity: 0;
	transition: opacity 460ms var(--e-ui);
	pointer-events: none;
}
.cq-why__i:hover::after { opacity: 1; }
.cq-why__i::before { transition: width 520ms var(--e-card); }
.cq-why__i:hover::before { width: 84px; }
.cq-why__n { transition: color 460ms var(--e-ui), transform 560ms var(--e-card); }
.cq-why__i:hover .cq-why__n {
	color: rgba(105,185,75,.16);
	transform: translate3d(-4px, -4px, 0) scale(1.06);
}

/* ============================================================== Stats */
.cq-stat {
	transition: background 380ms var(--e-ui);
}
.cq-stat:hover { background: rgba(255,255,255,.02); }
.cq-stat__n { transition: transform 520ms var(--e-card); }
.cq-stat:hover .cq-stat__n { transform: translate3d(0, -3px, 0); }

/* =============================================================== Nav */
/* The dropdown springs rather than fades. */
.cq-dd {
	transform: translate(-50%, -14px) scale(.985);
	transition:
		opacity 260ms var(--e-ui),
		transform 380ms cubic-bezier(.16,1,.3,1),
		visibility 380ms;
}
.cq-ni:hover > .cq-dd,
.cq-ni.is-open > .cq-dd { transform: translate(-50%, 0) scale(1); }

.cq-nav__items > .cq-ni:nth-last-child(-n+2) > .cq-dd {
	transform: translate(0, -14px) scale(.985);
}
.cq-nav__items > .cq-ni:nth-last-child(-n+2):hover > .cq-dd { transform: translate(0, 0) scale(1); }

/* Dropdown rows cascade in. --i is set by motion.js. */
.cq-dd__a {
	opacity: 0;
	transform: translate3d(-10px, 0, 0);
	transition:
		opacity 320ms var(--e-ui),
		transform 420ms cubic-bezier(.16,1,.3,1),
		background var(--d-btn) var(--e-ui),
		color var(--d-btn) var(--e-ui);
}
.cq-ni:hover > .cq-dd .cq-dd__a,
.cq-ni.is-open > .cq-dd .cq-dd__a {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 34ms + 60ms);
}
.cq-motion--off .cq-dd__a,
.cq-motion--subtle .cq-dd__a { opacity: 1; transform: none; transition-delay: 0ms; }

.cq-ni__link::after {
	transition: transform 380ms cubic-bezier(.16,1,.3,1);
}

/* ============================================================== Hero */
/* A slow, continuous drift on the hero image — alive without being busy. */
.cq-motion--full .cq-hero__media img,
.cq-motion--full .cq-hero__media .cq-ph {
	animation: cq-drift 26s ease-in-out infinite alternate;
}
@keyframes cq-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}

/* The hero's own entrance, staggered by child. */
.cq-motion--full .cq-hero__body > * {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	animation: cq-rise 900ms cubic-bezier(.16,1,.3,1) forwards;
}
.cq-motion--full .cq-hero__body > *:nth-child(1) { animation-delay: 80ms; }
.cq-motion--full .cq-hero__body > *:nth-child(2) { animation-delay: 180ms; }
.cq-motion--full .cq-hero__body > *:nth-child(3) { animation-delay: 280ms; }
.cq-motion--full .cq-hero__body > *:nth-child(4) { animation-delay: 380ms; }
.cq-motion--full .cq-hero__body > *:nth-child(5) { animation-delay: 480ms; }

@keyframes cq-rise {
	to { opacity: 1; transform: none; }
}

.cq-motion--full .qb-hh__in > *,
.cq-motion--full .qb-hh__aside > * {
	opacity: 0;
	animation: cq-rise 950ms cubic-bezier(.16,1,.3,1) forwards;
}
.cq-motion--full .qb-hh__title { animation-delay: 120ms; }
.cq-motion--full .qb-hh__aside { animation-delay: 0ms; }
.cq-motion--full .qb-hh__sub { animation-delay: 300ms; }
.cq-motion--full .qb-hh__btns { animation-delay: 420ms; }

/* The diagonal glow pulses. */
.cq-motion--full .qb-hh__glow {
	animation: cq-pulse 4.6s ease-in-out infinite;
}
@keyframes cq-pulse {
	0%, 100% { opacity: .72; box-shadow: 0 0 18px 4px rgba(105,185,75,.4); }
	50%      { opacity: 1;   box-shadow: 0 0 34px 8px rgba(105,185,75,.62); }
}

/* ============================================================= Accordion */
.cq-acc__q { transition: color var(--d-btn) var(--e-ui), padding-inline-start 420ms var(--e-card); }
.cq-acc:hover .cq-acc__q,
.cq-acc.is-open .cq-acc__q { padding-inline-start: 12px; }
.cq-acc {
	position: relative;
	transition: background 380ms var(--e-ui);
}
.cq-acc::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	background: var(--green-br);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 460ms var(--e-card);
}
.cq-acc.is-open::before { transform: scaleY(1); }
.cq-acc__ico { transition: transform 420ms var(--e-card); }
.cq-acc:hover .cq-acc__ico { transform: rotate(90deg) scale(1.1); }
.cq-acc.is-open .cq-acc__ico { transform: rotate(180deg); }

/* ================================================================ Posts */
.cq-post { transition: transform 460ms var(--e-card), border-color 340ms var(--e-ui), box-shadow 460ms var(--e-card); }
.cq-post:hover {
	transform: translate3d(0, var(--m-lift, -8px), 0);
	box-shadow: 0 32px 60px -20px rgba(0,0,0,.7);
	border-color: rgba(105,185,75,.28);
}
.cq-post__media img,
.cq-post__media .cq-ph { transition: transform 900ms var(--e-card); }
.cq-post:hover .cq-post__media img,
.cq-post:hover .cq-post__media .cq-ph { transform: scale(var(--m-zoom, 1.08)); }
.cq-post__link .cq-arw { transition: transform var(--d-btn) var(--e-ui); }
.cq-post:hover .cq-post__link .cq-arw { transform: translateX(5px); }

/* =============================================================== Result */
.cq-result { transition: background var(--d-btn) var(--e-ui), transform 380ms var(--e-card), border-inline-start-width 300ms var(--e-ui); }
.cq-result:hover { transform: translate3d(6px, 0, 0); }

/* ========================================================== Footer links */
.cq-ft__menu a,
.cq-ft__legalMenu a,
.cq-ft__contact a {
	position: relative;
	display: inline-block;
	transition: color var(--d-btn) var(--e-ui), transform 320ms var(--e-card);
}
.cq-ft__menu a:hover,
.cq-ft__legalMenu a:hover { transform: translate3d(4px, 0, 0); }
.cq-ft__social a { transition: border-color var(--d-btn) var(--e-ui), color var(--d-btn) var(--e-ui), transform 360ms var(--e-card); }
.cq-ft__social a:hover { transform: translate3d(0, -4px, 0) rotate(-6deg); }

/* ============================================================ Scroll top */
.cq-top { transition: opacity 340ms var(--e-ui), visibility 340ms, transform 420ms var(--e-card), background var(--d-btn) var(--e-ui); }
.cq-top:hover { transform: translate3d(0, -4px, 0) scale(1.06); }

/* ====================================================== Scroll progress */
.cq-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 200;
	background: transparent;
	pointer-events: none;
}
.cq-progress__bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--green), var(--green-br));
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}
.cq-motion--off .cq-progress { display: none; }

/* =========================================================== Page enter */
.cq-motion--full .cq-main { animation: cq-fade 620ms var(--e-ui) both; }
@keyframes cq-fade { from { opacity: 0; } to { opacity: 1; } }

/* ========================================================= Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cq-motion--full [data-reveal],
	.cq-motion--full [data-reveal="text"] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
	.cq-motion--full .cq-hero__media img,
	.cq-motion--full .cq-hero__media .cq-ph,
	.cq-motion--full .qb-hh__glow,
	.cq-motion--full .cq-hero__body > *,
	.cq-motion--full .qb-hh__in > *,
	.cq-motion--full .cq-main { animation: none !important; opacity: 1 !important; transform: none !important; }
	.cq-progress { display: none; }
}