/* ==========================================================================
   AppleGlass — Liquid Glass Theme for LinkStack (dark-only)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ---- Design tokens — dark only ---- */
:root {
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 24px;
    --radius-sm: 18px;
    --radius-pill: 999px;
    --transition-smooth: cubic-bezier(.34, 1.56, .64, 1);
    --transition-apple: cubic-bezier(.32, .72, 0, 1);

    color-scheme: dark;
    --bg-1: #030408;
    --bg-2: #0a0c14;
    --bg-3: #11131d;

    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-strong: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-strong: rgba(255, 255, 255, 0.35);
    --glass-stroke: rgba(255, 255, 255, 0.25);
    --glass-shadow: rgba(0, 0, 0, 0.50);
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    --c-light: #fff;
    --c-dark: #000;
    --glass-10layer:
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
    --saturation: 150%;
    --text: #f3f4f6;
    --text-soft: #a0a6b8;
    --accent: #0a84ff85;
    --accent-glow: rgba(10, 132, 255, 0.40);

    /* ------------------------------------------------------------------
       LinkStack standard variables -> AppleGlass design tokens
       ------------------------------------------------------------------ */
    --font-family: var(--font);
    --font-size: 17px;

    --background-color: #030408;

    --image-border-color: var(--glass-border-strong);
    --image-border-px: 2px;
    --image-width: 124px;
    --image-height: 124px;

    --title-color: var(--text);
    --description-color: var(--text-soft);

    --svg-color: var(--text);

    --menu-background-color: var(--glass-bg);
    --menu-text-color: var(--text);
    --menu-active-text-color: var(--accent);

    --button-background-color: var(--glass-bg);
    --button-text-color: var(--text);
    --button-text-hover-color: var(--text);

    --textarea-background-color: var(--glass-bg);
    --textarea-text-color: var(--text);
    --textarea-link-text-color: var(--accent);

    --footer-background-color: transparent;
    --footer-text-color: var(--text-soft);
    --footer-link-text-color: var(--accent);
}

::selection {
    background: var(--accent);
}
::-moz-selection {
    background: var(--accent);
}

/* ---- Particle background ---- */
.background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
}

/* ---- Base overrides ---- */
html {
    font-size: 100%;
    background: #030408 !important;
    background-color: #030408 !important;
    height: 100%;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    font-family: var(--font-family) !important;
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--text) !important;
    background: transparent !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Layout ---- */
.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(14px);
    animation: pageEnter 1.2s var(--transition-apple) 0.5s forwards;
}

.column, .columns {
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 400px) { .container { width: 88%; padding: 0; } }
@media (min-width: 550px) { .container { width: 84%; } }

@keyframes pageEnter {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- Typography ---- */
h1 {
    margin: 16px 0 8px;
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: -0.03em;
    font-size: 34px;
    line-height: 1.2;
    color: var(--title-color);
}
@media (min-width: 550px) { h1 { font-size: 44px; } }

p { margin-top: 0; color: var(--description-color); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.description-parent * { margin-bottom: 1em; }
.description-parent {
    padding: 16px 22px;
    margin-bottom: 24px;
    color: var(--description-color);
    font-size: 16px;
    line-height: 1.55;
    background: color-mix(in srgb, var(--glass-bg-strong) 12%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--glass-10layer);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    transition: box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}
.description-parent:empty,
.description-parent:has(p:empty) { display: none; }

/* ---- Avatar ---- */
#avatar {
    width: var(--image-width);
    height: var(--image-height);
    border-radius: 50%;
    object-fit: cover;
    background: color-mix(in srgb, var(--glass-bg-strong) 12%, transparent);
    border: none;
    background-clip: padding-box;
    position: relative;
    box-shadow: var(--glass-10layer);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    transition: transform .4s var(--transition-smooth), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}
#avatar::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), #AF52DE, #FF375F, var(--accent));
    opacity: 0.5;
    z-index: -1;
    animation: ringRotate 4s linear infinite;
}
@keyframes ringRotate {
    to { transform: rotate(360deg); }
}
#avatar:hover {
    transform: scale(1.12) translateY(-2px);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, rgba(255,255,255,1) calc(var(--glass-reflex-light) * 15%), transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, rgba(255,255,255,1) calc(var(--glass-reflex-light) * 95%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, rgba(255,255,255,1) calc(var(--glass-reflex-light) * 85%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, rgba(255,255,255,1) calc(var(--glass-reflex-light) * 65%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 15%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 25%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 25%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 1px 5px 0px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 12%), transparent),
        0px 6px 16px 0px color-mix(in srgb, rgba(0,0,0,1) calc(var(--glass-reflex-dark) * 10%), transparent),
        0 0 20px var(--accent-glow);
}

/* ---- Social icons — lens glow ---- */
.social-icon-div {
    display: inline-flex;
    gap: 6px;
    margin: 16px 0 24px;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-pill);
    box-shadow:
        0 8px 30px var(--glass-shadow),
        0 0 0 1px var(--glass-border),
        inset 0 1px 0 var(--glass-stroke);
    backdrop-filter: blur(4px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-icon-div:hover {
    padding: 12px 20px;
    gap: 14px;
    transform: scale(1.04);
    box-shadow:
        0 8px 30px var(--glass-shadow),
        0 0 12px rgba(10, 132, 255, 0.04),
        0 0 0 1px var(--glass-border-strong),
        inset 0 1px 0 var(--glass-stroke);
    backdrop-filter: blur(12px) saturate(200%);
    -webkit-backdrop-filter: blur(12px) saturate(200%);
}
.social-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    opacity: 0.55;
    transform: scale(1);
    transition: transform .25s var(--transition-smooth), background .25s ease, box-shadow .3s ease, opacity .25s ease;
}
/* Lens glow — radial accent behind icon */
.social-link::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 244, 246, 0.3), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease, transform .3s var(--transition-smooth);
    z-index: -1;
    pointer-events: none;
}
.social-link:hover::after { opacity: 0.4; transform: scale(1.05); }
/* Inner reflection streak */
.social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 50%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 1;
    pointer-events: none;
}
.social-link:hover::before { opacity: 1; }
.social-link:hover {
    background: var(--glass-bg-strong);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.08);
}
.social-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Apple Dock magnification ---- */

.social-icon {
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 1;
    color: var(--text);
    transition: color .2s ease, filter .2s ease;
    -moz-osx-font-smoothing: grayscale;
}
.social-link:hover .social-icon { filter: brightness(1.3); }

/* ---- Brand colors on hover ---- */
.social-link:has(.fa-instagram):hover .social-icon { color: #E4405F; }
.social-link:has(.fa-instagram):hover::after {
    background: radial-gradient(circle, rgba(228, 64, 95, 0.4), transparent 70%);
}
.social-link:has(.fa-facebook-f):hover .social-icon { color: #1877F2; }
.social-link:has(.fa-facebook-f):hover::after {
    background: radial-gradient(circle, rgba(24, 119, 242, 0.4), transparent 70%);
}
.social-link:has(.fa-x-twitter):hover .social-icon { color: #fff; }
.social-link:has(.fa-x-twitter):hover::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
}
.social-link:has(.fa-twitter):hover .social-icon { color: #1DA1F2; }
.social-link:has(.fa-twitter):hover::after {
    background: radial-gradient(circle, rgba(29, 161, 242, 0.4), transparent 70%);
}
.social-link:has(.fa-github):hover .social-icon { color: #fff; }
.social-link:has(.fa-github):hover::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
}
.social-link:has(.fa-youtube):hover .social-icon { color: #FF0000; }
.social-link:has(.fa-youtube):hover::after {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.4), transparent 70%);
}
.social-link:has(.fa-tiktok):hover .social-icon { color: #fff; }
.social-link:has(.fa-tiktok):hover::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
}
.social-link:has(.fa-discord):hover .social-icon { color: #5865F2; }
.social-link:has(.fa-discord):hover::after {
    background: radial-gradient(circle, rgba(88, 101, 242, 0.4), transparent 70%);
}
.social-link:has(.fa-twitch):hover .social-icon { color: #9146FF; }
.social-link:has(.fa-twitch):hover::after {
    background: radial-gradient(circle, rgba(145, 70, 255, 0.4), transparent 70%);
}
.social-link:has(.fa-steam):hover .social-icon { color: var(--text); }
.social-link:has(.fa-steam):hover { background: rgba(30, 30, 35, 0.6); }
.social-link:has(.fa-steam):hover::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
}
.social-link:has(.fa-spotify):hover .social-icon { color: #1DB954; }
.social-link:has(.fa-spotify):hover::after {
    background: radial-gradient(circle, rgba(29, 185, 84, 0.4), transparent 70%);
}
.social-link:has(.fa-linkedin):hover .social-icon { color: #0A66C2; }
.social-link:has(.fa-linkedin):hover::after {
    background: radial-gradient(circle, rgba(10, 102, 194, 0.4), transparent 70%);
}
.social-link:has(.fa-reddit):hover .social-icon { color: #FF4500; }
.social-link:has(.fa-reddit):hover::after {
    background: radial-gradient(circle, rgba(255, 69, 0, 0.4), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
    .social-link,
    .social-link:hover { transform: none; }
    .social-icon { color: var(--text); }
}

/* ---- Misc ---- */
.spacing { padding: 0 10px; }

code {
    padding: .2rem .5rem;
    font-size: 90%;
    white-space: nowrap;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
}
pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }

button, .button { margin-bottom: 1rem; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, p, ol { margin-bottom: 2.5rem; }

.u-full-width { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right { float: right; }
.u-pull-left { float: left; }

hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid var(--glass-border);
}

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent; }
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--glass-border);
    border-radius: 30px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--glass-border-strong); }

/* ---- Credit footer ---- */
.credit-txt {
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: var(--footer-text-color);
    transition: color .2s ease;
}
.credit-txt:hover { color: var(--accent); }
.credit-icon { display: none; }
.credit-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}
.credit-txt-clr { color: var(--footer-text-color) !important; }

/* ---- Footer ---- */
.footer {
    color: var(--footer-text-color);
    font-size: 14px;
    margin-top: 24px;
    padding-top: 20px;
    text-align: center;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
    body { opacity: 1; }
    .container { opacity: 1; transform: none; }
    .button-entrance { opacity: 1; transform: none; }
    .fadein { opacity: 1; transform: none; }
}

/* ---- Fallback ---- */
@supports not (backdrop-filter: blur(1px)) and not (-webkit-backdrop-filter: blur(1px)) {
    .button, .description-parent, #avatar, .social-icon-div {
        background: var(--bg-3) !important;
    }
    #avatar { border-color: var(--glass-border-strong); }
}