/* Copyright (c) 2026 Taras Koval. All rights reserved. See LICENSE. */

:root {
  --paper:#fcfcfa;
  --ink:#1f211d;
  --muted:#6f736b;
  --line:#e5e7df;
  --field:#f2f2ee;
  --accent:#645081;
  --accent-2:#7c5cc4;
  --accent-soft:#a596ba;
  --pale:#f1edf5;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; color:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
::selection { background:#ded5e9; color:#27202d; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.accent { color:var(--accent); }

/* Soft light that follows the cursor (desktop only). */
.glow {
  position:fixed;
  left:0; top:0;
  width:620px; height:620px;
  margin:-310px 0 0 -310px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,92,196,.13), rgba(124,92,196,0) 65%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .6s;
  transform:translate3d(var(--gx,50vw),var(--gy,30vh),0);
}
.glow.on { opacity:1; }

/* ---------- Shell ---------- */
.site-shell {
  position:relative;
  z-index:1;
  max-width:1184px;
  margin:auto;
  padding:0 64px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main { flex:1; display:flex; flex-direction:column; }
.page-view { flex:1; }
.page-view[hidden] { display:none!important; }
.page-view:focus { outline:none; }
.skip {
  position:absolute; top:-80px; left:20px; z-index:5;
  background:var(--ink); color:white; padding:12px;
}
.skip:focus { top:12px; }

/* ---------- Header ---------- */
.site-header {
  height:106px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.wordmark { font-size:29px; letter-spacing:-2px; font-weight:600; line-height:1; }
.wordmark span { color:var(--accent); display:inline-block; transition:transform .4s var(--ease); }
.wordmark:hover span { transform:translateY(-6px); }
nav { display:flex; gap:33px; font-size:13px; }
nav a { position:relative; padding:11px 0; color:var(--muted); transition:color .2s; }
nav a:hover,nav a[aria-current=page] { color:var(--ink); }
nav a:after {
  content:''; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  position:absolute; bottom:2px; left:0; width:100%;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
nav a:hover:after { transform:scaleX(.35); }
nav a[aria-current=page]:after { transform:scaleX(1); }

/* ---------- Entrance motion ---------- */
.rise { animation:rise .7s var(--ease) both; animation-delay:calc(var(--d,0) * 80ms + 60ms); }
@keyframes rise {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:none; }
}

/* ---------- Home ---------- */
.home { padding:53px 0 70px; display:flex; flex-direction:column; }
.hero-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.eyebrow,.edition { font:11px/1.5 var(--mono); letter-spacing:1px; color:var(--muted); }
.edition { font-size:10px; color:var(--accent); }
.intro-grid {
  flex:1;
  display:grid;
  grid-template-columns:auto minmax(280px,450px);
  justify-content:start;
  column-gap:clamp(48px,6vw,96px);
  align-content:center;
  align-items:end;
  margin-top:40px;
}
.name {
  font-size:clamp(96px,15vw,224px);
  letter-spacing:-.07em;
  font-weight:550;
  line-height:.92;
  margin:0 0 0 -8px;
  cursor:default;
}
.name-line { display:block; white-space:nowrap; }
.char {
  display:inline-block;
  animation:char-in .9s var(--ease) both;
  animation-delay:calc(var(--i) * 45ms + 120ms);
  transition:transform .35s var(--ease), color .35s;
}
.char:hover { transform:translateY(-.08em); color:var(--accent); }
@keyframes char-in {
  from { opacity:0; transform:translateY(.45em) rotate(4deg); }
  to { opacity:1; transform:none; }
}
.name-dot { display:inline-block; animation:dot-in 1s var(--ease) .75s both; }
.name-dot.char { animation:dot-in 1s var(--ease) .75s both; }
@keyframes dot-in {
  0% { opacity:0; transform:translateY(-1.2em); }
  60% { opacity:1; transform:translateY(.06em); }
  80% { transform:translateY(-.04em); }
  100% { opacity:1; transform:none; }
}

.intro-copy { max-width:450px; padding-bottom:.4em; }
.hello { font-size:15px; font-weight:600; margin:0; }
.bio { font-size:clamp(19px,1.55vw,22px); line-height:1.6; letter-spacing:-.3px; margin:14px 0 24px; }
.bio strong { font-weight:500; color:var(--accent); }

.stack {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin:0 0 26px;
  padding:10px 14px;
  font:13px/1.4 var(--mono);
  background:var(--pale);
  border-radius:8px;
  width:max-content;
  max-width:100%;
}
.stack-prompt { color:var(--accent-soft); }
.stack-text { color:var(--muted); white-space:nowrap; }
.scramble { color:var(--accent); font-weight:500; }
.caret {
  display:inline-block;
  width:7px; height:15px;
  margin-left:3px;
  vertical-align:-2px;
  background:var(--accent);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity:0; } }

/* Buttons */
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:13px 22px;
  border-radius:999px;
  border:0;
  font-size:14px;
  font-weight:500;
  transition:transform .25s var(--ease), box-shadow .25s, background-position .5s;
}
.btn-arrow { display:inline-block; transition:transform .25s var(--ease); }
.btn:hover .btn-arrow { transform:translateX(4px); }
.btn:active { transform:scale(.97); }
.btn-primary {
  color:white;
  background:linear-gradient(110deg,var(--accent-2),var(--accent) 55%,#4d3c66);
  background-size:180% 100%;
  box-shadow:0 6px 18px -8px rgba(100,80,129,.7);
}
.btn-primary:hover { background-position:100% 0; box-shadow:0 10px 24px -10px rgba(100,80,129,.85); transform:translateY(-1px); }
.btn-soft { background:var(--pale); color:var(--accent); }
.btn-soft:hover { background:#e8e1f0; transform:translateY(-1px); }

.social-links { display:flex; gap:22px; align-items:center; }
.social-links a {
  display:flex; align-items:center; gap:7px;
  color:var(--muted); font-size:12px; padding:6px 0; transition:color .2s, transform .2s var(--ease);
}
.social-links a:hover { color:var(--accent); transform:translateY(-2px); }
.social-links svg { width:17px; height:17px; }

/* ---------- Inner pages ---------- */
.projects,.contact { padding:64px 0 72px; max-width:720px; }
.page-title {
  font-size:clamp(56px,8vw,88px);
  font-weight:550;
  letter-spacing:-.055em;
  line-height:1;
  margin:16px 0 22px;
}
.lede { font-size:17px; line-height:1.75; color:#4a4d46; margin:0 0 40px; max-width:640px; }

/* Projects */
.empty-card {
  display:flex;
  align-items:center;
  gap:24px;
  padding:26px 28px;
  border:1px dashed #d9d4e0;
  border-radius:14px;
  background:rgba(255,255,255,.6);
}
.empty-card > div { flex:1; }
.empty-mark { font:24px var(--mono); color:var(--accent-soft); white-space:nowrap; }
.empty-card h2 { font-size:16px; font-weight:600; margin:0 0 4px; }
.empty-card p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
.empty-card[hidden] { display:none; }
.project-list:not(:empty) { margin-bottom:24px; }
.project-card {
  padding:24px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:35px 1fr auto;
  gap:20px;
}
.project-card h3 { font-size:18px; font-weight:500; margin:0 0 8px; }
.project-card p { font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 8px; }
.project-card .project-tech { font:12px var(--mono); }
.project-num { font:12px var(--mono); color:var(--accent); padding-top:4px; }

/* Contact */
.email-inline { white-space:nowrap; }
.email-inline a {
  color:var(--accent);
  font-weight:500;
  background:linear-gradient(var(--accent-soft),var(--accent-soft)) 0 100%/100% 1px no-repeat;
  transition:background-size .3s;
}
.email-inline a:hover { background-size:100% 2px; }
.copy-chip {
  margin-left:8px;
  padding:3px 10px;
  border:0;
  border-radius:999px;
  background:var(--pale);
  color:var(--accent);
  font:500 12px var(--sans);
  vertical-align:2px;
  transition:background .2s, color .2s;
}
.copy-chip:hover { background:#e8e1f0; }
.copy-chip.copied { background:var(--accent); color:white; }

.form-wrap { position:relative; }
.field { margin-bottom:22px; }
.field label { display:block; font-size:14px; font-weight:500; margin-bottom:8px; }
.req { color:#b0413e; }
.field input,.field textarea {
  display:block;
  width:100%;
  border:1.5px solid transparent;
  border-radius:10px;
  background:var(--field);
  padding:14px 16px;
  font-size:16px;
  outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { resize:vertical; min-height:150px; max-height:420px; line-height:1.6; }
.field input:hover,.field textarea:hover { background:#ededE8; }
.field input:focus,.field textarea:focus {
  background:white;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(100,80,129,.12);
}
.field.invalid input,.field.invalid textarea { border-color:#b0413e; background:#fdf6f5; }
.field-error { font-size:13px; color:#b0413e; margin:6px 0 0; min-height:0; }
.field-error:empty { display:none; }
.form-foot { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.send-button { padding:14px 28px; }
.send-button:disabled { opacity:.7; cursor:wait; transform:none; }
.send-button.loading .btn-arrow { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-status { font-size:14px; margin:0; color:var(--muted); flex:1; min-width:200px; }
.form-status[data-state=error] { color:#b0413e; }
.honeypot { display:none!important; }

.sent {
  text-align:center;
  padding:48px 24px;
  border-radius:16px;
  background:var(--pale);
  animation:rise .6s var(--ease) both;
}
.sent:focus { outline:none; }
.sent h2 { font-size:24px; font-weight:600; letter-spacing:-.5px; margin:18px 0 8px; }
.sent p { color:var(--muted); margin:0 0 24px; }
.sent .btn-soft { background:white; }
.sent .btn-soft:hover { background:#fbfaff; }
.sent-check { width:64px; height:64px; fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.sent-check circle { stroke-dasharray:151; stroke-dashoffset:151; animation:draw-stroke .7s var(--ease) .1s forwards; }
.sent-check path { stroke-dasharray:36; stroke-dashoffset:36; animation:draw-stroke .4s var(--ease) .65s forwards; }
@keyframes draw-stroke { to { stroke-dashoffset:0; } }

.elsewhere {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:14px;
}
.elsewhere a { color:var(--ink); transition:color .2s; }
.elsewhere a:hover { color:var(--accent); }
.elsewhere a span { color:var(--accent-soft); }
.elsewhere .where { color:var(--muted); margin-left:auto; }

/* ---------- Resume ---------- */
.resume { padding:64px 0 80px; }
.resume-top { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:40px; }
.resume-top .lede { margin-bottom:0; }
.resume-top .actions { margin-bottom:6px; }
.btn:hover .btn-arrow-down { transform:translateY(3px); }

.sheet {
  --rx:0deg; --ry:0deg;
  max-width:860px;
  margin:0 auto;
  padding:56px 64px 60px;
  background:#fff;
  color:#000;
  border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 24px 60px -24px rgba(40,30,60,.28);
  font:15px/1.45 'Times New Roman',Tinos,'Liberation Serif',Times,serif;
  transform:perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--ease), box-shadow .5s;
  animation:sheet-in .9s var(--ease) .25s backwards;
}
.sheet:hover { box-shadow:0 1px 2px rgba(0,0,0,.06), 0 34px 80px -28px rgba(40,30,60,.38); }
@keyframes sheet-in {
  from { opacity:0; transform:perspective(1600px) translateY(40px) rotateX(8deg); }
  to { opacity:1; transform:perspective(1600px) rotateX(0) rotateY(0); }
}
.cv-in { animation:rise .7s var(--ease) both; }
.sheet > .cv-in:nth-child(1) { animation-delay:.45s; }
.sheet > .cv-in:nth-child(2) { animation-delay:.55s; }
.sheet > .cv-in:nth-child(3) { animation-delay:.65s; }
.sheet > .cv-in:nth-child(4) { animation-delay:.75s; }
.sheet > .cv-in:nth-child(5) { animation-delay:.85s; }
.sheet > .cv-in:nth-child(6) { animation-delay:.95s; }
.sheet > .cv-in:nth-child(7) { animation-delay:1.05s; }

.cv-head { text-align:center; margin-bottom:6px; }
.cv-name { font-size:32px; letter-spacing:.06em; font-weight:700; margin:0 0 6px; }
.cv-contact {
  margin:0;
  font-size:14px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  row-gap:2px;
}
.cv-contact > span:not(.nowrap) { margin:0 7px; }
.cv-contact a, .cv-contact .nowrap { white-space:nowrap; max-width:100%; overflow-wrap:anywhere; }
.cv-contact a { background:linear-gradient(#000,#000) 0 100%/0 1px no-repeat; transition:background-size .3s; }
.cv-contact a:hover { background-size:100% 1px; }
.cv-section h3 {
  font-size:15.5px; font-weight:700; letter-spacing:.04em;
  margin:20px 0 7px; padding-bottom:3px;
  border-bottom:1px solid #000;
}
.cv-section p { margin:0 0 3px; }
.cv-entry { margin-bottom:9px; }
.cv-entry:last-child { margin-bottom:0; }
.cv-row { display:flex; justify-content:space-between; gap:18px; }
.cv-row > span:last-child { text-align:right; white-space:nowrap; }
.cv-section ul { margin:3px 0 0; padding-left:22px; }
.cv-section li { margin:1px 0; }
.project-link {
  position:relative;
  margin-left:5px;
  font-style:italic;
  text-decoration:underline;
  text-underline-offset:2px;
}
.project-link:before { content:'– '; display:inline-block; text-decoration:none; margin-right:4px; }
.project-link:hover { color:var(--accent); }
.project-link[hidden] { display:none; }

@media(max-width:1000px) {
  .cv-contact { column-gap:16px; }
  .cv-contact > span:not(.nowrap) { display:none; }
}
@media(max-width:720px) {
  .resume { padding:40px 0 56px; }
  .resume-top { margin-bottom:28px; }
  .resume-top .actions { width:100%; }
  .sheet { padding:28px 20px 32px; font-size:14px; border-radius:3px; }
  .cv-name { font-size:25px; }
  .cv-contact { font-size:12.5px; line-height:1.6; column-gap:14px; }
  .cv-row { flex-direction:column; gap:0; }
  .cv-row > span:last-child { text-align:left; white-space:normal; color:#444; }
}

/* Printing the resume page gives a clean one-page resume. */
@media print {
  @page { size:Letter; margin:.5in .6in; }
  body { background:#fff; }
  .glow, .site-header, footer, .resume-top, .skip { display:none!important; }
  .site-shell { padding:0; max-width:none; min-height:0; }
  .resume { padding:0; }
  .sheet, .sheet:hover { box-shadow:none; }
  .sheet { padding:0; max-width:none; transform:none!important; animation:none; font-size:10.5pt; line-height:1.3; }
  .cv-entry { margin-bottom:6px; }
  .cv-in { animation:none; }
  .cv-name { font-size:22pt; }
  .cv-contact { font-size:9.5pt; column-gap:0; }
  .cv-contact > span:not(.nowrap) { display:inline; margin:0 6px; }
  .cv-section h3 { font-size:11pt; margin:12px 0 5px; }
}

/* ---------- Footer ---------- */
footer {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0 30px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.footer-name { font-size:13px; font-weight:600; color:var(--ink); }

/* ---------- Responsive ---------- */
@media(min-width:1450px) {
  .site-shell { max-width:1270px; }
}
@media(max-width:900px) {
  .site-shell { padding:0 38px; }
  .name { font-size:116px; }
  .bio { font-size:17px; }
}
@media(max-width:720px) {
  .site-shell { padding:0 22px; }
  .site-header { height:78px; }
  .wordmark { font-size:26px; }
  nav { gap:22px; font-size:13px; }
  .home { padding:32px 0 48px; }
  .eyebrow { font-size:10px; letter-spacing:.6px; }
  .edition { font-size:10px; }
  .intro-grid { grid-template-columns:1fr; gap:26px; margin-top:28px; align-items:start; align-content:start; }
  .intro-copy { padding-bottom:0; }
  .name { font-size:clamp(84px,24vw,140px); margin-left:-4px; }
  .intro-copy { max-width:none; }
  .bio { font-size:17px; margin:12px 0 20px; }
  .stack { font-size:12px; }
  .btn { flex:1; padding:14px 18px; }
  .projects,.contact { padding:40px 0 52px; }
  .lede { font-size:16px; margin-bottom:32px; }
  .empty-card { flex-direction:column; align-items:flex-start; gap:14px; }
  .empty-card .btn { flex:none; }
  .form-foot .btn { flex:none; width:100%; }
  .elsewhere .where { margin-left:0; width:100%; }
  footer { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media(max-width:400px) {
  .edition { display:none; }
  .actions { flex-direction:column; }
}
@media(hover:none) { .glow { display:none; } }
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .sent-check circle,.sent-check path { stroke-dashoffset:0; }
  .glow { display:none; }
}