/* ============================================================
   Site-wide motion + accents — lightweight, PageSpeed-safe.
   Loaded on every front-end page via inc/site-fx.php.
   (The entertainment hub has its own richer FX layer.)
   ============================================================ */

/* --- Hero headline: bold all-caps (visual only via text-transform, so SEO/screen-readers
       still get the real mixed-case text) + animated accent underline --- */
/* --- Preload guard: no header transitions/animations on first paint, so the
       fixed header lands in its correct state instantly (no slide/flicker on load).
       The class is removed right after paint, so scroll transitions still work. --- */
html.fb-preload #site-header,
html.fb-preload #site-header *,
html.fb-preload #header-inner { transition: none !important; animation: none !important; }

.hero__headline { position: relative; text-transform: uppercase; letter-spacing: -0.005em; }
.hero__headline::after {
	content: "";
	display: block;
	height: 4px;
	width: 88px;
	margin-top: 22px;
	border-radius: 4px;
	background: linear-gradient(90deg, #47b8e7, #1d76bb);
	box-shadow: 0 0 18px rgba(71, 184, 231, .45);
	transform-origin: left center;
	transform: scaleX(1);
	animation: fbLineGrow .9s .4s both cubic-bezier(.22, .61, .36, 1);
}
.hero--align-center .hero__headline::after { margin-left: auto; margin-right: auto; }
@keyframes fbLineGrow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Split heroes (text + side panel) centre their text column at <=1023px
   (hero.css centres .hero--align-left .hero__split-left there). The accent
   underline must follow at the SAME breakpoint, or it stays pinned left under
   centred text between 768-1023px. Scoped to .hero__split-left so full heroes
   with no side panel — which stay left-aligned until 767px — are unaffected. */
@media (max-width: 1023px) {
	.hero--align-left .hero__split-left .hero__headline::after { margin-left: auto; margin-right: auto; }
}

/* Mobile: hero content is always forced centered (see hero.css @767px) — the
   accent underline must follow, or it stays pinned left under centered text. */
@media (max-width: 767px) {
	.hero--full .hero__headline::after { margin-left: auto; margin-right: auto; }
}

/* Above-the-fold hero content stays visible on first paint. Opacity-based
   entrance motion delayed the LCP headline and made the page appear empty
   while the adjacent form had already rendered. */

/* --- Scroll reveals (opt-in via html.fb-fx; no-JS / reduced-motion always show) ---
   Animate the section's INNER content (.container), NOT the <section> itself, so a
   section's background never slides and leaves a white "gap" as it rises into view. */
html.fb-fx .fb-reveal > .container > * { opacity: 0; transform: translateY(34px); transition: opacity .62s ease, transform .72s cubic-bezier(.22, .61, .36, 1); }
html.fb-fx .fb-reveal.fb-in > .container > * { opacity: 1; transform: none; }
/* stagger the content so the motion cascades and reads clearly */
html.fb-fx .fb-reveal.fb-in > .container > *:nth-child(2) { transition-delay: .10s; }
html.fb-fx .fb-reveal.fb-in > .container > *:nth-child(3) { transition-delay: .20s; }
html.fb-fx .fb-reveal.fb-in > .container > *:nth-child(n+4) { transition-delay: .28s; }

/* --- Accent line under section titles (same brand gradient as the hero underline) --- */
.section-heading, .image-text-split__heading { position: relative; }
.section-heading::after,
.image-text-split__heading::after {
	content: "";
	display: block;
	width: 58px;
	height: 4px;
	margin-top: 18px;
	border-radius: 4px;
	background: linear-gradient(90deg, #47b8e7, #1d76bb);
}
/* centered headings get a centered line; left-aligned ones keep it on the left */
.text-center .section-heading::after,
.section-heading.text-center::after,
.text-center .image-text-split__heading::after { margin-left: auto; margin-right: auto; }
/* when reveals are on, the line grows in as the section arrives */
html.fb-fx .fb-reveal .section-heading::after,
html.fb-fx .fb-reveal .image-text-split__heading::after {
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: transform .7s .12s cubic-bezier(.22, .61, .36, 1), opacity .5s .12s ease;
}
html.fb-fx .fb-reveal.fb-in .section-heading::after,
html.fb-fx .fb-reveal.fb-in .image-text-split__heading::after { transform: scaleX(1); opacity: 1; }

/* --- Subtle card hover lift (site-wide) --- */
.service-card__inner { transition: transform .3s ease, box-shadow .3s ease; }
.service-card__inner:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(16, 32, 60, .16); }

/* --- Parallax containers must clip the moved image --- */
.content-block__bg, .service-grid__bg { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.hero__headline::after { animation: none; }
	html.fb-fx .fb-reveal > .container > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.service-card__inner { transition: none; }
}