/* --------------------------------------------------
   Progressive-enhancement fallback
-------------------------------------------------- */

.home-fallback {
    position: fixed;
    inset: 0;
    z-index: 2;

    display: grid;
    place-content: center;
    gap: 28px;

    padding: clamp(28px, 7vw, 80px);

    background: var(--page-background);
    color: var(--page-text);

    text-align: center;
}

.home-fallback header {
    max-width: 720px;
}

.home-fallback h1 {
    margin: 0;
    color: var(--heading-color);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 0.9;
}

.home-fallback p {
    max-width: 650px;
    margin: 20px auto 0;
    color: var(--muted-text);
    font-family: "Raleway", sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    line-height: 1.65;
}

.home-fallback-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
}

.home-fallback-navigation a {
    color: var(--link-color);
    font-family: "Courier New", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.home-fallback-navigation a:hover,
.home-fallback-navigation a:focus-visible {
    color: var(--hover-color);
}

.home-fallback-navigation a:focus-visible {
    outline: 1px solid var(--hover-color);
    outline-offset: 5px;
}

/* The canvas becomes the visual interface only after it has drawn successfully. */
.home-canvas-ready .home-fallback:not(:focus-within) {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

.home-canvas-ready .home-fallback:focus-within {
    inset: auto 50% max(68px, calc(env(safe-area-inset-bottom) + 58px));

    width: min(90vw, 720px);
    padding: 18px 22px;

    border: 1px solid var(--control-border);
    background: var(--control-background);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: translateX(-50%);
}

.home-canvas-ready .home-fallback:focus-within header {
    display: none;
}

html,
body {
    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
    overscroll-behavior: none;

}

body {
    position: fixed;
    inset: 0;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    font-family: monospace;

    user-select: none;
    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------
   Main canvas
-------------------------------------------------- */

#canvas {
    position: fixed;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    background: transparent;

    touch-action: none;

    transform-origin:
        var(--black-hole-x, 50%)
        var(--black-hole-y, 50%);

    transition:
        opacity 900ms ease,
        filter 900ms ease,
        transform 1100ms cubic-bezier(.7, 0, .84, 0);
}

/*
   Do not invert the canvas with CSS.

   ui-overlay.js and dot-grid.js should select the correct
   drawing color according to the active theme.
*/


/* --------------------------------------------------
   Blur overlay
-------------------------------------------------- */

#blur-overlay {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 10;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    background: var(--blur-background);

    opacity: 1;

    animation:
        blurFadeOut
        0.2s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    animation-delay: 0.05s;

    pointer-events: none;

    will-change:
        opacity,
        backdrop-filter;
}

@keyframes blurFadeOut {
    from {
        opacity: 1;

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    to {
        opacity: 0;

        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}


/* --------------------------------------------------
   Copyright
-------------------------------------------------- */

.homepage-copyright {
    position: fixed;

    left: 50%;
    bottom:
        max(
            16px,
            env(safe-area-inset-bottom)
        );

    z-index: 9999;

    margin: 0;

    color: var(--control-text);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;

    transform: translateX(-50%);

    pointer-events: none;

    transition:
        opacity 650ms ease;
}


/* --------------------------------------------------
   Portrait and contact
-------------------------------------------------- */

.profile-controls {
    --profile-size:
        clamp(58px, 7vw, 72px);

    --profile-button-size:
        clamp(32px, 3vw, 34px);

    --profile-inset:
        clamp(14px, 2vw, 20px);

    position: fixed;

    top:
        max(
            var(--profile-inset),
            env(safe-area-inset-top)
        );

    left:
        max(
            var(--profile-inset),
            env(safe-area-inset-left)
        );

    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1vw, 9px);

    transition:
        opacity 650ms ease,
        filter 800ms ease,
        transform 900ms cubic-bezier(.7, 0, .84, 0);
}

.profile-photo {
    --profile-ring-color:
        var(--page-foreground);

    position: relative;

    width: var(--profile-size);
    aspect-ratio: 1;

    margin: 0;
    padding: 0;

    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    color: inherit;
    cursor: pointer;

    transition:
        background-color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 350ms cubic-bezier(.22, 1, .36, 1);
}

.profile-photo,
.profile-link {
    border:
        1px solid
        var(--control-border);

    border-radius: 50%;

    background:
        var(--control-background);
}

.profile-photo img {
    position: absolute;

    top: -108%;
    left: -7%;

    display: block;

    width: 155%;
    max-width: none;
    height: auto;

    filter:
        grayscale(0.85)
        saturate(0.55)
        contrast(0.96);

    transition:
        filter 350ms ease,
        transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.profile-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    border-radius: inherit;

    background:
        conic-gradient(
            from -35deg,
            var(--profile-ring-color) 0 73%,
            transparent 73% 77%,
            var(--hover-color) 77% 88%,
            var(--profile-ring-color) 88% 100%
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 3px),
            #000 calc(100% - 2px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 3px),
            #000 calc(100% - 2px)
        );

    pointer-events: none;

    transition:
        filter 300ms ease,
        transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.profile-photo:hover,
.profile-photo:focus-visible {
    --profile-ring-color:
        var(--page-background);

    border-color:
        var(--page-foreground);

    background:
        var(--page-foreground);

    box-shadow:
        0 0 0 1px var(--page-foreground),
        0 0 18px rgba(127, 127, 127, 0.22);

    transform:
        scale(1.055);
}

.profile-photo:hover img,
.profile-photo:focus-visible img {
    filter:
        grayscale(0.25)
        saturate(0.8)
        contrast(1.04);

    transform:
        scale(1.025);
}

.profile-photo:hover::after,
.profile-photo:focus-visible::after {
    filter:
        drop-shadow(
            0 0 2px
            var(--page-foreground)
        );

    transform:
        rotate(24deg);
}

.profile-photo:focus-visible {
    outline:
        1px solid
        var(--page-foreground);

    outline-offset: 5px;
}

.profile-links {
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 1vw, 10px);
}

.profile-link {
    position: relative;

    display: grid;
    place-items: center;

    width: var(--profile-button-size);
    aspect-ratio: 1;

    color:
        var(--control-text);

    text-decoration: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        color 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.profile-link::before {
    content: "";

    position: absolute;
    inset: -4px;
}

.profile-link svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-link .arxiv-logo {
    width: 16px;
    height: 16px;

    background-color: currentColor;

    -webkit-mask: url("/assets/images/arxiv-logo.svg") center / contain no-repeat;
    mask: url("/assets/images/arxiv-logo.svg") center / contain no-repeat;
}

.profile-link:hover {
    transform: translateY(-1px);

    border-color:
        var(--page-foreground);

    background:
        var(--page-foreground);

    color:
        var(--page-background);
}

.profile-link:focus-visible {
    outline:
        1px solid
        var(--page-foreground);

    outline-offset: 4px;
}


/* --------------------------------------------------
   Theme toggle
-------------------------------------------------- */

#theme-toggle {
    position: fixed;

    top:
        max(
            20px,
            env(safe-area-inset-top)
        );

    right:
        max(
            20px,
            env(safe-area-inset-right)
        );

    z-index: 9999;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;

    border:
        1px solid
        var(--control-border);

    border-radius: 50%;

    background:
        var(--control-background);

    color:
        var(--control-text);

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        color 200ms ease,
        background-color 200ms ease,
        border-color 200ms ease,
        opacity 650ms ease,
        filter 800ms ease,
        transform 900ms cubic-bezier(.7, 0, .84, 0);
}

#theme-toggle:hover {
    color:
        var(--page-background);

    border-color:
        var(--page-foreground);

    background:
        var(--page-foreground);
}

#theme-toggle:focus-visible {
    outline:
        1px solid
        var(--page-foreground);

    outline-offset: 4px;
}


/* --------------------------------------------------
   Black-hole portrait easter egg
-------------------------------------------------- */

html.black-hole-active #canvas {
    opacity: 0;

    filter:
        blur(12px)
        contrast(1.5);

    transform:
        scale(0.72)
        rotate(-2deg);
}

html.black-hole-active .profile-controls {
    opacity: 0;

    filter:
        blur(9px);

    transform:
        scale(0.55)
        rotate(-10deg);
}

html.black-hole-active #theme-toggle {
    opacity: 0;

    filter:
        blur(7px);

    transform:
        scale(0.75);
}

html.black-hole-active .homepage-copyright {
    opacity: 0;
}

.black-hole-easter-egg {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: grid;
    place-items: center;

    padding:
        max(28px, env(safe-area-inset-top))
        max(24px, env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom))
        max(24px, env(safe-area-inset-left));

    background: #000000;
    color: #ffffff;

    visibility: hidden;
    pointer-events: none;

    clip-path:
        circle(
            0
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    -webkit-clip-path:
        circle(
            0
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    transition:
        clip-path 1250ms cubic-bezier(.76, 0, .24, 1),
        -webkit-clip-path 1250ms cubic-bezier(.76, 0, .24, 1),
        visibility 0s linear 1250ms;
}

.black-hole-easter-egg.is-active {
    visibility: visible;
    pointer-events: auto;

    clip-path:
        circle(
            160vmax
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    -webkit-clip-path:
        circle(
            160vmax
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    transition-delay: 0s;
}

.black-hole-easter-egg.is-active.is-closing {
    clip-path:
        circle(
            0
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    -webkit-clip-path:
        circle(
            0
            at
            var(--black-hole-x, 50%)
            var(--black-hole-y, 50%)
        );

    transition-duration: 950ms;
}

.black-hole-message {
    width: min(100%, 520px);
    text-align: center;
}

.black-hole-copy {
    display: grid;
    place-items: center;

    width: 100%;
}

.black-hole-announcement,
.black-hole-details {
    grid-area: 1 / 1;

    width: 100%;

    opacity: 0;

    transform:
        translateY(10px);
}

.black-hole-announcement {
    transition:
        opacity 450ms ease,
        transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.black-hole-details {
    transition:
        opacity 900ms ease,
        transform 1100ms cubic-bezier(.22, 1, .36, 1);
}

.black-hole-easter-egg.is-announcement-visible
.black-hole-announcement,
.black-hole-easter-egg.is-details-visible
.black-hole-details {
    opacity: 1;

    transform:
        translateY(0);
}

.hawking-quantum {
    display: block;

    width: 4px;
    height: 4px;

    margin: 0 auto 42px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 7px 2px rgba(255, 255, 255, 0.9),
        0 0 24px 7px rgba(160, 215, 255, 0.34);

    opacity: 0;

    transform:
        translateY(6px)
        scale(0.7);

    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(.22, 1, .36, 1);
}

.black-hole-easter-egg.is-quantum-visible
.hawking-quantum {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    animation:
        hawkingQuantumGlow
        3.6s
        ease-in-out
        infinite;
}

.black-hole-announcement {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.black-hole-message h2 {
    max-width: 500px;

    margin: 0 auto;

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(1.15rem, 3vw, 1.55rem);

    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

.hawking-equation {
    margin: 24px 0 30px;

    color: rgba(255, 255, 255, 0.62);

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(0.84rem, 2vw, 1rem);

    letter-spacing: 0.08em;
}

.hawking-equation mjx-container {
    margin: 0 !important;
    color: inherit;
}

.black-hole-return {
    min-height: 42px;
    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;

    background: transparent;
    color: rgba(255, 255, 255, 0.78);

    cursor: pointer;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.black-hole-return:hover,
.black-hole-return:focus-visible {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;

    transform:
        translateY(-1px);
}

.black-hole-return:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 5px;
}

.black-hole-hint {
    margin: 13px 0 0;

    color: rgba(255, 255, 255, 0.32);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

@keyframes hawkingQuantumGlow {
    0%,
    100% {
        box-shadow:
            0 0 6px 1px rgba(255, 255, 255, 0.75),
            0 0 19px 5px rgba(160, 215, 255, 0.25);
    }

    50% {
        box-shadow:
            0 0 9px 3px rgba(255, 255, 255, 1),
            0 0 29px 9px rgba(160, 215, 255, 0.4);
    }
}


/* --------------------------------------------------
   Small screens
-------------------------------------------------- */

@media (max-width: 600px) {
    .profile-links {
        position: fixed;

        bottom:
            max(
                42px,
                calc(env(safe-area-inset-bottom) + 28px)
            );

        left: 50%;

        flex-direction: row;
        gap: 9px;

        transform: translateX(-50%);
    }

    #theme-toggle {
        top:
            max(
                14px,
                env(safe-area-inset-top)
            );

        right:
            max(
                14px,
                env(safe-area-inset-right)
            );

        width: 38px;
        height: 38px;
        min-height: 38px;
    }
}


/* --------------------------------------------------
   Very short screens / phone landscape
-------------------------------------------------- */

@media (max-height: 500px) {
    .profile-controls {
        --profile-size: 52px;
        --profile-button-size: 30px;
        --profile-inset: 12px;

        gap: 7px;
    }

    #theme-toggle {
        top:
            max(
                12px,
                env(safe-area-inset-top)
            );

        right:
            max(
                12px,
                env(safe-area-inset-right)
            );

        width: 36px;
        height: 36px;
        min-height: 36px;
    }
}


/* --------------------------------------------------
   Accessibility: reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #blur-overlay {
        animation-delay: 0ms;
    }

    #canvas,
    .profile-controls,
    #theme-toggle,
    .homepage-copyright,
    .black-hole-easter-egg,
    .black-hole-announcement,
    .black-hole-details {
        transition-duration: 1ms;
    }

    .hawking-quantum {
        animation: none;
    }

    .black-hole-easter-egg.is-quantum-visible
    .hawking-quantum {
        opacity: 1;

        transform: none;
    }
}