/* ═══════════════════════════════════════════
   MES THEME — main.css
   All visual styling for the Morals & Ethics Society site.
   ═══════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #0A0A0A; }
body.mes-body {
	font-family: 'Manrope', sans-serif;
	background: #0A0A0A;
	color: #ffffff;
	overflow-x: hidden;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #C9A96E; border-radius: 2px; }

/* ── Page transition overlay ── */
#page-transition {
	position: fixed; inset: 0; z-index: 9999;
	background: #0A0A0A;
	pointer-events: none;
	opacity: 0;
}

/* ── Navigation ── */
.nav-link {
	position: relative;
	color: #888;
	transition: color 0.4s ease;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.nav-link::after {
	content: '';
	position: absolute;
	bottom: -4px; left: 0;
	width: 0; height: 1px;
	background: #C9A96E;
	transition: width 0.4s ease;
}
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ── Hero gradient orbs ── */
.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.08;
	pointer-events: none;
}

/* ── Gold divider ── */
.gold-line {
	width: 60px; height: 1px;
	background: linear-gradient(90deg, transparent, #C9A96E, transparent);
}

/* ── Form inputs ── */
.form-input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid #2A2A2A;
	padding: 16px 0 12px;
	color: #fff;
	font-family: 'Manrope', sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	outline: none;
	transition: border-color 0.4s ease;
}
.form-input::placeholder {
	color: #555;
	font-weight: 300;
}
.form-input:focus { border-bottom-color: #C9A96E; }
.form-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: #555;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	margin-bottom: 4px;
	display: block;
}

/* ── CTA button ── */
.cta-btn {
	position: relative;
	display: inline-block;
	padding: 18px 48px;
	border: 1px solid #C9A96E;
	color: #C9A96E;
	font-family: 'Manrope', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	background: transparent;
	transition: color 0.5s ease;
}
.cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #C9A96E;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	z-index: -1;
}
.cta-btn:hover { color: #0A0A0A; }
.cta-btn:hover::before { transform: scaleX(1); }
.cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Pillar card ── */
.pillar-card {
	border: 1px solid #1A1A1A;
	padding: 48px 36px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.5s ease;
}
.pillar-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, transparent, #C9A96E, transparent);
	transform: scaleX(0);
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.pillar-card:hover { border-color: #2A2A2A; }
.pillar-card:hover::before { transform: scaleX(1); }

/* ── Geometric shapes ── */
.geo-shape {
	position: absolute;
	border: 1px solid rgba(201, 169, 110, 0.06);
	pointer-events: none;
}

/* ── SPA section visibility ── */
.page-section { display: none; }
.page-section.active { display: block; }

/* ── Noise overlay ── */
.noise-overlay {
	position: fixed; inset: 0;
	pointer-events: none;
	z-index: 9998;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 128px 128px;
}

/* ── Hamburger ── */
.hamburger span {
	display: block;
	width: 24px; height: 1px;
	background: #888;
	transition: all 0.4s ease;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); background: #C9A96E; }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); background: #C9A96E; }

/* ── Mobile menu ── */
.mobile-menu {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, 0.97);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
	font-family: 'Syne', sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: #888;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	transition: color 0.3s;
}
.mobile-menu a:hover { color: #C9A96E; }

/* ── Hero title hover effect ── */
.hero-title {
	cursor: default;
	transition: text-shadow 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-title:hover {
	text-shadow:
		0 0 40px rgba(201, 169, 110, 0.3),
		0 0 80px rgba(201, 169, 110, 0.15),
		0 0 120px rgba(201, 169, 110, 0.08);
	transform: scale(1.02);
}
.hero-title .title-word {
	display: inline-block;
	transition: color 0.4s ease, transform 0.4s ease;
}
.hero-title:hover .title-word {
	color: #C9A96E;
	transform: translateY(-2px);
}
.hero-title:hover .title-word:nth-child(2) {
	transition-delay: 0.05s;
}
.hero-title .title-amp {
	transition: transform 0.5s ease, filter 0.5s ease;
}
.hero-title:hover .title-amp {
	transform: scale(1.15) rotate(-3deg);
	filter: drop-shadow(0 0 20px rgba(201, 169, 110, 0.5));
}

/* ── Sparkle canvas ── */
#sparkle-canvas {
	position: fixed;
	inset: 0;
	z-index: 9997;
	pointer-events: none;
}

/* ── Form error ── */
#form-error {
	color: #ef4444;
	font-family: 'Manrope', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	padding-top: 8px;
}