/**
 * Boostie — layered 3D mascot.
 * Depth comes from translateZ on stacked SVG layers inside a preserve-3d scene.
 */

.boostie {
	/* Boostie is a honey bear: warm fur, warm light, one cool prop colour so the
	   props read against the fur instead of blending into it. */
	--bst-fur: #f2913d;
	--bst-fur-light: #fbbd7c;
	--bst-fur-dark: #dd7420;
	--bst-fur-deep: #c25f14;
	--bst-belly: #ffeed8;
	--bst-belly-light: #fffaf3;
	--bst-inner: #f7a789;
	--bst-inner-light: #ffc9b3;
	--bst-pad: #f9c8a4;
	--bst-blush: #f2736b;
	--bst-line: #33231a;
	--bst-nose: #33231a;
	--bst-mouth: #7a3a34;
	--bst-tongue: #f2867e;
	--bst-tear: #7cc4f5;
	--bst-glow: #f4630e;
	--bst-accent: #1b6ef3;
	--bst-shield: #12a150;
	--bst-collar: #33231a;
	--bst-collar-tag: #f4630e;
	--bst-metal: #b9c2d0;
	--bst-flame1: #f97316;
	--bst-flame2: #fde047;

	position: relative;
	display: block;
	width: var(--bst-size, 180px);
	max-width: 100%;
	perspective: 900px;
	perspective-origin: 50% 45%;
	flex: none;
}

.boostie--xs { --bst-size: 64px; }
.boostie--sm { --bst-size: 110px; }
.boostie--md { --bst-size: 180px; }
.boostie--lg { --bst-size: 260px; }
.boostie--xl { --bst-size: 360px; }

.boostie__scene {
	position: relative;
	aspect-ratio: 200 / 210;
	transform-style: preserve-3d;
	transform: rotateX(var(--bst-rx, 0deg)) rotateY(var(--bst-ry, 0deg));
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}

.boostie.is-tracking .boostie__scene { transition: transform .12s linear; }

.boostie__layer {
	position: absolute;
	inset: 0;
	transform: translateZ(var(--bst-z, 0px));
	transform-style: preserve-3d;
}

.boostie__layer svg { display: block; width: 100%; height: 100%; overflow: visible; }

.boostie__layer--back { --bst-z: -26px; }
.boostie__layer--body { --bst-z: 0px; }
.boostie__layer--head { --bst-z: 20px; }
.boostie__layer--face { --bst-z: 30px; }
.boostie__layer--prop { --bst-z: 46px; }

/*
 * Hale kutusunun yanlardan taşması sayfayı yatay kaydırabiliyordu: maskot
 * sağ kenara yakın durduğunda (arşiv başlığı, 404) %12'lik pay kapsayıcıyı
 * aşıyor, telefonda gövde 14-31 px kayıyordu. Işıma yarıçapı zaten kutunun
 * çok içinde bittiği için yanlardaki pay kaldırıldı; görünürde fark yok.
 */
.boostie__aura {
	position: absolute;
	inset: -18% 0 -6%;
	background: radial-gradient(48% 42% at 50% 45%, color-mix(in srgb, var(--bst-glow) 16%, transparent), transparent 72%);
	filter: blur(20px);
	transform: translateZ(-60px);
	pointer-events: none;
}

.boostie__ring {
	position: absolute;
	inset: auto 8% 2%;
	height: 22%;
	transform: translateZ(-10px) rotateX(74deg);
	transform-style: preserve-3d;
	pointer-events: none;
}

.boostie__ring span {
	position: absolute;
	inset: 0;
	border: 2px solid color-mix(in srgb, var(--bst-glow) 55%, transparent);
	border-radius: 50%;
	animation: bst-pulse 3.2s ease-out infinite;
}

.boostie__ring span:last-child { animation-delay: 1.6s; }

.boostie__shadow {
	position: absolute;
	inset: auto 22% 0;
	height: 8%;
	background: radial-gradient(closest-side, rgba(43, 29, 19, .22), transparent);
	filter: blur(6px);
	transform: translateZ(-24px);
}

/* ---------- motion ---------- */

.boostie.is-floating .boostie__layer--body,
.boostie.is-floating .boostie__layer--head,
.boostie.is-floating .boostie__layer--face,
.boostie.is-floating .boostie__layer--prop,
.boostie.is-floating .boostie__layer--back {
	animation: bst-float 4.5s ease-in-out infinite;
}

.boostie.is-floating .boostie__layer--head,
.boostie.is-floating .boostie__layer--face { animation-delay: -.15s; }
.boostie.is-floating .boostie__layer--prop { animation-delay: -.25s; }

@keyframes bst-float {
	0%, 100% { transform: translateZ(var(--bst-z, 0px)) translateY(0); }
	50% { transform: translateZ(var(--bst-z, 0px)) translateY(-4.5%); }
}

@keyframes bst-pulse {
	0% { transform: scale(.55); opacity: .85; }
	100% { transform: scale(1.25); opacity: 0; }
}

.bst-ear { transform-origin: 50% 60%; animation: bst-ear 5s ease-in-out infinite; }
.bst-ear--r { animation-delay: -2.4s; }

@keyframes bst-ear {
	0%, 88%, 100% { transform: rotate(0deg); }
	92% { transform: rotate(-7deg); }
	96% { transform: rotate(5deg); }
}

.bst-arm--wave { transform-origin: 148px 140px; animation: bst-wave 2.4s ease-in-out infinite; }

@keyframes bst-wave {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(22deg); }
}

/* Blinking is a fur-coloured lid sliding down over the eye — animating the SVG
   `height` attribute only worked in some engines. */
.bst-lid {
	transform-origin: 50% 26%;
	transform: scaleY(0);
	animation: bst-blink 6.4s ease-in-out infinite;
}

@keyframes bst-blink {
	0%, 90%, 100% { transform: scaleY(0); }
	93%, 95% { transform: scaleY(1); }
}

/* Ears, blush and the collar tag all react to a hover on the character. */
.boostie:hover .bst-blush { opacity: .72; }
.bst-blush { transition: opacity .3s ease; }

.bst-collar { transform-origin: 100px 126px; }
.boostie:hover .bst-collar { animation: bst-tag .6s ease; }

@keyframes bst-tag {
	0%, 100% { transform: rotate(0deg); }
	30% { transform: rotate(-4deg); }
	65% { transform: rotate(3deg); }
}

.bst-trend {
	stroke-dasharray: 78;
	stroke-dashoffset: 78;
	animation: bst-draw 2.8s ease-in-out infinite;
}

@keyframes bst-draw {
	0% { stroke-dashoffset: 78; }
	40%, 70% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 78; }
}

.bst-wave-ring { transform-origin: 148px 89px; animation: bst-ring 2.4s ease-in-out infinite; }

@keyframes bst-ring {
	0%, 100% { opacity: .35; transform: scale(.94); }
	50% { opacity: 1; transform: scale(1); }
}

.bst-spark { transform-origin: center; animation: bst-spark 2.6s ease-in-out infinite; }
.bst-spark--2 { animation-delay: -.9s; }
.bst-spark--3 { animation-delay: -1.7s; }

@keyframes bst-spark {
	0%, 100% { opacity: .25; transform: scale(.7); }
	50% { opacity: 1; transform: scale(1.15); }
}

.bst-flame { transform-origin: 100px 186px; animation: bst-flame .22s steps(2, end) infinite alternate; }

@keyframes bst-flame {
	from { transform: scaleY(.86) scaleX(1.04); }
	to { transform: scaleY(1.12) scaleX(.94); }
}

.boostie--rocket.is-floating .boostie__layer { animation-duration: 1.9s; }

.bst-dot { animation: bst-dot 1.4s ease-in-out infinite; }
.bst-dot--2 { animation-delay: .18s; }
.bst-dot--3 { animation-delay: .36s; }

@keyframes bst-dot {
	0%, 100% { opacity: .3; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-4px); }
}

.bst-z { animation: bst-z 3s ease-in-out infinite; transform-origin: center; }
.bst-z--2 { animation-delay: -1.4s; }

@keyframes bst-z {
	0% { opacity: 0; transform: translate(0, 6px) scale(.7); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translate(10px, -22px) scale(1.1); }
}

.bst-tear { animation: bst-tear 2.8s ease-in infinite; }

@keyframes bst-tear {
	0% { opacity: 0; transform: translateY(0); }
	25% { opacity: .9; }
	100% { opacity: 0; transform: translateY(26px); }
}

.bst-pupil { transform: translate(var(--bst-px, 0px), var(--bst-py, 0px)); transition: transform .18s ease-out; }

/* Below thumbnail size the fine detail turns to mush, so it is dropped. */
.boostie--xs .bst-detail { display: none; }

/* Light theme keeps the bear readable on white backgrounds. */
[data-theme="dark"] .boostie {
	--bst-metal: #8b93a3;
	--bst-belly: #fbe4cd;
	--bst-belly-light: #fff5ea;
	--bst-collar: #241812;
}

@media (prefers-reduced-motion: reduce) {
	.boostie *,
	.boostie__scene { animation: none !important; transition: none !important; }
	.boostie__scene { transform: none !important; }
}