/* SAROMM — motion: card hover, counters, sticky header, scroll reveal.
 * Everything here is progressive: without the script (or with reduced motion) the site
 * shows its final, static state. */

/* ---------- Homepage cards: white rises to the drawn line ---------- */
.saromm-arc-card { position: relative; overflow: hidden; cursor: default; }
.saromm-arc-card > .elementor-element { position: relative; z-index: 1; }
.saromm-arc-card .saromm-arc-fill {
	position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
	pointer-events: none; transform: translateY(101%);
	transition: transform .6s cubic-bezier(.22,.7,.18,1);
}
.saromm-arc-card .saromm-arc-fill path { fill: #fff; }
html.saromm-cards .saromm-arc-card > .saromm-card-desc {
	display: block; position: absolute !important; z-index: 1; margin: 0 !important; width: auto !important;
	opacity: 0; transform: translateY(8px);
	transition: opacity .35s ease .18s, transform .35s ease .18s;
	color: var(--e-global-color-primary, #01223A);
}
.saromm-arc-card > .saromm-card-desc p { margin: 0; color: inherit; }
.saromm-arc-card .elementor-heading-title { transition: color .3s ease; }
@media (hover: hover) {
	.saromm-arc-card:hover .saromm-arc-fill { transform: none; }
	html.saromm-cards .saromm-arc-card:hover > .saromm-card-desc { opacity: 1; transform: none; }
	.saromm-arc-card:hover .elementor-heading-title { color: var(--e-global-color-accent, #E85619) !important; }
}
.saromm-arc-card.is-open .saromm-arc-fill,
.saromm-arc-card:focus-visible .saromm-arc-fill { transform: none; }
html.saromm-cards .saromm-arc-card.is-open > .saromm-card-desc,
html.saromm-cards .saromm-arc-card:focus-visible > .saromm-card-desc { opacity: 1; transform: none; }
.saromm-arc-card.is-open .elementor-heading-title,
.saromm-arc-card:focus-visible .elementor-heading-title { color: var(--e-global-color-accent, #E85619) !important; }
.saromm-arc-card:focus-visible { outline: 2px solid var(--e-global-color-accent, #E85619); outline-offset: 3px; }

/* ---------- Counters ---------- */


/* ---------- Sticky header ---------- */
/* The white header sits in the page flow, so it simply sticks. */
body > [data-elementor-type="header"].elementor-103 { position: sticky; top: var(--saromm-bar, 0px); z-index: 9990; }
/* The transparent header floats over the hero; once the page scrolls it is pinned and turns white. */
html.saromm-stuck body > [data-elementor-type="header"] {
	position: fixed !important; top: var(--saromm-bar, 0px); left: 0; right: 0; z-index: 9990;
}
[data-elementor-type="header"] .elementor-element-hdrow001 { transition: background-color .3s ease, box-shadow .3s ease; }
html.saromm-stuck [data-elementor-type="header"] .elementor-element-hdrow001 {
	background-color: #fff !important; box-shadow: 0 1px 0 rgba(1,34,58,.08);
}
html.saromm-stuck [data-elementor-type="header"] :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor *, a) {
	color: var(--e-global-color-primary, #01223A) !important;
}

/* ---------- Scroll reveal ----------
 * Titles fade up as they enter the view. Loop items (news cards) fade as a whole;
 * the titles inside them do not animate separately. */
html.saromm-motion :is([data-elementor-type="wp-page"],[data-elementor-type="single-post"],[data-elementor-type="archive"],[data-elementor-type="single-page"])
	:is(.elementor-widget-heading:not(.e-loop-item .elementor-widget-heading), .e-loop-item) {
	opacity: 0; transform: translateY(16px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.18,1);
	transition-delay: var(--saromm-delay, 0s);
}
html.saromm-motion :is([data-elementor-type="wp-page"],[data-elementor-type="single-post"],[data-elementor-type="archive"],[data-elementor-type="single-page"])
	:is(.elementor-widget-heading, .e-loop-item).saromm-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.saromm-arc-card .saromm-arc-fill, .saromm-arc-card > .saromm-card-desc, .saromm-arc-card .elementor-heading-title,
	[data-elementor-type="header"] .elementor-element-hdrow001 { transition: none !important; }
}