/* Современный минималистичный дизайн */

:root {
	--bg-primary: #000000;
	--bg-secondary: #101010;
	--bg-card: #1a1a1a;
	--bg-card-hover: #222222;
	--border-color: #333333;
	--border-hover: #444444;
	--text-primary: #ffffff;
	--text-secondary: #b3b3b3;
	--text-muted: #808080;
	--accent: #ffffff;
	--accent-hover: #cccccc;
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	--shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.3);
	--radius: 8px;
	--transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	min-height: 100vh;
	padding: 3rem 2rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header */
.studio-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin: 0 0 1rem 0;
	text-align: center;
}

.site-info {
	color: var(--text-secondary);
	font-size: 1rem;
	margin: 0 auto 4rem auto;
	max-width: 500px;
	text-align: center;
	font-weight: 300;
	letter-spacing: 0.05em;
}

/* Studio info block under header */
.studio-info {
	max-width: 900px;
	margin: 1.2rem auto 2.5rem;
	text-align: center;
}
.studio-desc {
	color: var(--text-secondary);
	font-weight: 300;
	max-width: 70ch;
	margin: 0.6rem auto 0.8rem;
}
/* .more-info and related studio/extra blocks removed to keep stylesheet minimal */

@media (max-width:900px){
	.more-columns{grid-template-columns:1fr;}
	.projects-meta{flex-direction:column;align-items:stretch}
}
.studio-details {
	list-style: none;
	display: flex;
	gap: 1.6rem;
	justify-content: center;
	flex-wrap: wrap;
	color: var(--text-muted);
	font-size: 0.95rem;
}
.studio-details li strong { color: var(--accent); font-weight:600; margin-right:0.4rem }
.contact-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0.08); }
.contact-link:hover { opacity: 0.95; }

.projects-section {
	max-width: 1200px;
	margin: 0 auto;
}

.projects-title {
	font-size: 1.5rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	margin-bottom: 2rem;
	color: var(--text-secondary);
}
/* Search Bar */
.search-bar {
	max-width: 500px;
	margin: 0 auto 3rem;
}

#projectSearch {
	width: 100%;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	font-weight: 300;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-color);
	border-radius: 0;
	color: var(--text-primary);
	outline: none;
	transition: var(--transition);
	text-align: center;
	letter-spacing: 0.1em;
}

#projectSearch:focus {
	border-bottom-color: var(--accent);
}

#projectSearch::placeholder {
	color: var(--text-muted);
	font-weight: 300;
	letter-spacing: 0.1em;
}
/* Projects Grid */
.projects-grid {
	display: grid;
	/* slightly larger compact columns so tiles are more prominent and square */
	grid-template-columns: repeat(3, 280px);
	justify-content: center;
	gap: 0.3rem; /* small spacing between tiles */
}

/* projects meta toolbar */
.projects-meta{
	display:flex;
	justify-content:space-between;
	gap:1rem;
	align-items:center;
	max-width:900px;
	margin:0 auto 0.8rem;
}
.projects-meta .meta-left{ color:var(--text-secondary); font-size:0.95rem; display:flex; gap:0.9rem; align-items:center }
.projects-meta .meta-right{ display:flex; gap:0.5rem; align-items:center }
.projects-meta select{ background:transparent; color:var(--text-primary); border:1px solid rgba(255,255,255,0.06); padding:0.45rem 0.6rem; border-radius:8px }
.projects-meta .meta-count strong{ color:var(--accent); }

/* Project card - flattened/valid CSS */
.project-card {
  /* tiles positioned flush against each other */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  width:280px;
  max-width:100%;
  aspect-ratio:1/1;
  gap:0;
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 0;
  text-decoration:none;
  color: var(--text-primary);
  box-shadow: 0 10px 26px rgba(0,0,0,0.13);
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.project-card:hover{
  transform: translateY(-8px) scale(1.025);
  box-shadow: 0 22px 48px rgba(0,0,0,0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

.project-card h3{font-size:1.02rem;margin:0;color:var(--accent);font-weight:600}
.project-card p{font-size:0.92rem;margin:0;color:var(--text-muted);font-weight:400}
.loading::before {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid var(--border-color);
	border-top: 2px solid var(--accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* No Results */
.no-results {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--text-muted);
	padding: 4rem 2rem;
	font-size: 1.1rem;
	font-style: italic;
}

/* Hidden elements */
.filtered-out {
	display: none;
}

/* Highlight search matches */
.search-highlight {
	background: rgba(99, 102, 241, 0.3);
	padding: 2px 4px;
	border-radius: 4px;
	font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	body {
		padding: 1rem;
	}
	
	header {
		margin-bottom: 2rem;
	}
	
	header h1 {
		font-size: 2.5rem;
	}
	
	.search-bar {
		margin-bottom: 2rem;
	}
	
	#projectSearch {
		padding: 1rem 1.2rem;
		font-size: 1rem;
	}
	
	.projects-grid {
		grid-template-columns: repeat(2, 240px);
		justify-content: center;
		gap: 0.3rem;
	}
    
	.project-card {
		padding: 0;
		width: 240px;
	}
	
	.project-card h3 {
		font-size: 1.2rem;
	}
	
	.project-card p {
		font-size: 0.9rem;
	}
}

.hero{
	padding:5.5rem 0 4rem;
	position:relative;
	overflow:hidden;
	transform-style: preserve-3d;
	perspective: 1200px;
	pointer-events: auto;
}
.site-title{
	font-size:clamp(2rem,5vw,3.4rem);
	margin:0 0 .5rem;
	color:var(--accent);
	letter-spacing:0.2px;
	transform:translateZ(40px);
	text-shadow:0 10px 30px rgba(0,0,0,0.3);
	animation: titleFloat 6s ease-in-out infinite;
}
@keyframes titleFloat {
	0%, 100% { transform:translateZ(40px) translateY(0px); }
	50% { transform:translateZ(50px) translateY(-8px); }
}
.lead{
	color:var(--muted);
	max-width:60ch;
	margin:0 0 1.25rem;
	transform:translateZ(20px);
	animation: leadFloat 8s ease-in-out infinite;
}
@keyframes leadFloat {
	0%, 100% { transform:translateZ(20px) translateY(0px); }
	50% { transform:translateZ(30px) translateY(-4px); }
} 
.hero-actions{
	display:flex;
	gap:0.75rem;
	transform:translateZ(30px);
	position: relative;
	z-index: 20;
	pointer-events: auto;
}

.btn{
  --bg-primary: #18191a;
  --bg-secondary: #232425;
  --bg-card: rgba(40, 40, 40, 0.95);
  --bg-card-hover: rgba(60, 60, 60, 1);
  --border-color: #2c2c2c;
  --border-hover: #444;
  --text-primary: #f5f5f5;
  --text-secondary: #b0b0b0;
  --text-muted: #888;
  --accent: #fff;
  --accent-hover: #bbb;
  --shadow: 0 2px 12px rgba(0,0,0,0.18);
  --shadow-hover: 0 4px 24px rgba(0,0,0,0.22);
  --radius: 10px;
  --transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
	will-change:transform, box-shadow;
	position: relative;
	overflow: hidden;
	z-index: 50;
	pointer-events: auto;
	user-select: none;
}
.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
	opacity: 0;
	transition: opacity 0.4s ease;
}
.btn.ghost{
	background:rgba(255,255,255,0.05);
	border:1px solid rgba(255,255,255,0.15);
	color:var(--accent);
	backdrop-filter:blur(20px);
}
.btn.primary{
	background:linear-gradient(135deg, #ffffff, #f0f0f0);
	color:#1a1a1b;
	box-shadow:0 8px 30px rgba(255,255,255,0.2);
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.3);
	font-weight:700;
}
.btn:hover{
	transform:translateY(-6px) scale(1.05);
	box-shadow:0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.3);
	background:rgba(255,255,255,0.18);
	border-color:rgba(255,255,255,0.4);
}
.btn:active{
	transform:translateY(-2px) scale(1.02);
	transition:all .1s ease;
}
.btn.ghost:hover {
	background:rgba(255,255,255,0.15);
	border-color:rgba(255,255,255,0.35);
}
.btn:hover::before {
	opacity: 1;
}
.btn.primary:hover {
	background:linear-gradient(135deg, #ffffff, #f5f5f5);
	box-shadow:0 20px 50px rgba(255,255,255,0.5), 0 0 0 1px rgba(255,255,255,0.8);
	color:#0a0a0a;
}
/* Ensure buttons are always clickable */
.btn {
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}
.btn.tiny{
	padding:.35rem .6rem;
	font-size:.85rem;
	border-radius:6px;
}

/* utility: square button container */
.btn.square{
	width:48px;
	height:48px;
	padding:0;
	display:inline-grid;
	place-items:center;
	border-radius:8px;
}

.hero-decor{
	position:absolute;
	right:-10%;
	top:-10%;
	width:55vmax;
	height:55vmax;
	background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03), transparent 18%), conic-gradient(from 180deg, rgba(255,255,255,0.02), transparent);
	filter:blur(48px);
	transform:rotate(10deg) translateZ(-20px);
	pointer-events:none;
	opacity:0.9;
	animation: decorFloat 12s ease-in-out infinite;
	z-index: -1;
}
@keyframes decorFloat {
	0%, 100% { transform:rotate(10deg) translateZ(-20px) scale(1); }
	33% { transform:rotate(15deg) translateZ(-10px) scale(1.05); }
	66% { transform:rotate(5deg) translateZ(-30px) scale(0.95); }
}



.section-title{
	font-size:1.25rem;
	margin:0 0 1rem;
	color:var(--accent);
	position:relative;
	padding:1rem 2rem;
	background:rgba(255,255,255,0.03);
	backdrop-filter:blur(15px) saturate(180%);
	border-radius:16px;
	border:1px solid rgba(255,255,255,0.06);
	box-shadow:0 8px 32px rgba(0,0,0,0.12);
	text-align:center;
	font-weight:700;
	background:linear-gradient(135deg, #ffffff, #e0e0e0, #ffffff);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
}
.section-title::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
	border-radius:16px;
	opacity:0;
	transition:opacity 0.4s ease;
}
.section-title:hover::before {
	opacity:1;
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.card{
	background:linear-gradient(180deg,var(--panel),#2a2a2e);
	padding:1.5rem 1.3rem;
	border-radius:16px;
	border:1px solid rgba(255,255,255,0.1);
	box-shadow:0 8px 32px rgba(0,0,0,0.15);
	transition:transform .3s cubic-bezier(.2,.9,.2,1),box-shadow .3s cubic-bezier(.2,.9,.2,1);
	backdrop-filter:blur(15px);
	transform-style: preserve-3d;
	position: relative;
	overflow: hidden;
}
.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.card h3{margin:0 0 .5rem;transform:translateZ(20px)}
.card p{transform:translateZ(10px)}
.card:hover{
	transform:translateY(-16px) rotateX(8deg) rotateY(-2deg) translateZ(30px);
	box-shadow:0 25px 60px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.1);
}
.card:hover::before {
	opacity: 1;
}
.card h3{margin:0 0 .5rem}
.card p{margin:0;color:var(--muted);font-size:1rem}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 24px 60px rgba(0,0,0,0.22)}

/* Section styles */
.about, .projects {
	padding: 4rem 0;
	position: relative;
	min-height: 300px; /* Ensure sections have sufficient height */
}

.about {
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.01));
}

.projects {
	background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
}

/* Legacy .projects-grid rule removed - using updated rules above */

.about-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

.about-list li {
	padding: 0.8rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color: var(--muted);
	line-height: 1.6;
}

.about-list li:last-child {
	border-bottom: none;
}

.about-list strong {
	color: var(--accent);
	font-weight: 600;
}

/* Search functionality styles */
.search-container {
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.search-input-wrapper {
	position: relative;
	width: 100%;
	max-width: 400px;
	display: flex;
	align-items: center;
}

.search-input {
	width: 100%;
	padding: 1.4rem 1.4rem 1.4rem 3.5rem;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(24px) saturate(200%);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 50px;
	color: var(--accent);
	font-size: 1.05rem;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	outline: none;
	box-shadow: 0 6px 25px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.15);
}

.search-input::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.search-input:focus {
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.4);
	box-shadow: 0 15px 45px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.2);
	transform: translateY(-4px) scale(1.02);
}

.search-icon {
	position: absolute;
	left: 1rem;
	color: var(--muted);
	opacity: 0.7;
	transition: all 0.3s ease;
	pointer-events: none;
}

.search-input:focus + .search-icon {
	color: var(--accent);
	opacity: 1;
}

.search-clear {
	position: absolute;
	right: 1rem;
	background: rgba(255,255,255,0.1);
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
}

.search-clear:hover {
	background: rgba(255,255,255,0.2);
	color: var(--accent);
	transform: scale(1.1);
}

.search-results-count {
	color: var(--muted);
	font-size: 0.9rem;
	opacity: 0.8;
	text-align: center;
}

/* Project card filtering */
.project-card.filtered-out {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Highlight matching text in search results */
.search-highlight {
	background: rgba(255,255,255,0.2);
	padding: 2px 4px;
	border-radius: 4px;
	font-weight: 600;
}

/* No results message */
.no-results-message {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var(--muted);
	opacity: 0.7;
}

.no-results-message svg {
	margin-bottom: 1rem;
	opacity: 0.5;
}
.project-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transition: left 0.5s ease; }

.project-card:active{ transform: translateY(-4px) scale(1.0); transition: all 0.08s ease; }

.project-card:hover::after { left: 100%; }

.project-card h3{ margin:0 0 .15rem; color:var(--accent); }
.project-card p{ margin:0; font-size:0.85rem; color:var(--text-muted); }
.project-thumb{
	width:56px;
	height:56px;
	border-radius:12px;
	background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.05));
	border:1px solid rgba(255,255,255,0.1);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.1rem;
	color:var(--accent);
	flex-shrink:0;
	transition:transform 0.2s ease, background 0.2s ease;
	box-shadow:0 8px 20px rgba(0,0,0,0.10);
}
.project-card:hover .project-thumb{ transform: scale(1.08) rotate(3deg); background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.07)); }
.project-info strong{display:block;color:var(--accent);font-size:1.08rem}
.project-info span{color:var(--muted);font-size:0.98rem}
.project-card:hover{ transform: translateY(-8px) scale(1.025); box-shadow: 0 22px 48px rgba(0,0,0,0.18); background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); }
.project-card:hover .project-thumb{ background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.07)); transform: scale(1.08) rotate(3deg); }

/* empty project style */
.project-empty{opacity:0.6;color:var(--muted);font-style:italic}

.contact{
	padding: 5rem 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
	position: relative;
}
.contact-text{
	color:var(--muted);
	margin:0 0 3rem;
	text-align: center;
	font-size: 1.1rem;
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3rem;
}
.contact-methods{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	max-width: 800px;
	margin: 0 auto;
}
.contact-card{
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem;
	background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
	backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 20px;
	text-decoration: none;
	color: var(--accent);
	transition: all 0.4s cubic-bezier(.2,.9,.2,1);
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
}
.contact-card::before{
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.6s ease;
}
.contact-card:hover{
	transform: translateY(-8px) scale(1.02);
	background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
	border-color: rgba(255,255,255,0.3);
	box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.contact-card:hover::before{
	left: 100%;
}
.contact-icon{
	width: 60px;
	height: 60px;
	background: rgba(255,255,255,0.1);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	flex-shrink: 0;
	transition: all 0.3s ease;
}
.contact-card:hover .contact-icon{
	background: rgba(255,255,255,0.2);
	transform: scale(1.1) rotate(5deg);
}
.contact-info strong{
	display: block;
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	color: var(--accent);
}
.contact-info span{
	color: var(--muted);
	font-size: 0.95rem;
}

.site-footer{
	border-top:1px solid rgba(255,255,255,0.15);
	padding:2rem 0;
	background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
	backdrop-filter:blur(20px) saturate(180%);
	box-shadow:0 -8px 32px rgba(0,0,0,0.15);
	position:relative;
}
.site-footer::before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:radial-gradient(ellipse at center, rgba(255,255,255,0.03), transparent);
	pointer-events:none;
}
.footer-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	position:relative;
	z-index:2;
}


/* Optimized reveal animation with better performance */
[data-reveal]{
	opacity:0;
	transform:translate3d(0, 40px, 0) scale(.95);
	transition:opacity 0.6s cubic-bezier(.25,.8,.25,1), transform 0.6s cubic-bezier(.25,.8,.25,1);
	will-change: opacity, transform;
}
[data-reveal].is-visible{
	opacity:1;
	transform:translate3d(0, 0, 0) scale(1);
}

/* Optimized staggered animations */
[data-reveal] > * {
	opacity:0;
	transform:translate3d(0, 20px, 0) scale(.98);
	transition:opacity 0.5s cubic-bezier(.25,.8,.25,1), transform 0.5s cubic-bezier(.25,.8,.25,1);
}
[data-reveal].is-visible > *:nth-child(1) { 
	transition-delay: 0.05s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}
[data-reveal].is-visible > *:nth-child(2) { 
	transition-delay: 0.1s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}
[data-reveal].is-visible > *:nth-child(3) { 
	transition-delay: 0.15s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}
[data-reveal].is-visible > *:nth-child(4) { 
	transition-delay: 0.2s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}
[data-reveal].is-visible > *:nth-child(5) { 
	transition-delay: 0.25s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}
[data-reveal].is-visible > *:nth-child(6) { 
	transition-delay: 0.3s; 
	opacity:1; 
	transform:translate3d(0, 0, 0) scale(1); 
}

/* Optimized fade-in for project cards */
.project-card.fade-in{
	opacity:0;
	transform:translate3d(0, 30px, 0) scale(.95);
	animation:fadeInCard 0.6s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes fadeInCard {
	0% { 
		opacity:0; 
		transform:translate3d(0, 30px, 0) scale(.95); 
	}
	100% { 
		opacity:1; 
		transform:translate3d(0, 0, 0) scale(1); 
	}
}


/* Enhanced loading animation */
@keyframes pulseGlow {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
  }
}

.project-empty {
  animation: pulseGlow 2s ease-in-out infinite;
  color: var(--muted-2);
  font-weight: 500;
  padding: 2rem;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Parallax sections */
.parallax-section {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

/* Floating particles animation */
@keyframes floatParticle {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotateZ(0deg); 
  }
  25% { 
    transform: translateY(-20px) translateX(10px) rotateZ(90deg); 
  }
  50% { 
    transform: translateY(-10px) translateX(-15px) rotateZ(180deg); 
  }
  75% { 
    transform: translateY(-25px) translateX(5px) rotateZ(270deg); 
  }
}

/* Micro-interaction: Ripple effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Back button styles */
/* Back button removed (styles deleted to keep UI minimal) */

/* Mobile styles for back button and search */
@media (max-width: 480px) {
	/* .back-btn mobile styles removed */
  
  .search-container {
    margin: 1.5rem 0;
  }
  
  .search-input-wrapper {
    max-width: 100%;
  }
  
  .search-input {
    padding: 0.9rem 0.9rem 0.9rem 2.8rem;
    font-size: 0.95rem;
  }
  
  .search-icon {
    left: 0.9rem;
    width: 18px;
    height: 18px;
  }
}

/* Enhanced smooth scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Account for fixed header */
}

/* Ensure sections have proper spacing for scroll targets */
section[id] {
  scroll-margin-top: 100px;
}

/* Smooth transitions for all interactive elements */
* {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Enhanced hover states */
.nav a {
  position: relative;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
}

.nav a:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(.2,.9,.2,1);
}

.nav a:hover:before {
  width: 100%;
}

/* Logo animation */
.logo {
  transition: all 0.3s cubic-bezier(.2,.9,.2,1);
}

.logo:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Enhanced hero decor animation */
.hero-decor {
  animation: floaty 12s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(10deg) scale(1); }
  33% { transform: translateY(-12px) rotate(12deg) scale(1.02); }
  66% { transform: translateY(8px) rotate(8deg) scale(0.98); }
}

/* Section transitions */
section {
  transition: all 0.6s cubic-bezier(.2,.9,.2,1);
}

/* Touch-friendly improvements */
.btn, .project-card, .nav a {
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  -webkit-touch-callout: none;
  user-select: none;
}

/* Enhanced Mobile-first responsive design */
@media (max-width: 480px) {
  html, body { 
    font-size: 14px; 
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  .container { 
    padding: 1.5rem 1.2rem; 
    max-width: 100%;
  }
  .header-inner { 
    padding: 1rem 0; 
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .logo { 
    font-size: 1.2rem; 
    font-weight: 800;
  }
  .nav { 
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    max-width: 320px;
  }
  .nav-link { 
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    flex: 1;
  }
  .theme-toggle{
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
  }
  .hero { 
    padding: 2rem 0 1.5rem; 
    text-align: center;
  }
  .site-title { 
    font-size: 2.2rem; 
    line-height: 1.1; 
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .lead { 
    font-size: 1.05rem; 
    margin-bottom: 1.5rem; 
    line-height: 1.5;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 0.75rem;
    max-width: 280px;
    margin: 0 auto;
  }
  .btn, .btn.primary, .btn.ghost { 
    font-size: 1rem; 
    padding: 0.875rem 1.25rem; 
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    min-height: 48px;
    font-weight: 600;
    border-radius: 14px;
  }
  .section-title { 
    font-size: 1.3rem; 
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .cards, .projects-grid { 
    grid-template-columns: 1fr; 
    gap: 0.3rem; 
  }
  .card, .project-card { 
    padding: 1.2rem; 
    font-size: 0.95rem;
    border-radius: 16px;
  }
  .project-thumb { 
    width: 52px; 
    height: 52px; 
    font-size: 1.1rem;
    border-radius: 12px;
  }
  .footer-inner { 
    flex-direction: column; 
    align-items: center; 
    gap: 0.75rem;
    text-align: center;
  }
  .about-list { 
    padding-left: 1.2em; 
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .about-list li {
    margin-bottom: 0.8rem;
  }
}

/* Small phones (481px - 600px) */
@media (max-width: 600px) and (min-width: 481px) {
  html, body { 
    font-size: 15px; 
    overflow-x: hidden;
  }
  .header-inner { 
    padding: 0.8rem 0; 
    gap: 0.75rem;
  }
  .container { 
    padding: 1.8rem 1.2rem; 
  }
  .hero { 
    padding: 2.5rem 0 2rem; 
    text-align: center;
  }
  .site-title { 
    font-size: 2.4rem; 
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .lead { 
    font-size: 1.15rem; 
    line-height: 1.5;
    max-width: 85%;
    margin: 0 auto 1.5rem;
  }
  .hero-actions { 
    flex-direction: column; 
    align-items: center; 
    gap: 0.8rem;
    max-width: 320px;
    margin: 0 auto;
  }
  .btn, .btn.primary, .btn.ghost { 
    font-size: 1.05rem; 
    padding: 0.9rem 1.3rem; 
    width: 100%; 
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 15px;
  }
  .section-title { 
    font-size: 1.4rem; 
    text-align: center;
    margin-bottom: 1.8rem;
  }
  .cards, .projects-grid { 
    grid-template-columns: 1fr; 
    gap: 1rem; 
  }
  .card, .project-card { 
    padding: 1.3rem; 
    border-radius: 18px;
  }
  .project-thumb { 
    width: 56px; 
    height: 56px; 
    font-size: 1.2rem;
    border-radius: 14px;
  }
  .footer-inner { 
    flex-direction: column; 
    align-items: center; 
    gap: 1rem;
    text-align: center;
  }
  .about-list { 
    padding-left: 1.3em; 
    line-height: 1.6;
  }
}

/* Large phones and phablets (601px - 720px) */
@media (max-width: 720px) and (min-width: 601px) {
  html, body { font-size: 16px; }
  .container { padding: 2rem 1.5rem; }
  .hero { padding: 3rem 0 2.5rem; }
  .site-title { 
    font-size: 2.8rem;
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .lead { font-size: 1.2rem; }
  .hero-actions { 
    flex-direction: row; 
    justify-content: center; 
    gap: 1rem; 
  }
  .btn, .btn.primary, .btn.ghost { 
    font-size: 1.1rem; 
    padding: 1rem 1.5rem; 
    min-width: 140px;
    border-radius: 16px;
  }
  .section-title { font-size: 1.5rem; }
  .cards, .projects-grid { 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.2rem; 
  }
  .card, .project-card { 
    padding: 1.4rem;
    border-radius: 20px;
  }
  .project-thumb { 
    width: 60px; 
    height: 60px; 
    font-size: 1.3rem;
    border-radius: 16px;
  }
  .about-list { line-height: 1.7; }
}

/* Tablet improvements */
@media (min-width: 721px) and (max-width: 1024px) {
  .container { padding: 2.5rem 1.5rem; }
  .hero { padding: 4rem 0 3rem; }
  .cards, .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Touch gesture improvements */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, .card:hover, .project-card:hover {
    transform: none;
  }
  
  .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  
  .card:active, .project-card:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
}

/* Very small phones: single column centered vertically */
@media (max-width: 420px) {
	body {
		text-align: center;
	}
	
	.projects-section {
		text-align: center;
		width: 100%;
		margin: 0 auto;
		padding: 0 1rem;
	}
	
	.projects-grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.3rem;
		width: 100%;
		max-width: 200px;
		margin: 0 auto;
	}

	.project-card {
		aspect-ratio: 1 / 1; /* keep square */
		padding: 0;
		width: 200px;
		margin: 0 auto;
		display: block;
	}
	
	.project-card h3 {
		font-size: 0.9rem;
	}
	
	.project-card p {
		font-size: 0.8rem;
	}
	
	.project-thumb {
		width: 40px;
		height: 40px;
		font-size: 0.9rem;
	}
}