/* ============================================================
   redesign_09_ui.css — Micro-interactions & UI polish
   Auditajus v3.2 · Premium editorial layer
   ============================================================
   Loads AFTER style.css. Uses existing design tokens.
   Performance: transform/opacity only, will-change sparingly.
   Respects prefers-reduced-motion (already in style.css).
   ============================================================ */


/* ————————————————————————————————————————————————
   1. SCROLL-TRIGGERED FADE-IN (sections)
   ———————————————————————————————————————————————— */

.section,
.cta-final {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .7s var(--ease),
		transform .7s var(--ease);
}

.section.in-view,
.cta-final.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Hero is always visible — no fade-in */
.hero {
	opacity: 1;
	transform: none;
}


/* ————————————————————————————————————————————————
   2. BUTTON HOVER EFFECTS
   ———————————————————————————————————————————————— */

/* Scale + elevated shadow on hover */
.btn-primary:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 4px 16px rgba(11, 10, 8, 0.18);
}

/* Brass underline animation — non-arrow buttons */
.btn-primary:not(.btn-arrow) {
	overflow: hidden;
	position: relative;
}

.btn-primary:not(.btn-arrow)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--brass);
	transition: width .4s var(--ease);
}

.btn-primary:not(.btn-arrow):hover::after {
	width: 100%;
}

/* Arrow buttons: brass underline via ::before */
.btn-primary.btn-arrow {
	overflow: hidden;
}

.btn-primary.btn-arrow::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--brass);
	transition: width .4s var(--ease);
	z-index: 1;
}

.btn-primary.btn-arrow:hover::before {
	width: 100%;
}

/* Ghost button smooth transitions */
.btn-ghost {
	transition:
		color .35s var(--ease),
		border-color .35s var(--ease),
		background .35s var(--ease);
}


/* ————————————————————————————————————————————————
   3. HERO PARALLAX-LITE (CSS-only depth)
   ———————————————————————————————————————————————— */

@media (min-width: 901px) {
	.hero__visual img {
		transform: scale(1.08);
		transform-origin: center center;
	}

	.hero:hover .hero__visual img {
		transform: scale(1.12);
	}
}


/* ————————————————————————————————————————————————
   4. SMOOTH COLOR TRANSITIONS on interactive elements
   ———————————————————————————————————————————————— */

.objection__q {
	transition: color .3s var(--ease);
	cursor: pointer;
}

.objection__q:hover {
	color: var(--brass);
}


/* ————————————————————————————————————————————————
   5. GOLD ACCENT LINE ANIMATIONS — grow on scroll
   ———————————————————————————————————————————————— */

/* Eyebrow line grows from 0 to full width on scroll */
.eyebrow::before {
	width: 0;
	transition: width .6s var(--ease) .15s;
}

.in-view .eyebrow::before,
.hero .eyebrow::before {
	width: 32px;
}

/* Section divider accent: thin brass line that grows */
.method__foot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--brass);
	transition: width .8s var(--ease) .3s;
}

.method__foot {
	position: relative;
}

.in-view .method__foot::before {
	width: 80px;
}

/* Hero meta border: thin brass accent (always visible — hero has no .in-view) */
.hero__meta {
	position: relative;
}

.hero__meta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 1px;
	background: var(--brass);
}

/* CTA form top border brass accent */
.cta-form {
	position: relative;
}

.cta-form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--brass);
	transition: width .8s var(--ease) .3s;
}

.in-view .cta-form::before {
	width: 60px;
}


/* ————————————————————————————————————————————————
   6. DETAILS/SUMMARY (FAQ) polish
   ———————————————————————————————————————————————— */

.objection {
	transition: background .3s var(--ease);
}

.objection[open] {
	background: rgba(11, 10, 8, 0.015);
}

.objection__a {
	animation: faq-reveal .4s var(--ease);
}

@keyframes faq-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ————————————————————————————————————————————————
   7. REDUCED MOTION — ui-polish-specific resets
   ———————————————————————————————————————————————— */

@media (prefers-reduced-motion: reduce) {
	/* Ensure sections are visible when transitions are killed */
	.section,
	.cta-final {
		opacity: 1;
		transform: none;
	}

	/* Show accent lines at final state */
	.eyebrow::before {
		width: 32px;
	}

	/* Disable parallax */
	.hero__visual img {
		transform: none !important;
	}
}