/* The contact window: every call to action opens it. The page behind is blurred and
   held still, and a pane of the site's glass carries the contact duck in a ring of four
   channels and the personal contacts, each opening its messenger or the mail. */

.contact-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--contact-dialog-inset);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background: transparent;
    color: var(--color-text);
}

.contact-dialog[open] {
    display: grid;
}

.contact-dialog::backdrop {
    background: transparent;
}

.contact-dialog__scrim {
    position: fixed;
    inset: 0;
    background: var(--contact-dialog-scrim);
    -webkit-backdrop-filter: blur(var(--contact-dialog-blur)) saturate(1.25);
    backdrop-filter: blur(var(--contact-dialog-blur)) saturate(1.25);
}

/* Auto margins centre the pane and let a pane taller than the window start at its top. */
.contact-dialog__panel {
    position: relative;
    isolation: isolate;
    display: grid;
    width: min(100%, var(--contact-dialog-width));
    margin: auto;
    overflow: hidden;
    justify-items: center;
    gap: var(--space-md);
    padding: var(--contact-dialog-padding);
    border-radius: var(--surface-radius-large);
    background: var(--surface-glass);
    box-shadow: var(--surface-shadow-elevated);
    -webkit-backdrop-filter: blur(var(--contact-dialog-blur)) brightness(1.3);
    backdrop-filter: blur(var(--contact-dialog-blur)) brightness(1.3);
    text-align: center;
}

/* Two warm lights of the brand palette under the glass. */
.contact-dialog__panel::before,
.contact-dialog__panel::after {
    position: absolute;
    z-index: -1;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.contact-dialog__panel::before {
    top: -34%;
    left: -22%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-action) 48%, transparent), transparent 68%);
}

.contact-dialog__panel::after {
    right: -26%;
    bottom: -40%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 68%);
}

.contact-dialog__close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 1;
}

.contact-dialog__heading {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
}

.contact-dialog__title {
    text-wrap: balance;
}

.contact-dialog__description {
    max-width: 28rem;
    text-wrap: pretty;
}

/* The four contacts stand two by two; phones give each its own row. */
.contact-dialog__channels {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
}

.contact-dialog__channel {
    display: flex;
}

.contact-channel {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--surface-radius);
    background: rgb(var(--color-card-rgb) / 0.72);
    box-shadow: var(--surface-shadow);
    color: var(--color-heading);
    text-align: left;
    text-decoration: none;
    transition:
        transform var(--action-swoosh-scale-duration) var(--action-swoosh-jelly-ease),
        background-color var(--action-swoosh-color-duration) ease-out,
        box-shadow var(--action-swoosh-color-duration) ease-out;
}

.contact-channel__icon {
    width: var(--contact-channel-icon-size);
    height: var(--contact-channel-icon-size);
    object-fit: contain;
    transition: transform var(--action-swoosh-text-duration) var(--action-swoosh-jelly-ease);
}

.contact-channel__text {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.contact-channel__name {
    font-weight: 600;
    line-height: var(--ui-label-line-height);
}

.contact-channel__handle {
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-eyebrow);
    line-height: var(--ui-label-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-channel__arrow {
    width: var(--primary-action-icon-size);
    height: var(--primary-action-icon-size);
    transition: transform var(--action-swoosh-text-duration) var(--action-swoosh-jelly-ease);
}

.contact-channel:focus-visible {
    outline: 0.125rem solid var(--color-heading);
    outline-offset: 0.1875rem;
}

@media (hover: hover) and (pointer: fine) {
    .contact-channel:hover {
        background: var(--color-action);
        box-shadow: var(--surface-shadow-soft);
        transform: translate3d(0, -0.1875rem, 0);
    }

    .contact-channel:hover .contact-channel__icon {
        transform: scale(1.08) rotate(-6deg);
    }

    .contact-channel:hover .contact-channel__arrow {
        transform: translate3d(0.18rem, -0.08rem, 0) rotate(12deg) scale(1.08);
    }
}

/* The drawing: the contact duck in a ring of four channels. */
.contact-seal {
    position: relative;
    display: grid;
    width: var(--contact-seal-size);
    aspect-ratio: 1;
    place-items: center;
}

.contact-seal__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.contact-seal__duck {
    position: relative;
    width: 60%;
    height: auto;
    margin-top: 6%;
}

.contact-seal__glow-stop {
    stop-color: var(--color-action);
}

.contact-seal__light-stop {
    stop-color: var(--color-card);
}

.contact-seal__orbit {
    fill: none;
    stroke: rgb(var(--color-graphite-rgb) / 0.2);
    stroke-width: 1.2;
}

.contact-seal__channel {
    fill: none;
    stroke: var(--color-action);
    stroke-width: 7;
    stroke-linecap: round;
}

.contact-seal__sweep,
.contact-seal__flash {
    opacity: 0;
}

.contact-seal__sweep {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.contact-seal__spark {
    fill: var(--color-accent);
}

@media (max-width: 39.9375rem) {
    .contact-dialog__channels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 33.5rem) {
    .contact-seal {
        width: calc(var(--contact-seal-size) * 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-channel,
    .contact-channel__icon,
    .contact-channel__arrow {
        transition: none;
    }
}