/* Shared visual treatment for every application page. */
:root {
    --effects-ink: #24120d;
    --effects-gold: #f5c873;
    --effects-orange: #e28738;
}

html {
    background: var(--effects-ink);
}

body {
    position: relative;
    isolation: isolate;
    background-color: var(--effects-ink);
    cursor: none;
}

body::before,
body::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    content: "";
}

body::before {
    z-index: 0 !important;
    background: 
        radial-gradient(circle at 50% 45%, rgba(245, 200, 115, .22), transparent 24%),
        radial-gradient(circle at 50% 50%, rgba(226, 135, 56, .16), transparent 48%),
        url("bg.png") center center / min(30vw, 360px) auto no-repeat !important;
    background-attachment: fixed;
    filter: saturate(.68) drop-shadow(0 0 16px rgba(245, 200, 115, .26)) !important;
    opacity: .28 !important;
    mix-blend-mode: screen !important;
}

.home-page::before {
    background: none !important;
    opacity: 0 !important;
    filter: none !important;
}

@media (max-width: 760px) {
    body::before {
        background-size: min(58vw, 500px) auto !important;
    }
}

body::after {
    z-index: 101;
    background: radial-gradient(ellipse at center, transparent 38%, rgba(12, 5, 3, .42) 100%);
    box-shadow: inset 0 0 140px rgba(10, 4, 2, .55);
}

body > * {
    position: relative;
    z-index: 1;
}

input,
textarea,
select,
button,
a,
[role="button"] {
    cursor: none;
}

.desktop-nav-link {
    display: inline-block;
}

@media (max-width: 760px) {
    .desktop-nav-link {
        display: none !important;
    }
}

.effects-cursor,
.effects-cursor-glow,
.effects-spark {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647;
}

.effects-cursor {
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
    border: 1px solid #fff4dc;
    border-radius: 50%;
    background: var(--effects-gold);
    box-shadow: 0 0 8px 2px var(--effects-gold), 0 0 18px 5px rgba(226, 135, 56, .8);
    transition: width .18s ease, height .18s ease, margin .18s ease, background .18s ease;
}

.effects-cursor.is-hovering {
    width: 15px;
    height: 15px;
    margin: -7px 0 0 -7px;
    background: #fff4dc;
}

.effects-cursor-glow {
    width: 170px;
    height: 170px;
    margin: -85px 0 0 -85px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 200, 115, .12) 0%, rgba(226, 135, 56, .05) 32%, transparent 70%);
    mix-blend-mode: screen;
    transition: opacity .25s ease;
}

.effects-spark {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff4dc;
    box-shadow: 0 0 8px 2px var(--effects-gold), 0 0 16px 3px var(--effects-orange);
    animation: effects-spark .7s ease-out forwards;
}

@keyframes effects-spark {
    from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(var(--spark-x), var(--spark-y)) scale(.15);
    }
}

@media (pointer: coarse) {
    body,
    input,
    textarea,
    select,
    button,
    a,
    [role="button"] {
        cursor: auto;
    }

    .effects-cursor,
    .effects-cursor {
        display: none;
    }

    .effects-cursor-glow {
        display: block;
        opacity: 0;
        transition: opacity .18s ease;
    }

    .effects-cursor-glow.is-touching {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .effects-cursor,
    .effects-cursor-glow,
    .effects-spark {
        transition: none;
        animation-duration: .01ms;
    }
}