/* ============================================================
   vikramaditya.xyz — dark portrait one-pager
   Design language: near-black radial backdrop, silver gradient
   display type, tight tracking, pill buttons, glass overlays.
   ============================================================ */

:root {
	--bg: #010101;
	--ink: #fff;
	--muted: #878787;
	--dark: #1d1f24;
	--grad-text: linear-gradient(180deg, #d4d4d4 0%, #535353 100%);
	--grad-text-dim: linear-gradient(180deg, #616161 0%, #454545 100%);
	--ease: cubic-bezier(0.33, 1, 0.68, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	font-size: 18px;
	scroll-behavior: smooth;
}
@media (min-width: 1920px) { html { font-size: 25px; } }
@media (max-width: 349px)  { html { font-size: 15px; } }

body {
	margin: 0;
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	letter-spacing: -0.03em;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* fixed radial glow behind everything */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: radial-gradient(circle, #1c1c1c 0%, #111 50%, #010101 100%);
}

::selection { background: #e9e9e9; color: var(--dark); }

body.is-loading,
body.nav-is-open,
body.overlay-is-open { overflow: hidden; }

a { color: inherit; text-decoration: none; cursor: pointer; transition: all 0.3s var(--ease); }
img { max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; letter-spacing: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

.shell {
	width: 100%;
	max-width: calc(100% - 2rem);
	margin-inline: auto;
}
@media (max-width: 991px) { .shell { max-width: calc(100% - 1.5rem); } }

/* ---------- type ---------- */

h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; font-weight: 500; line-height: 1.2; }

h2 {
	font-size: 2.75rem;
	letter-spacing: -0.06em;
	margin-bottom: 2.5rem;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	width: fit-content;
}
h3 { font-size: 1.67rem; line-height: 1.13; letter-spacing: -0.03em; }
h4 { font-size: 1.22rem; line-height: 1.3; opacity: 0.55; margin-bottom: 2rem; }
h5 { font-size: 0.9rem; margin: 2rem 0 0.5rem; }
h6 { font-size: 0.66rem; line-height: 1.5; opacity: 0.53; font-weight: 400; margin: 0; }
p  { font-size: 1rem; color: var(--muted); line-height: 1.45; margin: 0 0 1.5rem; }

@media (max-width: 767px) {
	h2 { font-size: 2.1rem; margin-bottom: 1.75rem; }
	h3 { font-size: 1.35rem; }
}

/* ---------- buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 1rem 1.67rem;
	background: #fff;
	color: var(--dark);
	font-size: 0.83rem;
	font-weight: 500;
	line-height: 1;
	border-radius: 1.7rem;
	transition: transform 0.3s var(--ease), opacity 0.3s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button svg { width: 0.9em; height: 0.9em; }

/* ---------- header ---------- */

.site-head {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 30;
	padding: 1.5rem 0 1rem;
}
/* soft fade so content scrolling underneath never collides with the logo */
.site-head::before {
	content: "";
	position: absolute;
	inset: 0 0 -45%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(1, 1, 1, 0.9) 45%, transparent);
}
.head-row {
	display: flex;
	align-items: center;
	position: relative;
}
.head-right { margin-left: auto; display: flex; align-items: center; position: relative; }

.logo {
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.04em;
	line-height: 1;
	display: inline-block;
	position: relative;
	z-index: 40;
}
.logo span { color: var(--muted); }

/* header pieces slide in after the loader */
.logo,
.nav-main ul li { opacity: 0; transform: translateY(0.8em); }
body.is-ready .logo,
body.is-ready .nav-main ul li {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.is-ready .nav-main ul li:nth-child(1) { transition-delay: 0.10s; }
body.is-ready .nav-main ul li:nth-child(2) { transition-delay: 0.18s; }
body.is-ready .nav-main ul li:nth-child(3) { transition-delay: 0.26s; }

/* ---------- loader ---------- */

.loading {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	font-size: 1.1rem;
	font-weight: 500;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.5s var(--ease) 0.25s;
}
.loading-counter { min-width: 2.2em; text-align: right; }
.loading-bar {
	width: 8.33rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.22);
	margin: 0 1rem;
	position: relative;
	overflow: hidden;
}
.loading-bar-fill {
	position: absolute;
	inset: 0;
	background: #fff;
	transform-origin: left;
	transform: scaleX(0);
}
.loading-full { opacity: 0.4; }
body.is-ready .loading { opacity: 0; }
@media (max-width: 767px) { .loading-bar { width: 2.77rem; margin: 0 0.5rem; } }

/* ---------- nav ---------- */

.nav-trigger {
	display: none;
	position: relative;
	z-index: 40;
	padding: 0.25rem;
	opacity: 0;
	transition: opacity 0.6s var(--ease) 0.3s;
}
body.is-ready .nav-trigger { opacity: 1; }

.nav-icon {
	display: inline-block;
	width: 1.35rem;
	height: 0.5rem;
	position: relative;
}
.nav-icon i {
	position: absolute;
	left: 0;
	height: 1px;
	width: 100%;
	background: #fff;
	transition: transform 0.3s ease-in-out;
}
.nav-icon i:nth-child(1) { top: 0; }
.nav-icon i:nth-child(2) { top: 0.25rem; }
.nav-icon i:nth-child(3) { top: 0.5rem; }
body.nav-is-open .nav-icon i:nth-child(1) { transform: translateY(0.25rem) rotate(45deg); }
body.nav-is-open .nav-icon i:nth-child(2) { transform: scaleX(0); }
body.nav-is-open .nav-icon i:nth-child(3) { transform: translateY(-0.25rem) rotate(-45deg); }

/* desktop: centered inline nav with dim gradient links */
.nav-main {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.nav-main ul { display: flex; gap: 2rem; }
.nav-main ul li a {
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	display: block;
	background: var(--grad-text-dim);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.nav-main ul li a:hover { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; }

.nav-close-bg { display: none; }

/* mobile: hamburger + fullscreen sheet */
@media (max-width: 991px) {
	.nav-trigger { display: inline-block; }

	.nav-main {
		position: fixed;
		inset: 0;
		transform: none;
		background: radial-gradient(circle, #1c1c1c 0%, #111 50%, #010101 100%);
		opacity: 0;
		pointer-events: none;
		padding: 6rem 1rem 0;
		z-index: 35;
		transition: opacity 0.4s var(--ease);
	}
	.nav-main ul { flex-direction: column; gap: 1rem; overflow: hidden; }
	.nav-main ul li {
		transform: translateY(-100%);
		opacity: 0;
		transition: all 0.3s var(--ease);
	}
	.nav-main ul li a {
		font-size: 1.35rem;
		background: var(--grad-text);
		-webkit-background-clip: text;
		background-clip: text;
	}
	body.nav-is-open .nav-main { opacity: 1; pointer-events: all; }
	body.nav-is-open .nav-main ul li { transform: none; opacity: 1; }
	body.nav-is-open .nav-main ul li:nth-child(1) { transition-delay: 0.05s; }
	body.nav-is-open .nav-main ul li:nth-child(2) { transition-delay: 0.15s; }
	body.nav-is-open .nav-main ul li:nth-child(3) { transition-delay: 0.25s; }
}

/* ---------- social icons ---------- */

.social {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.social li a {
	display: block;
	padding: 0.25rem;
	line-height: 1;
	opacity: 0.9;
}
.social li a:hover { opacity: 1; transform: translateY(-2px); }
.social svg { width: 1.28rem; height: 1.28rem; display: block; }
.social.--small svg { width: 1rem; height: 1rem; }
.social.--small li a { opacity: 0.62; }
.social.--small li a:hover { opacity: 1; }

/* ---------- hero ---------- */

.hero {
	position: relative; /* lift above .about, which is pulled up -100svh and would swallow clicks */
	z-index: 2;
	min-height: 100svh;
	display: flex;
	align-items: stretch;
	padding-top: 8.5rem;
}
.hero-row {
	display: flex;
	width: 100%;
	gap: 2rem;
	align-items: flex-start;
}
.hero-copy { width: 30%; min-width: 19rem; }
.hero-copy .social { margin-top: 2.5rem; }
.hero-side { margin-left: auto; width: 24%; min-width: 17rem; }

@media (max-width: 991px) {
	.hero { padding-top: 7rem; min-height: auto; padding-bottom: 3rem; }
	.hero-row { flex-direction: column; }
	.hero-copy { width: 100%; min-width: 0; }
	.hero-side { margin-left: 0; width: 100%; min-width: 0; max-width: 26rem; }
}
@media (max-width: 767px) {
	.hero { padding-top: 6.5rem; padding-bottom: 2.5rem; }
	.hero-copy .social { margin-top: 2rem; }
	.social li a { padding: 0.4rem; } /* comfortable tap targets */
}

/* split-line reveal (lines are wrapped by JS) */
.split-lines .line {
	display: block;
	overflow: hidden;
}
.split-lines .line > span {
	display: block;
	transform: translateY(110%);
	opacity: 0;
}
body.is-ready .split-lines .line > span {
	transform: none;
	opacity: 1;
	transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
}

/* generic reveal-on-ready / reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(1.5rem); }
.reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ---------- hero instagram card ---------- */

.ig-card {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.ig-frame {
	display: block;
	width: 100%;
	height: 24rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.9rem;
	background: rgba(255, 255, 255, 0.03);
}
.ig-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: flex-start;
	font-size: 0.72rem;
	color: var(--muted);
	transition: color 0.3s;
}
.ig-link:hover { color: #fff; }
.ig-link svg { width: 0.85rem; height: 0.85rem; }

/* ---------- about ---------- */

.about { position: relative; }

/* pull the pinned name + portrait up so they underlay the hero viewport */
@media (min-width: 992px) {
	.about { margin-top: -100svh; }
}

.name-stage {
	position: sticky;
	top: 0;
	z-index: -1;
	height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: clip;
}
.name-stage h1 {
	position: absolute;
	bottom: 1.5rem;
	left: 1rem;
	z-index: 1;
	margin: 0;
	font-size: 9.7vw;
	line-height: 1.1;
	white-space: nowrap;
	font-weight: 500;
	letter-spacing: -0.07em;
	opacity: 0;
	transform: translateY(15%);
}
body.is-ready .name-stage h1 {
	opacity: 1;
	transform: none;
	transition: opacity 1.2s var(--ease) 0.5s, transform 1.2s var(--ease) 0.5s, translate 0.4s var(--ease);
}
.name-stage h1 span {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.portrait {
	position: relative;
	z-index: 3;
	display: block;
	height: 88svh;
	width: auto;
	max-width: none;
	margin: 0 auto;
	object-fit: contain;
	opacity: 0;
	transform: translateY(6%);
}
body.is-ready .portrait {
	opacity: 1;
	transform: none;
	transition: opacity 1.4s var(--ease) 0.7s, transform 1.4s var(--ease) 0.7s, translate 0.4s var(--ease);
}

.about-text { position: relative; z-index: 2; padding: 40vh 0 6rem; }
.about-col { max-width: 27rem; margin-left: auto; margin-right: 4%; }
.about-col .social { margin-top: 3rem; }

@media (max-width: 767px) {
	/* mirror the desktop choreography: portrait pins centre-screen and the
	   about copy scrolls up over it until the section ends */
	.name-stage {
		height: 100svh;
		position: sticky;
		top: 0;
		z-index: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
	}
	/* name flows directly under the portrait as one centred group */
	.name-stage h1 {
		position: static;
		z-index: 4;
		width: 100%;
		padding: 0 0.75rem;
		white-space: normal;
		font-size: 13vw !important; /* beats the JS fitName inline size */
		line-height: 0.95;
	}
	.portrait { height: 60svh; }
	.about-text {
		position: relative;
		z-index: 2;
		padding: 4.5rem 0 4rem;
		/* opaque panel (matched to the page glow) that slides over the portrait;
		   fades in at the top edge so the reveal is soft */
		background: linear-gradient(180deg, rgba(16, 16, 18, 0) 0%, #101012 8%, #0b0b0d 100%);
	}
	.about-col { margin-right: 0; }
}

/* ---------- work / now building ---------- */

.work {
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 6rem 0;
}
.work-row {
	display: flex;
	gap: 4rem;
	align-items: center;
	width: 100%;
}
.work-copy { width: 42%; }
.work-side { width: 58%; }

.visual-box {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 1rem;
	overflow: hidden;
}
.visual-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.visual-box:hover .visual-photo { transform: scale(1.03); }
.button-visual { position: absolute; left: 1.25rem; bottom: 1.25rem; }

@media (max-width: 991px) {
	.work { min-height: auto; padding: 4rem 0; }
	.work-row { flex-direction: column; gap: 2.5rem; align-items: flex-start; }
	.work-copy, .work-side { width: 100%; }
}
@media (max-width: 767px) {
	.work { padding: 3.5rem 0; }
	.work-row { gap: 2rem; }
	/* stack the CTA under the image at full container width instead of
	   overlaying it on the small artwork */
	.visual-box {
		aspect-ratio: auto;
		border-radius: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}
	.visual-photo {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 1rem;
	}
	.button-visual {
		position: static;
		left: auto;
		bottom: auto;
		width: 100%;
		justify-content: center;
	}
}

/* ---------- contact ---------- */

.contact { padding: 5rem 0 6rem; }
.contact-row {
	display: flex;
	gap: 4rem;
	align-items: center;
}
.contact-copy { width: 42%; }
.contact-form { width: 42%; margin-left: auto; }

input, textarea {
	font: inherit;
	letter-spacing: inherit;
	width: 100%;
	background: transparent;
	color: #fff;
	border: 1px solid currentColor;
	border-radius: 9px;
	opacity: 0.55;
	padding: 1.4em 1.5rem;
	font-size: 0.83rem;
	margin-bottom: 1rem;
	transition: opacity 0.3s;
}
input:hover, input:focus, textarea:hover, textarea:focus { opacity: 1; outline: none; }
input::placeholder, textarea::placeholder { color: #fff; opacity: 1; }
textarea { height: 7rem; resize: vertical; }

.form-foot {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.radio {
	display: flex;
	align-items: flex-start;
	font-size: 0.61rem;
	line-height: 1.5;
	color: var(--muted);
	cursor: pointer;
}
.radio input {
	appearance: none;
	width: 1rem;
	height: 1rem;
	padding: 0;
	margin: 0 0.6rem 0 0;
	border: 1px solid #fff;
	border-radius: 50%;
	flex-shrink: 0;
	cursor: pointer;
	opacity: 0.55;
	position: relative;
}
.radio input:checked { opacity: 1; }
.radio input:checked::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: #fff;
}
.form-note { font-size: 0.72rem; margin: 1rem 0 0; min-height: 1em; }

@media (max-width: 991px) {
	.contact-row { flex-direction: column; gap: 1rem; align-items: flex-start; }
	.contact-copy, .contact-form { width: 100%; }
	.form-foot { flex-direction: column; gap: 1.5rem; }
}
@media (max-width: 767px) {
	.contact { padding: 3.5rem 0 4rem; }
	/* 16px floor stops iOS Safari from zoom-jumping into focused fields */
	input, textarea { font-size: 16px; padding: 1.1em 1.2rem; }
	.radio { font-size: 0.67rem; }
	/* submit stretches to the full field width */
	.form-foot .button { width: 100%; justify-content: center; }
}

/* ---------- footer ---------- */

footer { padding: 2rem 0 2.5rem; }
.foot-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.foot-links {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.foot-links a { font-size: 0.67rem; color: var(--muted); display: block; line-height: 1; }
.foot-links a:hover { color: #fff; }
.foot-links .to-top svg { width: 0.9rem; height: 0.9rem; display: block; }

@media (max-width: 767px) {
	.foot-row { justify-content: center; }
	.foot-links { margin-left: 0; }
}

/* ---------- overlays ---------- */

.overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: linear-gradient(180deg, rgba(23, 23, 23, 0.55), rgba(19, 19, 19, 0.55));
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	transition: all 0.6s var(--ease);
	overflow: hidden;
}
.overlay.is-open {
	opacity: 1;
	transform: none;
	pointer-events: all;
}
.overlay-box {
	height: 100%;
	overflow-y: auto;
	padding: 7rem 0 4rem;
}
.overlay-grid {
	display: flex;
	gap: 4rem;
	align-items: flex-start;
}
.overlay-grid h3 { width: 33%; }
.overlay-grid > div { width: 50%; }
.close-overlay {
	position: absolute;
	top: 1.9rem;
	right: 1.25rem;
	z-index: 2;
	width: 1.35rem;
	height: 1.35rem;
}
.close-overlay::before,
.close-overlay::after {
	content: "";
	position: absolute;
	top: 50%; left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: transform 0.3s;
}
.close-overlay::before { transform: rotate(45deg); }
.close-overlay::after { transform: rotate(-45deg); }
.close-overlay:hover::before { transform: rotate(45deg) scale(0.8); }
.close-overlay:hover::after { transform: rotate(-45deg) scale(0.8); }

@media (max-width: 767px) {
	.overlay-grid { flex-direction: column; gap: 1rem; }
	.overlay-grid h3, .overlay-grid > div { width: 100%; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}