/* ==========================================================================
   NoomaHR — motion layer
   --------------------------------------------------------------------------
   Rule of the house: nothing here animates `transform`. The theme already
   uses `transform` for mascot positioning and hover lifts, so every effect
   below uses the independent `translate` / `rotate` / `scale` properties,
   which compose with `transform` instead of replacing it.

   Pre-states only apply under html.nm-js, which the head script adds only
   when the visitor hasn't asked for reduced motion. If the JS never boots,
   a 3.5s failsafe removes .nm-js and everything is simply visible.
   ========================================================================== */

@property --nm-bob   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --nm-enter { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --nm-wig   { syntax: '<angle>';  inherits: false; initial-value: 0deg; }

:root {
	--nm-ease-out: cubic-bezier(.16, 1, .3, 1);
	--nm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--nm-dur: .85s;
}

/* --------------------------------------------------------------------------
   Load: hold the first section back until the JS has tagged it, so there is
   no flash of content that then vanishes and animates in. Lifts the moment
   .nm-ready lands on <html>.
   -------------------------------------------------------------------------- */
.nm-js:not(.nm-ready):not([data-nm-scope="lite"]) #brx-content > .brxe-section:first-child :is(
	h1, h2, .n-eyebrow, .n-lead, .brxe-text-basic, .brxe-button, .n-float-cta,
	.n-hero-mascot, .n-sec-mascot, .n-kt-mascot, .brxe-form, .n-apie-hero__photo, .n-kt-row
) {
	opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   Reveal (fade + rise). Final values are left to the theme, so an element
   authored at opacity .78 animates to .78, not 1.
   -------------------------------------------------------------------------- */
.nm-js .nm-r:not(.nm-in) {
	opacity: 0 !important;
	translate: 0 26px;
}
.nm-js .nm-r.nm-r--sm:not(.nm-in) { translate: 0 12px; }

.nm-r.nm-in {
	transition:
		opacity var(--nm-dur) var(--nm-ease-out) var(--nm-d, 0ms),
		translate var(--nm-dur) var(--nm-ease-out) var(--nm-d, 0ms);
}

/* --------------------------------------------------------------------------
   Headline line reveal. Each word rises out of its own mask; words on the
   same visual line share a delay, so it reads as line-by-line.
   The mask is padded so Lithuanian diacritics (Į Ė Š above, ą ę ų below)
   are never clipped, with negative margins so line height is unchanged.
   -------------------------------------------------------------------------- */
.nm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .16em .05em .2em;
	margin: -.16em -.05em -.2em;
}
.nm-wi { display: inline-block; }

.nm-js .nm-split:not(.nm-in) .nm-wi { translate: 0 118%; }

.nm-split.nm-in .nm-wi {
	transition: translate 1s var(--nm-ease-out);
	transition-delay: calc(var(--nm-l, 0) * 110ms + var(--nm-d, 0ms));
}

/* --------------------------------------------------------------------------
   Photo wipe: clip opens top-to-bottom while the photo rises into place.
   No scale here: several photos run full-bleed on tablet/mobile, and any
   scale above 1 pushes them past the viewport and adds a horizontal
   scrollbar. Vertical travel can't overflow sideways.
   -------------------------------------------------------------------------- */
.nm-js .nm-ph:not(.nm-in) {
	clip-path: inset(0 0 100% 0);
	translate: 0 18px;
}
.nm-ph.nm-in {
	transition:
		clip-path 1.1s var(--nm-ease-out) var(--nm-d, 0ms),
		translate 1.2s var(--nm-ease-out) var(--nm-d, 0ms);
}

/* --------------------------------------------------------------------------
   Mascots. translate/rotate are composed from custom properties so the
   entrance, idle bob, scroll parallax, cursor "look" and hover wiggle can
   all run at once without fighting over one property.
   -------------------------------------------------------------------------- */
.nm-m {
	translate: 0 calc(var(--nm-py, 0px) + var(--nm-bob) + var(--nm-enter));
	rotate: calc(var(--nm-look, 0deg) + var(--nm-wig));
	transform-origin: 50% 88%;
}

.nm-js .nm-m.nm-pre {
	opacity: 0 !important;
	scale: .7;
	--nm-enter: 34px;
}

.nm-m.nm-pop {
	transition:
		opacity .45s ease var(--nm-d, 0ms),
		scale .95s var(--nm-ease-spring) var(--nm-d, 0ms),
		--nm-enter .95s var(--nm-ease-spring) var(--nm-d, 0ms);
}

.nm-m.nm-idle {
	animation: nm-bob var(--nm-bob-dur, 5.4s) ease-in-out var(--nm-bob-delay, 0s) infinite alternate;
}
.nm-m.nm-idle.nm-wiggle {
	animation:
		nm-bob var(--nm-bob-dur, 5.4s) ease-in-out var(--nm-bob-delay, 0s) infinite alternate,
		nm-wig .85s var(--nm-ease-out);
}

@keyframes nm-bob {
	from { --nm-bob: 0px; }
	to   { --nm-bob: -9px; }
}
@keyframes nm-wig {
	0%   { --nm-wig: 0deg; }
	16%  { --nm-wig: -9deg; }
	36%  { --nm-wig: 7deg; }
	56%  { --nm-wig: -4deg; }
	76%  { --nm-wig: 2deg; }
	100% { --nm-wig: 0deg; }
}

/* --------------------------------------------------------------------------
   Marquee: JS takes over from the CSS keyframes so it can react to scroll.
   -------------------------------------------------------------------------- */
.n-marquee__track.nm-mq { animation: none !important; will-change: transform; }

/* --------------------------------------------------------------------------
   Button text roll: the label slides up and an identical copy rolls in.
   Mask padded for Ž/Ą so diacritics are never clipped.
   -------------------------------------------------------------------------- */
.nm-roll {
	display: inline-grid;
	overflow: hidden;
	vertical-align: top;
	padding: .16em 0 .2em;
	margin: -.16em 0 -.2em;
}
.nm-roll > span {
	grid-area: 1 / 1;
	transition: translate .5s cubic-bezier(.65, 0, .25, 1);
}
.nm-roll__b { translate: 0 135%; }
.nm-has-roll:hover .nm-roll__a,
.nm-has-roll:focus-visible .nm-roll__a { translate: 0 -135%; }
.nm-has-roll:hover .nm-roll__b,
.nm-has-roll:focus-visible .nm-roll__b { translate: 0 0; }

/* --------------------------------------------------------------------------
   Dark card spotlight: a soft green glow that follows the cursor, painted
   between the card's background and its text.
   -------------------------------------------------------------------------- */
.nm-spot { position: relative; isolation: isolate; }
.nm-spot::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .45s ease;
	background: radial-gradient(
		280px circle at var(--nm-sx, 50%) var(--nm-sy, 50%),
		rgba(205, 242, 63, .17),
		rgba(205, 242, 63, .05) 42%,
		transparent 72%
	);
}
.nm-spot:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Header: tighter glass once scrolled, hides on the way down, returns on
   the way up.
   -------------------------------------------------------------------------- */
#brx-header {
	/* The header was absolutely positioned, so it scrolled away with the page
	   and hide/show could never be seen. Fixed keeps the same overlay layout
	   (it was already out of the flow) but follows the reader. */
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	transition:
		translate .5s var(--nm-ease-out),
		box-shadow .3s ease,
		-webkit-backdrop-filter .3s ease,
		backdrop-filter .3s ease;
}
#brx-header.nm-scrolled {
	box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .7);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
#brx-header.nm-hide { translate: 0 -105%; }

/* --------------------------------------------------------------------------
   Custom cursor (fine pointers only; JS decides).
   -------------------------------------------------------------------------- */
.nm-cur-dot,
.nm-cur-ring {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483000;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0;
}
.nm-cur-dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: var(--nooma-green, #CDF23F);
	box-shadow: 0 0 0 1.5px rgba(28, 28, 28, .85);
	transition: opacity .25s ease, scale .3s var(--nm-ease-out);
}
.nm-cur-ring {
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1.5px solid var(--nooma-green, #CDF23F);
	/* Thin dark halo keeps the ring visible over the green marquee and buttons. */
	box-shadow: 0 0 0 1px rgba(28, 28, 28, .45), inset 0 0 0 1px rgba(28, 28, 28, .45);
	transition: opacity .25s ease, scale .4s var(--nm-ease-out), background-color .25s ease;
}

html.nm-cur-on .nm-cur-dot,
html.nm-cur-on .nm-cur-ring { opacity: 1; }

html.nm-cur-hover .nm-cur-ring { scale: 1.55; background-color: rgba(205, 242, 63, .14); }
html.nm-cur-hover .nm-cur-dot  { scale: 0; }
html.nm-cur-down .nm-cur-ring  { scale: .82; }
html.nm-cur-hover.nm-cur-down .nm-cur-ring { scale: 1.3; }

html.nm-cur-text .nm-cur-dot,
html.nm-cur-text .nm-cur-ring { opacity: 0; }

html.nm-cur-on,
html.nm-cur-on * { cursor: none !important; }
html.nm-cur-on :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select, [contenteditable="true"]) {
	cursor: text !important;
}
html.nm-cur-on select { cursor: default !important; }

/* --------------------------------------------------------------------------
   Forms: animated focus, label follows focus, sending + success states.
   -------------------------------------------------------------------------- */
html body .n-form :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
	transition: border-color .25s ease, box-shadow .4s var(--nm-ease-out), background-color .25s ease;
}
html body .n-form :is(input:not([type=checkbox]):not([type=radio]), textarea, select):focus {
	border-color: var(--nooma-green, #CDF23F);
	box-shadow: 0 0 0 4px rgba(205, 242, 63, .16);
	outline: none;
}
html body .n-form .form-group > label { transition: color .25s ease; }
html body .n-form .form-group:focus-within > label { color: var(--nooma-green, #CDF23F); }

.n-form button[type=submit].sending {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.n-form button[type=submit].sending .loading { display: none !important; }
.n-form button[type=submit].sending::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(28, 28, 28, .25);
	border-top-color: #1C1C1C;
	animation: nm-spin .7s linear infinite;
}
@keyframes nm-spin { to { rotate: 1turn; } }

.brxe-form .message { animation: nm-msg .6s var(--nm-ease-out) both; }
.brxe-form .message.success::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--nooma-green, #CDF23F) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
	animation: nm-check .7s var(--nm-ease-spring) .15s both;
}
@keyframes nm-msg   { from { opacity: 0; translate: 0 10px; } }
@keyframes nm-check { from { scale: 0; } }

/* --------------------------------------------------------------------------
   Page transitions (Chrome/Edge 126+, Safari 18.2+; others navigate normally).
   The header gets its own name so it holds still while the page cross-fades.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

/* view-transition-name gives the header its own stacking context, which traps
   the inner section's z-index:10 inside it. Without an explicit z-index here
   the hero (later in the DOM) paints over the header and swallows every click
   on the nav and the mobile menu toggle. */
#brx-header { view-transition-name: nm-header; z-index: 1000; }

::view-transition-old(root) { animation: nm-vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: nm-vt-in .55s cubic-bezier(.16, 1, .3, 1) .06s both; }

@keyframes nm-vt-out { to   { opacity: 0; translate: 0 -12px; } }
@keyframes nm-vt-in  { from { opacity: 0; translate: 0 18px; } }

/* --------------------------------------------------------------------------
   Smooth scroll (Lenis). The theme sets html{scroll-behavior:smooth}, which
   would make every frame Lenis writes animate on its own and judder.
   -------------------------------------------------------------------------- */
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* Only while actually moving, so embeds stay clickable at rest. */
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --------------------------------------------------------------------------
   Reduced motion: switch it all off.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.nm-cur-dot, .nm-cur-ring { display: none !important; }
	#brx-header.nm-hide { translate: none; }
}