.footer {
  --footer-hit-padding: var(--space-s);
  position: relative;
  flex-shrink: 0;
  height: calc(4 * var(--space-l));
  margin: auto 0 0;
}

.footer > details,
.footer-motion {
  position: absolute;
  bottom: calc(2 * var(--space-l));
  left: 50%;
  width: max-content;
  transform: translate(-50%, 50%);
}

.footer summary,
.footer a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.footer summary {
  padding: var(--space-s) var(--space-m);
  color: var(--oc-gray-9);
  background-color: var(--oc-gray-0);
  list-style: none;
  cursor: pointer;
}

.footer summary::-webkit-details-marker {
  display: none;
}

.footer-name {
  display: none;
  white-space: nowrap;
}

.footer-symbol {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-l);
  height: var(--space-l);
  font-size: calc(var(--font-size-body) * 1.5);
  font-weight: 300;
}

.footer a {
  padding: var(--space-m);
  color: var(--oc-gray-0);
  background-color: var(--oc-black);
  text-decoration: none;
  transition: color var(--duration-x-fast) linear;
}

.footer a:focus-visible {
  color: var(--oc-red-5);
}

.footer details:not([open]) > summary {
  transition: color var(--duration-x-fast) linear,
    background-color var(--duration-x-fast) linear,
    padding var(--duration-fast) linear;
}

.footer summary::after,
.footer a::after {
  position: absolute;
  inset: calc(-1 * var(--footer-hit-padding));
  border-radius: inherit;
  content: "";
}

.footer details:not([open]) > summary:focus-visible {
  padding: calc(var(--space-s) + var(--footer-hit-padding)) calc(var(--space-m) + var(--footer-hit-padding));
  color: var(--oc-gray-2);
  background-color: var(--oc-black);
}

@media (hover: hover) and (pointer: fine) {
  .footer a:hover {
    color: var(--oc-red-5);
  }

  .footer details:not([open]) > summary:hover {
    padding: calc(var(--space-s) + var(--footer-hit-padding)) calc(var(--space-m) + var(--footer-hit-padding));
    color: var(--oc-gray-2);
    background-color: var(--oc-black);
  }
}

.footer > details[open] {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.footer > details[open]::details-content {
  display: contents;
}

.footer details[open] > summary {
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  color: var(--oc-gray-2);
  background-color: var(--oc-black);
}

.footer details[open] .footer-name {
  display: inline;
}

@property --footer-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.footer-motion {
  transition: --footer-progress var(--duration-steady) ease;
}

.footer-motion.is-open {
  --footer-progress: 1;
}

.footer-motion > svg {
  display: block;
  overflow: visible;
  pointer-events: none;
}

.footer-identity,
.footer-motion > a,
.footer-identity > span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.footer-identity {
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: 9999px;
  background: transparent;
  font: inherit;
  cursor: default;
}

.footer-motion > a {
  padding: 0;
  background: transparent;
}

.footer-identity > span {
  pointer-events: none;
}

.footer-identity .footer-name {
  display: block;
  color: var(--oc-gray-2);
}

.footer-motion [inert] {
  visibility: hidden;
}