/*
   ....     ....    ||   ||    ||___
  ||  ||   ||  ||   ||   ||    ||  ||
  ||__||   ||__||   || | ||    ||__||
  ||  ||   ||  ||   || | ||    ||
   ...||    ....     ...       ||

  ------------------------------------------------------------------
  gawp.css  --  the maker's page, one dark screen
  Violet-black ground, a purple glow and a blue one drifting behind
  it, a grid and one slow wheel, and everything above that lit like
  a sign: neon edges, soft halos, colour that bleeds rather than
  sits. Four cards sell the work, each with a drawing that moves --
  a grid that draws itself, a point running a curve, a caret
  breathing between braces, two server lights taking turns. All CSS,
  nothing on a canvas, and every one of them stops dead under
  prefers-reduced-motion.
  art: https://patorjk.com/software/taag/#p=display&f=Kban&t=gawp
*/

:root{
  --ink:#08060f;
  --paper:#f6f3ff;
  --body:#d3cdee;
  --mute:#a49cce;
  --faint:#7a719f;

  --purple:#c08bff;
  --blue:#67d4ff;
  --purple-soft:rgba(192,139,255,.16);
  --blue-soft:rgba(103,212,255,.14);
  --rule:rgba(192,139,255,.18);

  color-scheme: dark;
}

*{ box-sizing:border-box }

html{ overflow-x:clip; -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  color:#d8e1ec;
}

.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.bg__glow{
  position:absolute;
  width:74vmax;height:74vmax;
  border-radius:50%;
  filter:blur(68px);
  opacity:.26;
  will-change:transform;
}
.bg__glow--purple{
  left:-24vmax;top:-26vmax;
  background:radial-gradient(circle at 50% 50%, rgba(192,139,255,.46), rgba(192,139,255,0) 62%);
  animation:bg-drift-a 30s ease-in-out infinite alternate;
}
.bg__glow--blue{
  right:-28vmax;bottom:-30vmax;
  background:radial-gradient(circle at 50% 50%, rgba(103,212,255,.38), rgba(103,212,255,0) 64%);
  animation:bg-drift-b 42s ease-in-out infinite alternate;
}

.bg__grid{
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(to right, rgba(103,212,255,.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(192,139,255,.085) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0 42%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0 42%, transparent 80%);
  animation:bg-pan 48s linear infinite;
}

.bg__wheel{
  position:absolute;
  right:-30vmin;top:50%;
  width:76vmin;height:76vmin;
  transform:translateY(-50%);
  color:rgba(192,139,255,.16);
  animation:bg-turn 130s linear infinite;
}

.bg__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(8,6,15,0) 40%, rgba(8,6,15,.78) 100%);
}

@keyframes bg-drift-a{
  from{ transform:translate3d(0,0,0) scale(1) }
  to{ transform:translate3d(9vmax,6vmax,0) scale(1.18) }
}
@keyframes bg-drift-b{
  from{ transform:translate3d(0,0,0) scale(1.1) }
  to{ transform:translate3d(-8vmax,-6vmax,0) scale(.94) }
}
@keyframes bg-pan{
  from{ background-position:0 0, 0 0 }
  to{ background-position:64px 64px, 64px 64px }
}
@keyframes bg-turn{
  from{ transform:translateY(-50%) rotate(0deg) }
  to{ transform:translateY(-50%) rotate(360deg) }
}

.wrap{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 auto;
  padding:34px 22px 60px;
}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:44px;
}

.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  padding:2px 0 7px;
  color:var(--paper);
  text-decoration:none;
  background-image:linear-gradient(90deg, var(--purple), var(--blue));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size .28s cubic-bezier(.2,.7,.3,1), color .2s ease;
}
.mark:hover,
.mark:focus-visible{ background-size:100% 2px }
.mark:focus-visible{ outline:2px solid var(--blue);outline-offset:5px;border-radius:3px }

.mark__logo{
  width:26px;height:26px;
  overflow:visible;
}

.back{
  font-size:13.5px;font-weight:600;
  color:var(--mute);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease, transform .18s ease;
}
.back:hover{ color:var(--blue); transform:translateX(-2px) }
.back:focus-visible{ outline:2px solid var(--blue);outline-offset:3px;border-radius:4px }

.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 6px rgba(103,212,255,.45);
  animation:dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%    { opacity:.45; transform:scale(.82) }
}

.hl{
  position:relative;
  display:inline-block;
  padding-bottom:.05em;
}

.hl__stroke{
  position:absolute;
  left:-.04em;
  right:-.04em;
  bottom:-.17em;
  width:calc(100% + .08em);
  height:.26em;
  overflow:visible;
  pointer-events:none;
  z-index:-1;
}

.hl__line{
  fill:none;
  stroke:url(#hl-grad);
  stroke-width:4.6;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:220;
  filter:drop-shadow(0 0 5px rgba(150,150,255,.45));
}
html.ready .hl__line{ animation:hl-draw 1s cubic-bezier(.2,.7,.3,1) .30s forwards }
.hl__line--back{
  stroke-width:3;
  opacity:.42;
}
html.ready .hl__line--back{ animation-delay:.16s }

@keyframes hl-draw{
  to{ stroke-dashoffset:0 }
}

h1{
  margin:0;
  font-size:clamp(38px,8.4vw,62px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1.0;
  color:#fff;
  text-shadow:0 0 16px rgba(192,139,255,.14);
}

.jump{
  display:inline-flex;align-items:flex-end;gap:9px;
  margin:18px 0 0;
  padding-bottom:3px;
  font-size:15px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  transition:color .18s ease;
}
.jump__word{
  background-image:linear-gradient(90deg, var(--purple), var(--blue));
  background-repeat:no-repeat;
  background-size:100% 2px;
  background-position:0 100%;
  padding-bottom:3px;
  transition:background-size .18s ease;
}
.jump:hover{ color:var(--blue) }
.jump:hover .jump__word{ background-size:100% 3px }
.jump .dot{flex:0 0 auto;margin-bottom:4px}
.jump:focus-visible{ outline:2px solid var(--blue);outline-offset:4px;border-radius:2px }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth }
}

.lead{
  margin:20px 0 0;
  max-width:46ch;
  font-size:16px;
  line-height:1.62;
  color:var(--body);
}

.skills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:36px 0 0;
}

.card{
  position:relative;
  padding:19px 20px 18px;
  border:1px solid rgba(192,139,255,.20);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(192,139,255,.075), rgba(103,212,255,.035));
  box-shadow:0 12px 30px -26px rgba(192,139,255,.45);
  transition:border-color .28s ease, box-shadow .28s ease, transform .28s ease, background-color .28s ease;
}
html.booting .card{ opacity:0 }
html.ready .card{ animation:card-pop .5s cubic-bezier(.34,1.56,.64,1) backwards }
html.ready .card:nth-child(1){ animation-delay:1.30s }
html.ready .card:nth-child(2){ animation-delay:1.50s }
html.ready .card:nth-child(3){ animation-delay:1.70s }
html.ready .card:nth-child(4){ animation-delay:1.90s }

.card:hover{
  border-color:rgba(103,212,255,.40);
  box-shadow:0 14px 34px -26px rgba(103,212,255,.40);
  transform:translateY(-3px);
}

@keyframes card-pop{
  0%   { opacity:0; transform:translateY(16px) scale(.955) }
  70%  { opacity:1; transform:translateY(-2px) scale(1.006) }
  100% { opacity:1; transform:none }
}

.card__ico{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin:0 0 15px;
  border-radius:12px;
  background:rgba(192,139,255,.09);
  border:1px solid rgba(192,139,255,.30);
  color:var(--purple);
  transition:background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.card:hover .card__ico{ transform:translateY(-2px) }
.card__ico--blue{
  background:rgba(103,212,255,.08);
  border-color:rgba(103,212,255,.30);
  color:var(--blue);
}

.card h2{
  margin:0 0 7px;
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
}

.card p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--mute);
}

.ico{
  width:28px;height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
  filter:drop-shadow(0 0 1.5px currentColor);
}

.ico--grid rect,
.ico--grid .ico__bar,
.ico--grid .ico__side{
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:ico-draw 5.2s cubic-bezier(.4,0,.2,1) infinite;
}
.ico--grid .ico__bar{ animation-delay:.30s }
.ico--grid .ico__side{ animation-delay:.52s }

@keyframes ico-draw{
  0%   { stroke-dashoffset:80 }
  18%  { stroke-dashoffset:0 }
  76%  { stroke-dashoffset:0 }
  100% { stroke-dashoffset:80 }
}

.ico--motion .ico__track{
  stroke:rgba(103,212,255,.38);
  stroke-width:1.3;
}
.ico--motion .ico__ball{
  fill:currentColor;
  stroke:none;
  offset-path:path("M2.4 17.6c3.4 0 4.6-11.2 9.6-11.2s6.2 11.2 9.6 11.2");
  offset-rotate:0deg;
}
.ico--motion .ico__ball--head{ animation:ico-run 2.4s linear infinite; r:2.2 }
.ico--motion .ico__ball--tail{
  opacity:.35;
  animation:ico-run 2.4s linear infinite;
  animation-delay:-.13s;
}

@keyframes ico-run{
  0%   { offset-distance:0%;   opacity:0 }
  10%  { opacity:1 }
  90%  { opacity:1 }
  100% { offset-distance:100%; opacity:0 }
}

.ico--js .ico__caret{
  fill:currentColor;
  stroke:none;
  animation:ico-blink 1.4s steps(1,end) infinite;
}

@keyframes ico-blink{
  0%,62%   { opacity:1 }
  66%,92%  { opacity:.1 }
  96%,100% { opacity:1 }
}

.ico--node .ico__led{
  fill:currentColor;
  stroke:none;
}
.ico--node .ico__led--a{ animation:ico-led-a 3.6s ease-in-out infinite }
.ico--node .ico__led--b{ animation:ico-led-b 3.6s ease-in-out infinite }

@keyframes ico-led-a{
  0%,40%  { opacity:.22 }
  48%,86% { opacity:1 }
  100%    { opacity:.22 }
}
@keyframes ico-led-b{
  0%,40%  { opacity:1 }
  48%,86% { opacity:.22 }
  100%    { opacity:1 }
}

.stack{
  margin:30px 0 0;
}

.stack__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.stack__head::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(192,139,255,.30), rgba(192,139,255,0));
}

.chips{
  display:flex;flex-wrap:wrap;
  gap:11px 20px;
  margin:0;padding:0;
  list-style:none;
}

.chips li{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#6b6488;
  padding-bottom:3px;
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 1px;
  transition:color .18s ease, background-size .18s ease;
}

.chips li.chips__on{
  color:#fff;
  font-weight:700;
  background-image:linear-gradient(90deg, var(--purple), var(--blue));
  background-size:100% 2px;
}

.chips li:hover{ color:#cfc9ee }
.chips li:not(.chips__on):hover{
  background-image:linear-gradient(90deg, rgba(238,242,246,.34), rgba(238,242,246,.08));
}

.hire{
  margin:40px 0 0;
  padding:22px 20px 20px;
  border:1px solid rgba(192,139,255,.26);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(192,139,255,.11), rgba(103,212,255,.05));
  box-shadow:0 18px 44px -32px rgba(192,139,255,.5);
}

.hire__head{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 12px;
}

.hire__ico{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  flex:0 0 auto;
  border-radius:12px;
  background:rgba(103,212,255,.10);
  border:1px solid rgba(103,212,255,.34);
  color:var(--blue);
}

.hire h2{
  margin:0;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);
}

.hire__say{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--body);
  max-width:52ch;
}

.hire__ways{
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
  margin:18px 0 0;
}

@media (min-width:640px){
  .hire__ways{
    grid-template-columns:max-content max-content;
    gap:11px 34px;
    justify-content:start;
  }
}

.hire__way{
  display:flex;
  align-items:baseline;
  gap:14px;
  text-decoration:none;
}

.hire__label{
  flex:0 0 46px;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}

.hire__value{
  font-size:15px;
  font-weight:700;
  color:#fff;
  padding-bottom:3px;
  overflow-wrap:anywhere;
  background-image:linear-gradient(90deg, var(--purple), var(--blue));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size .28s cubic-bezier(.2,.7,.3,1), color .2s ease;
}

.hire__way:hover .hire__value,
.hire__way:focus-visible .hire__value{ background-size:100% 2px }
.hire__way:hover .hire__value{ color:var(--blue) }
.hire__way:focus-visible{ outline:2px solid var(--blue);outline-offset:4px;border-radius:3px }

.ico__hammer{
  transform-box:fill-box;
  transform-origin:22% 92%;
  animation:hammer-tap 2.6s cubic-bezier(.4,0,.3,1) infinite;
}

.ico--hammer{ width:24px;height:24px }
.ico--hammer .ico__head{ fill:currentColor;stroke:none }

@keyframes hammer-tap{
  0%, 44%, 100%{ transform:rotate(0deg) }
  12%         { transform:rotate(-13deg) }
  25%         { transform:rotate(6deg) }
  33%         { transform:rotate(0deg) }
}

.foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}

.made{
  display:flex;align-items:center;gap:7px;
  margin:0;
  font-size:12px;
  color:var(--faint);
}
.made__mark{ width:13px;height:13px;flex:0 0 auto;display:block;opacity:.85 }
.made__word{
  text-decoration:underline;
  text-decoration-color:rgba(192,139,255,.6);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

@media (forced-colors: active){
  .made__mark,.bg__wheel{ forced-color-adjust:none }
  .card__ico{ forced-color-adjust:none;border-color:CanvasText;color:CanvasText;box-shadow:none }
  .chips li{ box-shadow:none }
}

@media (prefers-reduced-motion: reduce){
  .bg__glow,.bg__grid,.bg__wheel,.dot{ animation:none }
  .hl__line{ animation:none;stroke-dashoffset:0 }
  .ico--grid rect,
  .ico--grid .ico__bar,
  .ico--grid .ico__side{ animation:none;stroke-dashoffset:0 }
  .ico--motion .ico__ball{ animation:none;offset-distance:50%;opacity:1 }
  .ico--motion .ico__ball--tail{ opacity:.35 }
  .ico--js .ico__caret{ animation:none;opacity:1 }
  .ico--node .ico__led{ animation:none;opacity:1 }
  html.ready .card{ animation:none }
  .ico__hammer{ animation:none }
  .hire__value{ transition:none }
  .card,.card:hover{ transition:none;transform:none }
  .card:hover .card__ico,.mark:hover,.back:hover,.chips li:hover,.hire__link:hover{ transform:none }
  .mark{ transition:none }
}

@media (max-width:640px){
  .wrap{ padding:24px 18px 48px }
  .top{ margin-bottom:38px }
  .skills{ grid-template-columns:1fr;gap:13px }
  .lead{ font-size:16px }
  .hire{ padding:18px 18px 18px }
  .foot{ flex-direction:column;align-items:flex-start;gap:12px }
}