/*
	Стили <animated-lum> (lum/animated-lum.js). Самостоятельные: без
	переменных сайта, только свои — со значениями по умолчанию:
	  --lum-eye          цвет глаз
	  --lum-accent       волны прислушивания, кольцо и искорки появления
	  --lum-ease         плавность выездов и появлений
	  --lum-say-bg, --lum-say-border, --lum-say-shadow,
	  --lum-say-color, --lum-say-size, --lum-say-weight — облачко с репликой
	Тёмная тема — :root[data-theme="dark"] или системная, если тема не
	выбрана: ночью глаза светятся (фильтр lf-bloom, его добавляет скрипт).
*/

animated-lum {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.lum__rig {
	/* Над кольцом и искорками появления: они лежат перед ним в разметке. */
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	color: var(--lum-eye, #a9e9d5);
}

animated-lum[tight] .lum__shadow {
	display: none;
}

/* Все повороты считаются от точек общего холста 256: дыхание — от низа
   тела, руки ходят по орбите вокруг его центра. */
.lum__all,
.lum__who,
.lum__torso,
.lum__shadow,
.lum__arm,
.lum__arm-p,
.lum__fx use {
	transform-box: view-box;
}

.lum__all,
.lum__who,
.lum__torso {
	transform-origin: 128px 228px;
}

.lum__arm {
	transform-origin: 128px 140px;
}

/* Днём глаза тусклее и без засветки, ночью светятся. */
.lum__glow {
	opacity: 0.9;
}

:root[data-theme="dark"] .lum__glow {
	filter: url(#lf-bloom);
	opacity: 1;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .lum__glow {
		filter: url(#lf-bloom);
		opacity: 1;
	}
}

/* Реквизит над головой выскакивает из точки над Люмом. */
.lum__fx use {
	transform-origin: 214px 48px;
	opacity: 0;
	scale: 0.4;
	transition:
		opacity 300ms ease,
		scale 400ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));

	&.is-on {
		opacity: 1;
		scale: 1;
	}
}

/* Пузырь с вопросом: от головы по очереди поднимаются пузырьки
   поменьше, за ними раскрывается сам пузырь. */
.lum__ask {
	transform-box: view-box;
	transform-origin: 192px 70px;

	use {
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}

	use:last-child {
		transform-origin: 22% 85%;
	}

	&.is-on use {
		opacity: 1;
		scale: 1;
	}

	&.is-on use:nth-child(2) {
		transition-delay: 90ms;
	}

	&.is-on use:last-child {
		transition-delay: 180ms;
	}
}

/* Искорка на щите — только когда Люм прячется за него. */
.lum__glint {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	pointer-events: none;
}

/* Щит ростом с Люма встаёт с земли перед ним, а сам Люм отходит
   за щит и выглядывает из-за края — лицо остаётся открытым. */
.lum__guard {
	transform-box: view-box;
	transform-origin: 185px 226px;
	opacity: 0;
	translate: 0 18px;
	scale: 0.9;
	transition:
		opacity 300ms ease,
		translate 480ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		scale 480ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));

	&.is-on {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}
}

.lum__who,
.lum__shadow {
	transition:
		translate 520ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		rotate 520ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

animated-lum[data-mood="guard"] {
	.lum__who {
		translate: -22px 0;
		rotate: -9deg;
	}

	.lum__shadow {
		translate: -22px 0;
	}
}

/* Лист в руках: поднимается снизу, когда Люм читает. */
.lum__doc {
	transform-box: view-box;
	transform-origin: 128px 200px;
	opacity: 0;
	scale: 0.6;
	translate: 0 16px;
	transition:
		opacity 300ms ease,
		scale 420ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		translate 420ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));

	&.is-on {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}
}

/* Волны прислушивания — у экрана, с той же стороны, что и облачко. */
.lum__listen {
	fill: none;
	stroke: var(--lum-accent, #17c27a);
	stroke-width: 7;
	stroke-linecap: round;
	opacity: 0;
	transform-box: view-box;
	transform-origin: 128px 0;
	transition: opacity 320ms ease;

	&.is-on {
		opacity: 1;
	}
}

animated-lum[side="left"] .lum__listen {
	scale: -1 1;
}

/* Облачко с репликой: выезжает из-за Люма, хвостиком к нему. Стоит
   на уровне лица — выше него живёт реквизит: пузырь мыслей, щит.
   По умолчанию справа, side="left" — слева. */
.lum__say {
	position: absolute;
	z-index: 2;
	inset-block-start: 34%;
	inset-inline-start: 90%;
	inline-size: max-content;
	max-inline-size: min(240px, calc(50vw - 64px));
	margin: 0;
	padding: 9px 13px;
	border: 1px solid var(--lum-say-border, rgb(10 22 16 / 7%));
	border-radius: 16px 16px 16px 5px;
	background: var(--lum-say-bg, #fff);
	box-shadow: var(--lum-say-shadow, 0 8px 24px rgb(10 22 16 / 10%));
	color: var(--lum-say-color, #0f1712);
	font-size: var(--lum-say-size, 0.875rem);
	font-weight: var(--lum-say-weight, 500);
	line-height: 1.35;
	text-align: start;
	text-wrap: balance;
	opacity: 0;
	scale: 0.92;
	transform-origin: 0 100%;
	translate: -8px 4px;
	transition:
		opacity 280ms ease,
		scale 420ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		translate 420ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));
	pointer-events: none;
}

animated-lum[side="left"] .lum__say {
	inset-inline: auto 90%;
	border-radius: 16px 16px 5px 16px;
	transform-origin: 100% 100%;
	translate: 8px 4px;
}

animated-lum.is-saying .lum__say {
	opacity: 1;
	scale: 1;
	translate: 0 0;
}

/* Появление из ниоткуда (appear): кольцо и искорки — вокруг Люма,
   в рамке элемента; создаются при первом появлении. */
.lum__puff {
	position: absolute;
	inset: 14%;
	border: 3px solid var(--lum-accent, #17c27a);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.lum__spark {
	position: absolute;
	inset-block-start: 46%;
	inset-inline-start: 46%;
	inline-size: 17%;
	fill: var(--lum-accent, #17c27a);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.lum__torso {
		animation: lum-breathe 4.2s ease-in-out infinite;
	}

	/* Руки живут отдельно от тела: у каждой свой период и сдвиг фазы. */
	.lum__arm--l {
		animation: lum-hug-l 3.7s ease-in-out infinite;
	}

	.lum__arm--r {
		animation: lum-hug-r 4.3s ease-in-out -1.4s infinite;
	}

	animated-lum.is-wave .lum__arm--r {
		animation: lum-wave 0.9s ease-in-out 2;
	}

	animated-lum.is-hop .lum__all {
		animation: lum-hop 0.6s cubic-bezier(0.3, 0.7, 0.4, 1) 2;
	}

	/* При прыжке руки догоняют тело с задержкой. */
	animated-lum.is-hop .lum__arm-p {
		animation: lum-lag 0.6s cubic-bezier(0.3, 0.7, 0.4, 1) 0.07s 2;
	}

	animated-lum.is-tilt .lum__all {
		animation: lum-tilt 2.4s ease-in-out;
	}

	/* Оживления на месте, чтобы Люм не стоял истуканом. */
	animated-lum.is-flip .lum__doc {
		animation: lum-flip 0.7s var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));
	}

	animated-lum.is-pop .lum__ask {
		animation: lum-pop 0.8s var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1));
	}

	/* Прятки: Люм уходит за щит, щит от толчка качнулся, по нему
	   пробежала искорка — и Люм снова выглядывает. */
	animated-lum.is-hide {
		.lum__who {
			animation: lum-hide 2s ease-in-out;
		}

		.lum__shadow {
			animation: lum-hide-shadow 2s ease-in-out;
		}

		.lum__guard {
			animation: lum-bump 2s ease-out;
		}

		.lum__glint {
			animation: lum-glint 0.8s ease-out 0.5s;
		}
	}

	/* Пузырь с вопросом тихо покачивается. */
	.lum__ask.is-on {
		animation: lum-float 3.2s ease-in-out infinite;
	}

	animated-lum.is-flicker .lum__bulb {
		animation: lum-flicker 1s linear;
	}

	/* Нажатие: короткое «сжатие», как у кнопки. */
	animated-lum:active .lum__rig {
		scale: 0.94;
		transition: scale 120ms ease;
	}

	.lum__listen.is-on path {
		animation: lum-listen 1.4s ease-out infinite;

		&:nth-child(2) {
			animation-delay: 0.2s;
		}

		&:nth-child(3) {
			animation-delay: 0.4s;
		}
	}

	/* Появился: сперва вспышка — кольцо и искорки, — и уже из неё
	   пружинисто вырастает Люм. */
	animated-lum.is-appearing {
		.lum__rig {
			transform-origin: 50% 70%;
			animation: lum-appear 720ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 150ms both;
		}

		.lum__puff {
			animation: lum-puff 640ms ease-out both;
		}

		.lum__spark {
			animation: lum-spark 780ms var(--lum-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
			animation-delay: var(--delay, 0ms);
		}
	}

	animated-lum.is-vanishing :is(.lum__rig, .lum__say) {
		transform-origin: 50% 70%;
		animation: lum-vanish 240ms ease-in both;
	}
}

/* Перелистнул: лист приподнялся и чуть повернулся. */
@keyframes lum-flip {
	40% {
		translate: 0 -8px;
		rotate: -6deg;
	}
}

/* Подпрыгнул пузырь с вопросом. */
@keyframes lum-pop {
	35% {
		scale: 1.16;
		translate: 0 -6px;
	}
	70% {
		scale: 0.96;
		translate: 0 0;
	}
}

/* Прятки за щитом: ушёл за щит, пересидел, выглянул чуть дальше
   обычного, задержался и вернулся на своё место у края. */
@keyframes lum-hide {
	0%,
	100% {
		translate: -22px 0;
		rotate: -9deg;
	}
	22%,
	48% {
		translate: 20px 0;
		rotate: 2deg;
	}
	66%,
	84% {
		translate: -28px 0;
		rotate: -13deg;
	}
}

@keyframes lum-hide-shadow {
	0%,
	100% {
		translate: -22px 0;
	}
	22%,
	48% {
		translate: 20px 0;
	}
	66%,
	84% {
		translate: -28px 0;
	}
}

/* Люм задел щит, когда прятался: щит качнулся на острие. */
@keyframes lum-bump {
	22%,
	48% {
		rotate: 0deg;
	}
	30% {
		rotate: 2deg;
	}
	39% {
		rotate: -1deg;
	}
}

@keyframes lum-glint {
	30% {
		opacity: 1;
		scale: 1.3;
	}
	100% {
		opacity: 0;
	}
}

@keyframes lum-float {
	50% {
		translate: 0 -5px;
	}
}

/* Лампочка мигнула — как когда приходит мысль. */
@keyframes lum-flicker {
	10%,
	30% {
		opacity: 0.35;
	}
	20%,
	45%,
	100% {
		opacity: 1;
	}
}

@keyframes lum-breathe {
	50% {
		transform: scale(1.018, 1.03);
	}
}

@keyframes lum-hug-l {
	50% {
		transform: rotate(4deg) translateY(3px);
	}
}

@keyframes lum-hug-r {
	50% {
		transform: rotate(-4deg) translateY(3px);
	}
}

@keyframes lum-wave {
	30% {
		transform: rotate(-16deg);
	}
	70% {
		transform: rotate(-4deg);
	}
}

@keyframes lum-hop {
	40% {
		transform: translateY(-14px) scale(1, 1.03);
	}
	80% {
		transform: translateY(0) scale(1.04, 0.96);
	}
}

@keyframes lum-lag {
	40% {
		transform: translateY(7px);
	}
	80% {
		transform: translateY(-4px);
	}
}

@keyframes lum-tilt {
	40%,
	60% {
		transform: rotate(-6deg);
	}
}

@keyframes lum-listen {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes lum-appear {
	0% {
		opacity: 0;
		scale: 0.2;
	}
	55% {
		opacity: 1;
		scale: 1.12;
	}
	78% {
		scale: 0.95;
	}
	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes lum-vanish {
	to {
		opacity: 0;
		scale: 0.3;
	}
}

@keyframes lum-puff {
	0% {
		opacity: 0.9;
		scale: 0.3;
	}
	100% {
		opacity: 0;
		scale: 1.55;
	}
}

@keyframes lum-spark {
	0% {
		opacity: 0;
		translate: 0 0;
		scale: 0.3;
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		translate: var(--dx) var(--dy);
		scale: 1;
	}
}