/**
 * logo-bounce.css
 * Wordmark bounce animation. Used standalone (nav, footer) and in the loader.
 * Self-contained — load this anywhere .logo-bounce appears, no loader CSS needed.
 */

.logo-bounce {
    --logo-bounce-size: 168px;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.logo-bounce-letter {
    display: inline-block;
    font-size: var(--logo-bounce-size);
    line-height: 1;
}

/* Size set by JS (scales with --logo-bounce-size); CSS owns shape/colour. */
.logo-bounce-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--logo-bounce-size) / 2);
    aspect-ratio: 1;
    border-radius: 0;
    background: var(--primary, #252525);
    opacity: 0;
    transform-origin: 50% 100%;
}

/* Loader-context responsive sizing. Standalone instances set their own. */
.site-loader .logo-bounce {
    --logo-bounce-size: clamp(48px, 14vw, 168px);
}