/**
 * Ambient falling layer — behind site content, pointer-events none.
 *
 * @package Star_Trail_Effect
 */

.ste-ambient-root {
	--ste-ambient-color: #cfe8c8;
	--ste-ambient-opacity: 0.42;
	pointer-events: none;
	overflow: hidden;
}

.ste-ambient-root--fixed {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Above typical theme wrappers / section backgrounds; below cursor trail stars (9999). */
	z-index: 9990;
}

.ste-ambient-root--nested {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* Shared item base */
.ste-ambient-item {
	position: absolute;
	display: block;
	opacity: var(--ste-ambient-opacity, 0.42);
	will-change: transform, opacity;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Falling: top → bottom */
.ste-ambient-root--dir-down .ste-ambient-item {
	top: -12%;
	animation-name: ste-ambient-fall;
}

@keyframes ste-ambient-fall {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		opacity: 0;
	}
	8% {
		opacity: var(--ste-ambient-opacity, 0.42);
	}
	92% {
		opacity: var(--ste-ambient-opacity, 0.42);
	}
	100% {
		transform: translate3d(var(--ste-drift, 40px), 120vh, 0) rotate(var(--ste-spin, 180deg));
		opacity: 0;
	}
}

/* Flying: bottom → top */
.ste-ambient-root--dir-up .ste-ambient-item {
	top: auto;
	bottom: -12%;
	animation-name: ste-ambient-rise;
}

@keyframes ste-ambient-rise {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		opacity: 0;
	}
	8% {
		opacity: var(--ste-ambient-opacity, 0.42);
	}
	92% {
		opacity: var(--ste-ambient-opacity, 0.42);
	}
	100% {
		transform: translate3d(var(--ste-drift, 40px), -120vh, 0) rotate(var(--ste-spin, 180deg));
		opacity: 0;
	}
}

/* Leaf — soft elliptical petal */
.ste-ambient-item--leaf {
	width: 14px;
	height: 22px;
	margin-left: -7px;
	background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%),
		linear-gradient(135deg, var(--ste-ambient-color, #cfe8c8), rgba(255, 255, 255, 0.15));
	border-radius: 50% 12% 50% 12%;
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.06);
	filter: blur(0.2px);
}

/* Ribbon — slim ribbon strip */
.ste-ambient-item--ribbon {
	width: 4px;
	height: 28px;
	margin-left: -2px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.55),
		var(--ste-ambient-color, #cfe8c8) 40%,
		var(--ste-ambient-color, #cfe8c8) 60%,
		rgba(0, 0, 0, 0.08)
	);
	border-radius: 2px;
	transform-origin: 50% 20%;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.08);
}

/* Paper — folded note */
.ste-ambient-item--paper {
	width: 16px;
	height: 20px;
	margin-left: -8px;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.75) 0%, var(--ste-ambient-color, #cfe8c8) 45%, rgba(0, 0, 0, 0.04) 100%);
	clip-path: polygon(0 0, 100% 8%, 92% 100%, 8% 92%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Snow — soft flake */
.ste-ambient-item--snow {
	width: 8px;
	height: 8px;
	margin-left: -4px;
	background: radial-gradient(circle at 35% 35%, #fff, var(--ste-ambient-color, #e8f4ff));
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
	filter: blur(0.35px);
}

/* Logo — image on top of palette swatch (see JS: ste-ambient-item--logo-backed) */
.ste-ambient-item--logo {
	width: 26px;
	height: 26px;
	margin-left: -13px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.ste-ambient-item--logo.ste-ambient-item--logo-backed {
	box-sizing: border-box;
	padding: 4px;
	border-radius: 10px;
	background-size: 72% 72%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 2px 6px rgba(0, 0, 0, 0.12);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}