/* Emkay Loading Screen — front end
   Colours and sizes come from CSS variables set by the plugin. */

.emkay-ls {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	background: var(--emkay-ls-bg, #fff);
	color: var(--emkay-ls-text, #12262C);
	opacity: 1;
	transition: opacity var(--emkay-ls-fade, 450ms) ease;
}

.emkay-ls.is-going { opacity: 0; }
.emkay-ls.is-gone  { display: none; }

.emkay-ls__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
}

.emkay-ls__logo {
	width: var(--emkay-ls-logo, 110px);
	height: auto;
	display: block;
}

.emkay-ls .emkay-ls__message {
	margin: 0;
	font-family: var(--emkay-ls-font, inherit);
	font-size: var(--emkay-ls-size, 14px);
	font-weight: var(--emkay-ls-weight, 500);
	letter-spacing: var(--emkay-ls-spacing, 0px);
	text-transform: var(--emkay-ls-transform, none);
	line-height: 1.4;
	color: var(--emkay-ls-text, #12262C);
	max-width: 32ch;
}

.emkay-ls__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Ring ---------- */
.emkay-ls--ring .emkay-ls__anim {
	width: 38px; height: 38px;
	border: 3px solid color-mix(in srgb, var(--emkay-ls-accent, #E3A21B) 22%, transparent);
	border-top-color: var(--emkay-ls-accent, #E3A21B);
	border-radius: 50%;
	animation: emkay-ls-spin .8s linear infinite;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.emkay-ls--ring .emkay-ls__anim { border-color: rgba(0, 0, 0, .12); border-top-color: var(--emkay-ls-accent, #E3A21B); }
}

@keyframes emkay-ls-spin { to { transform: rotate(360deg); } }

/* ---------- Dots ---------- */
.emkay-ls--dots .emkay-ls__anim { display: flex; gap: 8px; }
.emkay-ls--dots .emkay-ls__anim span {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-bounce 1.1s ease-in-out infinite;
}
.emkay-ls--dots .emkay-ls__anim span:nth-child(2) { animation-delay: .15s; }
.emkay-ls--dots .emkay-ls__anim span:nth-child(3) { animation-delay: .3s; }

@keyframes emkay-ls-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: .45; }
	40%           { transform: translateY(-9px); opacity: 1; }
}

/* ---------- Bar ---------- */
.emkay-ls--bar .emkay-ls__anim {
	width: 180px; height: 4px; border-radius: 999px;
	background: rgba(0, 0, 0, .09);
	overflow: hidden;
}
.emkay-ls--bar .emkay-ls__anim i {
	display: block; width: 40%; height: 100%; border-radius: 999px;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-slide 1.1s ease-in-out infinite;
}

@keyframes emkay-ls-slide {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}

/* ---------- Pulse (logo breathes, no separate animation) ---------- */
.emkay-ls--pulse .emkay-ls__anim { display: none; }
.emkay-ls--pulse .emkay-ls__logo { animation: emkay-ls-pulse 1.4s ease-in-out infinite; }

@keyframes emkay-ls-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(.93);  opacity: .6; }
}

/* If there is no logo, pulse a dot instead so something moves */
.emkay-ls--pulse .emkay-ls__inner:not(:has(.emkay-ls__logo)) .emkay-ls__anim {
	display: block;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-pulse 1.4s ease-in-out infinite;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.emkay-ls__anim,
	.emkay-ls__anim span,
	.emkay-ls__anim i,
	.emkay-ls--pulse .emkay-ls__logo {
		animation: none !important;
	}
	.emkay-ls--ring .emkay-ls__anim { border-top-color: var(--emkay-ls-accent, #E3A21B); opacity: .8; }
	.emkay-ls { transition: none; }
}

/* ---------- Equaliser bars ---------- */
.emkay-ls--bars .emkay-ls__anim { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.emkay-ls--bars .emkay-ls__anim span {
	width: 5px; height: 100%; border-radius: 999px;
	background: var(--emkay-ls-accent, #E3A21B);
	transform-origin: bottom;
	animation: emkay-ls-eq 1s ease-in-out infinite;
}
.emkay-ls--bars .emkay-ls__anim span:nth-child(2) { animation-delay: .12s; }
.emkay-ls--bars .emkay-ls__anim span:nth-child(3) { animation-delay: .24s; }
.emkay-ls--bars .emkay-ls__anim span:nth-child(4) { animation-delay: .36s; }
.emkay-ls--bars .emkay-ls__anim span:nth-child(5) { animation-delay: .48s; }

@keyframes emkay-ls-eq {
	0%, 100% { transform: scaleY(.3); opacity: .55; }
	50%      { transform: scaleY(1);  opacity: 1; }
}

/* ---------- Orbit ---------- */
.emkay-ls--orbit .emkay-ls__anim {
	position: relative; width: 42px; height: 42px;
	animation: emkay-ls-spin 1.3s linear infinite;
}
.emkay-ls--orbit .emkay-ls__anim span {
	position: absolute; left: 50%; width: 11px; height: 11px;
	margin-left: -5.5px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
}
.emkay-ls--orbit .emkay-ls__anim span:nth-child(1) { top: 0; }
.emkay-ls--orbit .emkay-ls__anim span:nth-child(2) { bottom: 0; opacity: .45; }

/* ---------- Ripple ---------- */
.emkay-ls--ripple .emkay-ls__anim { position: relative; width: 56px; height: 56px; }
.emkay-ls--ripple .emkay-ls__anim span {
	position: absolute; inset: 0; margin: auto;
	width: 0; height: 0; border-radius: 50%;
	border: 3px solid var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-ripple 1.4s cubic-bezier(0, .2, .8, 1) infinite;
}
.emkay-ls--ripple .emkay-ls__anim span:nth-child(2) { animation-delay: -.7s; }

@keyframes emkay-ls-ripple {
	0%   { width: 0; height: 0; opacity: 1; }
	100% { width: 56px; height: 56px; opacity: 0; }
}

/* ---------- Flipping square ---------- */
.emkay-ls--flip .emkay-ls__anim { perspective: 140px; }
.emkay-ls--flip .emkay-ls__anim i {
	display: block; width: 32px; height: 32px; border-radius: 6px;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-flip 1.5s ease-in-out infinite;
}

@keyframes emkay-ls-flip {
	0%   { transform: rotateX(0) rotateY(0); }
	50%  { transform: rotateX(-180deg) rotateY(0); }
	100% { transform: rotateX(-180deg) rotateY(-180deg); }
}

/* ---------- Nine dots ---------- */
.emkay-ls--grid .emkay-ls__anim {
	display: grid; grid-template-columns: repeat(3, 9px); gap: 6px;
}
.emkay-ls--grid .emkay-ls__anim span {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-fade 1.3s ease-in-out infinite;
}
.emkay-ls--grid .emkay-ls__anim span:nth-child(1) { animation-delay: 0s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(2) { animation-delay: .1s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(3) { animation-delay: .2s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(4) { animation-delay: .1s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(5) { animation-delay: .2s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(6) { animation-delay: .3s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(7) { animation-delay: .2s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(8) { animation-delay: .3s; }
.emkay-ls--grid .emkay-ls__anim span:nth-child(9) { animation-delay: .4s; }

@keyframes emkay-ls-fade {
	0%, 70%, 100% { opacity: .2; transform: scale(.8); }
	35%           { opacity: 1;  transform: scale(1); }
}

/* ---------- Woven stripe ----------
   Four bands sliding at different speeds. Reads as cloth rather than
   as a spinner, which suits a brand that uses a woven motif. */
.emkay-ls--stripe .emkay-ls__anim {
	width: 190px; height: 26px; border-radius: 6px;
	overflow: hidden; display: flex; flex-direction: column; gap: 3px;
}
.emkay-ls--stripe .emkay-ls__anim i {
	display: block; height: 5px; border-radius: 999px;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-weave 1.6s ease-in-out infinite;
}
.emkay-ls--stripe .emkay-ls__anim i:nth-child(1) { width: 60%; }
.emkay-ls--stripe .emkay-ls__anim i:nth-child(2) { width: 85%; animation-delay: .15s; opacity: .75; }
.emkay-ls--stripe .emkay-ls__anim i:nth-child(3) { width: 45%; animation-delay: .3s; opacity: .55; }
.emkay-ls--stripe .emkay-ls__anim i:nth-child(4) { width: 70%; animation-delay: .45s; opacity: .35; }

@keyframes emkay-ls-weave {
	0%, 100% { transform: translateX(-24%); }
	50%      { transform: translateX(42%); }
}

/* Reduced motion covers the new ones too */
@media (prefers-reduced-motion: reduce) {
	.emkay-ls--bars .emkay-ls__anim span,
	.emkay-ls--orbit .emkay-ls__anim,
	.emkay-ls--ripple .emkay-ls__anim span,
	.emkay-ls--flip .emkay-ls__anim i,
	.emkay-ls--grid .emkay-ls__anim span,
	.emkay-ls--stripe .emkay-ls__anim i { animation: none !important; }
	.emkay-ls--ripple .emkay-ls__anim span { width: 40px; height: 40px; opacity: .5; }
}

/* ---------- Two rings ---------- */
.emkay-ls--dual .emkay-ls__anim { position: relative; width: 44px; height: 44px; }
.emkay-ls--dual .emkay-ls__anim span {
	position: absolute; inset: 0; border-radius: 50%;
	border: 3px solid transparent;
}
.emkay-ls--dual .emkay-ls__anim span:nth-child(1) {
	border-top-color: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-spin .9s linear infinite;
}
.emkay-ls--dual .emkay-ls__anim span:nth-child(2) {
	inset: 8px;
	border-bottom-color: var(--emkay-ls-accent, #E3A21B);
	opacity: .6;
	animation: emkay-ls-spin 1.3s linear infinite reverse;
}

/* ---------- Bouncing ball ---------- */
.emkay-ls--bounce .emkay-ls__anim {
	position: relative; width: 44px; height: 48px;
}
.emkay-ls--bounce .emkay-ls__anim span:nth-child(1) {
	position: absolute; top: 0; left: 50%; margin-left: -9px;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-drop .7s cubic-bezier(.5, .05, .5, .95) infinite alternate;
}
.emkay-ls--bounce .emkay-ls__anim span:nth-child(2) {
	position: absolute; bottom: 2px; left: 50%; margin-left: -11px;
	width: 22px; height: 5px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B); opacity: .22;
	animation: emkay-ls-shadow .7s cubic-bezier(.5, .05, .5, .95) infinite alternate;
}

@keyframes emkay-ls-drop   { from { transform: translateY(0); } to { transform: translateY(26px); } }
@keyframes emkay-ls-shadow { from { transform: scaleX(.55); opacity: .12; } to { transform: scaleX(1); opacity: .28; } }

/* ---------- Wave ---------- */
.emkay-ls--wave .emkay-ls__anim { display: flex; align-items: center; gap: 7px; height: 34px; }
.emkay-ls--wave .emkay-ls__anim span {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-wave 1.2s ease-in-out infinite;
}
.emkay-ls--wave .emkay-ls__anim span:nth-child(2) { animation-delay: .1s; }
.emkay-ls--wave .emkay-ls__anim span:nth-child(3) { animation-delay: .2s; }
.emkay-ls--wave .emkay-ls__anim span:nth-child(4) { animation-delay: .3s; }
.emkay-ls--wave .emkay-ls__anim span:nth-child(5) { animation-delay: .4s; }

@keyframes emkay-ls-wave {
	0%, 100% { transform: translateY(0);     opacity: .45; }
	50%      { transform: translateY(-13px); opacity: 1; }
}

/* ---------- Morphing shape ---------- */
.emkay-ls--morph .emkay-ls__anim i {
	display: block; width: 34px; height: 34px;
	background: var(--emkay-ls-accent, #E3A21B);
	animation: emkay-ls-morph 1.8s ease-in-out infinite;
}

@keyframes emkay-ls-morph {
	0%, 100% { border-radius: 6px;  transform: rotate(0); }
	35%      { border-radius: 50%;  transform: rotate(135deg); }
	70%      { border-radius: 6px;  transform: rotate(270deg); }
}

/* ---------- Comet ---------- */
.emkay-ls--comet .emkay-ls__anim {
	position: relative; width: 46px; height: 46px;
	animation: emkay-ls-spin 1.1s linear infinite;
}
.emkay-ls--comet .emkay-ls__anim span {
	position: absolute; top: 0; left: 50%; margin-left: -5px;
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--emkay-ls-accent, #E3A21B);
	transform-origin: 5px 23px;
}
.emkay-ls--comet .emkay-ls__anim span:nth-child(2) { transform: rotate(-26deg) scale(.78); opacity: .5; }
.emkay-ls--comet .emkay-ls__anim span:nth-child(3) { transform: rotate(-52deg) scale(.56); opacity: .25; }

/* ---------- Folding cube ---------- */
.emkay-ls--fold .emkay-ls__anim {
	position: relative; width: 36px; height: 36px; transform: rotateZ(45deg);
}
.emkay-ls--fold .emkay-ls__anim i {
	position: relative; float: left;
	width: 50%; height: 50%; transform: scale(1.1);
}
.emkay-ls--fold .emkay-ls__anim i::before {
	content: ''; position: absolute; inset: 0;
	background: var(--emkay-ls-accent, #E3A21B);
	transform-origin: 100% 100%;
	animation: emkay-ls-fold 2.4s linear infinite both;
}
.emkay-ls--fold .emkay-ls__anim i:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }
.emkay-ls--fold .emkay-ls__anim i:nth-child(3) { transform: scale(1.1) rotateZ(180deg); }
.emkay-ls--fold .emkay-ls__anim i:nth-child(4) { transform: scale(1.1) rotateZ(270deg); }
.emkay-ls--fold .emkay-ls__anim i:nth-child(2)::before { animation-delay: .3s; }
.emkay-ls--fold .emkay-ls__anim i:nth-child(3)::before { animation-delay: .6s; }
.emkay-ls--fold .emkay-ls__anim i:nth-child(4)::before { animation-delay: .9s; }

@keyframes emkay-ls-fold {
	0%, 10%  { transform: perspective(140px) rotateX(-180deg); opacity: 0; }
	25%, 75% { transform: perspective(140px) rotateX(0);       opacity: 1; }
	90%,100% { transform: perspective(140px) rotateY(180deg);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.emkay-ls--dual .emkay-ls__anim span,
	.emkay-ls--bounce .emkay-ls__anim span,
	.emkay-ls--wave .emkay-ls__anim span,
	.emkay-ls--morph .emkay-ls__anim i,
	.emkay-ls--comet .emkay-ls__anim,
	.emkay-ls--fold .emkay-ls__anim i::before { animation: none !important; }
	.emkay-ls--fold .emkay-ls__anim i::before { opacity: .8; }
}

/* ---------- Animation wrapped around the logo ----------
   The stack holds logo and animation. Normally they sit one under the
   other; in "around" mode the animation is centred on the logo and sized
   from it, so any logo width keeps a sensible margin of ring. */
.emkay-ls__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.emkay-ls.is-around .emkay-ls__stack {
	position: relative;
	display: grid;
	place-items: center;
	gap: 0;
	/* ring diameter: the logo plus breathing room on both sides */
	--emkay-ls-orbit: calc(var(--emkay-ls-logo, 110px) + 46px);
	width: var(--emkay-ls-orbit);
	height: var(--emkay-ls-orbit);
}

.emkay-ls.is-around .emkay-ls__logo {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
}

.emkay-ls.is-around .emkay-ls__anim {
	grid-area: 1 / 1;
	width: var(--emkay-ls-orbit) !important;
	height: var(--emkay-ls-orbit) !important;
}

/* Ring and two-rings scale to the new box automatically.
   Ripple has to expand to the full diameter, not its default 56px. */
.emkay-ls.is-around.emkay-ls--ripple .emkay-ls__anim span {
	animation-name: emkay-ls-ripple-around;
}

@keyframes emkay-ls-ripple-around {
	0%   { width: 0; height: 0; opacity: 1; }
	100% { width: var(--emkay-ls-orbit); height: var(--emkay-ls-orbit); opacity: 0; }
}

/* Orbit and comet travel on the larger circle, so their dots need
   a transform origin measured from the new radius. */
.emkay-ls.is-around.emkay-ls--comet .emkay-ls__anim span {
	transform-origin: 5px calc(var(--emkay-ls-orbit) / 2);
}

.emkay-ls.is-around .emkay-ls__logo + .emkay-ls__anim { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.emkay-ls.is-around .emkay-ls__anim { opacity: .7; }
}