/* Hanging lanterns. Color from --aura; flame style per html[data-aura]. */
.lantern-rig { position: fixed; inset: 0 0 auto 0; z-index: 60; pointer-events: none; height: 0; }

.lantern {
	--core: var(--aura);
	position: fixed;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 0;
	animation: lantern-sway 7s ease-in-out infinite;
}
.lantern--left  { left: max(10px, calc(50vw - 700px)); }
.lantern--right { right: max(10px, calc(50vw - 700px)); animation-delay: -3.5s; animation-duration: 8s; }

.lantern::after {
	content: "";
	position: absolute;
	top: 70px;
	left: 50%;
	width: 220px;
	height: 220px;
	translate: -50% 0;
	background: radial-gradient(circle, color-mix(in srgb, var(--core) 30%, transparent), transparent 65%);
	pointer-events: none;
	animation: halo-breathe 4s ease-in-out infinite;
}

.lantern__chain {
	width: 3px;
	height: 58px;
	background: repeating-linear-gradient(to bottom, var(--copper) 0 6px, #3a220e 6px 7px, transparent 7px 9px);
	border-radius: 2px;
}
.lantern__cap {
	width: 34px;
	height: 12px;
	background: linear-gradient(to bottom, #c58a4a, var(--bronze));
	clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.lantern__glass {
	position: relative;
	width: 32px;
	height: 44px;
	border: 2px solid var(--copper);
	border-radius: 5px 5px 9px 9px;
	background:
		radial-gradient(circle at 50% 62%,
			color-mix(in srgb, var(--core) 70%, #fff) 0,
			var(--core) 22%,
			color-mix(in srgb, var(--aura-deep) 85%, transparent) 75%);
	box-shadow:
		0 0 22px 6px color-mix(in srgb, var(--core) 45%, transparent),
		inset 0 0 10px rgba(0, 0, 0, .55);
	overflow: hidden;
}
/* Frame bars */
.lantern__glass::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0 calc(50% - 1px), var(--copper) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
	opacity: .75;
	z-index: 2;
}
.lantern__flame {
	position: absolute;
	left: 50%;
	bottom: 9px;
	width: 10px;
	height: 17px;
	translate: -50% 0;
	border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
	background: radial-gradient(circle at 50% 70%, #fff 0, var(--aura-2) 35%, var(--core) 75%);
	filter: blur(.4px);
	transform-origin: 50% 100%;
	animation: flame-flicker 1.8s ease-in-out infinite;
}
.lantern__base {
	width: 26px;
	height: 7px;
	background: linear-gradient(to bottom, var(--bronze), #3a220e);
	border-radius: 0 0 6px 6px;
}

@keyframes lantern-sway { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } }
@keyframes halo-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes flame-flicker {
	0%, 100% { transform: scale(1, 1) skewX(0); }
	25% { transform: scale(.92, 1.08) skewX(3deg); }
	50% { transform: scale(1.05, .94) skewX(-2deg); }
	75% { transform: scale(.96, 1.04) skewX(2deg); }
}

/* Veyra: frost crystal, slow cold breathing */
html[data-aura="veyra"] .lantern__flame {
	width: 12px; height: 12px; bottom: 14px;
	border-radius: 2px;
	rotate: 45deg;
	background: radial-gradient(circle, #fff 0, var(--aura-2) 40%, var(--core) 80%);
	animation: frost-breathe 4.5s ease-in-out infinite;
}
html[data-aura="veyra"] .lantern__glass { border-radius: 3px; }
@keyframes frost-breathe { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }

/* Elara: violet arc, crackling */
html[data-aura="elara"] .lantern__flame {
	width: 12px; height: 22px; bottom: 7px;
	border-radius: 0;
	clip-path: polygon(55% 0, 20% 55%, 48% 55%, 30% 100%, 82% 40%, 54% 40%);
	background: linear-gradient(#fff, var(--aura-2) 40%, var(--core));
	filter: drop-shadow(0 0 3px var(--core));
	animation: arc-crackle 1.3s steps(1) infinite;
}
@keyframes arc-crackle {
	0% { opacity: 1; transform: scaleX(1); }
	12% { opacity: .35; }
	18% { opacity: 1; transform: scaleX(-1); }
	46% { opacity: .6; }
	52% { opacity: 1; transform: scaleX(1); }
	80% { opacity: .2; }
	84% { opacity: 1; }
}

/* Thorvald: steady forge glow, almost no flicker */
html[data-aura="thorvald"] .lantern__flame { animation-duration: 4s; width: 12px; }
html[data-aura="thorvald"] .lantern { animation-duration: 10s; }

/* Mara: core breathes red to blue */
html[data-aura="mara"] .lantern { animation: lantern-sway 9s ease-in-out infinite, mara-shift 6s ease-in-out infinite; }
html[data-aura="mara"] .lantern--right { animation-delay: -4.5s, -3s; }
@property --core { syntax: '<color>'; inherits: true; initial-value: #ff9a5a; }
@keyframes mara-shift { 0%, 100% { --core: var(--aura-2); } 50% { --core: var(--aura-3); } }

@media (max-width: 820px) {
	.lantern { scale: .72; }
	.lantern--left { left: 4px; }
	.lantern--right { right: 4px; }
	.lantern::after { width: 140px; height: 140px; }
}
@media (max-width: 520px) { .lantern-rig { display: none; } }

@media (prefers-reduced-motion: reduce) {
	.lantern, .lantern__flame, .lantern::after { animation: none !important; }
}