/* ======= */
.copy-wrap{
position: relative;
}
.copy-toast{
position: absolute;
left: 50%;
bottom: -1em;
transform: translateX(-50%) translateY(4px);
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.copy-toast.is-visible{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Typewriter in fixed footer */
.footer-left{
display: flex;
align-items: center;
min-width: 220px;
flex: 1 1 240px;
}
.footer-type{
font-size: 16px;
line-height: 1;
opacity: 0.95;
display: flex;
justify-content: flex-start;
font-family: "courier", monospace;
color: var(--color-light);
}
.footer-type > .text{
width: 0;
max-width: none;
white-space: nowrap;
overflow: hidden;
animation: typingW 6s steps(var(--characters)) infinite;
}
.footer-type:after{
content: "\00A0\00A0\00A0 />";
animation: blink 1s infinite;
animation-timing-function: step-end;
}
@keyframes typingW{
75%,
100% { width: calc(var(--characters) * 1ch); }
}
@keyframes blink{
50% { opacity: 0; }
}
/* Mobile footer stacking */
@media (max-width: 700px){
.footer-inner{ justify-content: center; }
.footer-left{
width: 100%;
min-width: 0;
justify-content: center;
flex: 1 1 100%;
}
.footer-copy{
width: 100%;
text-align: center;
white-space: normal;
}
.footer-social{
width: 100%;
justify-content: center;
}
}
@media (max-width: 380px){
.footer-type{ font-size: 12px; }
}

/* ---------- In-section footer row ---------- */
.main{
margin-top:var(--gap-3);
padding-top:var(--gap-2);

border-top:1px dotted var(--color-medium);

display:flex;
align-items:center;
justify-content:flex-end;
gap:var(--gap-1);
flex-wrap:wrap;
}
.social{
display:flex;
gap: var(--gap-1);
}
.social a{
color: var(--color-light);
text-decoration:none;
padding: calc(var(--gap-1) * 0.6) calc(var(--gap-1) * 0.75);
border-radius: var(--radius);
border: 1px solid var(--color-medium);
background: var(--bg);
}
.social a:hover{
color: var(--color-light);
background: var(--color-medium);
}

/* ---------- Fixed Footer Bar ---------- */
.site-footer{
position: fixed;
bottom: clamp(8px, var(--gap-1), 16px);
left: 0;
width: 100%;
z-index: 900;
background: rgba(0,0,0,0.10);
backdrop-filter: blur(0.5px);
border-top: 1px solid var(--color-medium);
border-bottom: 1px solid var(--color-medium);
padding: calc(var(--gap-1) * 0.75) var(--gutter);
}
.footer-inner{
max-width: var(--max);
margin: 0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap: var(--gap-1);
flex-wrap:wrap;
}

.footer-social{
display:flex;
align-items:center;
gap:14px;
}

.footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-medium);
color: var(--color-light);
text-decoration:none;
background: var(--bg);
transition: background 200ms ease, opacity 200ms ease, border-color 200ms ease;
}
.footer-social a:hover{
background: var(--bg);
opacity: 0.9;
border-color: var(--color-light);
}
.footer-social i{
font-size: 16px;
line-height: 1;
}

@media (max-width: 640px){
.footer-inner{
justify-content:center;
text-align:center;
}
}