/* GENERAL RESET & FONT IMPORT */
@import url("https://fonts.googleapis.com/css2?family=Alegreya+SC:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Slab:wght@100..900&display=swap");

:root {
	--color-background: #1a1a1a;
	--color-foreground: #222;
	--color-text-main: #e0e0e0;
	--color-text-sub: #a0a0a0;
	--color-border: #444;
	--color-accent: #755476;
	--color-accent-bright: #9c7aa6;
	--color-accent-dark: #4c3e50;
	--color-accent-yellow: #e0d100;
	--color-error: #cc5555;
	--color-success: #55cc55;

	/* Card flip variables */
	--card-flip-duration: 0.8s;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--color-background);
	color: var(--color-text-main);
	font-family: "Roboto Slab", serif;
	font-size: 16px;
	line-height: 1.7;
}

/* Base Link Styling (for un-classed <a> tags) */
a {
	color: var(--color-text-main);
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px dotted var(--color-text-sub);
	transition: color 0.2s, border-bottom-color 0.2s;
}

a:hover {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* NAVIGATION BAR */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px 50px;
	background-color: rgba(26, 26, 26, 0.9);
	backdrop-filter: blur(5px);
	border-bottom: 1px solid #333;
	z-index: 1000;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}

.nav-logo {
	font-family: "Inter", sans-serif;
	font-weight: 900;
	font-size: 1.5em;
	text-decoration: none;
	color: var(--color-accent);
	letter-spacing: 1px;
	transition: color 0.3s ease;
}

.nav-logo:hover {
	color: var(--color-accent-bright);
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 40px;
}

.nav-links a {
	text-decoration: none;
	color: var(--color-text-sub);
	font-family: "Inter", sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 1px;
	transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--color-accent);
}

/* MAIN CONTENT */
main {
	padding: 100px 50px 50px 50px; /* Top padding for fixed header */
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

h1,
h2,
h3 {
	font-family: "Inter", sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
}

h1 {
	font-size: 3em;
	margin-bottom: 20px;
	text-align: center;
}

h2 {
	font-size: 2em;
	margin-top: 25px;
	margin-bottom: 30px;
	color: var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	padding-bottom: 15px;
}

h3 {
	color: var(--color-text-sub);
	font-size: 1.1em;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 10px;
}

.proclamation {
	font-size: 1.5em;
	font-style: italic;
	font-weight: 400;
	color: var(--color-text-sub);
	max-width: 700px;
	margin: 0 auto 40px auto;
	text-align: center;
}

/* Hero section for main index page */
.hero {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	background-image: url("boccioni.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: #ffffff;
}

.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1; /* This overlay is the source of the click issue */
}

/* [CORRECTION] This rule lifts ALL hero content above the dark overlay */
.hero h1,
.hero h2,
.hero .proclamation,
.hero .nexus-gate {
	position: relative;
	z-index: 2; /* Lifts content above the z-index: 1 overlay */
}

.hero h2 {
	font-family: "Roboto Slab", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.8em;
	color: #a0a0a0;
	margin-top: 5px;
	margin-bottom: 10px;
	border-bottom: none; /* Override general h2 border */
	padding-bottom: 0;
}

/* Subpage hero (for Nexus, Codex, Author, Trina Forma, Oracle) */
.hero-subpage {
	text-align: center;
	margin-bottom: 40px;
	padding-top: 20px;
}
.hero-subpage h1 {
	font-size: 3em;
	margin-bottom: 15px;
}
.hero-subpage .proclamation {
	margin-bottom: 0;
}

/* FOOTER (Common) */
footer {
	text-align: center;
	padding: 30px;
	margin-top: 50px;
	font-family: "Inter", sans-serif;
	font-size: 0.8em;
	color: #666;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-top: 1px solid #333;
}

/* Buttons (Common btn class) */
.btn {
	display: inline-block;
	padding: 15px 35px;
	font-family: "Inter", sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #1a1a1a; /* Dark text for default state */
	background-color: #e0e0e0; /* The desired light background */
	border: none;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	margin-top: 20px;
}

.btn:hover {
	background-color: #ffffff;
	color: #1a1a1a; /* Dark text on hover for visibility */
}

/* Nexus-gate specific layout */
.nexus-gate {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* NEXUS PAGE GRID STYLING */
.nexus-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.nexus-terminal {
	border: 1px solid var(--color-border);
	padding: 20px;
	background-color: var(--color-foreground);
	transition: background-color 0.2s, border-color 0.2s;
}

.nexus-terminal:hover {
	background-color: #2f2f2f;
	border-color: #888;
}

/* Specific styling for H3 and P within nexus-terminal to override global */
.nexus-terminal h3 {
	font-size: 1.4em;
	margin-bottom: 8px;
	border-bottom: none; /* Crucial override for nexus terminal H3 */
	padding-bottom: 0; /* Crucial override */
	color: #ffffff; /* Ensure headers are white */
}

.nexus-terminal p {
	color: var(--color-text-sub);
	font-size: 0.9em;
	margin-bottom: 15px;
}

.access-btn {
	font-family: "Inter", sans-serif;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-text-main); /* Default color for links */
	text-decoration: none;
	border-bottom: 1px dotted var(--color-text-sub);
	transition: color 0.2s, border-bottom-color 0.2s, background-color 0.2s,
		padding 0.2s, margin 0.2s;
	display: inline-block; /* Make it behave more like a block for padding/margin */
}
.access-btn:hover {
	color: #1a1a1a;
	background-color: var(--color-accent-bright);
	border-color: var(--color-accent-bright);
	padding: 2px 5px; /* Slight padding to make hover more visible */
	margin: -2px -5px; /* Adjust margin to counter padding */
}
.access-btn.not-available {
	color: #555;
	cursor: not-allowed;
	border-bottom-style: dashed;
	pointer-events: none; /* Prevent click events */
}
.access-btn.not-available:hover {
	background-color: transparent;
	color: #555;
	border-color: #555;
	padding: 0;
	margin: 0;
}

/* CODEX FABULARUM - EXPANDABLE STORY FRAGMENTS */
.story-wrapper {
	border-bottom: 1px solid #333;
}
.story-header {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 20px;
	padding: 15px;
	align-items: center;
	cursor: pointer;
	transition: background-color 0.2s;
}
.story-header:hover {
	background-color: #2a2a2a;
}
.story-fragment-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	padding: 0 15px;
	text-align: justify;
	color: #c0c0c0;
	border-left: 2px solid #555;
	margin-left: 0;
	font-family: "EB Garamond", serif;
	font-size: 1.15em;
	line-height: 1.7em;
}
.story-fragment-content.active {
	max-height: 8000px; /* A large value to allow for content expansion */
	padding: 15px 15px;
	margin-bottom: 15px;
}
.story-title h3 {
	font-size: 1em;
	margin: 0;
	padding: 0;
	border: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 700;
}
.story-meta {
	font-family: "Inter", sans-serif;
	color: #a0a0a0;
	text-transform: uppercase;
	font-size: 0.7em;
	letter-spacing: 1px;
}
.story-status {
	text-align: right;
	font-family: "Inter", sans-serif;
	color: #a0a0a0;
}
.story-status::after {
	content: "[ + ]";
	font-weight: bold;
	font-size: 1.1em;
	margin-left: 5px;
	display: inline-block;
	transition: transform 0.3s ease;
}
.story-status.inactive::after {
	content: "";
	font-weight: bold;
	font-size: 1.1em;
	margin-left: 5px;
	display: inline-block;
	transition: transform 0.3s ease;
}
.story-header.active .story-status::after {
	content: "[ - ]";
	transform: rotate(0deg);
	color: #ffffff;
}
.center-content-btn {
	text-align: center;
}
/* Author Page Specific Styles */
.author-container {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-top: 40px;
}

.author-image {
	flex-basis: 300px;
	flex-shrink: 0;
	width: 300px;
	height: 400px;
	background-color: #222;
	border: 1px solid #444;
}

.author-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-bio {
	flex-grow: 1;
}

.author-bio .credo {
	font-size: 1.4em;
	font-style: italic;
	border-left: 3px solid #888;
	padding-left: 20px;
	margin: 30px 0;
	color: #c0c0c0;
}
.author-bio .credo p {
	/* Ensure nested paragraph is not affected by main margin-bottom */
	margin-bottom: 0;
}

/* --- HAIKU OF FORM - SPECIFIC STYLES --- */

.composition-mandate {
	text-align: center;
	border: 2px solid var(--color-accent);
	padding: 25px;
	margin-bottom: 50px;
}

.composition-mandate h3 {
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
	padding-bottom: 10px;
}

.composition-mandate p {
	color: var(--color-text-main);
	font-size: 1.1em;
	line-height: 1.6;
	margin-top: 15px;
	margin-bottom: 0; /* Prevent extra paragraph margin */
}
.composition-mandate p b {
	color: white;
}

.haiku-tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 40px;
	margin-top: 50px;
	padding: 30px;
	border: 1px solid var(--color-border);
	background-color: #161616; /* Slightly darker to contain the tool */
}

.haiku-composer h3,
.haiku-lexicon h3 {
	color: var(--color-accent);
}

#haiku-output {
	margin-bottom: 20px;
}

.haiku-line {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	padding: 1rem;
	margin-bottom: 0.5rem;
	font-family: "EB Garamond", serif;
	font-size: 1.2rem;
	min-height: 54px;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
	user-select: none;
	color: var(--color-text-sub);
}

.haiku-line.active-line {
	border-color: var(--color-accent);
	color: var(--color-text-main);
}

.controls {
	margin-top: 1.5rem;
	display: grid; /* Changed to grid for better control over button layout */
	grid-template-columns: repeat(2, 1fr); /* 2 columns */
	gap: 1rem;
}

.ui-btn {
	/* flex-grow: 1; -> removed as grid handles sizing */
	background-color: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text-sub);
	padding: 10px 15px;
	font-family: "Inter", sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	text-align: center;
}

.ui-btn:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
}

#word-bank {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-content: flex-start;
	height: 300px;
	overflow-y: auto;
	padding: 1rem;
	border: 1px solid var(--color-border);
	background-color: var(--color-background);
}

.word {
	padding: 5px 10px;
	background-color: var(--color-foreground);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	user-select: none;
	font-family: "Inter", sans-serif;
	font-size: 0.9em;
}

.word:hover {
	background-color: var(--color-accent-bright);
	color: #ffffff;
	border-color: var(--color-accent-bright);
}

.haiku-gallery {
	margin-top: 50px;
}

.haiku-text {
	font-family: "EB Garamond", serif;
	font-size: 1.25em;
	line-height: 1.8;
	text-align: center;
	color: var(--color-text-main);
}

.gallery-note {
	font-size: 0.9em;
	color: var(--color-text-sub);
	text-align: center;
	margin-top: 20px;
}

.message-area {
	margin-top: 15px;
	font-size: 0.9em;
	padding: 10px;
	text-align: center;
	border: 1px solid transparent;
	transition: all 0.3s ease;
}

.message-area.error {
	color: var(--color-error);
	border-color: var(--color-error);
	background-color: rgba(204, 85, 85, 0.1);
}

.message-area.success {
	color: var(--color-success);
	border-color: var(--color-success);
	background-color: rgba(85, 204, 85, 0.1);
}

/* --- ORACLE - SPECIFIC STYLES --- */
.oracle-reading-section {
	margin-top: 50px;
	padding: 30px;
	border: 1px solid var(--color-border);
	background-color: #161616;
}

.reading-output-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin-top: 25px;
	perspective: 1000px; /* For 3D flip effect */
	-webkit-perspective: 1000px;
}

.card-reading {
	/* Each card occupies its own grid area */
	height: 400px; /* Fixed height for consistent flip */
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent; /* Card inner will have background */
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform var(--card-flip-duration);
	transform-style: preserve-3d;
	-webkit-transition: transform var(--card-flip-duration); /* For Safari */
	-webkit-transform-style: preserve-3d; /* For Safari */
	cursor: default; /* No interaction directly on card */
}

/* Initially, cards are "flipped" so the front is showing - content is hidden. */
.card-inner .card-front {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Hide back of front when flipped */
	backface-visibility: hidden;
	background-color: var(--color-foreground); /* Base card color */
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 20px;
	text-transform: uppercase;
	color: var(--color-accent-bright);
	font-family: "Inter", sans-serif;
	font-weight: 900;
	font-size: 1.5em;
	letter-spacing: 1px;
}
.card-inner .card-front .card-front-symbol {
	font-size: 4em;
	color: var(--color-accent);
	margin-top: 15px;
}

/* Content of the card (the back of the card, initially hidden) */
.card-inner .card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Hide back of back when not flipped */
	backface-visibility: hidden;
	background-color: var(--color-foreground);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 20px;
	transform: rotateY(180deg); /* Start rotated to be hidden */
	-webkit-transform: rotateY(180deg); /* Safari */
	overflow-y: auto; /* Allow scrolling for long interpretations */
	text-align: left;
}
/* Ensure the .codex-entry styling applies (already done, but reiterating for context) */
.card-reading .codex-entry {
	margin-bottom: 0;
	border: none;
	background-color: transparent;
	padding: 0;
}

/* Class to trigger the flip animation */
.card-inner.is-flipped-initial {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg); /* Safari */
}

.card-title-status {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 1.1em;
	color: var(--color-text-main);
	margin-bottom: 10px;
	text-transform: uppercase;
}

.card-title-status b {
	color: var(--color-accent);
}

.card-ascii {
	font-family: "monospace", "Courier New", Courier, monospace;
	font-size: 0.95em;
	line-height: 1.1;
	white-space: pre;
	margin: 15px auto;
	padding: 10px;
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	max-width: 200px;
	text-align: left;
	overflow-x: auto;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
	color: var(--color-text-main);
}

.card-interpretation {
	font-family: "EB Garamond", serif;
	font-size: 1.2em; /* New size as requested */
	line-height: 1.6;
	color: var(--color-text-sub);
	font-style: italic;
	text-align: justify;
	margin-top: 15px;
}

.oracle-closing-note {
	font-size: 1.1em;
	color: var(--color-text-main);
	text-align: center;
	margin-top: 40px;
	font-style: italic;
}
.oracle-closing-note b {
	color: var(--color-accent);
}

.loading-indicator {
	font-family: "Inter", sans-serif;
	font-size: 1.1em;
	color: var(--color-accent);
	text-align: center;
	margin-top: 20px;
	padding: 10px;
	border: 1px dashed var(--color-accent);
	animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

/* Interpretation Toggle */
.interpretation-toggle {
	text-align: center;
	margin-bottom: 30px;
	font-family: "Inter", sans-serif;
	font-size: 0.9em;
	color: var(--color-text-sub);
}
.interpretation-toggle span {
	margin-right: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.interpretation-toggle .ui-btn {
	padding: 8px 15px;
	font-size: 0.75em;
	margin: 0 5px;
	border-radius: 2px; /* Slightly rounded for buttons */
}
.interpretation-toggle .ui-btn.active-view {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
}
.interpretation-toggle .ui-btn:hover:not(.active-view) {
	background-color: rgba(
		117,
		84,
		118,
		0.2
	); /* Semi-transparent accent on hover */
}

/* Share button styling */
.share-btn {
	margin-top: 30px;
	width: auto; /* Allow button to size to content */
}

/* NEW: Deeper Gnosis Hints */
.deeper-gnosis-hints {
	margin-top: 50px;
	text-align: center;
	font-size: 1.1em;
	color: var(--color-text-sub);
	border-top: 1px solid var(--color-border);
	padding-top: 30px;
}
.deeper-gnosis-hints p {
	margin-bottom: 10px; /* Adjust spacing between paragraphs within hints */
}
.deeper-gnosis-hints p:last-child {
	margin-bottom: 0; /* No margin on the last paragraph */
}
.deeper-gnosis-hints a {
	font-family: "Inter", sans-serif; /* Use Inter for action links */
	font-size: 0.9em;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 0 10px; /* Space between the two links */
	display: inline-block; /* Ensure margins apply */
	color: var(--color-text-main); /* White for prominence */
	border-bottom: 1px solid var(--color-accent); /* Underline with accent */
}
.deeper-gnosis-hints a:hover {
	color: var(--color-accent-bright);
	border-bottom-color: var(--color-accent-bright);
}

.catalyst-container {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px dashed var(--color-border);
	text-align: center;
}

.catalyst-container .ui-btn {
	background-color: var(--color-foreground);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.catalyst-container .ui-btn:hover {
	background-color: var(--color-accent);
	color: #ffffff;
}

.catalyst-output {
	margin-top: 20px;
	font-style: italic;
	color: var(--color-text-sub);
	font-size: 1.1em;
}

.catalyst-output b {
	color: var(--color-text-main);
	font-style: normal;
}

/* --- MEDIA QUERIES FOR MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
	header {
		padding: 15px 20px;
	}

	nav {
		flex-direction: column;
		align-items: center;
	}

	.nav-links {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
		margin-top: 15px;
		width: 100%;
		text-align: center;
	}

	.nav-links a {
		padding: 5px 8px;
		font-size: 0.8em;
	}

	main {
		padding: 120px 20px 20px 20px;
	}

	h1 {
		font-size: 2.2em;
	}
	h2 {
		font-size: 1.5em;
	}
	.proclamation {
		font-size: 1.2em;
	}

	.haiku-tool-grid,
	.reading-output-grid {
		grid-template-columns: 1fr;
		padding: 20px;
	}
	.controls {
		grid-template-columns: 1fr;
	}

	/* Author page specific on mobile */
	.author-container {
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
	}
	.author-image {
		width: 250px;
		height: 333px; /* Keep aspect ratio */
	}

	.card-ascii {
		font-size: 0.85em; /* Slightly smaller for mobile */
		max-width: 150px; /* Further constrain ASCII art on mobile */
	}

	/* Oracle specific on mobile */
	.interpretation-toggle {
		font-size: 0.8em;
	}
	.interpretation-toggle span {
		display: block; /* Stack prompt above buttons */
		margin-bottom: 10px;
	}
	.interpretation-toggle .ui-btn {
		width: calc(50% - 10px); /* Make them take up half width, with gap */
		margin: 0 5px 10px 5px; /* Add margin to stack and space them */
	}
	.deeper-gnosis-hints p {
		margin-bottom: 5px;
	}
	.deeper-gnosis-hints a {
		display: block; /* Stack links vertically */
		margin: 10px auto;
	}
}

.btn:hover,
.access-btn:hover,
.available:hover {
	color: #1a1a1a;
	/* Dark text on hover for visibility */
}

/* Style for clickable status text (e.g., "Reveal Fragment") */
.story-status {
	color: #755476; /* Signature Theme Purple */
	font-weight: bold;
}

/* Override for non-clickable status text */
.story-status.inactive {
	color: #888;
	font-weight: normal; /* Make it less prominent than the clickable text */
}
/* --- [START] HERO BUTTON & Z-INDEX CORRECTION PROTOCOL --- */

/* 1. Lift the button container above the hero overlay */
.hero .nexus-gate {
	position: relative; /* Necessary for z-index to apply */
	z-index: 2; /* Lifts this div above the z-index: 1 overlay */
}

/* 2. Define the specific appearance for buttons within the hero section */
/* This rule overrides the default .btn style for this specific location. */
.hero .nexus-gate .btn {
	border: 1px solid var(--color-accent); /* Signature purple border */
	padding: 12px 24px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease-out;
	margin-top: 0; /* Override the default margin-top from .btn */
}

/* 3. Define the hover state for these specific buttons */
.hero .nexus-gate .btn:hover {
	background-color: var(--color-accent);
	color: var(--color-background); /* Dark text on hover */
}

/* --- [END] CORRECTION PROTOCOL --- */
/* --- [CORRECTION] ANIMATION DEFINITIONS RESTORED --- */
/* This block restores the animation logic that was purged from index.html */

/* 1. Keyframes for the Title Glitch Effect */
@keyframes textFlicker {
	0%,
	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow:
            /* Reduced white glow for sharper text */ 0 0
				2px #eee,
			0 0 5px #eee, 0 0 7px #eee,
			/* Reduced accent glow for a tighter, more focused corona */ 0 0
				10px var(--color-accent-dark),
			0 0 15px var(--color-accent-dark), 0 0 25px var(--color-accent-dark);
	}
	20%,
	24%,
	55% {
		text-shadow: none;
	}
}

.glitch-effect {
	animation: textFlicker 3s linear infinite;
}

/* 2. Keyframes for the Sequential Fade-in */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-item {
	opacity: 0; /* Start invisible */
	animation: fadeIn 1s ease-out forwards;
}

/* 3. Staggered Animation Delays for the Sequence */
#subtitle {
	animation-delay: 0.5s;
}

#proclamation-text {
	animation-delay: 1s;
}

#nexus-links {
	animation-delay: 1.5s;
}