/* "Site by Sam Cook": the SC monogram from Sam's own brand (sam-cook.uk).
   Mark-mint on light grounds, the lifted mint on dark ones. Like the footer
   on sam-cook.uk, the mark signs itself: the outline draws, then it fills. */

.site-credit {
    --sc-mark: #3d8a6f;
    --sc-ease: cubic-bezier(.16, 1, .3, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.site-credit--on-dark { --sc-mark: #79bca4; }
@media (prefers-color-scheme: dark) {
    .site-credit { --sc-mark: #79bca4; }
}

/* The mark's viewBox carries its own margin, so pull it in to sit on the text. */
.site-credit-mark {
    flex: none;
    width: 30px;
    height: 30px;
    margin: -6px -3px -6px -5px;
    overflow: visible;
    color: var(--sc-mark);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.site-credit-name {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 520ms var(--sc-ease);
}
a.site-credit:hover { text-decoration: none; }
a.site-credit:hover .site-credit-name { background-size: 100% 1px; }
a.site-credit:hover .site-credit-mark,
.is-signing .site-credit-mark { animation: sc-sign 1100ms var(--sc-ease) both; }

@keyframes sc-sign {
    0% { fill-opacity: 0; stroke-width: 14; stroke-dashoffset: 1; }
    62% { fill-opacity: 0; stroke-width: 14; stroke-dashoffset: 0; }
    100% { fill-opacity: 1; stroke-width: 0; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .site-credit-name { transition: none; }
    a.site-credit:hover .site-credit-mark,
    .is-signing .site-credit-mark { animation: none; }
}