/* FOOTER LAYOUT */
footer{
    position:fixed;
    z-index:20;
    bottom:0;
    width:100%;
    padding:18px 40px;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    color:white;
      font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-style: normal;
    background:linear-gradient(to top, rgba(0,0,0,.9), transparent);
    backdrop-filter: blur(12px);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,1) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* COLUMN */
.footer-block{
    width:40%;
}

/* DESCRIPTION ROW */
.footer-desc{
    position:relative;
    height:22px;
    opacity:.7;
    transition:opacity .25s ease;
    font-size:13px;
    letter-spacing:.08em;

    --glowColor: rgba(255,255,255,.9);
}

/* LINKS ROW */
.footer-links{
    margin-top:6px;
    display:flex;
    gap:18px;
}

.footer-links a{
    text-decoration:none;
    color:white;
    opacity:.7;
    transition:.2s;
    font-size:14px;
}

.footer-links a:hover{
    opacity:1;
    transform:translateY(-1px);
}
.social-links a{
    font-size:18px;
    opacity:.65;
    transition:.25s;
}

.social-links a:hover{
    opacity:1;
    transform:translateY(-2px) scale(1.08);
}

/* core glow */
.footer-desc.glow{
    animation:descPulse 2.6s ease-in-out infinite;

    filter:
        drop-shadow(0 0 6px var(--glowColor))
        drop-shadow(0 0 18px var(--glowColor))
        drop-shadow(0 0 34px var(--glowColor));
}
.footer-desc::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    opacity:0;
    pointer-events:none;
}

.footer-desc.glow::after{
    animation:lightSweep 3.5s ease-in-out infinite;
}

@keyframes lightSweep{
    0%{
        left:-120%;
        opacity:0;
    }
    25%{
        opacity:.35;
    }
    50%{
        left:120%;
        opacity:0;
    }
    100%{
        left:120%;
        opacity:0;
    }
}
/* subtle flicker randomness */
@keyframes descPulse{
    0%{
        filter:
            drop-shadow(0 0 4px var(--glowColor))
            drop-shadow(0 0 10px var(--glowColor));
    }

    48%{
        filter:
            drop-shadow(0 0 10px var(--glowColor))
            drop-shadow(0 0 28px var(--glowColor))
            drop-shadow(0 0 50px var(--glowColor));
    }

    50%{
        filter:
            drop-shadow(0 0 3px var(--glowColor))
            drop-shadow(0 0 8px var(--glowColor));
    }

    100%{
        filter:
            drop-shadow(0 0 4px var(--glowColor))
            drop-shadow(0 0 12px var(--glowColor));
    }
}
/* Top cinematic footer */
/* Top cinematic footer with subtle bottom fade (~10%) */
.top-footer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    padding:0 20px;
    box-sizing:border-box;
    background:linear-gradient(to bottom, rgba(0,0,0,.9), transparent);
    backdrop-filter: blur(12px);
    
    /* subtle fade only at bottom 10% */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

    z-index:25;
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* Mute button on far right */
.mute-btn{
    background:none;
    border:none;
    color:white;
    font-size:20px;
    cursor:pointer;
    opacity:.75;
    transition:opacity .25s, transform .2s;
    margin-right:5px; /* close to edge */
}

.mute-btn:hover{
    opacity:1;
    transform:scale(1.1);
}