/* Saswat Ranjan Sahoo — portfolio */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}

:root {
	--ink: #05070a;
	--panel-bg: rgba(13, 17, 23, 0.88);
	--line: rgba(255, 255, 255, 0.10);
	--line-strong: rgba(125, 211, 252, 0.42);
	--text: #f5f7f9;
	--muted: #8d98a5;
	--body-text: #b7bec7;
	--accent: #7dd3fc;
	--edge: rgba(255, 255, 255, 0.65);
	--fade: 0.325s ease-in-out;
}

/* ---------- Base ---------- */

* { margin: 0; padding: 0; font: inherit; }
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16pt; background: var(--ink); }
body {
	background: var(--ink);
	color: #fff;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
	-webkit-text-size-adjust: none;
}

@media (max-width: 1680px) { html { font-size: 12pt; } }
@media (max-width: 736px)  { html { font-size: 11pt; } }
@media (max-width: 480px)  { html, body { min-width: 320px; } }
@media (max-width: 360px)  { html { font-size: 10pt; } }

header, nav, section, footer { display: block; }
ul { list-style: none; }
strong { color: #fff; font-weight: 600; }
p { margin-bottom: 2rem; }

h1, h2, h3 {
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-bottom-color .2s ease-in-out;
}
a:hover { color: var(--accent); border-bottom-color: transparent; }

/* While loading: no transitions or animations, so the intro plays once. */
body.is-loading *, body.is-loading *::before, body.is-loading *::after {
	animation: none !important;
	transition: none !important;
}

/* ---------- Backdrop ---------- */

.backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
	background: var(--ink);
	-webkit-backface-visibility: hidden;
}
.backdrop::before, .backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
}
.backdrop::after {
	z-index: 1;
	background-image:
		linear-gradient(90deg, rgba(5,7,10,0.04) 0%, rgba(5,7,10,0.08) 45%, rgba(5,7,10,0.28) 72%, rgba(5,7,10,0.56) 100%),
		linear-gradient(180deg, rgba(5,7,10,0.08) 0%, rgba(5,7,10,0.18) 100%),
		url("../../images/cinematic-cyber-bg.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform .325s ease-in-out, filter .325s ease-in-out;
}
.backdrop::before {
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
		radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(125,211,252,0.055), transparent 28%),
		linear-gradient(180deg, rgba(3,5,8,0.08), rgba(3,5,8,0.18));
	background-size: 48px 48px, 48px 48px, auto, auto;
	background-position: center;
	background-repeat: repeat, repeat, no-repeat, no-repeat;
	transition: background-color 2.5s ease-in-out;
	transition-delay: .75s;
}
body.is-loading .backdrop::before { background-color: #000; }
body.panel-open .backdrop::after { transform: scale(1.015); filter: blur(0.04rem); }

@media (max-width: 736px) {
	.backdrop::after { background-position: 34% center; }
}

/* ---------- Page layout ---------- */

.page {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 100vh;
	padding: 4rem 2rem;
}
.page::before { content: ''; display: block; }

@media (max-width: 1680px) { .page { padding: 3rem 2rem; } }
@media (max-width: 736px)  { .page { padding: 2rem 1rem; } }
@media (max-width: 480px)  { .page { padding: 1rem; } }

/* ---------- Hero ---------- */

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	text-align: center;
	background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
	transition: transform var(--fade), filter var(--fade), opacity var(--fade);
}
.hero > * {
	position: relative;
	margin-top: 3.5rem;
	transition: opacity var(--fade);
}
/* vertical connector between hero blocks */
.hero > *::before {
	content: '';
	position: absolute;
	top: calc(-3.5rem - 1px);
	left: calc(50% - 1px);
	width: 1px;
	height: calc(3.5rem + 1px);
	background: #fff;
}
.hero > :first-child { margin-top: 0; }
.hero > :first-child::before { display: none; }

body.panel-open .hero { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-loading .hero { filter: blur(0.125rem); }
body.is-loading .hero > * { opacity: 0; }

.hero-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	overflow: hidden;
	border: 1px solid rgba(125, 211, 252, 0.50);
	border-radius: 100%;
	background: rgba(7, 10, 14, 0.65);
	box-shadow: 0 0 50px rgba(125,211,252,0.07), inset 0 0 25px rgba(125,211,252,0.035);
}
.hero-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	transform: translateZ(0);
}

.hero-body {
	max-width: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.hero-inner {
	max-width: 74rem;
	max-height: 40rem;
	overflow: hidden;
	padding: 3rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.16);
	border-bottom: 1px solid rgba(255,255,255,0.16);
	background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 55%);
	box-shadow: 0 30px 90px rgba(0,0,0,0.18);
	transition: max-height .75s ease, padding .75s ease, opacity var(--fade);
	transition-delay: .25s;
}
body.is-loading .hero-inner { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

.hero-inner p {
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	line-height: 2;
}
.hero-inner > :last-child { margin-bottom: 0; }

.hero-inner .eyebrow {
	color: var(--accent);
	font-size: 0.68rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	text-shadow: 0 0 22px rgba(125,211,252,0.18);
}
.hero-name {
	font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
	font-size: clamp(1.72rem, 4vw, 3.8rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text);
	text-shadow: 0 12px 55px rgba(0,0,0,.58), 0 0 28px rgba(125,211,252,.035);
	margin-bottom: 1.35rem;
}
.hero-inner .hero-copy {
	color: #9ba5b1;
	font-size: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
	.hero-inner > * { animation: rise .8s both; }
	.hero-inner > :nth-child(2) { animation-delay: .12s; }
	@keyframes rise {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: none; }
	}
}

/* Navigation */

.hero > .hero-nav {
	width: min(100%, 42rem);
	margin: 2.25rem auto 0;
}
/* centre divider (added by script when the item count is even) */
.hero-nav.split::after {
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
	width: 1px;
	height: 100%;
	background: #fff;
}
.hero-nav ul {
	display: flex;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--edge);
	border-radius: 4px;
}
.hero-nav li {
	flex: 1 1 0;
	width: 25%;
	min-width: 0;
	border-left: 1px solid var(--edge);
}
.hero-nav li:first-child { border-left: 0; }
.hero-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 3rem;
	line-height: 2.75rem;
	text-align: center;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 0.66rem;
	font-weight: 700;
	color: rgba(245, 247, 249, 0.78);
	background: rgba(255, 255, 255, 0.018);
	border: 0;
	transition: transform .3s ease, border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.hero-nav a:hover {
	color: var(--text);
	background: rgba(125, 211, 252, 0.055);
	box-shadow: 0 10px 35px rgba(0,0,0,0.22), 0 0 24px rgba(125,211,252,0.055);
	transform: translateY(-2px);
}

@media (max-width: 980px) {
	.hero-copy br { display: none; }
}

@media (max-width: 736px) {
	.hero > * { margin-top: 2rem; }
	.hero > *::before { top: calc(-2rem - 1px); height: calc(2rem + 1px); }
	.hero-mark { width: 4.75rem; height: 4.75rem; }
	.hero-inner { padding: 2rem 1rem; }
	.hero-inner p { line-height: 1.875; }
	.hero-name {
		font-size: clamp(1.32rem, 7.2vw, 2.2rem);
		letter-spacing: -0.055em;
	}
	.hero-nav ul { flex-direction: column; }
	.hero-nav li { width: 100%; border-left: 0; }
	.hero-nav li:not(:first-child) { border-top: 1px solid var(--edge); }
	.hero-nav.split::after { display: none; }
}

@media (max-width: 480px) {
	.hero { padding: 1.5rem 0; }
	.hero-nav a { line-height: 3rem; }
}

/* ---------- Panels ---------- */

.panels {
	position: relative;
	z-index: 3;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.panel {
	position: relative;
	width: 40rem;
	max-width: 100%;
	padding: 4.5rem 2.5rem 1.5rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: linear-gradient(145deg, rgba(15,20,27,.96), rgba(7,9,12,.94));
	box-shadow: 0 30px 100px rgba(0,0,0,.35);
	opacity: 0;
	transform: translateY(0.25rem);
	transition: opacity var(--fade), transform var(--fade);
}
.panel.active { opacity: 1; transform: translateY(0); }

.panel p, .panel li { color: var(--body-text); }

.panel-title {
	width: max-content;
	margin-bottom: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #fff;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

.close {
	position: absolute;
	top: 0;
	right: 0;
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	border: 0;
	background: none;
}
.close::before {
	content: '';
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 100%;
	background: center / 20px 20px no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
	transition: background-color .2s ease-in-out;
}
.close:hover::before { background-color: rgba(255, 255, 255, 0.075); }
.close:focus { outline: none; }
.close:focus-visible::before { outline: 1px solid var(--accent); }

@media (max-width: 736px) {
	.panel { padding: 3.5rem 2rem 0.5rem; }
	.panel-title { font-size: 1.25em; line-height: 1.5; }
	.close::before { top: 0.875rem; left: 0.875rem; width: 2.25rem; height: 2.25rem; background-size: 14px 14px; }
}
@media (max-width: 480px) {
	.panel { padding: 3rem 1.5rem 0.5rem; }
}

/* About */

.lead {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	margin: 1rem 0 2rem;
}
.lead p {
	margin: 0;
	color: var(--text);
	font-size: 1.05rem;
}
.index, .project-number, .step > span {
	color: var(--accent);
	font: 700 .68rem/1 Arial, sans-serif;
	letter-spacing: .12em;
}

.facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 2rem;
	background: var(--line);
}
.facts > div { padding: 1.1rem; background: rgba(8,11,15,.95); }
.facts span, .tags {
	display: block;
	margin-bottom: .45rem;
	color: var(--muted);
	font-size: .58rem;
	letter-spacing: .14em;
}
.facts strong { color: var(--text); font-size: .82rem; }

@media (max-width: 736px) {
	.facts { grid-template-columns: 1fr; }
}

/* Projects */

.projects { display: grid; gap: 1rem; }
.project {
	display: grid;
	grid-template-columns: 40px 1fr 30px;
	align-items: start;
	gap: 1rem;
	padding: 1.3rem;
	border: 1px solid var(--line);
	background: rgba(255,255,255,.025);
	transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.project:hover {
	transform: translateY(-5px);
	border-color: rgba(125,211,252,.55);
	background: rgba(125,211,252,.045);
	box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.project h3 { margin: 0 0 .45rem; font-size: 1.15rem; color: var(--text); }
.project p { margin: 0 0 .8rem; font-size: .82rem; }
.project-arrow {
	color: var(--accent);
	font-size: 1.3rem;
	transition: transform .3s ease;
}
.project:hover .project-arrow { transform: translate(3px, -3px); }

/* Experience */

.timeline { position: relative; margin-top: 1rem; }
.timeline::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--line);
}
.step {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 1rem;
	padding: 0 0 1.8rem;
}
.step:last-child { padding-bottom: 0; }
.step > span { z-index: 1; background: var(--panel-bg); }
.step h3 { margin: 0 0 .3rem; font-size: 1rem; }
.step p { margin: 0; font-size: .8rem; }

/* Contact */

.panel .contact-lead { color: var(--text); font-size: 1.05rem; }
.contact-links { margin: 2rem 0 0; }
.contact-links li {
	padding-left: 0.5em;
	border-top: 1px solid var(--line);
}
.contact-links li:last-child { border-bottom: 1px solid var(--line); }
.contact-links a {
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	font-weight: 700;
	letter-spacing: .08em;
}
.contact-links span { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
	width: 100%;
	max-width: 100%;
	margin-top: 2rem;
	text-align: center;
	transition: transform var(--fade), filter var(--fade), opacity var(--fade);
}
.site-footer p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.38);
	font-size: 0.6rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	opacity: 0.75;
}
body.panel-open .site-footer { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-loading .site-footer { opacity: 0; }