:root {
    --ink: #0A0A0A;
    --paper: #FFFFFF;
    --line: rgba(10, 10, 10, 0.14);
}

.preview-page {
    width: 100%;
    padding: 70px 20px 40px;
    text-align: center;
}

.preview-page p {
    color: #B9B9B9;
    font-size: 12px;
    letter-spacing: .03em;
    margin-bottom: 220px;
    text-transform: uppercase;
}

/* ================= Drop-in footer credit ================= */
.yb-credit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.yb-credit::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--ink);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
    z-index: -1;
}

.yb-credit:not([data-step="rest"])::before {
    transform: translate(-50%, -50%) scale(34);
}

.yb-credit:not([data-step="rest"]) {
    border-color: var(--ink);
}

/* fixed stage — nothing here ever changes the pill's outer size */
.yb-stage {
    position: relative;
    width: 72px;
    height: 18px;
    overflow: hidden;
}

.yb-frame {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity .28s ease;
    color: var(--ink);
}

.yb-credit:not([data-step="rest"]) .yb-frame {
    color: var(--paper);
}

.yb-credit[data-step="rest"] .yb-rest {
    opacity: 1;
}

.yb-credit[data-step="launch"] .yb-launch {
    opacity: 1;
}

.yb-credit[data-step="line1"] .yb-line1 {
    opacity: 1;
}

.yb-credit[data-step="line2"] .yb-line2 {
    opacity: 1;
}

.yb-credit[data-step="line3"] .yb-line3 {
    opacity: 1;
}

/* resting state: "By" + full logo (icon + wordmark) */
.yb-rest span {
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.yb-rest img {
    height: 13px;
    width: auto;
    flex-shrink: 0;
}

/* launch: the real icon glyph, travels left -> right and exits, trail behind it. Plays once per hover only. */
.yb-launch {
    justify-content: flex-start;
}

.yb-fly-group {
    position: relative;
    display: flex;
    align-items: center;
    transform: translateX(-10px);
}

.yb-fly-group.go {
    animation: ybFly .55s cubic-bezier(.5, 0, .35, 1) forwards;
}

@keyframes ybFly {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(88px);
    }
}

.yb-fly-group img.yb-tri {
    height: 17px;
    width: auto;
    flex-shrink: 0;
    transform: rotate(90deg);
}

.yb-trail {
    display: flex;
    align-items: center;
    margin-right: -2px;
}

.yb-trail svg {
    width: 8px;
    height: 14px;
    opacity: 0;
}

.yb-fly-group.go .yb-trail svg:nth-child(1) {
    animation: ybTrail .5s ease-out forwards;
    animation-delay: .03s;
}

.yb-fly-group.go .yb-trail svg:nth-child(2) {
    animation: ybTrail .5s ease-out forwards;
    animation-delay: .1s;
}

@keyframes ybTrail {
    0% {
        opacity: 0;
    }

    15% {
        opacity: .9;
    }

    60% {
        opacity: .35;
    }

    100% {
        opacity: 0;
    }
}

.yb-line1 span {
    font-size: 10.5px;
    letter-spacing: .03em;
    white-space: nowrap;
}

.yb-line2 img {
    height: 15px;
    width: auto;
}

/* url marquee: scrolls within the fixed stage, never grows it */
.yb-line3 {
    justify-content: flex-start;
}

.yb-marquee-text {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    transform: translateX(0);
}

.yb-marquee-text.scroll {
    animation: ybMarquee 2.9s linear forwards;
}

@keyframes ybMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-270px);
    }
}

/* ================= end drop-in ================= */