/* --------------------------------------------------------------------------
   EXPERIMENT: DESKTOP CONTACT CARD

   Fast knobs for browser inspection:
   - --contact-card-bg changes the whole card color.
   - --contact-card-type-size changes the link type.
   - --contact-card-width / --contact-card-bottom-space change its proportions.
   - --contact-card-dot-inset keeps the Close mark clear of the card edges.
   - --contact-card-list-top is set from the CONTACT click position at runtime.

   Delete/comment this file's <link>, its marked HTML block, and
   contact-experiment.js to remove the experiment completely.
   -------------------------------------------------------------------------- */

.contact-experiment-layer {
  display: none;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .contact-experiment-layer {
    --contact-card-bg: #929395;
    --contact-card-ink: #111;
    --contact-card-hover: #fff;
    --contact-card-type-size: 14px;
    --contact-card-close-size: 12px;
    --contact-card-width: 240px;
    --contact-card-top: clamp(24px, 2.4vh, 34px);
    --contact-card-right: clamp(24px, 1.35vw, 36px);
    --contact-card-dot-inset: 15px;
    --contact-card-radius: 8px;
    --contact-card-row-height: 28px;
    --contact-card-list-top: 132px;
    --contact-card-bottom-space: 30px;
    --contact-close-dot-size: 14px;
    --contact-close-right: 30px;
    --contact-close-top: 12px;
    display: block;
    inset: 0;
    position: fixed;
    z-index: 140;
  }

  .contact-experiment-layer[hidden] {
    display: none;
  }

  .contact-card {
    animation: contact-card-enter 150ms cubic-bezier(.16, 1, .3, 1) both;
    background: var(--contact-card-bg);
    border-radius: var(--contact-card-radius);
    color: var(--contact-card-ink);
    height: calc(var(--contact-card-list-top) + var(--contact-card-row-height) * 4 + var(--contact-card-bottom-space));
    outline: 0;
    overflow: hidden;
    position: absolute;
    right: var(--contact-card-right);
    top: var(--contact-card-top);
    width: var(--contact-card-width);
  }

  .contact-experiment-layer.is-closing .contact-card {
    animation: contact-card-exit 90ms ease-in both;
  }

  .contact-card-close {
    align-items: center;
    color: var(--contact-card-ink);
    cursor: pointer;
    display: flex;
    font: 400 var(--contact-card-close-size)/1 "Autoscape Round", monospace;
    gap: 9px;
    height: 44px;
    padding: 0;
    position: fixed;
    right: var(--contact-close-right);
    text-transform: uppercase;
    top: var(--contact-close-top);
    transition: color 80ms linear;
  }

  .contact-card-close-label {
    display: block;
    transition:
      letter-spacing 420ms var(--ease-out),
      transform 480ms var(--ease-out);
  }

  .contact-card-close-dot {
    background: currentColor;
    border-radius: 999px;
    display: block;
    flex: 0 0 auto;
    height: var(--contact-close-dot-size);
    position: relative;
    transition:
      background-color 220ms ease,
      transform 520ms var(--ease-out);
    width: var(--contact-close-dot-size);
  }

  .contact-card-close-dot::before,
  .contact-card-close-dot::after {
    background: currentColor;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: transform 480ms var(--ease-out);
    width: 118%;
  }

  .contact-card-close-dot::before {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  }

  .contact-card-close-dot::after {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
  }

  .contact-card-close:is(:hover, :focus-visible) .contact-card-close-label {
    letter-spacing: 0.075em;
    transform: translateX(-4px);
  }

  .contact-card-close:is(:hover, :focus-visible) .contact-card-close-dot {
    background-color: transparent;
    transform: rotate(90deg) scale(1.08);
  }

  .contact-card-close:is(:hover, :focus-visible) .contact-card-close-dot::before,
  .contact-card-close:is(:hover, :focus-visible) .contact-card-close-dot::after {
    transform: translate(-50%, -50%) rotate(45deg) scaleX(1);
    transition-delay: 55ms;
  }

  .contact-card-close:is(:hover, :focus-visible) .contact-card-close-dot::after {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
  }

  .contact-card-links {
    left: 16px;
    position: absolute;
    right: 16px;
    top: var(--contact-card-list-top);
  }

  .contact-card-link {
    align-items: center;
    border-top: 1px solid rgb(17 17 17 / 48%);
    color: var(--contact-card-ink);
    cursor: pointer;
    display: flex;
    font: 400 var(--contact-card-type-size)/1 "Autoscape Round", monospace;
    height: var(--contact-card-row-height);
    justify-content: flex-start;
    padding: 0 14px;
    position: relative;
    text-align: left;
    text-transform: uppercase;
    transition: color 80ms linear, padding-left 110ms cubic-bezier(.16, 1, .3, 1);
    width: 100%;
  }

  .contact-card-link:last-child {
    border-bottom: 1px solid rgb(17 17 17 / 48%);
  }

  .contact-card-link-arrow {
    left: 14px;
    opacity: 0;
    position: absolute;
    transform: translateX(-4px);
    transition: opacity 80ms linear, transform 100ms cubic-bezier(.16, 1, .3, 1);
  }

  .contact-card :is(.contact-card-close, .contact-card-link):is(:hover, :focus-visible) {
    color: var(--contact-card-hover);
    outline: 0;
  }

  .contact-card-link:is(:hover, :focus-visible) .contact-card-link-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .contact-card-link:is(:hover, :focus-visible) {
    padding-left: 36px;
  }

  .contact-card-email[data-copied="true"] {
    color: var(--contact-card-hover);
  }

  @keyframes contact-card-enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes contact-card-exit {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .contact-experiment-layer.is-closing .contact-card {
    animation: none;
  }
}