:root{
	--bg:#ffffff;
	--bg-2:#fafafa;
	--card:rgba(0,0,0,.04);
	--card-2:rgba(0,0,0,.02);
	--glass-border:rgba(0,0,0,.08);
	--text:#000000;
	--muted:#666666;
	--accent:#333333;
	--accent-2:#555555;
	--shadow:0 10px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
	color:var(--text);
	background: var(--bg);
	overflow-x:hidden;
	position: relative;
}
.loader {
	position: fixed;
	inset: 0;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader.loaded {
	opacity: 0;
	transform: scale(1.2);
	pointer-events: none;
}
.loader-logo {
	width: 80px;
	height: 80px;
	animation: logoExpand 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.loader-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 4px 20px rgba(0,0,0,0.2));
}
@keyframes logoExpand {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
	60% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(20);
		opacity: 0;
	}
}
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;width:42vmax;height:42vmax;filter:blur(80px);opacity:.15;mix-blend-mode:normal;border-radius:50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 70%);
	animation: float 20s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.blob.b1{left:-10vmax;top:-8vmax;animation-duration:20s}
.blob.b2{right:-6vmax;top:-10vmax;animation-duration:25s;animation-delay:-4s;background: radial-gradient(circle at 60% 20%, rgba(255,255,255,0.35), transparent 70%)}
.blob.b3{left:20vmax;bottom:-14vmax;animation-duration:30s;animation-delay:-8s;background: radial-gradient(circle at 40% 70%, rgba(255,255,255,0.3), transparent 70%)}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}25%{transform:translate3d(30px,-30px,0) scale(1.1) rotate(5deg)}50%{transform:translate3d(-20px,-40px,0) scale(0.95) rotate(-5deg)}75%{transform:translate3d(20px,-20px,0) scale(1.05) rotate(3deg)}}
.grain{position:absolute;inset:-50%;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".05"/></svg>');opacity:.35;animation:grain 12s steps(12) infinite}

@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-20px,0) scale(1.05)}}
@keyframes grain{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10%,10%,0)}}
.glass{
	background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
	border:1px solid var(--glass-border);
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-radius:16px;
}
.glass.subtle{-webkit-backdrop-filter: blur(10px) saturate(120%);backdrop-filter: blur(10px) saturate(120%);border-color:rgba(255,255,255,.14)}

.hero{display:grid;place-items:center;min-height:72vh;padding:32px}
.hero__card{max-width:900px;padding:32px 28px;position:relative;isolation:isolate}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--glass-border);font-size:.9rem;color:var(--text);margin:0 auto;display:flex;justify-content:center;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.badge:hover{transform:scale(1.05);border-color:var(--text);box-shadow:0 0 20px rgba(0,0,0,0.1)}
.badge img{transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.badge:hover img{transform:rotate(10deg) scale(1.1)}
.title{margin:18px 0 8px;font-size:clamp(28px, 6vw, 52px);line-height:1.1;letter-spacing:-.02em}
.sub{margin:0 0 18px;color:var(--muted);font-size:clamp(15px, 2.2vw, 18px)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid var(--glass-border);background:rgba(255,255,255,.02);color:var(--text);text-decoration:none;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);transform:translateX(-100%);transition:transform 0.6s ease}
.btn:hover::before{transform:translateX(100%)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn:hover{background:rgba(255,255,255,.06);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.btn:active{transform:translateY(0)}
.social{list-style:none;display:flex;gap:14px;padding:0;margin:16px 0 0}
.social a{color:var(--muted);text-decoration:none;border-bottom:1px dotted transparent;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);display:inline-block}
.social a:hover{color:var(--text);border-bottom-color:var(--text);transform:translateY(-2px)}
.section{padding:48px 24px}
.grid{max-width:1100px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column: span 4;padding:22px;transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);border:none;background:rgba(255,255,255,0.02)}
.card:hover{transform:translateY(-4px)}
.card h3{margin:6px 0 8px;transition:color 0.3s ease}
.card:hover h3{color:var(--text)}
.card p{margin:0;color:var(--muted);transition:color 0.3s ease}
.section__title{max-width:1100px;margin:0 auto 16px;padding:0 4px;font-size:clamp(22px,3.5vw,32px)}
.work.grid{align-items:stretch}
.work__item{grid-column: span 4;min-height:160px;padding:18px;text-decoration:none;color:var(--text);position:relative;overflow:hidden;transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
.work__item::after{content:"";position:absolute;inset:0;background: radial-gradient(600px 160px at 0% 0%, rgba(0,0,0,0.05), transparent 60%);transition:opacity 0.4s ease;opacity:0.5}
.work__item:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.work__item:hover::after{opacity:1}
.work__meta{position:relative;transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.work__item:hover .work__meta{transform:translateX(4px)}
.work__meta h4{margin:2px 0 6px;transition:color 0.3s ease}
.work__item:hover .work__meta h4{color:var(--text)}
.work__meta p{margin:0;color:var(--muted);transition:color 0.3s ease}
.work__item:hover .work__meta p{color:var(--text)}
.contact__card{max-width:900px;margin:0 auto;padding:28px}
.spotify-container{max-width:900px;margin:0 auto;padding:0 16px}
.spotify-card{display:flex;align-items:center;gap:20px;padding:24px;text-decoration:none;color:var(--text);transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.spotify-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.2)}
.spotify-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(30,215,96,0.1);color:#1DB954;flex-shrink:0}
.spotify-info{flex:1}
.spotify-info h3{margin:0 0 4px;font-size:18px;font-weight:600}
.spotify-info p{margin:0;color:var(--muted);font-size:14px}
.spotify-arrow{font-size:24px;opacity:0.5;transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease}
.spotify-card:hover .spotify-arrow{transform:translateX(4px);opacity:1}
.footer{max-width:1100px;margin:40px auto;padding:0 16px 60px;color:var(--muted);text-align:center}
[data-reveal]{opacity:0;transform:translateY(20px) scale(0.95);transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)}
[data-reveal].revealed{opacity:1;transform:translateY(0) scale(1)}
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1)}
[data-tilt]:hover{box-shadow:0 20px 60px rgba(0,0,0,.25)}
@media (max-width: 900px){
	.card{grid-column: span 6}
	.work__item{grid-column: span 6}
}
@media (max-width: 640px){
	.hero{min-height:66vh}
	.grid{grid-template-columns:repeat(6,1fr)}
	.card{grid-column: 1 / -1}
	.work__item{grid-column: 1 / -1}
	.dock {
		gap: 6px;
		padding: 10px 12px;
	}
	.dock-icon {
		width: 40px;
		height: 40px;
	}
	.dock-icon::before {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto}
	.blob,.grain{animation:none}
	[data-reveal]{opacity:1;transform:none}
}
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #000000;
  --muted: #666666;
  --glass-bg: rgba(0, 0, 0, 0.02);
  --glass-stroke: rgba(0, 0, 0, 0.03);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] {
  --bg: #000000;
  --text: #ffffff;
  --muted: #999999;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-stroke: rgba(255, 255, 255, 0.03);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --text: #ffffff;
    --muted: #999999;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-stroke: rgba(255, 255, 255, 0.03);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}
html, body {
  background-color: var(--bg); 
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}
.glass.subtle {
  background: color-mix(in oklab, var(--glass-bg) 50%, transparent);
  box-shadow: none;
  border: none;
}
html, body {
  height: 100%;
  overscroll-behavior-y: none;
}
#page {
  transform: scaleY(var(--stretch-y, 1));
  transform-origin: 50% var(--stretch-origin, 50%);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #page { transition: none; }
}
#page.is-stretching {
   opacity: .995; 
}
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
html, body {
  margin: 0;
}
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}
.nav {
  position: sticky;        
  top: 12px;              
  z-index: 9999;           
  isolation: isolate;     
}
.dock {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 20px;
  z-index: 99999;
  isolation: isolate;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1), bottom 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.dock.dock-hidden {
  bottom: -100px;
}
.dock:hover {
  transform: translateX(-50%) translateY(-4px);
}
.dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
  cursor: pointer;
  position: relative;
}
.dock-icon::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  z-index: 100000;
}
.dock-icon:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dock-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-stroke);
  transform: translateY(-2px);
}
.dock-icon:active {
  transform: translateY(0);
}
.dock-icon svg {
  opacity: 0.8;
}
.dock-icon:hover svg {
  opacity: 1;
}
.dock-divider {
  width: 1px;
  height: 32px;
  background: var(--glass-stroke);
  margin: 0 4px;
}
.theme-toggle {
  position: relative;
}
.theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s, transform 0.3s;
}
.theme-icon-light {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}
.theme-icon-dark {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
[data-theme="light"] .theme-icon-light {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
[data-theme="light"] .theme-icon-dark {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-180deg);
}
.hero__card,
.card,
.work__item,
.contact__card {
  position: relative;
  z-index: 0;
}
.typing::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 8px;
  vertical-align: middle;
  animation: typing-blink 900ms steps(1) infinite;
}
@keyframes typing-blink{
  50% { opacity: 0; }
}
/* Respect reduced-motion for caret */
@media (prefers-reduced-motion: reduce){
  .typing::after { animation: none; opacity: 1; }

}