/* Supplemental motion for the no-link download preview button. */

.download-dock {
    isolation: isolate;
}

/* This free-standing layer leaves the dock dimensions and fixed placement untouched. */

.download-dock::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: -9px;
    border-radius: 34px;
    background: rgba(255, 70, 143, .30);
    filter: blur(15px);
    opacity: .24;
    will-change: opacity;
    animation: download-motion-breathe 4.8s ease-in-out infinite;
}

@keyframes download-motion-breathe {
    0%,
    100% {
        opacity: .20;
    }
    50% {
        opacity: .52;
    }
}

/* Keep the content above a transient ripple without touching the existing button pseudo-elements. */

.download-button> :not(.download-button__ripple) {
    position: relative;
    z-index: 1;
}

.download-button__ripple {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: var(--download-ripple-x, 50%);
    top: var(--download-ripple-y, 50%);
    width: var(--download-ripple-size, 150px);
    height: var(--download-ripple-size, 150px);
    border-radius: 50%;
    background: rgba(255, 255, 255, .46);
    opacity: .48;
    transform: translate(-50%, -50%) scale(.14);
    animation: download-motion-ripple .42s ease-out forwards;
}

@keyframes download-motion-ripple {
    from {
        opacity: .48;
        transform: translate(-50%, -50%) scale(.14);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* This is also the non-motion pressed highlight used under reduced-motion. */

.download-button.download-motion-pressed {
    filter: brightness(.97) saturate(.98);
    box-shadow: 0 4px 12px rgba(255, 31, 106, .24), 0 2px 5px rgba(132, 10, 63, .18) inset, 0 1px 0 rgba(255, 255, 255, .26) inset;
}

@media (prefers-reduced-motion:no-preference) {
    .download-button {
        transition: transform 120ms cubic-bezier(.2, .8, .2, 1), box-shadow 120ms ease, filter 120ms ease;
    }
    .download-button.download-motion-pressed {
        transform: scale(.985);
    }
    .download-button.download-motion-rebound {
        animation: download-motion-rebound 200ms cubic-bezier(.2, 1.35, .4, 1);
    }
    @keyframes download-motion-rebound {
        0% {
            transform: scale(.985);
        }
        72% {
            transform: scale(1.008);
        }
        100% {
            transform: scale(1);
        }
    }
}

/* Visibility changes and the dock's existing zoom state pause only decorative motion. */

.download-dock.download-motion-paused::after,
.download-dock.is-zoomed::after {
    animation-play-state: paused;
}

.download-dock.download-motion-paused .download-button::before {
    animation-play-state: paused;
}

.download-dock.download-motion-paused .download-button__ripple {
    animation-play-state: paused;
}

@media (prefers-reduced-motion:reduce) {
    .download-dock::after {
        animation: none;
        opacity: .28;
        will-change: auto;
    }
    .download-button__ripple {
        display: none;
        animation: none;
    }
    .download-button,
    .download-button.download-motion-pressed {
        transition: none;
        transform: none;
    }
    .download-button.download-motion-rebound {
        animation: none;
    }
}