/* Browser-native interaction states. */
:root {
  /* Analytic spring: stiffness 500, damping 60, mass 1; sampled every 15 ms. */
  --interface-spring: linear(0.00000, 0.04221, 0.12976, 0.22931, 0.32643, 0.41542, 0.49457, 0.56389, 0.62413, 0.67624, 0.72123, 0.76000, 0.79341, 0.82217, 0.84694, 0.86825, 0.88660, 0.90240, 0.91599, 0.92769, 0.93777, 0.94643, 0.95390, 0.96032, 0.96585, 0.97060, 0.97470, 0.97822, 0.98126, 0.98387, 0.98611, 0.98805, 0.98971, 0.99115, 0.99238, 0.99344, 0.99435, 0.99514, 0.99582, 0.99640, 0.99690, 0.99733, 0.99770, 0.99802, 0.99830, 0.99854, 0.99874, 0.99892, 1);
}
[data-project],
[data-writing-card] {
  transition: opacity 300ms cubic-bezier(.12, .23, .5, 1);
}
[data-project]:is(:hover, :focus-visible),
[data-writing-card]:is(:hover, :has(:focus-visible)) {
  opacity: 0.7;
}
[data-filter] {
  cursor: pointer;
}
[data-filter][aria-pressed="true"] p {
  color: #fff;
}
[data-filter][aria-pressed="false"] p {
  color: #8a8a8a;
}
[hidden] {
  display: none !important;
}
[data-youtube-player] iframe {
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
[data-ticker] ul {
  will-change: transform;
}
[data-carousel] {
  touch-action: pan-y;
}
[data-carousel] ul {
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}
[data-filter] p {
  -webkit-text-fill-color: currentColor;
}
[data-filter][aria-pressed="false"]:is(:hover, :focus-visible) p {
  color: #e0e0e0;
}
[data-nav-link] a {
  transition: color 200ms ease;
  text-decoration-color: currentColor;
}
[data-nav-link]:is(:hover, :has(:focus-visible)) a {
  color: #8a8a8a;
  -webkit-text-fill-color: #8a8a8a;
}
[data-nav-link] > div:nth-child(2) {
  transition: opacity 720ms var(--interface-spring);
}
[data-nav-link]:is(:hover, :has(:focus-visible)) > div:nth-child(2) {
  opacity: 1;
}
[data-nav-link]:is(:hover, :has(:focus-visible)) svg,
[data-nav-link]:is(:hover, :has(:focus-visible)) svg * {
  stroke: #8a8a8a;
}
[data-social] > div {
  transition:
    transform 720ms var(--interface-spring),
    opacity 720ms var(--interface-spring);
}
[data-social]:is(:hover, :focus-visible) > div {
  transform: rotate(20deg);
}
[data-social="linkedin"]:is(:hover, :focus-visible) > div {
  opacity: 0.5;
}
[data-social="instagram"]:is(:hover, :focus-visible) svg,
[data-social="instagram"]:is(:hover, :focus-visible) svg * {
  stroke: rgba(255, 255, 255, 0.5);
}
[data-carousel] button {
  transition: transform 150ms ease;
}
[data-carousel] button:is([aria-label="Next"], [aria-label="Previous"]):active {
  transform: scale(0.9);
}

[data-youtube-player]:is(:hover, :has(:focus-visible)) button svg path:first-child {
  fill: #f00;
}

[data-brand-part] {
  transition: opacity 200ms ease;
}
[data-brand][data-compact] {
  flex-direction: row-reverse;
}
[data-brand][data-compact] [data-brand-part="name"] {
  opacity: 0;
}
[data-brand][data-compact] [data-brand-part="initials"] {
  opacity: 1;
}

[data-text-link],
[data-text-link] span {
  -webkit-text-fill-color: currentColor;
  text-decoration-color: currentColor;
}
[data-text-link="accent"]:is(:hover, :focus-visible) {
  color: #fff;
  text-decoration-line: underline;
}
[data-text-link="muted"]:is(:hover, :focus-visible) {
  color: #8a8a8a;
}
[data-arrow-link] > div {
  will-change: transform;
  transition: opacity 450ms ease, transform 450ms cubic-bezier(.2, .8, .2, 1);
}
[data-arrow-link]:is(:hover, :focus-visible) > div {
  opacity: .5;
  transform: scale(1.1);
}
/* Keyboard users get a visible indicator even where the original suppressed it. */
a:focus-visible,
button:focus-visible,
[data-filter]:focus-visible {
  outline: 2px solid #928aff;
  outline-offset: 4px;
}