/* ============================================
   MEDIEVAL FANTASY THEME - Matthew Hicks Portfolio
   Warm/Inviting Skyrim-inspired design
   With brick textures, gold frames, cobbled BG
   ============================================ */

/* --- CSS Variables --- */
:root {
	--bg-dark: #0d0b1a;
	--bg-card: #1a1730;
	--bg-card-hover: #231f3e;
	--gold: #c9a84c;
	--gold-light: #e8d5a3;
	--gold-glow: rgba(201, 168, 76, 0.4);
	--warm-orange: #d4873f;
	--parchment: #f0e4cc;
	--text-light: #e0d6c8;
	--text-muted: #9a8e7f;
	--accent-red: #8b2a2a;
	--accent-deep: #2a1a3e;
	--border-subtle: rgba(201, 168, 76, 0.15);
	--border-gold: rgba(201, 168, 76, 0.35);
	--shadow-gold: 0 0 20px rgba(201, 168, 76, 0.3);
	--shadow-warm: 0 4px 30px rgba(0, 0, 0, 0.5);
	--transition: all 0.3s ease;
}

/* --- Global Reset & Base --- */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Lora', Georgia, serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-light);
	background-color: #0c0a18;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	cursor: crosshair;
}

/* Cobblestone background - SVG inline for varied irregular stones */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200'%3E%3Cdefs%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='260' height='200' fill='%230c0a18'/%3E%3C!-- Row 1 --%3E%3Crect x='3' y='3' width='38' height='30' rx='4' fill='%23181430' stroke='%23252040' stroke-width='0.5'/%3E%3Crect x='4' y='4' width='16' height='1' rx='0.5' fill='%23252040' opacity='0.5'/%3E%3Crect x='44' y='2' width='42' height='32' rx='5' fill='%23161228' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='45' y='3' width='18' height='1' rx='0.5' fill='%23282240' opacity='0.4'/%3E%3Crect x='89' y='3' width='35' height='31' rx='4' fill='%231a1530' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='127' y='2' width='44' height='33' rx='6' fill='%23151028' stroke='%23201838' stroke-width='0.5'/%3E%3Crect x='128' y='3' width='20' height='1' rx='0.5' fill='%23252040' opacity='0.45'/%3E%3Crect x='174' y='3' width='36' height='30' rx='4' fill='%23191430' stroke='%23232040' stroke-width='0.5'/%3E%3Crect x='213' y='2' width='44' height='32' rx='5' fill='%23171230' stroke='%23211838' stroke-width='0.5'/%3E%3C!-- Row 2 offset --%3E%3Crect x='22' y='37' width='40' height='28' rx='5' fill='%23171328' stroke='%23211838' stroke-width='0.5'/%3E%3Crect x='23' y='38' width='17' height='1' rx='0.5' fill='%23242040' opacity='0.45'/%3E%3Crect x='65' y='36' width='36' height='30' rx='4' fill='%231b1632' stroke='%23252040' stroke-width='0.5'/%3E%3Crect x='104' y='37' width='43' height='29' rx='5' fill='%23141028' stroke='%231e1838' stroke-width='0.5'/%3E%3Crect x='105' y='38' width='19' height='1' rx='0.5' fill='%23232040' opacity='0.4'/%3E%3Crect x='150' y='36' width='38' height='30' rx='4' fill='%23181430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='191' y='37' width='42' height='29' rx='6' fill='%23161230' stroke='%23201838' stroke-width='0.5'/%3E%3Crect x='0' y='36' width='19' height='29' rx='3' fill='%23151028' stroke='%231f1838' stroke-width='0.5'/%3E%3Crect x='236' y='37' width='24' height='29' rx='4' fill='%23191430' stroke='%23231e3a' stroke-width='0.5'/%3E%3C!-- Row 3 --%3E%3Crect x='3' y='69' width='42' height='30' rx='5' fill='%231a1530' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='4' y='70' width='18' height='1' rx='0.5' fill='%23262040' opacity='0.5'/%3E%3Crect x='48' y='68' width='37' height='32' rx='4' fill='%23151028' stroke='%231f1838' stroke-width='0.5'/%3E%3Crect x='88' y='69' width='44' height='31' rx='6' fill='%23181430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='89' y='70' width='20' height='1' rx='0.5' fill='%23252040' opacity='0.45'/%3E%3Crect x='135' y='68' width='36' height='32' rx='4' fill='%23161230' stroke='%23201a38' stroke-width='0.5'/%3E%3Crect x='174' y='69' width='43' height='31' rx='5' fill='%231b1632' stroke='%23252040' stroke-width='0.5'/%3E%3Crect x='220' y='68' width='37' height='32' rx='4' fill='%23141028' stroke='%231e1838' stroke-width='0.5'/%3E%3C!-- Row 4 offset --%3E%3Crect x='18' y='103' width='44' height='29' rx='5' fill='%23161228' stroke='%23201838' stroke-width='0.5'/%3E%3Crect x='19' y='104' width='19' height='1' rx='0.5' fill='%23242040' opacity='0.4'/%3E%3Crect x='65' y='102' width='38' height='31' rx='5' fill='%23191530' stroke='%23232040' stroke-width='0.5'/%3E%3Crect x='106' y='103' width='40' height='30' rx='4' fill='%23171228' stroke='%23211838' stroke-width='0.5'/%3E%3Crect x='149' y='102' width='43' height='31' rx='6' fill='%231a1530' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='150' y='103' width='18' height='1' rx='0.5' fill='%23262040' opacity='0.45'/%3E%3Crect x='195' y='103' width='36' height='30' rx='4' fill='%23151028' stroke='%231f1838' stroke-width='0.5'/%3E%3Crect x='0' y='102' width='15' height='30' rx='3' fill='%23181430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='234' y='102' width='26' height='31' rx='4' fill='%23171328' stroke='%23211a38' stroke-width='0.5'/%3E%3C!-- Row 5 --%3E%3Crect x='3' y='136' width='38' height='29' rx='4' fill='%23151028' stroke='%231f1838' stroke-width='0.5'/%3E%3Crect x='44' y='135' width='43' height='31' rx='5' fill='%23181430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='45' y='136' width='19' height='1' rx='0.5' fill='%23252040' opacity='0.5'/%3E%3Crect x='90' y='136' width='36' height='30' rx='4' fill='%231b1632' stroke='%23252040' stroke-width='0.5'/%3E%3Crect x='129' y='135' width='42' height='31' rx='6' fill='%23161230' stroke='%23201a38' stroke-width='0.5'/%3E%3Crect x='174' y='136' width='38' height='30' rx='4' fill='%23191430' stroke='%23232040' stroke-width='0.5'/%3E%3Crect x='175' y='137' width='17' height='1' rx='0.5' fill='%23242040' opacity='0.4'/%3E%3Crect x='215' y='135' width='42' height='31' rx='5' fill='%23141028' stroke='%231e1838' stroke-width='0.5'/%3E%3C!-- Row 6 offset --%3E%3Crect x='20' y='169' width='41' height='28' rx='5' fill='%23181430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='21' y='170' width='18' height='1' rx='0.5' fill='%23252040' opacity='0.45'/%3E%3Crect x='64' y='168' width='37' height='30' rx='4' fill='%23151028' stroke='%231f1838' stroke-width='0.5'/%3E%3Crect x='104' y='169' width='44' height='29' rx='6' fill='%231a1530' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='151' y='168' width='36' height='30' rx='4' fill='%23171228' stroke='%23211838' stroke-width='0.5'/%3E%3Crect x='190' y='169' width='42' height='29' rx='5' fill='%23161230' stroke='%23201838' stroke-width='0.5'/%3E%3Crect x='0' y='168' width='17' height='29' rx='3' fill='%231b1632' stroke='%23252040' stroke-width='0.5'/%3E%3Crect x='235' y='168' width='25' height='30' rx='4' fill='%23191430' stroke='%23232040' stroke-width='0.5'/%3E%3C/svg%3E");
	background-size: 260px 200px;
}

/* Second cobble layer offset for less repetition */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200'%3E%3Crect width='260' height='200' fill='transparent'/%3E%3Crect x='10' y='8' width='40' height='28' rx='5' fill='%23201a38' stroke='%23282244' stroke-width='0.5'/%3E%3Crect x='54' y='6' width='36' height='30' rx='4' fill='%231c1630' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='94' y='7' width='43' height='29' rx='6' fill='%231e1834' stroke='%23262042' stroke-width='0.5'/%3E%3Crect x='140' y='8' width='38' height='28' rx='4' fill='%231a1430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='182' y='6' width='42' height='30' rx='5' fill='%231c1632' stroke='%23242040' stroke-width='0.5'/%3E%3Crect x='30' y='40' width='42' height='30' rx='5' fill='%231e1834' stroke='%23262042' stroke-width='0.5'/%3E%3Crect x='76' y='42' width='38' height='28' rx='4' fill='%23201a38' stroke='%23282244' stroke-width='0.5'/%3E%3Crect x='118' y='40' width='44' height='30' rx='6' fill='%231a1430' stroke='%23222040' stroke-width='0.5'/%3E%3Crect x='166' y='41' width='36' height='29' rx='4' fill='%231c1630' stroke='%23242040' stroke-width='0.5'/%3E%3C/svg%3E");
	background-size: 310px 240px;
}

a {
	color: var(--gold);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: var(--gold-light);
	text-decoration: none;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	color: var(--gold);
}

::selection {
	background: var(--gold);
	color: var(--bg-dark);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
	background: var(--gold);
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--gold-light);
}

/* ============================================
   GOLD ORNAMENTAL FRAME SYSTEM
   Used on cards, headers, and content boxes
   ============================================ */
.gold-frame {
	position: relative;
	border: 1px solid var(--border-gold);
}

.frame-corner {
	position: absolute;
	width: 20px;
	height: 20px;
	z-index: 2;
	pointer-events: none;
}

.frame-corner::before,
.frame-corner::after {
	content: '';
	position: absolute;
	background: var(--gold);
}

/* Corner L-shapes */
.frame-tl { top: -2px; left: -2px; }
.frame-tl::before { top: 0; left: 0; width: 20px; height: 2px; }
.frame-tl::after { top: 0; left: 0; width: 2px; height: 20px; }

.frame-tr { top: -2px; right: -2px; }
.frame-tr::before { top: 0; right: 0; width: 20px; height: 2px; }
.frame-tr::after { top: 0; right: 0; width: 2px; height: 20px; }

.frame-bl { bottom: -2px; left: -2px; }
.frame-bl::before { bottom: 0; left: 0; width: 20px; height: 2px; }
.frame-bl::after { bottom: 0; left: 0; width: 2px; height: 20px; }

.frame-br { bottom: -2px; right: -2px; }
.frame-br::before { bottom: 0; right: 0; width: 20px; height: 2px; }
.frame-br::after { bottom: 0; right: 0; width: 2px; height: 20px; }

/* Subtle inner glow for framed elements */
.gold-frame::after {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 20px rgba(201, 168, 76, 0.05);
	pointer-events: none;
	border-radius: inherit;
}

/* Frame variant for section headers */
.frame-header {
	display: inline-block;
	padding: 25px 50px;
	background: rgba(13, 11, 26, 0.7);
	backdrop-filter: blur(3px);
}

/* Frame variant for text content boxes */
.frame-text-box {
	padding: 30px;
	background: rgba(13, 11, 26, 0.6);
	backdrop-filter: blur(3px);
}

/* Frame variant for stat items */
.frame-stat {
	background: rgba(13, 11, 26, 0.5);
}

/* --- Particle Canvas --- */
#particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* --- Loading Screen --- */
/* ============================================
   DOCTOR STRANGE PORTAL LOADER
   Page is revealed through a growing fiery portal
   ============================================ */
.portal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	overflow: hidden;
}

#portalCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	pointer-events: none;
}

/* Circular mask — a small transparent circle with a huge box-shadow fills the rest dark */
.portal-overlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--portal-radius, 0px);
	height: var(--portal-radius, 0px);
	margin-top: calc(var(--portal-radius, 0px) / -2);
	margin-left: calc(var(--portal-radius, 0px) / -2);
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 9999px #08061a;
	z-index: 1;
}

/* Remove nebula bg div — drawn on canvas instead */

/* Fiery edge glow that follows the growing circle */
.portal-overlay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--portal-radius, 80px);
	height: var(--portal-radius, 80px);
	margin-top: calc(var(--portal-radius, 80px) / -2);
	margin-left: calc(var(--portal-radius, 80px) / -2);
	border-radius: 50%;
	border: 3px solid rgba(255, 160, 40, 0.8);
	box-shadow:
		0 0 20px rgba(255, 136, 0, 0.6),
		0 0 60px rgba(255, 100, 0, 0.3),
		inset 0 0 20px rgba(255, 136, 0, 0.3),
		inset 0 0 60px rgba(255, 100, 0, 0.15);
	z-index: 2;
	pointer-events: none;
}

.portal-overlay.done::after {
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* The portal ring */
.portal-ring {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	z-index: 2;
	transition: transform 0.3s;
}

/* Outer fiery ring - main glow */
.portal-ring::before {
	content: '';
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: #ff8800;
	border-right-color: #ffaa22;
	border-bottom-color: #ff6600;
	border-left-color: #ffcc44;
	animation: portalSpin 1.5s linear infinite;
	box-shadow:
		0 0 15px rgba(255, 136, 0, 0.6),
		0 0 30px rgba(255, 136, 0, 0.3),
		inset 0 0 15px rgba(255, 136, 0, 0.3);
	filter: blur(1px);
}

/* Second ring layer - counter rotation */
.portal-ring::after {
	content: '';
	position: absolute;
	top: -14px;
	left: -14px;
	right: -14px;
	bottom: -14px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ffdd44;
	border-bottom-color: #ff4400;
	animation: portalSpin 2.5s linear infinite reverse;
	box-shadow:
		0 0 20px rgba(255, 200, 50, 0.4),
		0 0 40px rgba(255, 100, 0, 0.2);
	filter: blur(2px);
}

/* Spark trails orbiting the ring */
.portal-sparks {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	animation: portalSpin 1.8s linear infinite;
}

.portal-sparks::before,
.portal-sparks::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffee88;
	box-shadow: 0 0 8px #ffaa00, 0 0 20px #ff6600;
}

.portal-sparks::before {
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.portal-sparks::after {
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.portal-sparks.sparks-2 {
	animation: portalSpin 2.2s linear infinite reverse;
}

.portal-sparks.sparks-2::before {
	top: 50%;
	left: -10px;
	transform: translateY(-50%);
}

.portal-sparks.sparks-2::after {
	top: 50%;
	left: auto;
	right: -10px;
	bottom: auto;
	transform: translateY(-50%);
}

.portal-sparks.sparks-3 {
	animation: portalSpin 1.4s linear infinite;
}

.portal-sparks.sparks-3::before {
	top: -5px;
	left: -5px;
}

.portal-sparks.sparks-3::after {
	bottom: -5px;
	right: -5px;
	left: auto;
}

/* Inner glow of the portal - the "window" */
.portal-inner-glow {
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 200, 100, 0.1) 0%,
		rgba(255, 150, 50, 0.05) 50%,
		transparent 70%
	);
	animation: portalPulse 2s ease-in-out infinite;
}

.portal-text {
	position: absolute;
	top: calc(50% + 80px);
	font-family: 'Cinzel', serif;
	color: var(--gold);
	font-size: 20px;
	letter-spacing: 4px;
	z-index: 3;
	animation: pulse 2s ease-in-out infinite;
	text-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
}

@keyframes portalSpin {
	to { transform: rotate(360deg); }
}

@keyframes portalPulse {
	0%, 100% { opacity: 0.5; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

@keyframes pulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 1; }
}

/* When portal opens, fade out the ring and text */
.portal-overlay.opening .portal-ring {
	animation: portalRingFade 0.6s 0.3s ease forwards;
}

.portal-overlay.opening .portal-text {
	animation: portalTextFade 0.5s ease forwards;
}

@keyframes portalRingFade {
	to { opacity: 0; transform: scale(2); }
}

@keyframes portalTextFade {
	to { opacity: 0; transform: translateY(20px); }
}

/* After opening completes, fade and remove */
.portal-overlay.done {
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

/* ============================================
   HERO SECTION WITH SLIDESHOW
   ============================================ */
#hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 1;
}

.hero-slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-slideshow .slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.5s ease-in-out, transform 4s ease-in-out;
	transform: scale(1.0);
}

.hero-slideshow .slide.active {
	opacity: 1;
	transform: scale(1.05);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(13, 11, 26, 0.25) 0%, rgba(13, 11, 26, 0.6) 70%),
		linear-gradient(transparent 50%, var(--bg-dark) 100%);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 20px;
}

.rune-border {
	padding: 50px 60px;
	position: relative;
	background: rgba(13, 11, 26, 0.7);
	backdrop-filter: blur(8px);
}

.hero-name {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp(32px, 6vw, 72px);
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 8px;
	margin: 0;
	text-shadow: 0 0 40px rgba(201, 168, 76, 0.3);
}

.hero-divider {
	margin: 15px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.hero-divider::before,
.hero-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	max-width: 150px;
}

.divider-rune {
	color: var(--gold);
	font-size: 12px;
	opacity: 0.7;
}

.hero-title {
	font-family: 'Cinzel', serif;
	font-size: clamp(14px, 2.5vw, 22px);
	color: var(--text-light);
	letter-spacing: 4px;
	margin: 0;
	min-height: 35px;
}

.hero-resume {
	margin-top: 25px;
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.btn-sm {
	font-size: 11px !important;
	padding: 10px 20px !important;
	letter-spacing: 1px !important;
}

.hero-cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	color: var(--gold);
	font-family: 'Cinzel', serif;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	animation: float 3s ease-in-out infinite;
}

.hero-cta i {
	font-size: 18px;
}

.hero-cta:hover {
	color: var(--gold-light);
	transform: translateY(3px);
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

/* --- Navigation --- */
#navigation {
	background: rgba(13, 11, 26, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-subtle);
	padding: 18px 0;
	z-index: 100;
	position: relative;
	width: 100%;
}

#navigation.fixed {
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.nav-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.nav-links li {
	display: inline-block;
}

.nav-link {
	font-family: 'Cinzel', serif;
	font-size: 15px;
	color: var(--text-muted) !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 5px 0;
	position: relative;
	transition: var(--transition);
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--gold);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.nav-link:hover,
.nav-link.active {
	color: var(--gold) !important;
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

/* --- Sections --- */
.section {
	position: relative;
	padding: 100px 0;
	z-index: 1;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-family: 'Cinzel Decorative', 'Cinzel', serif;
	font-size: clamp(28px, 4vw, 42px);
	letter-spacing: 6px;
	margin-bottom: 15px;
}

.title-ornament {
	width: 80px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	margin: 0 auto 15px;
}

.section-subtitle {
	font-family: 'Lora', serif;
	font-style: italic;
	color: var(--text-muted);
	font-size: 16px;
	margin: 0;
}

/* ============================================
   BRICK / STONE SECTION BACKGROUNDS
   ============================================ */
#portfolio {
	/* Brick pattern overlay */
	background:
		linear-gradient(180deg, var(--bg-dark) 0%, transparent 5%, transparent 95%, var(--bg-dark) 100%),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 28px,
			rgba(201, 168, 76, 0.03) 28px,
			rgba(201, 168, 76, 0.03) 30px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 58px,
			rgba(201, 168, 76, 0.02) 58px,
			rgba(201, 168, 76, 0.02) 60px
		),
		linear-gradient(180deg, rgba(26, 23, 48, 0.4) 0%, rgba(42, 26, 62, 0.3) 50%, rgba(26, 23, 48, 0.4) 100%);
}

.skills-section {
	/* Stone block pattern */
	background:
		linear-gradient(180deg, var(--bg-dark) 0%, transparent 8%, transparent 92%, var(--bg-dark) 100%),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 48px,
			rgba(201, 168, 76, 0.025) 48px,
			rgba(201, 168, 76, 0.025) 50px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 98px,
			rgba(201, 168, 76, 0.02) 98px,
			rgba(201, 168, 76, 0.02) 100px
		),
		linear-gradient(180deg, #12101f 0%, #18152e 50%, #12101f 100%);
}

/* --- Portfolio Filters --- */
.filter-bar {
	text-align: center;
	margin-bottom: 40px;
}

#filters {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-btn {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--text-muted) !important;
	padding: 10px 20px;
	border: 1px solid var(--border-subtle);
	background: rgba(13, 11, 26, 0.5);
	transition: var(--transition);
	text-transform: uppercase;
}

.filter-btn:hover,
.filter-btn.current {
	color: var(--bg-dark) !important;
	background: var(--gold);
	border-color: var(--gold);
	box-shadow: var(--shadow-gold);
}

/* --- Game Cards --- */
.portfolio-grid {
	max-width: 1200px;
	margin: 0 auto;
}

.items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.items li {
	display: inline-block;
	padding: 8px;
}

.game-card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--border-gold);
	transition: var(--transition);
}

.game-card:hover {
	transform: scale(0.96);
	border-color: var(--gold);
	box-shadow: 0 0 35px rgba(201, 168, 76, 0.3);
}

.card-inner {
	position: relative;
	overflow: hidden;
}

.card-inner img {
	width: 100%;
	display: block;
	transition: transform 0.5s ease;
}

.game-card:hover .card-inner img {
	transform: scale(1.08);
}

.card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px 15px 15px;
	background: linear-gradient(transparent, rgba(13, 11, 26, 0.95));
	transform: translateY(10px);
	opacity: 0;
	transition: var(--transition);
}

.game-card:hover .card-overlay {
	transform: translateY(0);
	opacity: 1;
}

.card-title {
	font-family: 'Cinzel', serif;
	font-size: 14px;
	color: var(--gold);
	margin: 0 0 4px;
	letter-spacing: 1px;
}

.card-tag {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.card-glow {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.15), transparent 70%);
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.game-card:hover .card-glow {
	opacity: 1;
}

.best-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: var(--gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	box-shadow: 0 0 15px rgba(201, 168, 76, 0.5);
}

.best-badge i {
	color: var(--bg-dark);
	font-size: 13px;
}

/* --- About Section --- */
#about {
	background:
		linear-gradient(180deg, var(--bg-dark) 0%, transparent 5%, transparent 95%, var(--bg-dark) 100%),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 38px,
			rgba(201, 168, 76, 0.02) 38px,
			rgba(201, 168, 76, 0.02) 40px
		);
}

.about-image-wrapper {
	display: inline-block;
	margin-bottom: 30px;
	padding: 8px;
	background: rgba(13, 11, 26, 0.6);
}

.about-image {
	max-width: 360px;
	width: 100%;
	display: block;
}

.about-text h3 {
	font-size: 28px;
	margin-bottom: 5px;
}

.about-role {
	font-family: 'Cinzel', serif;
	color: var(--warm-orange);
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.about-text p {
	color: var(--text-light);
	line-height: 1.8;
	margin-bottom: 15px;
}

.about-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 25px;
}

.social-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid var(--border-gold);
	border-radius: 4px;
	font-family: 'Cinzel', serif;
	font-size: 13px;
	color: var(--text-muted) !important;
	letter-spacing: 1px;
	transition: var(--transition);
}

.social-link:hover {
	border-color: var(--gold);
	color: var(--gold) !important;
	box-shadow: 0 0 15px rgba(201, 168, 76, 0.2);
	transform: translateY(-2px);
}

/* --- Stats (below About) --- */
.about-stats {
	margin-top: 60px;
}

.stats-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

.stat-item {
	text-align: center;
	padding: 25px 35px;
	min-width: 180px;
}

.stat-icon {
	font-size: 32px;
	color: var(--gold);
	margin-bottom: 12px;
	text-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
}

.stat-number {
	font-family: 'Cinzel Decorative', serif;
	font-size: 44px;
	color: var(--gold);
	margin: 0;
}

.stat-label {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	color: var(--text-muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 5px 0 0;
}

/* --- Skills Section --- */
.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 25px;
	max-width: 1000px;
	margin: 0 auto 60px;
}

.skill-card {
	background: rgba(26, 23, 48, 0.8);
	border-radius: 4px;
	padding: 30px;
	text-align: center;
	transition: var(--transition);
	overflow: hidden;
}

.skill-card:hover {
	transform: translateY(-4px);
	border-color: var(--gold);
	box-shadow: 0 0 30px rgba(201, 168, 76, 0.2);
}

.skill-icon {
	font-size: 32px;
	color: var(--gold);
	margin-bottom: 15px;
}

.skill-card h4 {
	font-size: 18px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.skill-level {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 4px 16px;
	border-radius: 20px;
	margin-bottom: 12px;
}

.skill-level.advanced {
	background: rgba(201, 168, 76, 0.15);
	color: var(--gold);
	border: 1px solid rgba(201, 168, 76, 0.3);
}

.skill-level.intermediate {
	background: rgba(212, 135, 63, 0.15);
	color: var(--warm-orange);
	border: 1px solid rgba(212, 135, 63, 0.3);
}

.skill-card p {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 8px;
}

.skill-years {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 4px 16px;
	border-radius: 20px;
	margin-top: 4px;
	margin-bottom: 12px;
	background: rgba(201, 168, 76, 0.15);
	color: var(--gold);
	border: 1px solid rgba(201, 168, 76, 0.3);
}

/* --- Extra Tools --- */
.extra-skills-header {
	text-align: center;
	margin-bottom: 30px;
}

.extra-skills-header h3 {
	font-size: 22px;
	letter-spacing: 2px;
}

.extra-skills-header p {
	color: var(--text-muted);
	font-style: italic;
}

.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.tool-card {
	background: rgba(26, 23, 48, 0.8);
	border-radius: 4px;
	padding: 25px 20px;
	text-align: center;
	transition: var(--transition);
}

.tool-card:hover {
	transform: translateY(-3px);
	border-color: var(--gold);
	box-shadow: 0 0 25px rgba(201, 168, 76, 0.15);
}

.tool-card img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	margin-bottom: 12px;
}

.tool-card h5 {
	font-size: 15px;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

.tool-card p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.tool-card a {
	text-decoration: underline;
	text-decoration-color: rgba(201, 168, 76, 0.4);
}

/* --- CV / Resume Section (removed as standalone, now in hero) --- */

/* --- Medieval Button --- */
.btn-medieval {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Cinzel', serif;
	font-size: 14px;
	letter-spacing: 2px;
	padding: 15px 30px;
	border: 1px solid var(--gold);
	color: var(--gold) !important;
	background: rgba(13, 11, 26, 0.6);
	border-radius: 4px;
	margin: 10px;
	transition: var(--transition);
	text-transform: uppercase;
	position: relative;
}

.btn-medieval::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 6px;
	background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.15), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.btn-medieval:hover {
	background: var(--gold);
	color: var(--bg-dark) !important;
	box-shadow: 0 0 25px rgba(201, 168, 76, 0.35);
	transform: translateY(-2px);
}

.btn-medieval:hover::before {
	opacity: 1;
}

/* --- Contact Section --- */
.contact-section {
	background:
		linear-gradient(180deg, var(--bg-dark), #1a1230 50%, var(--bg-dark));
	padding-bottom: 80px;
}

.contact-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
}

.contact-btn {
	min-width: 180px;
	justify-content: center;
}

/* --- Footer --- */
.site-footer {
	background: rgba(13, 11, 26, 0.95);
	border-top: 1px solid var(--border-subtle);
	padding: 25px 0;
	position: relative;
	z-index: 1;
}

.site-footer p {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: 2px;
	margin: 0;
}

/* --- Animation Classes --- */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================
   GAME PAGE STYLES (shared across game pages)
   ============================================ */
.game-hero {
	position: relative;
	height: 50vh;
	min-height: 350px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.game-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 30%, var(--bg-dark) 100%);
}

.game-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 20px;
}

.game-hero-title {
	font-family: 'Cinzel Decorative', serif;
	font-size: clamp(28px, 5vw, 52px);
	color: var(--gold);
	letter-spacing: 4px;
	text-shadow: 0 0 40px rgba(201, 168, 76, 0.3);
	margin-bottom: 10px;
}

.game-hero-tag {
	font-family: 'Cinzel', serif;
	color: var(--text-muted);
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.back-link {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 100;
	font-family: 'Cinzel', serif;
	font-size: 13px;
	color: var(--gold) !important;
	padding: 10px 20px;
	border: 1px solid var(--border-subtle);
	background: rgba(13, 11, 26, 0.9);
	backdrop-filter: blur(5px);
	border-radius: 4px;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: 8px;
}

.back-link:hover {
	border-color: var(--gold);
	box-shadow: var(--shadow-gold);
}

.game-description {
	max-width: 800px;
	margin: 0 auto 50px;
	text-align: center;
	font-size: 18px;
	line-height: 1.8;
	color: var(--text-light);
	/* Better readability backing */
	background: rgba(13, 11, 26, 0.5);
	padding: 25px 30px;
	border: 1px solid var(--border-subtle);
	border-radius: 4px;
}

.game-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	max-width: 600px;
	margin: 0 auto 50px;
}

.game-detail {
	text-align: center;
	padding: 15px;
	border: 1px solid var(--border-gold);
	border-radius: 4px;
	background: rgba(26, 23, 48, 0.8);
}

.game-detail-label {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 2px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 5px;
}

.game-detail-value {
	font-family: 'Cinzel', serif;
	color: var(--gold);
	font-size: 15px;
}

.gallery-section {
	padding: 60px 0;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 15px;
	max-width: 1100px;
	margin: 0 auto;
}

.gallery-item {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var(--border-gold);
	transition: var(--transition);
}

.gallery-item:hover {
	border-color: var(--gold);
	box-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
	transform: scale(0.97);
}

.gallery-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.gallery-item:hover img {
	transform: scale(1.05);
}

.docs-section {
	padding: 60px 0;
	background: rgba(26, 23, 48, 0.5);
}

.docs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 15px;
	max-width: 900px;
	margin: 0 auto;
}

.doc-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px;
	border: 1px solid var(--border-gold);
	border-radius: 4px;
	background: rgba(13, 11, 26, 0.8);
	color: var(--text-light) !important;
	transition: var(--transition);
}

.doc-card:hover {
	border-color: var(--gold);
	color: var(--gold) !important;
	box-shadow: 0 0 15px rgba(201, 168, 76, 0.15);
	transform: translateY(-2px);
}

.doc-card i {
	font-size: 24px;
	color: var(--gold);
}

.doc-card span {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	letter-spacing: 1px;
}

.play-section {
	text-align: center;
	padding: 60px 0;
}

/* ============================================
   WALL TORCHES
   Absolute position — scroll with page content
   ============================================ */
.torch-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: visible;
}

.torch {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

.torch-left { left: 8px; }
.torch-right { right: 8px; }

/* Metal bracket */
.torch-bracket {
	width: 8px;
	height: 45px;
	margin: 0 auto;
	background: linear-gradient(180deg, #3a3028, #5a4a38 30%, #3a3028 60%, #2a2018);
	border-radius: 2px;
	position: relative;
	box-shadow: 1px 0 3px rgba(0,0,0,0.5);
}

.torch-bracket::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -5px;
	width: 18px;
	height: 8px;
	background: linear-gradient(180deg, #5a4a38, #3a3028);
	border-radius: 3px 3px 0 0;
	box-shadow: 0 -1px 4px rgba(201, 168, 76, 0.3);
}

/* Flame container */
.torch-flame-wrapper {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 35px;
}

/* Main flame */
.torch-flame {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 22px;
	background: radial-gradient(ellipse at bottom, #ffdd44 0%, #ff8800 40%, #ff4400 70%, transparent 100%);
	border-radius: 50% 50% 40% 40%;
	animation: flicker 0.15s ease-in-out infinite alternate, sway 2s ease-in-out infinite;
	filter: blur(1px);
}

.torch-flame.flame-2 {
	width: 7px;
	height: 18px;
	animation: flicker 0.12s ease-in-out infinite alternate, sway 1.7s ease-in-out infinite reverse;
	opacity: 0.8;
	background: radial-gradient(ellipse at bottom, #ffee66 0%, #ffaa22 50%, transparent 100%);
}

.torch-flame.flame-3 {
	width: 5px;
	height: 14px;
	animation: flicker 0.18s ease-in-out infinite alternate, sway 2.3s ease-in-out infinite;
	opacity: 0.6;
	background: radial-gradient(ellipse at bottom, #ffffff 0%, #ffdd66 50%, transparent 100%);
	bottom: 2px;
}

@keyframes flicker {
	0% { transform: translateX(-50%) scaleY(1) scaleX(1); }
	100% { transform: translateX(-50%) scaleY(1.15) scaleX(0.85); }
}

@keyframes sway {
	0%, 100% { margin-left: -1px; }
	50% { margin-left: 1px; }
}

/* Warm glow around torch */
.torch-glow {
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle at center,
		rgba(255, 150, 50, 0.1) 0%,
		rgba(255, 120, 30, 0.05) 30%,
		rgba(255, 100, 20, 0.025) 50%,
		transparent 70%
	);
	animation: glowPulse 3s ease-in-out infinite;
	pointer-events: none;
}

@keyframes glowPulse {
	0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
	50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.torch-container {
		display: none;
	}

	.section {
		padding: 60px 0;
	}

	.rune-border {
		padding: 30px 20px;
	}

	.hero-name {
		letter-spacing: 4px;
	}

	.hero-resume {
		flex-direction: column;
		align-items: center;
	}

	.nav-links {
		gap: 15px;
	}

	.nav-link {
		font-size: 12px;
	}

	.filter-btn {
		font-size: 10px;
		padding: 8px 14px;
	}

	.skills-grid {
		grid-template-columns: 1fr;
	}

	.stats-grid {
		gap: 15px;
	}

	.stat-item {
		min-width: 140px;
		padding: 15px 20px;
	}

	.stat-number {
		font-size: 36px;
	}

	.about-links {
		justify-content: center;
	}

	.frame-header {
		padding: 20px 25px;
	}

	.frame-text-box {
		padding: 20px;
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.frame-corner {
		width: 14px;
		height: 14px;
	}
	.frame-tl::before, .frame-tr::before, .frame-bl::before, .frame-br::before { width: 14px; }
	.frame-tl::after, .frame-tr::after, .frame-bl::after, .frame-br::after { height: 14px; }
}

@media (max-width: 480px) {
	.nav-links {
		gap: 10px;
	}

	.filter-btn {
		padding: 6px 10px;
		font-size: 9px;
	}

	.tools-grid {
		grid-template-columns: 1fr 1fr;
	}
}