/* StoneLink mark + wordmark: hover split / tremble / reassemble (mark only) */

.sl-brand {
    --sl-brand-mark-size: 26px;
    --sl-brand-fly: calc(var(--sl-brand-mark-size) * 0.22);
    --sl-brand-word-shift: 7px;
    --sl-brand-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
    z-index: 2;
}

.sl-brand::after {
    content: '';
    position: absolute;
    inset: -16px -20px;
    z-index: -1;
}

.sl-brand-mark,
.sl-brand-word,
.sl-brand-piece,
.sl-brand-glow,
.sl-brand-glow-soft {
    pointer-events: none;
}

.sl-brand-mark {
    position: relative;
    flex-shrink: 0;
    width: var(--sl-brand-mark-size);
    height: var(--sl-brand-mark-size);
    display: block;
}

.sl-brand-glow,
.sl-brand-glow-soft {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    z-index: 0;
}

.sl-brand-glow {
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 42%, transparent 70%);
    filter: blur(8px);
}

.sl-brand-glow-soft {
    inset: -62%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 48%, transparent 74%);
    filter: blur(13px);
}

.sl-brand-piece {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    transition: transform 0.65s var(--sl-brand-ease);
}

.sl-brand-piece img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.sl-brand-word {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
    transform: translateX(0);
    transition: transform 0.65s var(--sl-brand-ease);
}

.sl-brand--nav {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.sl-brand--hero {
    --sl-brand-mark-size: 116px;
    --sl-brand-word-shift: 10px;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    font-size: clamp(26px, 4vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.sl-brand--hero::after {
    inset: -40px -52px;
}

.sl-brand--hero .sl-brand-word {
    line-height: 1.1;
}

.sl-brand--hero .sl-brand-glow {
    inset: -30%;
    filter: blur(14px);
}

.sl-brand--hero .sl-brand-glow-soft {
    inset: -48%;
    filter: blur(22px);
}

body.sl-theme-light .sl-brand-mark {
    filter: invert(1);
}

@keyframes sl-brand-shake-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(0.35px, -0.4px) rotate(-0.4deg); }
    50% { transform: translate(-0.35px, 0.25px) rotate(0.3deg); }
    75% { transform: translate(0.2px, 0.35px) rotate(-0.25deg); }
}

@keyframes sl-brand-shake-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-0.4px, 0.2px) rotate(0.35deg); }
    55% { transform: translate(0.3px, -0.35px) rotate(-0.3deg); }
    80% { transform: translate(-0.2px, 0.3px) rotate(0.2deg); }
}

@keyframes sl-brand-shake-c {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(0.25px, 0.35px) rotate(0.3deg); }
    60% { transform: translate(-0.3px, -0.25px) rotate(-0.35deg); }
}

@keyframes sl-brand-glow-in {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }
    42% {
        opacity: 0.62;
        transform: scale(1.08);
    }
    100% {
        opacity: 0;
        transform: scale(1.02);
    }
}

@keyframes sl-brand-glow-soft-in {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    48% {
        opacity: 0.44;
        transform: scale(1.12);
    }
    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}

@media (hover: hover) and (pointer: fine) {
    .sl-brand:hover .sl-brand-piece,
    .sl-brand.is-split .sl-brand-piece,
    a.sl-brand:focus-visible .sl-brand-piece {
        will-change: transform;
    }

    .sl-brand:hover .sl-brand-word,
    .sl-brand.is-split .sl-brand-word,
    a.sl-brand:focus-visible .sl-brand-word {
        transform: translateX(var(--sl-brand-word-shift));
    }

    .sl-brand:hover .sl-brand-piece--top,
    .sl-brand.is-split .sl-brand-piece--top,
    a.sl-brand:focus-visible .sl-brand-piece--top {
        transform: translate3d(0, calc(var(--sl-brand-fly) * -1), 0) rotate(-2deg);
    }

    .sl-brand:hover .sl-brand-piece--left,
    .sl-brand.is-split .sl-brand-piece--left,
    a.sl-brand:focus-visible .sl-brand-piece--left {
        transform: translate3d(calc(var(--sl-brand-fly) * -0.95), calc(var(--sl-brand-fly) * 0.62), 0) rotate(-3deg);
    }

    .sl-brand:hover .sl-brand-piece--right,
    .sl-brand.is-split .sl-brand-piece--right,
    a.sl-brand:focus-visible .sl-brand-piece--right {
        transform: translate3d(calc(var(--sl-brand-fly) * 0.95), calc(var(--sl-brand-fly) * 0.62), 0) rotate(3deg);
    }

    .sl-brand:hover .sl-brand-piece--top img,
    .sl-brand.is-split .sl-brand-piece--top img,
    a.sl-brand:focus-visible .sl-brand-piece--top img {
        animation: sl-brand-shake-a 0.22s ease-in-out infinite;
    }

    .sl-brand:hover .sl-brand-piece--left img,
    .sl-brand.is-split .sl-brand-piece--left img,
    a.sl-brand:focus-visible .sl-brand-piece--left img {
        animation: sl-brand-shake-b 0.2s ease-in-out infinite;
    }

    .sl-brand:hover .sl-brand-piece--right img,
    .sl-brand.is-split .sl-brand-piece--right img,
    a.sl-brand:focus-visible .sl-brand-piece--right img {
        animation: sl-brand-shake-c 0.24s ease-in-out infinite;
    }

    .sl-brand.is-assembling .sl-brand-glow {
        animation: sl-brand-glow-in 0.95s ease-out;
    }

    .sl-brand.is-assembling .sl-brand-glow-soft {
        animation: sl-brand-glow-soft-in 1.05s ease-out;
    }
}

@media (max-width: 768px) {
    .sl-brand--hero {
        --sl-brand-mark-size: 96px;
    }
}

@media (max-width: 420px) {
    .sl-brand--hero {
        --sl-brand-mark-size: 100px;
        font-size: 26px;
    }

    .sl-brand--hero::after {
        inset: -28px -36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-brand,
    .sl-brand-piece,
    .sl-brand-piece img,
    .sl-brand-word,
    .sl-brand-glow,
    .sl-brand-glow-soft {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}