/* Berkay Yarder, portfolio. Plain CSS, no framework. */

:root{
  --bg:#111418;       /* scope graphite */
  --panel:#171B20;    /* sidebar, cards, tiles */
  --panel-2:#1D2228;  /* hover and current item */
  --screen:#0E1114;   /* figure screens */
  --line:#2A3038;     /* hairlines */
  --text:#E8E5DD;     /* silkscreen white */
  --dim:#969CA4;
  --amber:#F2B53F;    /* channel 1: signals and actions */
  --cyan:#6CC6D3;     /* channel 2: only in the capture */
  --sans:"Atkinson Hyperlegible Next Variable","Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Atkinson Hyperlegible Mono Variable","Atkinson Hyperlegible Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --side:252px;
  --r:8px;
  --r-s:4px;
}
*{box-sizing:border-box}
html{background:var(--bg); color-scheme:dark; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%}
p{margin:0 0 1em}
a{color:var(--text); text-decoration:underline; text-decoration-color:#4A525C; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--amber); text-decoration-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:2px}
code{font-family:var(--mono); font-size:.9em; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s); padding:0 .3em}
h1,h2,h3{margin:0; font-weight:650; line-height:1.2}
.skip{position:absolute; left:-999px; top:8px; z-index:20; background:var(--amber); color:var(--bg); padding:6px 10px; text-decoration:none}
.skip:focus{left:8px}

/* ---------- sidebar ---------- */
.side{position:fixed; top:0; bottom:0; left:0; width:var(--side); background:var(--panel); border-right:1px solid var(--line); padding:24px 18px 20px; display:flex; flex-direction:column; overflow-y:auto; z-index:10}
.me{display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text)}
.me img{width:44px; height:44px; border-radius:var(--r-s); object-fit:cover; flex:none}
.me b{display:block; font-weight:650; font-size:15.5px; line-height:1.25; color:var(--text)}
.me small{display:block; font-size:13px; color:var(--dim); line-height:1.35; margin-top:2px}
.me:hover b{color:var(--amber)}
.menu-btn{display:none}
.tree{font-family:var(--mono); font-size:13.5px; line-height:1.95; margin-top:30px}
.tree .root{color:var(--dim); padding:0 6px}
.tree ul{list-style:none; margin:0; padding:0}
.tree ul ul{margin-left:12px; padding-left:10px; border-left:1px solid var(--line)}
.tree a{display:block; color:var(--dim); text-decoration:none; padding:0 6px; border-radius:var(--r-s); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tree a:hover{color:var(--text); background:var(--panel-2)}
.tree a[aria-current="page"]{color:var(--amber); background:var(--panel-2)}
.side-foot{margin-top:auto; padding-top:28px; font-size:13px; line-height:1.6; color:var(--dim)}
.side-foot a{color:var(--dim)}
.side-foot a:hover{color:var(--amber)}

/* ---------- main column ---------- */
.main{margin-left:var(--side); padding:64px clamp(24px,5vw,80px) 48px}
.wrap{max-width:920px}
.foot{margin-top:120px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px}
.foot a{color:var(--dim)}

/* ---------- home: hero ---------- */
.hero h1{font-family:var(--mono); font-weight:700; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.06; letter-spacing:-.02em; margin-bottom:16px}
.lead{font-size:1.2rem; line-height:1.55; max-width:38em}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin:26px 0 44px}
.btn{font-family:var(--mono); font-size:14px; line-height:1; padding:11px 15px; border:1px solid var(--amber); border-radius:var(--r-s); color:var(--amber); text-decoration:none}
.btn:hover{background:var(--amber); color:var(--bg)}
.actions .plain{font-family:var(--mono); font-size:14px}

/* logic analyser capture */
.la{border:1px solid var(--line); border-radius:var(--r); background:var(--screen); overflow:hidden}
.la-head,.la-read{display:flex; flex-wrap:wrap; gap:6px 22px; padding:9px 14px; font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.la-head{justify-content:space-between; background:var(--panel); border-bottom:1px solid var(--line)}
.la-read{background:var(--panel); border-top:1px solid var(--line); min-height:39px}
.la-read b{font-weight:500; color:var(--text)}
.la-scroll{overflow-x:auto; overscroll-behavior-x:contain}
.la svg{display:block; width:100%; min-width:660px; height:auto; touch-action:pan-y; cursor:crosshair}
.la .grid-l{stroke:#1F242B; stroke-width:1}
.la .gut{stroke:var(--line); stroke-width:1}
.la .chl{font-family:var(--mono); font-size:13px; fill:var(--dim)}
.la .tx{fill:none; stroke:var(--amber); stroke-width:2; stroke-linejoin:miter}
.la .led{fill:none; stroke:var(--cyan); stroke-width:1.6}
.la .bub{fill:rgba(242,181,63,.10); stroke:rgba(242,181,63,.55); stroke-width:1}
.la .bubt{font-family:var(--mono); font-size:12.5px; fill:var(--text); text-anchor:middle}
.la .axis{stroke:var(--line); stroke-width:1}
.la .tick{font-family:var(--mono); font-size:11px; fill:var(--dim); text-anchor:middle}
.la .cur{stroke:var(--text); stroke-width:1; stroke-dasharray:3 3; opacity:0}
.cap{font-size:14px; color:var(--dim); margin:10px 0 0; max-width:46em}

/* ---------- sections ---------- */
.sec{margin-top:110px; scroll-margin-top:24px}
.sec > h2{font-family:var(--mono); font-weight:650; font-size:1.6rem; letter-spacing:-.01em; margin-bottom:8px}
.sec > .intro{color:var(--dim); max-width:40em; margin-bottom:30px}

/* project cards */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--text); text-decoration:none; overflow:hidden}
.card:hover{border-color:var(--amber); color:var(--text)}
.card:hover h3{color:var(--amber)}
.card .shot{background:var(--screen); border-bottom:1px solid var(--line); padding:20px 22px; height:270px}
.card .shot svg{display:block; width:100%; height:100%}
.card .body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-size:1.14rem}
.card p{font-size:15.5px; line-height:1.55; color:var(--dim); margin:0}
.card .meta{font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.card .tags{margin:auto 0 0; padding-top:6px}
.card.wide{grid-column:1 / -1; flex-direction:row}
.card.wide .shot{order:2; flex:0 0 56%; border-bottom:0; border-left:1px solid var(--line); padding:24px 28px; height:320px}
.card.wide .body{padding:24px 24px 22px}
.card.wide h3{font-size:1.35rem}
.card .shot .cm,.card .shot .cm-line,.card .shot .cm-path,.card .shot .hl{display:none}

.tags{display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0}
.tags li{font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--dim); border:1px solid var(--line); border-radius:var(--r-s); padding:1px 7px}

/* smaller builds */
.small{margin-top:44px}
.small h3{font-family:var(--mono); font-size:1.05rem; margin-bottom:14px}
.small dl{display:grid; grid-template-columns:1fr 1fr; gap:16px 36px; margin:0}
.small dt{font-weight:650; font-size:15.5px}
.small dd{margin:2px 0 0; font-size:15px; color:var(--dim); line-height:1.55}

/* skills */
.sk{margin-bottom:28px}
.sk h3{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--dim); margin-bottom:12px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:12px; list-style:none; padding:0; margin:0}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:116px; padding:16px 8px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--text); text-align:center}
.ico{display:block; width:40px; height:40px; background:currentColor; -webkit-mask:var(--i) center / contain no-repeat; mask:var(--i) center / contain no-repeat}
.glyph{display:block; height:40px; font-family:var(--mono); font-weight:700; font-size:31px; line-height:40px}
.tile svg{display:block; width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.tile .l{font-family:var(--mono); font-size:12.5px; line-height:1.3}
.also{font-size:15.5px; color:var(--dim); max-width:44em; margin-top:6px}
.also b{color:var(--text); font-weight:600}

/* about teaser */
.teaser{display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:start}
.teaser img{width:150px; height:150px; border-radius:var(--r); object-fit:cover}
.teaser p{max-width:38em}

/* contact */
.mail{font-family:var(--mono); font-size:clamp(1.25rem,3.6vw,2.2rem); font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; margin:4px 0 14px}
.mail a{text-decoration-color:var(--amber); text-decoration-thickness:2px; text-underline-offset:6px}

/* ---------- project pages ---------- */
.crumb{font-family:var(--mono); font-size:13.5px; color:var(--dim); margin-bottom:30px}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--amber)}
.ptitle{font-family:var(--mono); font-weight:700; font-size:clamp(1.75rem,3.6vw,2.6rem); line-height:1.12; letter-spacing:-.02em; margin-bottom:16px}
.summary{font-size:1.17rem; line-height:1.55; max-width:38em}
.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:30px 0 16px}
.spec div{background:var(--panel); padding:11px 14px 12px}
.spec dt{font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.spec dd{margin:3px 0 0; font-size:15px; line-height:1.45}
.spec + .tags{margin-bottom:36px}
.pfig{margin:0 0 40px; border:1px solid var(--line); border-radius:var(--r); background:var(--screen); overflow:hidden}
.pfig .in{padding:28px 24px 18px}
.pfig svg{display:block; width:100%; max-width:600px; height:auto; margin:0 auto}
.pfig figcaption{font-size:14px; line-height:1.55; color:var(--dim); padding:11px 16px 12px; border-top:1px solid var(--line); background:var(--panel)}
.pfig figcaption b{font-family:var(--mono); font-weight:500; color:var(--text)}
.prose h2{font-family:var(--mono); font-size:1.22rem; font-weight:650; margin:44px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{max-width:40em}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.35em}
.result{border-left:2px solid var(--amber); padding:2px 0 2px 16px}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:72px; padding-top:20px; border-top:1px solid var(--line)}
.pn a{text-decoration:none; color:var(--text); display:block}
.pn a:hover{color:var(--amber)}
.pn .next{text-align:right; grid-column:2}
.pn small{display:block; font-family:var(--mono); font-size:12.5px; color:var(--dim)}

/* ---------- about page ---------- */
.about-top{display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:start; margin-top:8px}
.about-top img{width:220px; height:220px; border-radius:var(--r); object-fit:cover}
.rows{margin:0}
.row{display:grid; grid-template-columns:150px 1fr; gap:6px 24px; padding:16px 0; border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row dt{font-family:var(--mono); font-size:13.5px; color:var(--dim); padding-top:2px}
.row dd{margin:0}
.row h3{font-size:1.06rem; margin-bottom:4px}
.row p{margin:0; color:var(--dim); font-size:15.5px; max-width:40em}
.row p + p{margin-top:.5em}

/* ---------- figure drawing classes ---------- */
svg .ink{fill:none; stroke:var(--text); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.92}
svg .ink-thin{fill:none; stroke:var(--text); stroke-width:1; opacity:.75}
svg .dash{stroke-dasharray:5 4}
svg .solid{fill:var(--text); opacity:.92}
svg .hatch{fill:url(#hatch); stroke:var(--text); stroke-width:1.2}
svg .bgfill{fill:var(--screen)}
svg .grid-r{stroke:var(--line); stroke-width:1}
svg .lbl{font-family:var(--sans); font-size:15px; fill:var(--text)}
svg .lbl-s{font-family:var(--sans); font-size:13px; fill:var(--dim); font-style:italic}
svg .mid{text-anchor:middle}
svg .end{text-anchor:end}
svg .hl{fill:none; stroke:var(--amber); stroke-width:1.2; stroke-dasharray:4 3}
svg .cm{font-family:var(--mono); font-size:13px; fill:var(--amber)}
svg .cm-line{stroke:var(--amber); stroke-width:1.2; fill:none}
svg .cm-path{stroke:var(--amber); stroke-width:1.5; fill:none}
.mk{fill:var(--text)}
.mkc{fill:var(--amber)}
.hatch-line{stroke:var(--text); stroke-width:1; opacity:.8}

/* ---------- small screens ---------- */
@media (max-width:1000px){
  .side{position:sticky; top:0; bottom:auto; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 16px; border-right:0; border-bottom:1px solid var(--line); overflow:visible}
  .me img{width:34px; height:34px}
  .me small{display:none}
  .menu-btn{display:block; font-family:var(--mono); font-size:13.5px; color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-s); padding:6px 12px; cursor:pointer}
  .tree{flex:1 0 100%; margin-top:10px; padding-bottom:6px}
  .side-foot{display:none}
  .js .side:not(.open) .tree{display:none}
  .main{margin-left:0; padding:40px 20px 40px}
  .cards{grid-template-columns:1fr}
  .card.wide{flex-direction:column}
  .card.wide .shot{order:0; flex:none; border-left:0; border-bottom:1px solid var(--line); height:270px}
  .about-top{grid-template-columns:1fr}
  .about-top img{width:180px; height:180px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .sec{margin-top:84px}
  .small dl{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr}
  .teaser img{width:120px; height:120px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
  .tile{min-height:104px}
  .card .shot,.card.wide .shot{height:230px; padding:16px}
  .row{grid-template-columns:1fr}
  .pfig .in{padding:20px 12px 12px}
  .pn{grid-template-columns:1fr}
  .pn .next{grid-column:1; text-align:left}
}
@media print{
  .side{display:none}
  .main{margin-left:0}
}

/* project video */
.pvid .in{padding:20px; display:flex; justify-content:center}
.pvid video{display:block; width:100%; max-width:340px; height:auto; aspect-ratio:480 / 848; border-radius:var(--r-s); background:#000}

/* screenshots and photos on project pages */
.shots{display:grid; gap:20px; margin:0 0 20px}
.shots .pfig{margin:0}
.shotfig .in{display:block; padding:0; background:var(--screen)}
.shotfig img{display:block; width:100%; height:auto}
.shotfig.tall .in{padding:20px; text-align:center}
.shotfig.tall img{max-width:440px; margin:0 auto; border-radius:var(--r-s)}
.shotfig .in:hover img{opacity:.92}

/* send your own text */
.la-send{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px; border-top:1px solid var(--line); background:var(--panel); font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.la-send label{color:var(--text)}
.la-send input{font-family:var(--mono); font-size:14px; color:var(--amber); background:var(--screen); border:1px solid var(--line); border-radius:var(--r-s); padding:6px 10px; width:14ch; letter-spacing:.04em}
.la-send input::placeholder{color:#5A616B}
.la-send input:focus{outline:none; border-color:var(--amber)}
.no-js .la-send{display:none}
html:not(.js) .la-send{display:none}

/* ---------- project demos ---------- */
.demo{margin:56px 0 0; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:16px 18px 18px}
.demo-k{font-family:var(--mono); font-size:12.5px; color:var(--amber); margin:0 0 4px}
.demo h2{font-family:var(--mono); font-size:1.12rem; font-weight:650; margin:0 0 6px}
.demo-i{font-size:14.5px; line-height:1.5; color:var(--dim); margin:0 0 12px}
.demo-view{background:var(--screen); border:1px solid var(--line); border-radius:var(--r-s); padding:8px; min-height:120px; touch-action:none}
.demo-view svg{display:block; width:100%; height:auto; user-select:none}
.demo-ctl{display:grid; gap:10px; margin:14px 0 4px}
.ctl{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.ctl input[type=range]{grid-column:1 / -1; width:100%; accent-color:var(--amber); margin:2px 0 0}
.ctl output{color:var(--text)}
.ctl select{grid-column:1 / -1; font-family:var(--mono); font-size:13px; color:var(--text); background:var(--screen); border:1px solid var(--line); border-radius:var(--r-s); padding:5px 8px}
.chk{font-family:var(--mono); font-size:12.5px; color:var(--dim); display:flex; gap:8px; align-items:center}
.chk input{accent-color:var(--amber)}
.btns{display:flex; gap:8px}
.btns button{font-family:var(--mono); font-size:12.5px; color:var(--text); background:var(--screen); border:1px solid var(--line); border-radius:var(--r-s); padding:6px 12px; cursor:pointer}
.btns button:hover{border-color:var(--amber); color:var(--amber)}
.demo-out{font-size:14px; line-height:1.5; margin:10px 0 0; min-height:2.6em}
.demo-out b{font-weight:600}
.demo-out .ok{color:#8FCB8A}
.demo-out .bad{color:#F08A6C}
.demo-n{font-family:var(--mono); font-size:11.5px; color:#6F767F; margin:8px 0 0}
.demo svg .d-grid{stroke:var(--line); stroke-width:1; fill:none}
.demo svg .d-ax{font-family:var(--mono); font-size:9.5px; fill:var(--dim)}
.demo svg .d-on{fill:var(--amber)}
.demo svg .d-off{fill:#3A414A}
.demo svg .d-run{fill:var(--text); opacity:.75}
.demo svg .d-mark{fill:none; stroke:var(--text); stroke-width:1; stroke-dasharray:3 2}
.demo svg .d-thr{stroke:var(--cyan); stroke-width:1.5; stroke-dasharray:5 3}
.demo svg .d-tick{stroke:var(--dim); stroke-width:1}
.demo svg .d-band{fill:rgba(232,229,221,.16); stroke:none}
.demo svg .d-env{fill:none; stroke:var(--amber); stroke-width:1.8}
.demo svg .d-px0{fill:#1B2026; cursor:crosshair}
.demo svg .d-px1{fill:var(--text); cursor:crosshair}
.demo svg .d-edge{fill:var(--amber)}
.demo svg .d-body{fill:none; stroke:var(--text); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.demo svg .d-ball{fill:none; stroke:var(--amber); stroke-width:1.6}
.demo svg .d-jok{fill:#8FCB8A}
.demo svg .d-jbad{fill:#F08A6C}
.demo svg .d-wheel{fill:var(--text)}
.demo svg .d-arrow{stroke:var(--amber); stroke-width:1.8}
.demo svg .d-tickm{fill:none; stroke:var(--dim); stroke-width:1.5}
.d-list{list-style:none; margin:0; padding:2px 4px; font-size:13.5px}
.d-list li{display:grid; grid-template-columns:62px 1fr; gap:0 10px; padding:6px 0; border-bottom:1px solid var(--line)}
.d-list li:last-child{border-bottom:0}
.d-list li span:last-child{grid-column:2; color:var(--dim); font-size:12.5px}
.d-list em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--amber); border:1px solid rgba(242,181,63,.5); border-radius:3px; padding:0 4px; margin-left:4px}
.d-empty{margin:20px 8px; color:var(--dim); font-size:14px}

/* ---------- wide screens: demo on the right, home hero side by side ---------- */
@media (min-width:1600px){
  .main.has-demo{display:grid; grid-template-columns:minmax(0,880px) 360px; column-gap:64px; align-items:start}
  .main.has-demo .wrap{display:contents}
  .main.has-demo .wrap > *{grid-column:1}
  .main.has-demo .wrap > .demo{grid-column:2; grid-row:1 / span 40; position:sticky; top:48px; margin:0}
  .main.home .wrap{max-width:1380px}
  .main.home .hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); column-gap:64px; align-items:start}
  .main.home .hero > *{grid-column:1}
  .main.home .hero > .la{grid-column:2; grid-row:1 / span 2}
  .main.home .hero > .cap{grid-column:2; grid-row:3; align-self:start}
  .main.home .hero h1{font-size:clamp(2.4rem,3vw,3.2rem); margin-top:8px}
  .main.home .actions{margin-bottom:0}
}

/* ================= motion and interaction ================= */
/* scroll progress: a thin amber trace along the top */
.progress{position:fixed; top:0; left:0; right:0; height:2px; background:var(--amber); transform-origin:0 50%; transform:scaleX(0); z-index:30; pointer-events:none}

/* links and buttons */
a{transition:color .18s ease, text-decoration-color .18s ease}
.btn{background:linear-gradient(var(--amber),var(--amber)) no-repeat 0 0 / 0% 100%; transition:background-size .28s cubic-bezier(.6,0,.2,1), color .28s ease}
.btn:hover{background-color:transparent; background-size:100% 100%; color:var(--bg)}
.actions .plain{background:linear-gradient(var(--amber),var(--amber)) no-repeat 0 100% / 0% 1px; text-decoration:none; padding-bottom:2px; transition:background-size .25s ease, color .2s}
.actions .plain:hover{background-size:100% 1px}

/* sidebar tree */
.tree a{transition:color .15s, background-color .15s, padding-left .2s ease}
.tree a:hover{padding-left:10px}

/* project cards: the sketch lights up in amber */
.card{transition:border-color .25s ease, transform .25s ease}
.card:hover{transform:translateY(-3px)}
.card h3{transition:color .2s}
.card .shot svg .ink,.card .shot svg .ink-thin{transition:stroke .35s ease}
.card .shot svg .solid{transition:fill .35s ease}
.card:hover .shot svg .ink,.card:hover .shot svg .ink-thin{stroke:var(--amber)}
.card:hover .shot svg .solid{fill:var(--amber)}
.card .tags li{transition:border-color .25s, color .25s}
.card:hover .tags li{border-color:#4A525C; color:var(--text)}

/* skill tiles */
.tile{transition:border-color .2s, color .2s, transform .2s, background-color .2s}
.tile .ico,.tile .glyph,.tile svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tile:hover{border-color:var(--amber); color:var(--amber); transform:translateY(-3px); background:var(--panel-2)}
.tile:hover .ico,.tile:hover .glyph,.tile:hover svg{transform:scale(1.12)}

/* screenshots and figures */
.shotfig .in{overflow:hidden}
.shotfig img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shotfig .in:hover img{transform:scale(1.02); opacity:1}
.pfig{transition:border-color .25s}
.pfig:hover{border-color:#3A414A}

/* demo controls */
.ctl input[type=range]{cursor:pointer}
.ctl:hover output{color:var(--amber)}
.btns button{transition:border-color .15s, color .15s, transform .1s}
.btns button:active{transform:translateY(1px)}

/* scroll reveal: sweeps in left to right like a trace */
.js .reveal{opacity:0; -webkit-mask:linear-gradient(#000,#000) no-repeat 0 0 / 0% 100%; mask:linear-gradient(#000,#000) no-repeat 0 0 / 0% 100%; transition:-webkit-mask-size .8s cubic-bezier(.6,0,.2,1), mask-size .8s cubic-bezier(.6,0,.2,1), opacity .45s ease}
.js .reveal.in{opacity:1; -webkit-mask-size:100% 100%; mask-size:100% 100%}
.js .reveal.in-done{-webkit-mask:none; mask:none}

/* project cards fade in */
.js .fade{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, border-color .25s ease}
.js .fade.in{opacity:1; transform:none}

/* the home capture sweeps in once on load */
.js .la svg{animation:sweep 1.3s cubic-bezier(.6,0,.2,1) .15s both}
@keyframes sweep{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  .js .reveal{opacity:1; -webkit-mask:none; mask:none}
  .js .fade{opacity:1; transform:none}
  .card:hover,.tile:hover{transform:none}
  .progress{display:none}
}