.blog-socials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #000 !important;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url('../red-btc-target.png') 50% 56% / clamp(38px, 4vw, 58px) auto no-repeat,
        url('../wolf-matrix-hero.png') center center / contain no-repeat;
    background-blend-mode: screen, normal;
    filter: brightness(0.88) contrast(1.06);
    z-index: 1;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.16) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero .blog-hero-code {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .95;
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.hash-rain,
.page-hash-rain,
.hero .blog-hero-code {
    overflow: hidden;
    pointer-events: none;
    opacity: .95;
}

.hash-rain .hash-col,
.page-hash-rain .hash-col,
.hero .blog-hero-code .hash-col {
    position: absolute;
    top: -100%;
    width: 1.2em;
    font-family: "Courier New", monospace;
    line-height: 1.2;
    writing-mode: horizontal-tb;
    white-space: pre-line;
    text-align: center;
    color: #ff1a1a;
    opacity: .9;
    text-shadow: 0 0 10px rgba(255, 0, 0, .9), 0 0 22px rgba(255, 0, 0, .55);
    animation: wolfpackHashFall var(--speed) linear infinite !important;
    animation-delay: var(--delay) !important;
}

.hero-code-side,
.hero-code-stream {
    display: none !important;
}

@keyframes wolfpackHashFall {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: .95; }
    90% { opacity: .95; }
    100% { transform: translateY(calc(100vh + 100%)); opacity: 0; }
}

.hero > .hero-inner {
    position: relative;
    z-index: 3;
}

.blog-socials a {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 0, 0, .72);
    border-radius: 50%;
    background: rgba(230, 0, 0, .08);
    color: #ff1a1a;
    text-decoration: none;
    font-size: 0;
    line-height: 1;
    box-shadow: 0 0 12px rgba(255, 0, 0, .18);
}

.blog-socials a::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--social-icon) center / contain no-repeat;
    mask: var(--social-icon) center / contain no-repeat;
}

.blog-socials a[aria-label="Discord"] {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 6.3c3.2-1.3 6.4-1.3 9.6 0 1.7 2.5 2.7 5.5 2.5 8.5-1.5 1.1-3 1.9-4.6 2.3l-1.1-1.4c.7-.2 1.4-.6 2-1.1-2.6 1.2-5.8 1.2-8.4 0 .6.5 1.3.9 2 1.1l-1.1 1.4c-1.6-.4-3.1-1.2-4.6-2.3-.2-3 .8-6 2.5-8.5zm2 7.5c.8 0 1.4-.8 1.4-1.8s-.6-1.8-1.4-1.8-1.4.8-1.4 1.8.6 1.8 1.4 1.8zm5.6 0c.8 0 1.4-.8 1.4-1.8s-.6-1.8-1.4-1.8-1.4.8-1.4 1.8.6 1.8 1.4 1.8z'/%3E%3C/svg%3E");
}

.blog-socials a[aria-label="X"] {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h4.8l4.1 5.5L17.7 3H20l-6 7.4L20.5 21h-4.8l-4.6-6.1L5.8 21H3.5l6.5-8L4 3zm3.6 2L16.7 19h1.8L9.4 5H7.6z'/%3E%3C/svg%3E");
}

.blog-socials a[aria-label="Instagram"] {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.5 6a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5z'/%3E%3C/svg%3E");
}

.blog-socials a[aria-label="TikTok"] {
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h3c.3 2.2 1.6 3.7 4 4v3c-1.5 0-2.9-.5-4-1.3v6.8A5.5 5.5 0 1 1 11.5 10c.5 0 1 .1 1.5.2v3.1a2.5 2.5 0 1 0 1 2V3z'/%3E%3C/svg%3E");
}

.blog-socials a:hover {
    color: #fff;
    border-color: #ff1a1a;
    box-shadow: 0 0 18px rgba(255, 0, 0, .38);
    text-decoration: none;
}

.blog-socials-header {
    margin-left: 6px;
}

.blog-socials-footer {
    margin: 0 auto 16px;
}

.blog-sponsor {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto 42px;
    border: 1px solid rgba(255, 0, 0, .48);
    border-radius: 8px;
    background: #000;
    box-shadow: 0 0 22px rgba(230, 0, 0, .14);
}

.blog-sponsor a {
    min-height: 132px;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    color: #fff;
    text-decoration: none;
}

.blog-sponsor img {
    width: 150px;
    max-height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(255, 0, 0, .22));
}

.blog-sponsor span {
    color: #e8e8e8;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.22rem);
}

.blog-sponsor strong {
    color: #ff1a1a;
}

@media (max-width: 720px) {
    .blog-socials-header {
        width: 100%;
        margin-left: 0;
    }

    .blog-sponsor a {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hash-rain,
    .page-hash-rain,
    .hero .blog-hero-code {
        display: none !important;
    }
}
