/* Opt-in credit widget. The whale is decorative; text/link remain available without animation. */
.yasmalia-developer-credit {
    --yasmalia-developer-credit-duration: 4.8s;
    --yasmalia-developer-credit-swim-speed: 1;
    --yasmalia-developer-credit-text-color: currentColor;
    --yasmalia-developer-credit-name-color: currentColor;
    --yasmalia-developer-credit-whale-color: currentColor;
    display: flex;
    min-width: 0;
    overflow: clip;
    padding-inline: 2.75rem;
}

.yasmalia-developer-credit__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 2.75rem;
    color: var(--yasmalia-developer-credit-text-color);
    line-height: 1.35;
    text-decoration: none;
}

a.yasmalia-developer-credit__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.yasmalia-developer-credit__copy {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35em;
    min-width: 0;
}

.yasmalia-developer-credit__label {
    overflow-wrap: anywhere;
}

.yasmalia-developer-credit__name {
    color: var(--yasmalia-developer-credit-name-color);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.yasmalia-developer-credit__whale {
    position: absolute;
    top: 50%;
    left: -2.45rem;
    width: 2.25rem;
    height: auto;
    color: var(--yasmalia-developer-credit-whale-color);
    pointer-events: none;
    transform: translate3d(-145%, -50%, 0) rotate(-5deg);
    transform-origin: 50% 50%;
    will-change: transform;
}

.yasmalia-developer-credit[data-trigger="hover-focus"] .yasmalia-developer-credit__link:is(:hover, :focus-visible) .yasmalia-developer-credit__whale,
.yasmalia-developer-credit.is-yasmalia-developer-credit-entered .yasmalia-developer-credit__whale {
    animation: yasmalia-developer-credit-swim calc(var(--yasmalia-developer-credit-duration) / var(--yasmalia-developer-credit-swim-speed)) cubic-bezier(.2, .72, .22, 1) both;
}

.yasmalia-developer-credit[data-trigger="hover-focus"] .yasmalia-developer-credit__link:is(:hover, :focus-visible) .yasmalia-developer-credit__whale-tail,
.yasmalia-developer-credit.is-yasmalia-developer-credit-entered .yasmalia-developer-credit__whale-tail {
    animation: yasmalia-developer-credit-tail .55s ease-in-out infinite alternate;
    transform-origin: 13px 25px;
}

.yasmalia-developer-credit[data-trigger="hover-focus"] .yasmalia-developer-credit__link:is(:hover, :focus-visible) .yasmalia-developer-credit__whale-fin,
.yasmalia-developer-credit.is-yasmalia-developer-credit-entered .yasmalia-developer-credit__whale-fin {
    animation: yasmalia-developer-credit-fin .72s ease-in-out infinite alternate;
    transform-origin: 42px 29px;
}

@keyframes yasmalia-developer-credit-swim {
    0% { transform: translate3d(-145%, -50%, 0) rotate(-5deg); opacity: 0; }
    10% { opacity: 1; }
    48% { transform: translate3d(135%, -68%, 0) rotate(4deg); }
    100% { transform: translate3d(310%, -50%, 0) rotate(-5deg); opacity: 0; }
}

@keyframes yasmalia-developer-credit-tail {
    from { transform: rotate(-13deg); }
    to { transform: rotate(13deg); }
}

@keyframes yasmalia-developer-credit-fin {
    from { transform: rotate(-10deg); }
    to { transform: rotate(12deg); }
}

@media (max-width: 767px) {
    .yasmalia-developer-credit {
        padding-inline: 2.3rem;
    }

    .yasmalia-developer-credit__copy {
        gap: .22em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yasmalia-developer-credit,
    .yasmalia-developer-credit * {
        scroll-behavior: auto;
    }

    .yasmalia-developer-credit__whale {
        animation: none !important;
        transform: translate3d(-15%, -50%, 0) rotate(-5deg);
        opacity: 1;
    }

    .yasmalia-developer-credit__whale-tail,
    .yasmalia-developer-credit__whale-fin {
        animation: none !important;
    }
}