/*!
 * AL Header, Footer & Mega Menu — OraKnight — motion layer v7.0.1
 * Developed by Mahmoud Tawfik
 *
 * Loaded after frontend.css and design.css. Everything is scoped to .alhm / .alhm-ft and only
 * switches on when the "Animations" setting is on (.alhm--fx / .alhm-ft--fx).
 * Visitors who ask their device for reduced motion get none of it.
 */

@property --alhm-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ===================================================================== *
 * 1. Keyframes
 * ===================================================================== */
@keyframes alhm-halo{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:.8;transform:scale(1.06)}}
@keyframes alhm-spin{to{--alhm-ang:360deg}}
@keyframes alhm-aurora{
	0%{background-position:0% 0%,100% 100%}
	50%{background-position:60% 40%,40% 60%}
	100%{background-position:100% 100%,0% 0%}
}
@keyframes alhm-flow{to{background-position:200% 0}}
@keyframes alhm-ping{0%{box-shadow:0 0 0 0 rgba(11,115,196,.5)}70%,100%{box-shadow:0 0 0 16px rgba(11,115,196,0)}}
@keyframes alhm-ring-out{0%{opacity:.6;transform:scale(.72)}100%{opacity:0;transform:scale(1.45)}}
@keyframes alhm-ripple{from{transform:scale(0);opacity:.28}to{transform:scale(1);opacity:0}}
@keyframes alhm-line-grow{from{transform:scaleX(0)}}
@keyframes alhm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes alhm-shimmer-text{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes alhm-drift{from{background-position:0 0,40px 60px}to{background-position:0 -180px,40px -220px}}
@keyframes alhm-slide-up{from{opacity:0;transform:translateY(24px)}}

/* ===================================================================== *
 * 2. Logo: soft breathing halo, pointer tilt, ring burst on the first visit
 * ===================================================================== */
.alhm--fx .alhm__lg{
	isolation:isolate;
	transform:perspective(640px) rotateX(var(--lrx,0deg)) rotateY(var(--lry,0deg));
	transition:transform .5s var(--h-ease,cubic-bezier(.16,1,.3,1));
}
.alhm--fx .alhm__lg::before{
	content:"";position:absolute;z-index:-1;inset:-34% -12%;border-radius:50%;pointer-events:none;
	background:radial-gradient(closest-side,rgba(11,115,196,.34),rgba(11,115,196,0) 72%);
	filter:blur(10px);opacity:0;animation:alhm-halo 6s ease-in-out 2.6s infinite;
}
.alhm--fx .alhm__logo--img:hover .alhm__lg::before{animation-duration:2.2s}
.alhm--fx .alhm__lg.is-tilting{transition:transform .12s ease-out}
html.alhm-intro .alhm--fx .alhm__lg::after{
	content:"";position:absolute;inset:-6%;border-radius:22px;border:1.5px solid rgba(11,115,196,.6);pointer-events:none;
	animation:alhm-ring-out 1.5s var(--h-ease,cubic-bezier(.16,1,.3,1)) 2.05s forwards;
}

/* ===================================================================== *
 * 3. Header bar: a thin light runs along the bottom edge once the page is scrolled
 * ===================================================================== */
.alhm--fx .alhm__bar::after{
	content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:0;transition:opacity .6s;
	background:linear-gradient(90deg,transparent,rgba(11,115,196,.6),rgba(201,176,135,.75),rgba(11,115,196,.6),transparent) 0 0/200% 100%;
	animation:alhm-flow 9s linear infinite;
}
.alhm-header.is-stuck .alhm--fx .alhm__bar::after{opacity:1}

/* ===================================================================== *
 * 4. Menu: a soft pill glides from link to link (placed by motion.js)
 * ===================================================================== */
.alhm__blob,.alhm__ripple{display:none}
@media (min-width:1101px){
	.alhm:not(.alhm--mobile).alhm--fx .alhm__blob{
		display:block;position:absolute;z-index:-1;left:0;top:0;width:0;height:38px;border-radius:999px;pointer-events:none;opacity:0;
		background:linear-gradient(180deg,rgba(11,115,196,.1),rgba(11,115,196,.05));
		box-shadow:inset 0 0 0 1px rgba(11,115,196,.13);
		transition:transform .55s cubic-bezier(.3,1.35,.5,1),width .55s cubic-bezier(.3,1.35,.5,1),opacity .3s;
	}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__blob.is-on{opacity:1}
}

/* ===================================================================== *
 * 5. Main button: a ring pulses now and then, a ripple follows every click
 * ===================================================================== */
.alhm--fx .alhm__actions .alhm__btn--primary{animation:alhm-ping 3.4s ease-out 4.5s infinite}
.alhm--fx .alhm__actions .alhm__btn--primary:hover,
.alhm--fx .alhm__actions .alhm__btn--primary:focus-visible{animation:none}
.alhm--fx .alhm__ripple,.alhm-ft--fx .alhm__ripple{
	display:block;position:absolute;z-index:0;border-radius:50%;pointer-events:none;background:currentColor;
	transform:scale(0);opacity:0;animation:alhm-ripple .75s ease-out forwards;
}

/* ===================================================================== *
 * 6. Mega panel: slow light underneath, eyebrow line grows, ticks are drawn,
 *    cards tilt towards the pointer and get a travelling border
 * ===================================================================== */
@media (min-width:1101px){
	.alhm:not(.alhm--mobile).alhm--fx .alhm__panel--mega::after{
		content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
		background:
			radial-gradient(42% 60% at 18% 22%,rgba(11,115,196,.3),transparent 70%),
			radial-gradient(36% 55% at 82% 78%,rgba(201,176,135,.13),transparent 70%);
		background-size:150% 150%,150% 150%;background-repeat:no-repeat;
		animation:alhm-aurora 16s ease-in-out infinite alternate;animation-play-state:paused;
	}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open > .alhm__panel--mega::after{animation-play-state:running}

	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__eyebrow::before{transform-origin:left center;animation:alhm-line-grow 1s var(--h-ease) .3s backwards}
	html.alhm-is-ar .alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__eyebrow::before{transform-origin:right center}

	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__notes li .alhm-i *{stroke-dasharray:1;animation:alhm-draw .8s var(--h-ease) backwards}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__notes li:nth-child(1) .alhm-i *{animation-delay:.85s}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__notes li:nth-child(2) .alhm-i *{animation-delay:1s}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__notes li:nth-child(3) .alhm-i *{animation-delay:1.15s}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__item.is-open .alhm__notes li:nth-child(4) .alhm-i *{animation-delay:1.3s}

	/* Pointer tilt (motion.js sets --rx / --ry) */
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a:hover,
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a:focus-visible{
		transform:perspective(800px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
		transition:transform .18s ease-out,border-color .4s,background-color .4s,box-shadow .5s var(--h-ease);
	}
	/* Travelling border */
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a::after{
		content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s;
		background:conic-gradient(from var(--alhm-ang),transparent 0 60%,rgba(201,176,135,.95) 80%,rgba(140,194,238,.95) 92%,transparent 100%);
		-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
		mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
		animation:alhm-spin 2.6s linear infinite;animation-play-state:paused;
	}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a:hover::after,
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a:focus-visible::after{opacity:1;animation-play-state:running}
}

/* ===================================================================== *
 * 7. Phone menu: header, links and buttons arrive one after the other
 * ===================================================================== */
.alhm--fx.alhm--open .alhm__drawer-head{animation:alhm-slide-up .7s var(--h-ease,cubic-bezier(.16,1,.3,1)) .12s backwards}
.alhm--fx.alhm--open .alhm__dfoot > *{animation:alhm-slide-up .8s var(--h-ease,cubic-bezier(.16,1,.3,1)) backwards}
.alhm--fx.alhm--open .alhm__dfoot > :nth-child(1){animation-delay:.6s}
.alhm--fx.alhm--open .alhm__dfoot > :nth-child(2){animation-delay:.7s}
.alhm--fx.alhm--open .alhm__dfoot > :nth-child(3){animation-delay:.8s}

/* ===================================================================== *
 * 8. Footer (specificity matches the design layer, which loads first)
 * ===================================================================== */
/* Call-to-action band: slow light and a few drifting dots */
body .alhm-ft.alhm-ft--fx .alhm-ft__cta{position:relative;overflow:hidden;isolation:isolate}
body .alhm-ft.alhm-ft--fx .alhm-ft__cta::before{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(38% 62% at 14% 24%,rgba(11,115,196,.5),transparent 70%),
		radial-gradient(34% 56% at 86% 78%,rgba(140,194,238,.24),transparent 70%);
	background-size:150% 150%,150% 150%;background-repeat:no-repeat;
	animation:alhm-aurora 18s ease-in-out infinite alternate;
}
body .alhm-ft.alhm-ft--fx .alhm-ft__cta::after{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
	background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1.4px),radial-gradient(rgba(140,194,238,.55) 1px,transparent 1.4px);
	background-size:90px 90px,140px 140px;background-position:0 0,40px 60px;
	-webkit-mask-image:linear-gradient(#000,transparent 88%);mask-image:linear-gradient(#000,transparent 88%);
	animation:alhm-drift 40s linear infinite;
}

/* Highlighted words in the title: the underline draws itself when the band comes into view */
html.alhm-js body .alhm-ft.alhm-ft--fx .alhm-ft__cta h2 em{
	text-decoration:none;padding-bottom:6px;
	background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
	transition:background-size 1.1s var(--alhm-ease,cubic-bezier(.2,.7,.2,1)) .55s;
}
html.alhm-js body .alhm-ft.alhm-ft--fx .alhm-ft__cta-txt.is-in h2 em{background-size:100% 2px}
html.alhm-is-ar.alhm-js body .alhm-ft.alhm-ft--fx .alhm-ft__cta h2 em{background-position:100% 100%}

/* Link columns: the link slides a little towards its underline */
body .alhm-ft.alhm-ft--fx .alhm-ft__col a{transition:transform .4s var(--alhm-ease,cubic-bezier(.2,.7,.2,1)),color .2s}
body .alhm-ft.alhm-ft--fx .alhm-ft__col a:hover{transform:translateX(5px)}
html.alhm-is-ar body .alhm-ft.alhm-ft--fx .alhm-ft__col a:hover{transform:translateX(-5px)}

/* Highlight figure: a light passes over it now and then (light footer only, so it is never invisible) */
body.alhm-ds-chrome .alhm-ft.alhm-ft--fx .alhm-ft__stat strong{
	background:linear-gradient(100deg,var(--alhm-ink) 0 40%,var(--alhm-blue) 50%,var(--alhm-ink) 60% 100%) 100% 0/250% 100% no-repeat;
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
	animation:alhm-shimmer-text 6s ease-in-out 1.2s infinite alternate;
}

/* Back to top: the arrow bobs until hovered */
body .alhm-ft.alhm-ft--fx .alhm-ft__top .alhm-i{animation:alhm-bob 2.6s ease-in-out infinite}
body .alhm-ft.alhm-ft--fx .alhm-ft__top:hover .alhm-i{animation:none}

/* ===================================================================== *
 * 9. Reduced motion
 * ===================================================================== */
@media (prefers-reduced-motion:reduce){
	.alhm *,.alhm *::before,.alhm *::after,
	.alhm-ft,.alhm-ft *,.alhm-ft *::before,.alhm-ft *::after{animation:none!important}
	.alhm__blob,.alhm__ripple{display:none!important}
	.alhm--fx .alhm__lg{transform:none;transition:none}
	.alhm--fx .alhm__lg::before,.alhm--fx .alhm__lg::after,.alhm--fx .alhm__bar::after{display:none}
	.alhm:not(.alhm--mobile).alhm--fx .alhm__mlinks--cards a::after{display:none}
	html.alhm-js body .alhm-ft.alhm-ft--fx .alhm-ft__cta h2 em{background-size:100% 2px;transition:none}
}