/*
 * YFG Animations — yfg-animations.css
 * Enqueue this AFTER your main stylesheet.
 * Requires yfg-animations.js for scroll-triggered classes.
 */

/* ============================================================
   0. REDUCED MOTION — always first
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   1. KEYFRAMES
   ============================================================ */

/* Fade up — cards, paragraphs */
@keyframes yfgFadeUp {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade in — subtle elements */
@keyframes yfgFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Slide in from left */
@keyframes yfgSlideLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Slide in from right */
@keyframes yfgSlideRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Scale pop — icons & step numbers */
@keyframes yfgPop {
	0%   { opacity: 0; transform: scale(0.6); }
	70%  { transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}

/* Hero title word reveal */
@keyframes yfgTitleReveal {
	from {
		opacity: 0;
		transform: translateY(20px) skewY(2deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) skewY(0deg);
	}
}

/* Gradient text shimmer on hero grad span */
@keyframes yfgShimmer {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Blob float */
@keyframes yfgBlobFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%       { transform: translate(18px, -18px) scale(1.04); }
	66%       { transform: translate(-12px, 10px) scale(0.97); }
}

/* Trust list tick bounce */
@keyframes yfgTickBounce {
	0%   { transform: scale(0); opacity: 0; }
	60%  { transform: scale(1.3); }
	100% { transform: scale(1); opacity: 1; }
}

/* Counter number count-up (JS handles the numbers; this just fades in) */
@keyframes yfgCountUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Underline draw for section accent line */
@keyframes yfgAccentDraw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ============================================================
   2. BASE ANIMATE-ON-SCROLL STATES
   Elements start hidden; JS adds .yfg-animated when in view.
   ============================================================ */

.yfg-anim {
	opacity: 0;
	will-change: opacity, transform;
}

/* When JS fires */
.yfg-anim.yfg-animated {
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-duration: 0.65s;
}

/* Variant helpers — add to any .yfg-anim element */
.yfg-anim--up.yfg-animated        { animation-name: yfgFadeUp; }
.yfg-anim--fade.yfg-animated      { animation-name: yfgFadeIn; }
.yfg-anim--left.yfg-animated      { animation-name: yfgSlideLeft; }
.yfg-anim--right.yfg-animated     { animation-name: yfgSlideRight; }
.yfg-anim--pop.yfg-animated       { animation-name: yfgPop; }

/* Stagger delays via data-delay attribute (set by JS from child index) */
.yfg-anim[style*="--yfg-delay"]   { animation-delay: var(--yfg-delay, 0ms); }

/* ============================================================
   3. HERO ANIMATIONS (auto-play on load, no JS needed)
   ============================================================ */

/* Hero title lines — staggered */
.yfg-hero__title {
	overflow: visible;
}
.yfg-hero__title {
	animation: yfgFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Lead paragraphs */
.yfg-hero__lead:nth-child(1) {
	animation: yfgFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.yfg-hero__lead:nth-child(2) {
	animation: yfgFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

/* CTA buttons */
.yfg-hero__cta {
	animation: yfgFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.yfg-hero__alt {
	animation: yfgFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}

/* Trust list items staggered */
.yfg-trust li:nth-child(1) { animation: yfgFadeUp 0.5s cubic-bezier(0.22,1,.36,1) 0.55s both; }
.yfg-trust li:nth-child(2) { animation: yfgFadeUp 0.5s cubic-bezier(0.22,1,.36,1) 0.62s both; }
.yfg-trust li:nth-child(3) { animation: yfgFadeUp 0.5s cubic-bezier(0.22,1,.36,1) 0.69s both; }
.yfg-trust li:nth-child(4) { animation: yfgFadeUp 0.5s cubic-bezier(0.22,1,.36,1) 0.76s both; }

/* Hero form card */
.yfg-form-card {
	animation: yfgSlideRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Gradient text shimmer */
.yfg-hero__title .grad {
	background-size: 200% 200%;
	animation: yfgShimmer 5s ease infinite;
}

/* ============================================================
   4. BLOB FLOAT ANIMATIONS
   ============================================================ */

.yfg-blob {
	animation: yfgBlobFloat 9s ease-in-out infinite;
}
.yfg-hero__bsoft   { animation-duration: 11s; animation-delay: 0s; }
.yfg-hero__bsoft-2 { animation-duration: 8s;  animation-delay: -3s; }

/* ============================================================
   5. SECTION ACCENT DRAW
   ============================================================ */

.yfg-accent {
	transform-origin: left center;
}
.yfg-accent.yfg-animated {
	animation: yfgAccentDraw 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================================
   6. CARD HOVER EFFECTS
   ============================================================ */

/* Service cards */
.yfg-service-card {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.yfg-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Service icon pop on card hover */
.yfg-service-card:hover .yfg-service-card__icon {
	transform: scale(1.15) rotate(-5deg);
}
.yfg-service-card__icon {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Why items */
.yfg-why-item {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.yfg-why-item:hover {
	transform: translateX(6px);
}
.yfg-why-item__ico {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: inline-block;
}
.yfg-why-item:hover .yfg-why-item__ico {
	transform: scale(1.2);
}

/* Step cards */
.yfg-step-card {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s ease;
}
.yfg-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}
.yfg-step-num {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: inline-block;
}
.yfg-step-card:hover .yfg-step-num {
	transform: scale(1.15);
}

/* Model items */
.yfg-model-item {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 0.3s ease;
}
.yfg-model-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

/* ============================================================
   7. BUTTON HOVER MICRO-INTERACTIONS
   ============================================================ */

.btn-brand {
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.2s ease,
	            background-color 0.2s ease;
}
.btn-brand:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn-brand:active {
	transform: scale(0.97);
}

.btn-ghost-light {
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.2s ease;
}
.btn-ghost-light:hover {
	transform: translateX(3px);
}

/* ============================================================
   8. FORM FIELD FOCUS ANIMATION
   ============================================================ */

.yfg-field__wrap {
	transition: box-shadow 0.25s ease;
}
.yfg-field__wrap:focus-within {
	box-shadow: 0 0 0 3px rgba(10, 163, 176, 0.18);
	border-radius: 8px;
}
.yfg-field__wrap input,
.yfg-field__wrap textarea {
	transition: border-color 0.25s ease;
}

/* ============================================================
   9. FAQ ACCORDION SMOOTH OPEN
   ============================================================ */

.accordion-collapse {
	transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.accordion-button {
	transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* ============================================================
   10. ILLUSTRATION IMAGES — gentle float
   ============================================================ */

@keyframes yfgImgFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

.yfg-section-img {
	animation: yfgImgFloat 5s ease-in-out infinite;
}
/* Alternate sections go opposite direction */
.order-lg-2 .yfg-section-img {
	animation-delay: -2.5s;
}

/* ============================================================
   11. HERO SECTION — parallax-like depth (JS enhances)
   ============================================================ */

.yfg-hero {
	overflow: hidden;
}

/* ============================================================
   12. FINAL CTA — pulse glow on button
   ============================================================ */

@keyframes yfgPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
	50%       { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

.yfg-final-cta .btn-light {
	animation: yfgPulse 2.5s ease-in-out infinite;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yfg-final-cta .btn-light:hover {
	transform: scale(1.04);
	animation: none;
}

/* ============================================================
   13. SECTION TITLE UNDERLINE HOVER
   ============================================================ */

.yfg-section-title {
	position: relative;
	display: inline-block;
}