/*
 * THE SITE'S COPY of the studio's animated TS logo (16 October 2026), the same movement as the games' loading
 * screens: Twisted_Soul\Game_Builds\_Studio\starter\game\public\studio_logo\studio-logo.css, its loader's page
 * background left out. Its pictures are in ts/ (copied from Twisted_Soul\Art\Game\_Studio\ts_logo_2026-10-16\web).
 * The old crescent logo's stylesheet is kept in art-source/studio_logo_layers/studio-logo-banshee-era.css.
 */
/* the logo's box, 3 by 2: 880 px wide at most; on the phone (425 x 812) 365 px; at 400 x 225, 304 px wide and 203 tall */
.tss-logo {
	position: relative;
	width: min(86vw, 135vh, 880px);
	aspect-ratio: 3 / 2;
	container-type: inline-size;
	user-select: none;
}

.tss-logo img,
.tss-logo__hold,
.tss-logo__rise,
.tss-logo__float {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---- the name: settles in, then stands ---------------------------------------- */
.tss-logo__word {
	z-index: 3;
	animation: tss-word-in 500ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
}
@keyframes tss-word-in {
	from { opacity: 0; transform: translateY(1.2cqw) scale(0.97); }
}

/* ---- STUDIOS: opens from its centre outward (its centre is 50.26% of the box's width) ---- */
.tss-logo__studios {
	z-index: 4;
	animation: tss-studios-in 700ms cubic-bezier(0.23, 1, 0.32, 1) 550ms backwards;
}
@keyframes tss-studios-in {
	from { opacity: 0; clip-path: inset(0 49.7% 0 50.3%); }
	30% { opacity: 1; }
	to { clip-path: inset(0 0 0 0); }
}

/* ---- the mark: rises from behind the name, then breathes ----------------------- */
/* three boxes: the hold never moves and cuts at the name's top line (71% of the box's height), so the mark rises out
   from behind the name and is never seen under it; the rise moves once; the float moves for ever. No two of them fight
   over one transform. */
.tss-logo__hold {
	z-index: 2;
	clip-path: inset(0 0 29% 0);
}
.tss-logo__rise {
	animation: tss-rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) 150ms backwards;
}
@keyframes tss-rise {
	from { opacity: 0; transform: translateY(16cqw); }
	55% { opacity: 1; }
}
.tss-logo__float {
	animation: tss-float 4600ms cubic-bezier(0.45, 0, 0.55, 1) 1150ms infinite;
}
@keyframes tss-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-1.1cqw); }
}

/* ---- the aura: comes up after the mark, then swells and settles -------------- */
.tss-logo__aura {
	z-index: 0;
	opacity: 0.8;
	transform-origin: 50% 36%;
	animation: tss-aura-in 1200ms ease-out 450ms backwards, tss-aura 5200ms cubic-bezier(0.45, 0, 0.55, 1) 1650ms infinite;
}
@keyframes tss-aura-in {
	from { opacity: 0; transform: translateY(8cqw) scale(0.94); }
}
@keyframes tss-aura {
	0%, 100% { opacity: 0.8; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.035); }
}

/* ---- the shimmer: a band of light inside the mark's shape, then the name's (each its own picture as its mask, so
   nothing outside them is lit; the owner, 12 October 2026: "add a shimmer to our logo on the loading screen") ---- */
.tss-logo__float::after,
.tss-logo::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 43%, rgba(255, 244, 230, 0.5) 50%, rgba(255, 255, 255, 0) 57%) no-repeat;
	background-size: 260% 100%;
	background-position: 130% 0;
	mix-blend-mode: screen;
	animation: tss-logo-shimmer 3400ms cubic-bezier(0.4, 0, 0.2, 1) 1200ms infinite;
}
.tss-logo__float::after {
	-webkit-mask: url('ts/ts_mark.webp') center / 100% 100% no-repeat;
	mask: url('ts/ts_mark.webp') center / 100% 100% no-repeat;
}
.tss-logo::after {
	z-index: 5;
	-webkit-mask: url('ts/ts_word.webp') center / 100% 100% no-repeat;
	mask: url('ts/ts_word.webp') center / 100% 100% no-repeat;
	animation-delay: 1500ms;
}
@keyframes tss-logo-shimmer {
	0% { background-position: 130% 0; }
	38%, 100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tss-logo__float::after,
	.tss-logo::after { animation: none; opacity: 0; }
}