/* A stable text-link hit area with independent type, arrow and particle planes. */
a.intro-about-link[data-about-link] {
  --about-link-accent: var(--skill-code,var(--ink));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  width: fit-content;
  max-width: 100%;
  min-height: 50px;
  padding: 10px 0 13px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 clamp(13px,1.1vw,16px)/1.5 var(--sans);
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: none;
}
a.intro-about-link[data-about-link]::before,
a.intro-about-link[data-about-link]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb,var(--ink) 25%,transparent);
  pointer-events: none;
}
a.intro-about-link[data-about-link]::after {
  background: var(--about-link-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
a.intro-about-link[data-about-link] .about-link-label {
  position: relative;
  z-index: 1;
  color: var(--ink);
  transform-origin: left center;
  transform: perspective(700px) translate3d(0,0,0) scale(1);
  transition: translate .6s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
a.intro-about-link[data-about-link] .about-link-jitter { display: inline-block; color: inherit; }
a.intro-about-link[data-about-link] .about-link-arrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  flex: 0 0 auto;
  width: 25px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  transform: perspective(700px) translateZ(0);
  transition: translate .6s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), color .4s ease;
}
a.intro-about-link[data-about-link] .about-link-arrow::before {
  content: "↗";
  position: absolute;
  inset: 0;
  color: var(--about-link-accent);
  opacity: 0;
  translate: -9px 9px;
  transition: opacity .5s ease;
}
a.intro-about-link[data-about-link]:is(:hover,:focus-visible)::after { transform: scaleX(1); }
a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-label {
  translate: 2px 0;
  transform: perspective(700px) translate3d(calc(var(--depth-x,0px) * .1),calc(var(--depth-y,0px) * .1),15px) rotateX(calc(var(--depth-rx,0deg) * 1.5)) rotateY(calc(var(--depth-ry,0deg) * 1.5)) scale(1.12);
}
a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-arrow {
  translate: 6px -5px;
  color: var(--about-link-accent);
  transform: perspective(700px) translateZ(26px) rotateX(calc(var(--depth-rx,0deg) * -1.2)) rotateY(calc(var(--depth-ry,0deg) * -1.2));
}
a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-arrow::before { opacity: .3; }
a.intro-about-link[data-about-link]:focus-visible { outline: 1px solid var(--about-link-accent); outline-offset: 8px; }
/* A brief tremor on entry settles while the link is being read. */
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-jitter { animation: intro-link-jitter .52s ease-out both; }
@keyframes intro-link-jitter {
  0%,100% { transform: translate(0,0) rotate(0); }
  14% { transform: translate(-.8px,.4px) rotate(-.25deg); }
  29% { transform: translate(1px,-.5px) rotate(.2deg); }
  46% { transform: translate(-.7px,.4px); }
  64% { transform: translate(.5px,-.25px); }
  82% { transform: translate(-.2px,.1px); }
}
a.intro-about-link[data-about-link] .about-link-particles { position: absolute; inset: 0; pointer-events: none; user-select: none; color: var(--about-link-accent); opacity: 0; transition: opacity .25s ease; }
a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-particles { opacity: 1; }
a.intro-about-link[data-about-link] .about-link-particle {
  position: absolute;
  color: hsl(var(--particle-hue,170) 85% var(--particle-lightness,72%));
  left: var(--particle-left); top: var(--particle-top);
  width: var(--particle-size,3px); height: var(--particle-size,3px);
  border: 1px solid currentColor; background: currentColor;
  opacity: 0;
  animation: intro-link-emission var(--particle-duration,2.8s) linear var(--particle-delay,0s) infinite;
  animation-play-state: paused !important;
}
a.intro-about-link[data-about-link] .about-link-particle:nth-child(3n) { background: transparent; }
[data-theme="light"] a.intro-about-link[data-about-link] { --particle-lightness: 38%; }
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient a.intro-about-link[data-about-link]:is(:hover,:focus-visible) .about-link-particle { animation-play-state: var(--life-state,paused) !important; }
@keyframes intro-link-emission {
  0%,8% { opacity: 0; transform: translate3d(0,0,0) rotate(0deg) scale(.2); }
  24% { opacity: .95; transform: translate3d(calc(var(--particle-x) * .16),calc(var(--particle-y) * .16),0) rotate(calc(var(--particle-turn,90deg) * .16)) scale(1); }
  68% { opacity: .75; transform: translate3d(calc(var(--particle-x) * .68),calc(var(--particle-y) * .68),0) rotate(calc(var(--particle-turn,90deg) * .68)) scale(.9); }
  100% { opacity: 0; transform: translate3d(var(--particle-x),var(--particle-y),0) rotate(var(--particle-turn,90deg)) scale(.35); }
}
:is(.motion-paused,.text-selection-active) a.intro-about-link[data-about-link]::after,
:is(.motion-paused,.text-selection-active) a.intro-about-link[data-about-link] span,
:is(.motion-paused,.text-selection-active) a.intro-about-link[data-about-link] span::before {
  transition: none !important;
  translate: none !important;
  transform: none !important;
}
:is(.motion-paused,.text-selection-active) a.intro-about-link[data-about-link] .about-link-arrow::before { display: none; }
:is(.motion-paused,.text-selection-active,.tab-inactive) a.intro-about-link[data-about-link] .about-link-particles { opacity: 0; transition: none; }
:is(.motion-paused,.text-selection-active,.tab-inactive) a.intro-about-link[data-about-link] .about-link-particle { animation-play-state: paused !important; }
@media print {
  a.intro-about-link[data-about-link]::after,
  a.intro-about-link[data-about-link] .about-link-particles,
  a.intro-about-link[data-about-link] .about-link-arrow::before { display: none; }
  a.intro-about-link[data-about-link] span { animation: none !important; transform: none !important; translate: none !important; }
}