/* ==========================================================================
   Shahzad Akram — custom CSS
   Only effects Elementor has no setting for. Colors/fonts come from
   Elementor Site Settings (global variables), so changing them there
   updates this file too.

   How to use: add the class (e.g. sa-marquee) in the widget's
   Advanced > CSS Classes field.

   1. Buttons with arrow ........ .sa-btn-arrow (+ .sa-btn-light)
   2. Header scroll state ....... .sa-header (+ body.sa-scrolled from site.js)
   3. Hero grid background ...... .sa-grid-bg
   4. First-line indent ......... .sa-indent-first
   5. Pulsing availability dot .. .sa-pulse
   6. Marquee text ribbons ...... .sa-marquee, .sa-marquee--reverse
   7. Slow spin (round badges) .. .sa-spin
   8. Workflow nodes ............ .sa-flow
   9. Service rows hover ........ .sa-service-row, .sa-reveal
   10. Portfolio card hover ..... .sa-card
   11. Long screenshot scroll ... .sa-scroll-shot
   12. Floating chips ........... .sa-float
   13. Split-text reveal ........ .sa-split (words wrapped by site.js)
   14. Reduced motion

   The angled mint/dark section edges are a custom Shape Divider
   ("SA V-edge") registered in functions.php — pick it in
   Container > Style > Shape Divider.
   ========================================================================== */

:root {
	--sa-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
/* Anchor targets sit below the fixed header */
[id] { scroll-margin-top: 110px; }

/* 1. Buttons with arrow — 44px circle at the start; arrow slides on hover */
.sa-btn-arrow .elementor-button-content-wrapper { align-items: center; }
.sa-btn-arrow .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--e-global-color-sa_dark);
}
.sa-btn-arrow .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: var(--e-global-color-sa_paper);
	transition: transform .45s var(--sa-ease);
}
.sa-btn-arrow .elementor-button:hover .elementor-button-icon svg { animation: sa-arrow .55s var(--sa-ease); }
@keyframes sa-arrow {
	0% { transform: translateX(0); }
	45% { transform: translateX(24px); }
	46% { transform: translateX(-24px); }
	100% { transform: translateX(0); }
}
.sa-btn-arrow.sa-btn-light .elementor-button-icon { background: var(--e-global-color-sa_mint); }
.sa-btn-arrow.sa-btn-light .elementor-button-icon svg { fill: var(--e-global-color-sa_dark); }

/* 2. Header — fixed pill gets a shadow once the page scrolls */
.sa-header .sa-nav-pill { transition: box-shadow .4s var(--sa-ease), background-color .4s; }
body.sa-scrolled .sa-header .sa-nav-pill {
	background-color: rgba(17, 17, 19, .94) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}
.admin-bar .sa-header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .sa-header { top: 46px !important; } }

/* 3. Hero grid background — thin lines like drafting paper */
.sa-grid-bg {
	background-image:
		linear-gradient(to right, rgba(17, 17, 19, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(17, 17, 19, .05) 1px, transparent 1px) !important;
	background-size: 80px 80px !important;
}

/* 4. First-line indent (hero heading, like an editorial layout) */
.sa-indent-first .elementor-heading-title { text-indent: 1.3em; }
@media (max-width: 767px) { .sa-indent-first .elementor-heading-title { text-indent: 1.5em; } }

/* 5. Pulsing availability dot (Icon List icon) */
.sa-pulse .elementor-icon-list-icon { position: relative; }
.sa-pulse .elementor-icon-list-icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: #22c55e;
	opacity: .35;
	animation: sa-pulse 1.8s ease-out infinite;
}
@keyframes sa-pulse {
	0% { transform: scale(.4); opacity: .55; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* 6. Marquee ribbons — heading text is repeated, then slides forever.
   Speed is set per ribbon by site.js (--sa-marquee-dur, ~80px/s) so long and short
   ribbons move at the same pace. Paused while off-screen (site.js) and on hover.
   Kept running for reduced-motion users too, just slower — it is a gentle decorative loop. */
.sa-marquee { overflow: hidden; }
.sa-marquee .elementor-heading-title {
	display: inline-block;
	white-space: nowrap;
	animation: sa-marquee var(--sa-marquee-dur, 45s) linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}
.sa-marquee--reverse .elementor-heading-title { animation-direction: reverse; }
.sa-marquee.is-paused .elementor-heading-title,
.sa-marquee:hover .elementor-heading-title { animation-play-state: paused; }
@keyframes sa-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* 7. Slow spin for round badges (Text Path / Image) */
.sa-spin svg,
.sa-spin img { display: block; animation: sa-spin 22s linear infinite; transform-origin: 50% 50%; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* 8. Workflow nodes — a light pulse travels along the connectors */
.sa-flow .sa-flow-link .elementor-icon svg { animation: sa-flow 2.4s var(--sa-ease) infinite; }
@keyframes sa-flow {
	0%, 100% { transform: translateX(-3px); opacity: .45; }
	50% { transform: translateX(3px); opacity: 1; }
}
.sa-flow .sa-node { transition: transform .45s var(--sa-ease); }
.sa-flow .sa-node:hover { transform: translateY(-4px); }

/* 9. Service rows — arrow turns, extra line reveals */
.sa-service-row .sa-row-arrow .elementor-icon { transition: transform .45s var(--sa-ease), background-color .3s, color .3s; }
.sa-service-row:hover .sa-row-arrow .elementor-icon { transform: rotate(-45deg); }
.sa-service-row .elementor-widget-image img { transition: transform .9s var(--sa-ease); }
.sa-service-row .elementor-widget-image { overflow: hidden; border-radius: 4px; }
.sa-service-row:hover .elementor-widget-image img { transform: scale(1.08); }
.sa-service-row .sa-reveal {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s var(--sa-ease), opacity .4s;
}
.sa-service-row:hover .sa-reveal,
.sa-service-row:focus-within .sa-reveal { max-height: 80px; opacity: 1; }

/* 10. Portfolio cards — image zooms, arrow turns */
.sa-card .elementor-widget-theme-post-featured-image,
.sa-card .elementor-widget-image { overflow: hidden; border-radius: 4px; }
.sa-card img { transition: transform .9s var(--sa-ease); }
.sa-card:hover img { transform: scale(1.05); }
.sa-card .sa-row-arrow .elementor-icon { transition: transform .45s var(--sa-ease), background-color .3s; }
.sa-card:hover .sa-row-arrow .elementor-icon { transform: rotate(-45deg); background-color: var(--e-global-color-sa_mint); }

/* 11. Long screenshots — scroll the full page on hover.
   Linked images (lightbox) need a block link so the image can fill the width. */
.sa-scroll-shot a,
.elementor-widget-theme-post-featured-image a { display: block; }
.sa-scroll-shot img {
	object-position: 50% 0 !important;
	transition: object-position 6s ease-in-out !important;
}
.sa-scroll-shot:hover img { object-position: 50% 100% !important; }

/* 12. Floating chips (GHL stack) */
.sa-float { animation: sa-float 6s ease-in-out infinite; }
.sa-float:nth-child(3n) { animation-duration: 7.5s; animation-delay: -2s; }
.sa-float:nth-child(3n+1) { animation-duration: 8.5s; animation-delay: -4s; }
@keyframes sa-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -10px; }
}

/* 13. Split-text reveal — words rise in one after another */
.sa-split .sa-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; text-indent: 0; }
.sa-split .sa-word > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform .9s var(--sa-ease);
	transition-delay: calc(var(--i) * 45ms);
}
.sa-split.is-in .sa-word > span { transform: none; }

/* 14. Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.sa-marquee .elementor-heading-title { animation-duration: calc(var(--sa-marquee-dur, 45s) * 1.8); }
	.sa-spin svg, .sa-spin img,
	.sa-float,
	.sa-flow .sa-flow-link .elementor-icon svg,
	.sa-pulse .elementor-icon-list-icon::after { animation: none !important; }
	.sa-split .sa-word > span { transform: none !important; transition: none !important; }
	.sa-scroll-shot img { transition: none !important; }
}