:root{
  --paper:#F3F4F6; --ink:#12151C; --mute:#6A7080; --line:#D9DCE3; --accent:#3B3BFF;
  --hero-w:100; --hero-wt:600;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#14161C; --ink:#F1F2F5; --mute:#8D93A3; --line:#2A2D37; --accent:#7C84FF; }
}
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
body{ font-optical-sizing:auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.hero{ font-variation-settings:"wdth" var(--hero-w), "wght" var(--hero-wt); transition:font-variation-settings .15s ease-out; }

.btn{ display:inline-block; padding:.85rem 1.5rem; border-radius:999px; font-weight:500; transition:transform .2s; }
.btn:hover{ transform:translateY(-2px); }

.row{ display:flex; justify-content:space-between; align-items:baseline; padding:1.5rem 0; transition:padding .25s, color .25s; }
.row .title{ font-size:clamp(1.5rem,3.5vw,2.25rem); letter-spacing:-.02em; }
.row .meta{ color:var(--mute); font-size:.9rem; }
.row:hover{ padding-left:1rem; color:var(--accent); }

.stack{ transition:color .2s; }
.stack:hover{ color:var(--accent); }

.mail{ display:inline-block; background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 .08em no-repeat; transition:background-size .35s; }
.mail:hover{ background-size:100% .08em; }

.pulse{ animation:pulse 2s ease-out infinite; background:var(--accent); opacity:.5; }
@keyframes pulse{ to{ transform:scale(2.6); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .pulse{ animation:none; }
  .hero,.btn,.row{ transition:none; }
}

/* ---- motion layer ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%;z-index:30}
#glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
header,main,.marquee,footer{position:relative;z-index:1}
header{position:fixed}

.line{display:inline-block;overflow:hidden;padding-bottom:.08em}
.line .ch{display:inline-block;transform:translateY(105%) rotate(6deg);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*55ms + 150ms)}
@keyframes rise{to{transform:none}}

.marquee{overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;align-items:center;gap:2rem;animation:slide 28s linear infinite;padding-right:2rem}
.marquee:hover .track{animation-play-state:paused}
.marquee i{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.js-off .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .line .ch{animation:none;transform:none}
  .marquee .track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  #glow{display:none}
}

/* ---- projects + website previews ---- */
.row{flex-wrap:wrap}
.row .desc{flex-basis:100%;margin-top:.6rem;max-width:60ch;color:var(--mute)}
.row:hover{padding-left:0}
.site{white-space:nowrap;text-align:left;width:100%;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:12px;font-size:1.05rem;letter-spacing:-.01em;transition:background .2s,color .2s,border-color .2s}
.site:hover{border-color:var(--ink)}
.site[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 35%,transparent)}
.bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.85rem}
.bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.bar b{font-weight:500;color:var(--mute);margin:0 auto 0 .8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar a{color:var(--accent);font-weight:500}
#viewport{position:relative;overflow:hidden;aspect-ratio:16/10;background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
#site-frame{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .6s}
#site-frame.on{opacity:1}

/* loader + fallback card */
#loader,#fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center}
#loader.on{display:flex;z-index:2}
#loader span{font-size:1.1rem;color:var(--mute)}
#loader span::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#fallback.on{display:flex}
#fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.35}
#fallback .inner{position:relative;padding:1.5rem}
#fallback h3{font-size:clamp(1.75rem,5vw,3.5rem);letter-spacing:-.03em;font-weight:600;line-height:1}
#fallback p{color:var(--mute);margin:.75rem 0 1.5rem}
#fallback .soon{margin-bottom:0}
@media (prefers-reduced-motion: reduce){#loader span::after{animation:none;content:"..."}}