/* ==========================================================================
   Aurora Borealis Feature — Custom Night Sky Theme & Dynamic Aurora Styles
   ========================================================================== */

@keyframes auroraTextShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes auroraGlowPulse {
	0%, 100% {
		box-shadow: 0 0 22px rgba(74, 222, 128, 0.25), inset 0 0 12px rgba(168, 85, 247, 0.2);
		border-color: rgba(74, 222, 128, 0.45);
	}
	50% {
		box-shadow: 0 0 32px rgba(168, 85, 247, 0.35), inset 0 0 16px rgba(56, 189, 248, 0.25);
		border-color: rgba(192, 132, 252, 0.55);
	}
}

@keyframes auroraDividerShift {
	0%, 100% {
		opacity: 0.55;
		filter: hue-rotate(0deg);
	}
	50% {
		opacity: 0.9;
		filter: hue-rotate(35deg);
	}
}

:root {
	/* Archivo Variable Font Width Controls (wdth range: 62 to 125) */
	--aurora-title-wdth: 66;
	--aurora-span-wdth: 118;
	--aurora-h3-wdth: 108;
	--aurora-h4-wdth: 122;
	--aurora-quote-wdth: 84;

	--aurora-green: #4ade80;
	--aurora-emerald: #10b981;
	--aurora-cyan: #38bdf8;
	--aurora-violet: #a855f7;
	--aurora-magenta: #c084fc;
	--night-bg: #060913;
	--night-surface: #0b1021;
	--night-text: #dce4f0;
	--night-muted: #8b9bb4;
	--mouse-x: 50%;
	--mouse-y: 25%;
	--scroll-hue: 0deg;
}

/* Base Night Sky Theme */
html,
body {
	background-color: #060913;
	color: #dce4f0;
}

body {
	background-image:
		radial-gradient(ellipse 80% 50% at var(--mouse-x, 50%) var(--mouse-y, 20%), rgba(52, 211, 153, 0.07) 0%, rgba(168, 85, 247, 0.04) 45%, transparent 75%),
		radial-gradient(ellipse 90% 60% at 20% 10%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 80% 60% at 85% 35%, rgba(139, 92, 246, 0.07) 0%, transparent 65%),
		linear-gradient(180deg, #05070f 0%, #080d1a 45%, #060913 100%);
	background-attachment: fixed;
	position: relative;
	overflow-x: hidden;
}

/* Ambient Background Aurora Ribbon (scroll & cursor reactive) */
.aurora-ambient-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	opacity: 0.65;
	filter: hue-rotate(var(--scroll-hue, 0deg));
	transition: opacity 0.5s ease;
}

.aurora-ambient-bg::before,
.aurora-ambient-bg::after {
	content: "";
	position: absolute;
	width: 140%;
	height: 55vh;
	left: -20%;
	border-radius: 50%;
	filter: blur(75px);
	pointer-events: none;
}

.aurora-ambient-bg::before {
	top: -22vh;
	background: linear-gradient(95deg, rgba(16, 185, 129, 0.14) 10%, rgba(74, 222, 128, 0.22) 45%, rgba(56, 189, 248, 0.14) 70%, rgba(168, 85, 247, 0.18) 90%);
	transform: translate3d(calc((var(--cursor-offset-x, 0) * 25px)), calc((var(--cursor-offset-y, 0) * 15px)), 0) rotate(-3deg);
	transition: transform 0.25s ease-out;
}

.aurora-ambient-bg::after {
	bottom: -28vh;
	background: linear-gradient(85deg, rgba(168, 85, 247, 0.12) 15%, rgba(52, 211, 153, 0.14) 55%, rgba(56, 189, 248, 0.1) 85%);
	transform: translate3d(calc((var(--cursor-offset-x, 0) * -20px)), 0, 0) rotate(2deg);
	transition: transform 0.35s ease-out;
}

.wrapper,
.header-main,
.footer-main {
	position: relative;
	z-index: 1;
}

/* Header & Navigation — Night Mode */
.header-main {
	background-color: rgba(6, 9, 19, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(74, 222, 128, 0.16), 0 4px 20px rgba(0, 0, 0, 0.4);
}

.logo a .shield {
	fill: #e2e8f0;
	transition: fill 0.3s ease, filter 0.3s ease;
}

.logo a:hover .shield {
	fill: #4ade80;
	filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.65));
}

.nav-main a {
	color: #cbd5e1;
	transition: color 0.25s ease, background-color 0.25s ease;
}

.nav-main li.active a {
	color: #4ade80;
}

nav ul li a:hover {
	background-color: rgba(74, 222, 128, 0.08);
	color: #4ade80;
}

/* Links & Interactive Accents */
a {
	border-color: rgba(74, 222, 128, 0.5);
	color: #4ade80;
	transition: color 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}

a:hover,
.nav-page a:hover p,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
	border-color: #86efac;
	color: #86efac;
	text-shadow: 0 0 14px rgba(74, 222, 128, 0.45);
}

/* Hero Cover & Dynamic Aurora Overlay */
.feature-cover {
	position: relative;
	overflow: hidden;
	background-color: #04060e;
}

.feature-cover .cover-image {
	position: relative;
	overflow: hidden;
	background-color: #05070f;
}

.feature-cover .cover-image img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
}

.feature-cover .cover-image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 38%;
	background: linear-gradient(to bottom, rgba(6, 9, 19, 0) 0%, rgba(6, 9, 19, 0.65) 65%, #060913 100%);
	z-index: 3;
	pointer-events: none;
}

.aurora-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.92;
	transition: opacity 0.6s ease;
}

body.aurora-off .aurora-canvas,
body.aurora-off .aurora-ambient-bg {
	opacity: 0 !important;
}

.feature-cover .container {
	z-index: 4;
}

/* Interactive Aurora Control Pill */
.aurora-controls {
	position: absolute;
	right: 5%;
	bottom: 1.25em;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.aurora-toggle-btn {
	background: rgba(9, 14, 28, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(74, 222, 128, 0.35);
	border-radius: 999px;
	color: #e2e8f0;
	font-family: 'Archivo', sans-serif;
	font-variation-settings: "wdth" 105;
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.45em 0.95em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 15px rgba(74, 222, 128, 0.15);
	transition: all 0.25s ease;
}

.aurora-toggle-btn:hover {
	border-color: rgba(74, 222, 128, 0.8);
	color: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 22px rgba(74, 222, 128, 0.35);
	transform: translateY(-1px);
}

.aurora-toggle-btn .aurora-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 8px #4ade80;
	display: inline-block;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

body.aurora-storm .aurora-toggle-btn .aurora-dot {
	background: #c084fc;
	box-shadow: 0 0 10px #c084fc, 0 0 18px #4ade80;
}

body.aurora-off .aurora-toggle-btn .aurora-dot {
	background: #64748b;
	box-shadow: none;
}

/* Typography & Ambient Aurora Glows */
.entry-title h1 {
	color: #ffffff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

.entry-title p {
	color: #94a3b8;
}

.entry-intro {
	border-bottom-color: rgba(74, 222, 128, 0.2);
}

.entry-intro p {
	color: #cbd5e1;
}

.entry-content p,
.entry-content li {
	color: #dce4f0;
}

.entry-content h3 {
	color: #f8fafc;
	font-variation-settings: "wdth" var(--aurora-h3-wdth, 108);
	text-shadow: 0 0 24px rgba(74, 222, 128, 0.22);
	letter-spacing: 0.01em;
}

.entry-content h4 {
	color: #86efac;
	font-variation-settings: "wdth" var(--aurora-h4-wdth, 122);
	letter-spacing: 0.12em;
	text-shadow: 0 0 18px rgba(74, 222, 128, 0.3);
}

/* Opening Paragraph & Glowing Drop Cap */
.features .entry-content > p:first-child:first-line {
	color: #ffffff;
}

.features .entry-content p .drop {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(15, 23, 42, 0.92) 55%, rgba(168, 85, 247, 0.25) 100%);
	color: #4ade80;
	font-variation-settings: "wdth" 80;
	border: 1px solid rgba(74, 222, 128, 0.45);
	border-radius: 2px;
	text-shadow: 0 0 18px rgba(74, 222, 128, 0.55);
	animation: auroraGlowPulse 8s ease-in-out infinite;
}

/* Pull Quotes with Ambient Color-Shifting Aurora Gradient */
.pull-quote p {
	color: #4ade80;
	font-variation-settings: "wdth" var(--aurora-quote-wdth, 84);
	background: linear-gradient(
		110deg,
		#4ade80 0%,
		#34d399 25%,
		#38bdf8 50%,
		#c084fc 75%,
		#4ade80 100%
	);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: auroraTextShift 10s ease-in-out infinite;
	filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.16));
}

blockquote {
	border-left-color: rgba(74, 222, 128, 0.45);
}

blockquote p {
	color: #cbd5e1;
}

/* Figures & Captions in Night Sky Theme */
.entry-content figure img {
	border-radius: 2px;
	box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.7), 0 0 1px rgba(148, 163, 184, 0.2);
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.entry-content figure:hover img {
	box-shadow: 0 14px 40px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(74, 222, 128, 0.18), 0 0 45px rgba(168, 85, 247, 0.12);
}

figcaption {
	color: #94a3b8;
}

.overlay figcaption p {
	background-color: rgba(6, 9, 19, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-top: 1px solid rgba(74, 222, 128, 0.2);
	color: rgba(241, 245, 249, 0.92);
}

/* Glowing Section Divider */
hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.5) 30%, rgba(192, 132, 252, 0.5) 70%, transparent 100%);
	animation: auroraDividerShift 7s ease-in-out infinite;
}

/* Field Notes / Camera Settings Callout Card */
.aurora-field-notes {
	background: linear-gradient(145deg, rgba(15, 23, 42, 0.75) 0%, rgba(11, 16, 33, 0.9) 100%);
	border: 1px solid rgba(74, 222, 128, 0.25);
	border-radius: 4px;
	padding: 1.5em 1.75em;
	margin: 2em 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.aurora-field-notes h4 {
	margin-top: 0;
	margin-bottom: 1em;
	text-align: left;
}

.aurora-field-notes ul {
	margin: 0;
}

.aurora-field-notes li {
	margin-bottom: 0.5em;
}

.aurora-field-notes li:last-child {
	margin-bottom: 0;
}

/* Footer Pager — Night Mode */
.footer-main {
	background-color: #05070f;
	box-shadow: 0 -1px 0 rgba(74, 222, 128, 0.16);
}

.nav-page li:first-child.nav-next {
	box-shadow: -1px 0 0 rgba(148, 163, 184, 0.12);
}

.nav-page li:first-child.nav-prev {
	box-shadow: 1px 0 0 rgba(148, 163, 184, 0.12);
}

.nav-page h5 {
	color: #64748b;
}

.nav-page a p {
	color: #e2e8f0;
	transition: color 0.25s ease;
}

.nav-page a:hover p {
	color: #4ade80;
}

/* Desktop Editorial Header Layout (matching Nürburgring scale) */
@media screen and (min-width: 37em) {
	.feature-cover .entry-title h1 {
		font-size: 10.2vw;
		font-weight: 900;
		font-stretch: 66%;
		font-variation-settings: "wdth" var(--aurora-title-wdth, 66);
		text-transform: uppercase;
		width: 100%;
		letter-spacing: -0.01em;
		transition: font-variation-settings 0.5s ease;
	}

	.feature-cover .entry-title h1:hover {
		font-variation-settings: "wdth" 74;
	}

	.feature-cover .entry-title h1 a {
		background: linear-gradient(
			115deg,
			#ffffff 0%,
			#d1fae5 25%,
			#6ee7b7 48%,
			#e9d5ff 75%,
			#ffffff 100%
		);
		background-size: 220% auto;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: auroraTextShift 12s ease-in-out infinite;
		display: inline-block;
	}

	.feature-cover .entry-title h1 span {
		display: block;
		font-size: 0.42em;
		font-weight: 300;
		font-stretch: 118%;
		font-variation-settings: "wdth" var(--aurora-span-wdth, 118);
		line-height: 0.85em;
		text-transform: none;
		letter-spacing: 0.02em;
		-webkit-text-fill-color: #f8fafc;
		color: #f8fafc;
	}

	.feature-cover .entry-title p {
		color: rgba(226, 232, 240, 0.78);
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
	}

	.feature-cover .entry-intro p {
		color: rgba(241, 245, 249, 0.92);
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
	}
}