CSS Footer Credit

.footer-credit{
    grid-column:1;

    grid-row:2;

    display:flex;

    align-items:center;

    gap:4px;

    white-space:nowrap;
}

.footer-credit-logo-link{
    display:inline-flex;

    align-items:center;

    position:relative;

    text-decoration:none;
}

.dn-logo-wrap{
    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 10px;

    isolation:isolate;

    overflow:visible;
}

.dn-logo-wrap::before{
    content:"";

    position:absolute;

    left:10%;
    right:10%;
    top:50%;

    height:54%;

    background:
        radial-gradient(ellipse at center, rgba(255,255,255,0.34), rgba(255,214,90,0.18) 38%, transparent 72%);

    opacity:0.72;

    filter:blur(12px);

    transform:translateY(-42%) scaleX(0.9);

    animation:dnLogoAura 3.8s ease-in-out infinite;

    z-index:0;
}

.dn-logo-wrap::after{
    content:"";

    position:absolute;

    top:28px;
    bottom:2px;
    left:-34%;

    width:34%;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.18) 34%,
            rgba(255,255,255,0.82) 49%,
            rgba(255,229,128,0.32) 58%,
            transparent 100%
        );

    filter:blur(0.4px);

    transform:skewX(-20deg);

    mix-blend-mode:screen;

    animation:dnLogoReflection 3.4s ease-in-out infinite;

    z-index:3;

    pointer-events:none;
}

.footer-credit-logo{
    width:168px;
    top: 12px;
    height:auto;

    display:block;

    object-fit:contain;

    position:relative;

    z-index:2;
}

.dn-sparkle{
    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,0.95),
        0 0 16px rgba(255,220,90,0.72),
        0 0 24px rgba(255,255,255,0.38);

    opacity:0;

    z-index:4;

    animation:dnStarDrift 4.8s ease-in-out infinite;
}

.dn-sparkle::after{
    content:"";

    position:absolute;

    inset:-6px;

    background:
        linear-gradient(90deg, transparent 42%, rgba(255,255,255,0.9) 50%, transparent 58%),
        linear-gradient(0deg, transparent 42%, rgba(255,255,255,0.9) 50%, transparent 58%);

    transform:rotate(45deg) scale(0.9);
}

.dn-sparkle-1{
    top:8px;

    left:18px;

    --star-x1:12px;
    --star-y1:-12px;
    --star-x2:38px;
    --star-y2:3px;
    --star-x3:14px;
    --star-y3:18px;

    animation-delay:0s;
}

.dn-sparkle-2{
    top:10px;

    right:18px;

    width:7px;

    height:7px;

    --star-x1:-18px;
    --star-y1:-10px;
    --star-x2:-42px;
    --star-y2:8px;
    --star-x3:-12px;
    --star-y3:20px;

    animation-delay:0.55s;

    animation-duration:5.3s;
}

.dn-sparkle-3{
    bottom:8px;

    left:32px;

    width:6px;

    height:6px;

    --star-x1:18px;
    --star-y1:10px;
    --star-x2:52px;
    --star-y2:-7px;
    --star-x3:24px;
    --star-y3:-24px;

    animation-delay:1.1s;

    animation-duration:4.15s;
}

.dn-sparkle-4{
    right:30px;

    bottom:8px;

    --star-x1:-16px;
    --star-y1:12px;
    --star-x2:-50px;
    --star-y2:-6px;
    --star-x3:-20px;
    --star-y3:-24px;

    animation-delay:1.65s;

    animation-duration:4.75s;
}

.dn-sparkle-5{
    top:50%;

    left:4px;

    width:5px;

    height:5px;

    --star-x1:-6px;
    --star-y1:-24px;
    --star-x2:28px;
    --star-y2:-36px;
    --star-x3:54px;
    --star-y3:-6px;

    animation-delay:2.05s;

    animation-duration:5.6s;
}

.dn-sparkle-6{
    top:44%;

    right:4px;

    width:5px;

    height:5px;

    --star-x1:6px;
    --star-y1:24px;
    --star-x2:-30px;
    --star-y2:36px;
    --star-x3:-58px;
    --star-y3:4px;

    animation-delay:2.4s;

    animation-duration:4.35s;
}

@keyframes dnStarDrift{
    0%{
        opacity:0;
        transform:translate(0, 0) rotate(0deg) scale(0.35);
    }

    18%{
        opacity:0.95;
        transform:translate(var(--star-x1), var(--star-y1)) rotate(70deg) scale(0.95);
    }

    42%{
        opacity:0.6;
        transform:translate(var(--star-x2), var(--star-y2)) rotate(185deg) scale(0.68);
    }

    68%{
        opacity:1;
        transform:translate(var(--star-x3), var(--star-y3)) rotate(285deg) scale(1.05);
    }

    100%{
        opacity:0;
        transform:translate(-6px, 0) rotate(360deg) scale(0.3);
    }
}

@keyframes dnLogoAura{
    0%,
    100%{
        transform:translateY(-42%) scaleX(0.82);
        opacity:0.38;
    }

    50%{
        transform:translateY(-42%) scaleX(1.12);
        opacity:0.82;
    }
}

@keyframes dnLogoReflection{
    0%,
    16%{
        left:-34%;
        opacity:0;
    }

    34%{
        opacity:0.95;
    }

    56%{
        left:108%;
        opacity:0;
    }

    100%{
        left:108%;
        opacity:0;
    }
}