/**
 * Hero stage — paper/ink scene, Lottie convoy, keyword.
 * Scoped to .leo-hero-stage; colours follow the theme's data-theme attribute.
 */

.leo-hero-stage {
	--leo-hero-ink: #1C1917;
	--leo-hero-red: #D80629;
	--leo-hero-paper: #FCFBF9;
	--leo-hero-bg: radial-gradient(circle at 50% 36%, #FFFFFF 0%, #FAFAF9 55%, #F3F1ED 100%);
	--leo-hero-paper-fill: var(--leo-hero-paper-fill-light);
	--leo-hero-border: rgba(28, 25, 23, .14);
	--leo-hero-shadow: 0 24px 70px rgba(28, 25, 23, .12);

	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--leo-hero-border);
	border-radius: 22px;
	background: var(--leo-hero-bg);
	box-shadow: var(--leo-hero-shadow);
	isolation: isolate;
}

html[data-theme="dark"] .leo-hero-stage {
	--leo-hero-ink: #FAFAF9;
	--leo-hero-red: #FF5C70;
	--leo-hero-paper: #141210;
	--leo-hero-bg: radial-gradient(circle at 50% 36%, #1C1917 0%, #141210 55%, #0C0A09 100%);
	--leo-hero-paper-fill: var(--leo-hero-paper-fill-dark);
	--leo-hero-border: rgba(250, 250, 249, .16);
	--leo-hero-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.leo-hero-stage__layer {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.leo-hero-stage__base {
	z-index: 1;
}

.leo-hero-stage__lottie {
	z-index: 2;
	pointer-events: none;
}

.leo-hero-stage__lottie svg {
	display: block;
	width: 100%;
	height: 100%;
}

.leo-hero-stage__cloud {
	z-index: 3;
	pointer-events: none;
}

.leo-hero-stage__cloud path {
	fill: var(--leo-hero-paper);
	stroke: var(--leo-hero-ink);
	stroke-opacity: .32;
}

.leo-hero-stage__keyword {
	z-index: 4;
	pointer-events: none;
}

.leo-hero-stage__word {
	fill: var(--leo-hero-ink);
	font-family: "iCielSignatrust", "Segoe Script", cursive;
	font-size: 100px;
	opacity: 0;
}

.leo-hero-stage__rule {
	stroke: var(--leo-hero-red);
	stroke-width: 1.6px;
	opacity: 0;
}

.leo-hero-stage .far {
	opacity: .78;
}

.leo-hero-stage .back-crane {
	opacity: .42;
}

.leo-hero-stage .sun-base {
	opacity: .32;
}

.leo-hero-stage .far,
.leo-hero-stage .back-crane,
.leo-hero-stage .tree,
.leo-hero-stage .sun-base,
.leo-hero-stage .night-sky {
	stroke: var(--leo-hero-ink);
}

.leo-hero-stage .tree-crown {
	fill: var(--leo-hero-paper-fill);
}

.leo-hero-stage .stage-lamp {
	fill: var(--leo-hero-red);
	stroke: none;
}

.leo-hero-stage .night-sky {
	display: none;
}

html[data-theme="dark"] .leo-hero-stage .night-sky {
	display: block;
}

html[data-theme="dark"] .leo-hero-stage .sun-base,
html[data-theme="dark"] .leo-hero-stage__cloud {
	display: none;
}

@keyframes leoHeroStarTwinkle {
	0%, 100% { opacity: .32; }
	50% { opacity: .86; }
}

html[data-theme="dark"] .leo-hero-stage .night-sky .star {
	animation: leoHeroStarTwinkle 7s ease-in-out infinite;
}

html[data-theme="dark"] .leo-hero-stage .night-sky .star:nth-of-type(2) {
	animation-delay: -1.6s;
}

html[data-theme="dark"] .leo-hero-stage .night-sky .star:nth-of-type(3) {
	animation-delay: -3.2s;
}

html[data-theme="dark"] .leo-hero-stage .night-sky .star:nth-of-type(4) {
	animation-delay: -4.1s;
}

html[data-theme="dark"] .leo-hero-stage .night-sky .star:nth-of-type(5) {
	animation-delay: -.9s;
}

@keyframes leoHeroTreeSway {
	0%, 100% { transform: rotate(-2.6deg); }
	50% { transform: rotate(2.6deg); }
}

@keyframes leoHeroSmokeDrift {
	0%, 100% { transform: translate(0, 0); opacity: .18; }
	50% { transform: translate(2px, -16px); opacity: .58; }
}

@keyframes leoHeroHookLift {
	0%, 100% { transform: scaleY(.82); }
	50% { transform: scaleY(1.18); }
}

.leo-hero-stage .tree {
	transform-box: view-box;
	transform-origin: 56px 800px;
	animation: leoHeroTreeSway 8s ease-in-out infinite;
}

.leo-hero-stage .smoke {
	transform-box: view-box;
	transform-origin: 249px 430px;
	animation: leoHeroSmokeDrift 6s ease-in-out infinite;
}

.leo-hero-stage .crane-hook {
	transform-box: view-box;
	transform-origin: 426px 390px;
	animation: leoHeroHookLift 9s ease-in-out infinite;
}

.leo-hero-stage__poster {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leo-hero-stage.is-static .leo-hero-stage__poster {
	display: block;
}

.leo-hero-stage.is-static .leo-hero-stage__base,
.leo-hero-stage.is-static .leo-hero-stage__lottie,
.leo-hero-stage.is-static .leo-hero-stage__cloud,
.leo-hero-stage.is-static .leo-hero-stage__keyword {
	display: none;
}

@media (max-width: 700px) {
	.leo-hero-stage {
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.leo-hero-stage .tree,
	.leo-hero-stage .smoke,
	.leo-hero-stage .crane-hook,
	.leo-hero-stage .night-sky .star {
		animation: none;
	}
}