/* ==========================================================================
   BRAD LIMO — animations.css
   Keyframes, scroll-reveals, hero car motion, slider steps.
   Everything respects prefers-reduced-motion (see bottom).
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* travelling road light-line (L -> R) */
@keyframes bl-roadline {
	0%   { transform: translateX(0); }
	100% { transform: translateX(320%); }
}
@keyframes bl-roadline-rev {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-320%); }
}

/* hero car gentle float */
@keyframes bl-car-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-13px); }
}

/* ground shadow breathes with the float */
@keyframes bl-shadow-pulse {
	0%, 100% { transform: scaleX(1);    opacity: .95; }
	50%      { transform: scaleX(.92);  opacity: .7; }
}

/* light sweep passing over the car silhouette */
@keyframes bl-light-sweep {
	0%, 55%  { background-position: 130% 0; }
	85%,100% { background-position: -60% 0; }
}

/* scroll cue fade-slide */
@keyframes bl-scroll-cue {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* moving dot along journey connector lines */
@keyframes bl-route-dot {
	0%   { left: 0;   opacity: 0; }
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% { left: calc(100% - 7px); opacity: 0; }
}

/* wizard step entrance */
@keyframes bl-step-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* success check pop */
@keyframes bl-success-pop {
	0%   { transform: scale(.3); opacity: 0; }
	60%  { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

/* header intro (pages load) */
@keyframes bl-header-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* ==========================================================================
   SCROLL REVEALS  (JS adds .is-in when visible — see animations.js)
   ========================================================================== */

.bl-reveal { opacity: 0; transition: opacity .8s ease, transform .85s cubic-bezier(.22,.8,.32,1); will-change: opacity, transform; }
.bl-reveal[data-reveal="fade-up"]    { transform: translateY(34px); }
.bl-reveal[data-reveal="fade-right"] { transform: translateX(-34px); }
.bl-reveal[data-reveal="fade-left"]  { transform: translateX(34px); }
.bl-reveal[data-reveal="zoom-in"]    { transform: scale(.94); }
.bl-reveal.is-in { opacity: 1; transform: none; }

/* stagger delays (data-reveal-delay="1..6") */
.bl-reveal[data-reveal-delay="1"] { transition-delay: .08s; }
.bl-reveal[data-reveal-delay="2"] { transition-delay: .16s; }
.bl-reveal[data-reveal-delay="3"] { transition-delay: .24s; }
.bl-reveal[data-reveal-delay="4"] { transition-delay: .32s; }
.bl-reveal[data-reveal-delay="5"] { transition-delay: .4s; }
.bl-reveal[data-reveal-delay="6"] { transition-delay: .5s; }

/* Failsafe: if JS never runs, content must not stay invisible */
.no-js .bl-reveal, .bl-reveal.is-forced { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   HERO ENTRANCE (once on load)
   ========================================================================== */

.bl-hero .bl-hero__car { opacity: 0; }
.bl-hero.is-loaded .bl-hero__car {
	opacity: 1;
	transition: opacity .9s ease .15s;
}
.bl-hero .bl-hero__tag { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.bl-hero.is-loaded .bl-hero__tag { opacity: 1; transform: none; }
.bl-hero.is-loaded .bl-hero__tag--left  { transition-delay: .55s; }
.bl-hero.is-loaded .bl-hero__tag--right { transition-delay: .7s; }

.bl-header { animation: bl-header-in .7s cubic-bezier(.22,.8,.32,1) both; }

/* ==========================================================================
   HOVER MICRO-SHEEN  (service + why cards get a gold top sheen)
   ========================================================================== */

.bl-card::after, .bl-why__card::after, .bl-about-pillar::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(120deg, transparent 30%, rgba(233,216,176,.05) 50%, transparent 70%);
	opacity: 0; transition: opacity .5s;
	border-radius: inherit;
}
.bl-card, .bl-why__card, .bl-about-pillar { position: relative; }
.bl-card:hover::after, .bl-why__card:hover::after, .bl-about-pillar:hover::after { opacity: 1; }

/* ==========================================================================
   REDUCED MOTION — accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.bl-hero .bl-hero__car, .bl-hero__sweep, .bl-hero__roadline,
	.bl-cta__line, .bl-hero__scroll-line { animation: none !important; }
	.bl-hero .bl-hero__car { opacity: 1 !important; }
	.bl-hero .bl-hero__tag { opacity: 1 !important; transform: none !important; }
	.bl-reveal { opacity: 1 !important; transform: none !important; }
}