/* Animated "begodesign." footer signature — shared by every page.
   Markup: .bgd-sig > .bgd-sig__wordmark > 10x .bgd-sig__letter + .bgd-sig__dot
   Behavior lives in /assets/js/signature.js (IntersectionObserver, runs once).
   Letters are visible by default; JS hides them via .bgd-armed only when it
   can also animate them, so content never disappears without JavaScript. */

.bgd-sig {
    display: inline-block;
    line-height: 1;
}

.bgd-sig__wordmark {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: var(--bgd-size, 1em);
    line-height: 1;
    white-space: nowrap;
}

.bgd-sig__letter {
    display: inline-block;
    color: #E8E6E1;
    will-change: transform, opacity;
}

.bgd-sig__dot {
    display: inline-block;
    color: #E5484D;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.bgd-sig.bgd-armed .bgd-sig__letter,
.bgd-sig.bgd-armed .bgd-sig__dot {
    opacity: 0;
}

.bgd-sig.bgd-run .bgd-sig__letter {
    animation: bgd-letter-in .3s cubic-bezier(.2, .8, .2, 1) both;
}

.bgd-sig.bgd-run .bgd-sig__letter:nth-child(1) { animation-delay: 0s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(2) { animation-delay: .04s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(3) { animation-delay: .08s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(4) { animation-delay: .12s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(5) { animation-delay: .16s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(6) { animation-delay: .20s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(7) { animation-delay: .24s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(8) { animation-delay: .28s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(9) { animation-delay: .32s; }
.bgd-sig.bgd-run .bgd-sig__letter:nth-child(10) { animation-delay: .36s; }

.bgd-sig.bgd-run .bgd-sig__dot {
    animation: bgd-dot-pop .22s cubic-bezier(.34, 1.56, .64, 1) .6s forwards;
}

@keyframes bgd-letter-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bgd-dot-pop {
    from {
        transform: scale(1.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bgd-sig .bgd-sig__letter,
    .bgd-sig .bgd-sig__dot {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}