:root {
    --tby-pulse-bg: rgba(255, 255, 255, 0.992);
    --tby-pulse-ink: #050505;
}

/* Unique namespace: this loader never relies on the old #tby-loader markup. */
.tby-pulse-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
    transition:
        opacity 260ms cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 260ms;
}

.tby-pulse-loader.is-visible {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 150ms cubic-bezier(.22,.61,.36,1),
        visibility 0s;
}

.tby-pulse-loader.is-leaving {
    opacity: 0;
    visibility: visible;
}

.tby-pulse-loader__backdrop {
    position: absolute;
    inset: 0;
    background: var(--tby-pulse-bg);
}

.tby-pulse-loader__stage {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    contain: layout paint style;
}

.tby-pulse-loader__icon {
    --tby-pulse-logo: none;
    position: absolute;
    display: block;
    background-color: var(--tby-pulse-ink);
    -webkit-mask-image: var(--tby-pulse-logo);
    mask-image: var(--tby-pulse-logo);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

/* Small, faint icon behind the main pulse. */
.tby-pulse-loader__icon--ghost {
    width: 50px;
    height: 50px;
    opacity: .10;
    transform: scale(.86);
    animation: tby-pulse-ghost 1280ms cubic-bezier(.45,0,.2,1) infinite;
}

/* The old-style clean pulse: grow/fade in, shrink/fade out. */
.tby-pulse-loader__icon--main {
    width: 68px;
    height: 68px;
    opacity: .62;
    animation: tby-pulse-main 1280ms cubic-bezier(.45,0,.2,1) infinite;
}

@keyframes tby-pulse-main {
    0%, 100% {
        transform: scale(.78);
        opacity: .45;
    }
    48% {
        transform: scale(1.06);
        opacity: 1;
    }
    62% {
        transform: scale(1.02);
        opacity: .96;
    }
}

@keyframes tby-pulse-ghost {
    0%, 100% {
        transform: scale(.82);
        opacity: .10;
    }
    50% {
        transform: scale(1.16);
        opacity: .035;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tby-pulse-loader__icon--ghost,
    .tby-pulse-loader__icon--main {
        animation: none !important;
    }

    .tby-pulse-loader__icon--ghost {
        opacity: .08;
        transform: scale(.88);
    }

    .tby-pulse-loader__icon--main {
        opacity: 1;
        transform: scale(1);
    }
}