/* Zex logo motion: a shard flies in, a red line traces the letters, they fill in,
   the X slams down and the plus spins in 3D — then it holds and replays. */
.zex-logo{--zl:6s;position:relative;display:block;aspect-ratio:800/267.6;perspective:600px}
.zex-logo .zl-p{position:absolute;max-width:none;animation:var(--zl) cubic-bezier(.22,.8,.3,1) infinite both}
.zex-logo .zl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.zex-logo .zl-tr{fill:none;stroke:#ff1f2d;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:zl-trace var(--zl) linear infinite both}
.zex-logo .zl-tr-ebot{animation-name:zl-trace2}
.zex-logo .zl-tr-etop{display:none}

.zl-etop{animation-name:zl-shard!important;transform-origin:0 50%}
.zl-z{animation-name:zl-fill!important}
.zl-ebot{animation-name:zl-rise!important}
.zl-x{animation-name:zl-slam!important;transform-origin:50% 55%}
.zl-plus{animation-name:zl-spin!important;transform-origin:50% 50%;animation-timing-function:ease-out!important}

/* 1% = 60ms of a 6s cycle */
@keyframes zl-shard{
	0%{opacity:0;transform:translateX(150%) scale(.15,.5)}
	2%{opacity:1}
	9%{transform:translateX(120%) scale(.45,.8)}
	15%{transform:translateX(-6%) scale(1)}
	17%,86%{opacity:1;transform:none}
	92%,100%{opacity:0;transform:translateX(-30%)}
}
@keyframes zl-trace{
	0%,4%{stroke-dashoffset:1;opacity:1}
	20%{stroke-dashoffset:0;opacity:1}
	27%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes zl-trace2{
	0%,9%{stroke-dashoffset:1;opacity:1}
	23%{stroke-dashoffset:0;opacity:1}
	30%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes zl-fill{
	0%,16%{opacity:0;clip-path:inset(0 0 100% 0)}
	25%{opacity:1;clip-path:inset(0 0 0 0)}
	86%{opacity:1;transform:none}
	92%,100%{opacity:0;transform:translateX(-12%)}
}
@keyframes zl-rise{
	0%,19%{opacity:0;transform:translateY(45%)}
	28%,86%{opacity:1;transform:none}
	92%,100%{opacity:0;transform:translateY(25%)}
}
@keyframes zl-slam{
	0%,26%{opacity:0;transform:scale(2.1) rotate(-8deg);filter:brightness(2.2) blur(3px)}
	32%{opacity:1;transform:scale(.93);filter:brightness(1.4) blur(0)}
	36%{transform:scale(1.03);filter:none}
	39%,86%{opacity:1;transform:none}
	92%,100%{opacity:0;transform:scale(1.25)}
}
@keyframes zl-spin{
	0%,33%{opacity:0;transform:rotateY(-540deg) scale(.2)}
	36%{opacity:1}
	47%{transform:rotateY(18deg) scale(1.08)}
	51%{transform:rotateY(0) scale(1)}
	62%{transform:rotateY(0)}
	70%{transform:rotateY(360deg)}
	71%,86%{opacity:1;transform:rotateY(360deg)}
	92%,100%{opacity:0;transform:rotateY(360deg) scale(.4)}
}
@media (prefers-reduced-motion:reduce){
	.zex-logo .zl-p{animation:none!important}
	.zex-logo .zl-svg{display:none}
}

/* where it sits */
.site-logo-container .zex-logo{height:34px;width:auto}
@media (max-width:689px){.site-logo-container .zex-logo{height:30px}}
.zex-flogo .zex-logo{width:170px;max-width:100%}
.zex-page-loader .zex-logo{width:min(380px,72vw);--zl:3.6s} /* built (plus settled) at ~1.85s */
/* the loader plays the build-up once (it closes before the hold ends) */
.zex-logo.zl-once .zl-p,.zex-logo.zl-once .zl-tr{animation-iteration-count:1}

/* layer boxes (the id in :is() outranks the theme's !important logo-image sizing) */
:is(#header,body) .zex-logo img.zl-p{max-width:none!important;max-height:none!important;margin:0!important;display:block}
:is(#header,body) .zex-logo img.zl-z{left:2.150%!important;top:14.798%!important;width:34.250%!important;height:70.254%!important}
:is(#header,body) .zex-logo img.zl-etop{left:30.350%!important;top:14.798%!important;width:29.000%!important;height:27.280%!important}
:is(#header,body) .zex-logo img.zl-ebot{left:31.000%!important;top:40.060%!important;width:27.750%!important;height:44.843%!important}
:is(#header,body) .zex-logo img.zl-x{left:52.450%!important;top:14.649%!important;width:35.750%!important;height:75.112%!important}
:is(#header,body) .zex-logo img.zl-plus{left:83.050%!important;top:8.221%!important;width:16.250%!important;height:39.985%!important}