@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Voltaire&display=swap');

@font-face {
    font-family: 'Dominique';
    src: url('/fonts/Dominique-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dominique';
    src: url('/fonts/Dominique-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-main: #ff211a; /*255, 33, 26*/
    --color-2: #7a0c07;
    --color-3: #5e0905;
    --color-4: #6b0a06;
    --color-5: #5a0805;
    --color-bg: #0f0000;
    --forest: #0a1a10;
    --forest-mid: #0f1f16;
    --moss: #2f5d3a;
    --fern: #5f8b4c;
    --dew: #c7f2d0;
    --dew-faint: rgba(199, 242, 208, 0.06);
    --soil: #3b2f24;
    --fog: #dbe7d8;
    --fog-faint: rgba(219, 231, 216, 0.04);
    --gold: #c9a96e;
    --shell: #8a7b6a;
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(199, 242, 208, 0.12);
    --font-family-title: 'Dominique';
    --font-mono: "PP Supply Mono", ui-monospace, "SF Mono", monospace;
    --fs-micro: 11px;
    --ls-micro: .22em;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Voltaire", sans-serif;
    background: var(--color-bg);
    width: 100vw;
    overflow-x: hidden;
    scroll-behavior: smooth;
    color: var(--fog);
    overflow-x: hidden;
    cursor: none;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.justify-start {
    justify-content: start;
}

.flex-wrap {
    flex-wrap: wrap;
}

@media(max-width: 768px) {
    .justify-center {
        justify-content: start;
    }
}

.full-width {
    width: 100vw;
    position: relative;
    overflow-y: scroll;
    height: 80vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
}

    /* Chrome, Edge, Safari */
    .full-width::-webkit-scrollbar {
        width: 8px; /* vertical scrollbar width */
        height: 8px; /* horizontal scrollbar height */
    }

    .full-width::-webkit-scrollbar-track {
        background: transparent; /* or a very light color */
    }

    .full-width::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
        border: 2px solid transparent; /* padding around thumb */
        background-clip: content-box;
    }


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2em;    
}

.scanline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.01);
    animation: scanline 6s linear infinite;
    z-index: 9999;
    pointer-events: none;
}

@keyframes scanline {
    0.01% {
        transform: translatey(-100%);
    }

    99.99% {
        transform: translatey(0);
    }

    100% {
        transform: translatey(-100%);
    }
}

.body {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width: 100%;    
}

@media(max-width: 768px) {
    .body {
        align-items: start;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100vw;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
    }

        /* Chrome, Edge, Safari */
        .body::-webkit-scrollbar {
            width: 8px; /* vertical scrollbar width */
            height: 8px; /* horizontal scrollbar height */
        }

        .body::-webkit-scrollbar-track {
            background: transparent; /* or a very light color */
        }

        .body::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
            border-radius: 4px;
            border: 2px solid transparent; /* padding around thumb */
            background-clip: content-box;
        }
}

/*-----------------------------*/
/*-INTRO------------------------*/
/*-----------------------------*/

#world {
    width: 100%;
    height: min(80vh, 900px);
    background: #09090b;
    position: relative;
    overflow: hidden;
}

canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

canvas#blood {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

#neuro {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.p-summary {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: #fff;
    text-align: center;
}

    .p-summary h1 {
        margin: 0 0 0.1em;
        font-size: 12vh;
        font-weight: 400;
    }

    .p-summary p {
        margin: 0;
        font-size: 3vh;
        letter-spacing: 0.1em;
    }

    .p-summary a {
        color: #fff;
    }

/*-----------------------------*/
/*-MENU------------------------*/
/*-----------------------------*/

.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 5;
}

.container--mobile {
    min-width: 32rem;
    overflow: hidden;
}

.container--small {
    max-width: 10rem;
    margin: 5rem 1rem 1rem;
}

    .container--small svg {
        fill: white;
    }

.container--inline {
    display: flex;
    flex-direction: row;
}

.glass-container {
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 2rem;
    overflow: hidden;
    flex: 1 1 auto;
    color: var(--lg-text);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

@media (max-width: 768px) {
    .glass-container {
        width: 100vw;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.glass-container--rounded {
    border-radius: 3rem;
}

.glass-container--large {
    flex: 1 1 auto;
}

.glass-container--medium {
    flex: 1 1 auto;
}

.glass-container--small {
    flex: 0 1 auto;
}

.glass-filter,
.glass-overlay,
.glass-specular {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.glass-filter {
    z-index: 0;
    backdrop-filter: blur(4px);
    filter: url(#lensFilter) saturate(120%) brightness(1.15);
}

.glass-overlay {
    z-index: 1;
    background: var(--lg-bg-color);
}

.glass-specular {
    z-index: 2;
    box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight);
}

.glass-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    gap: 2rem;
    flex-wrap: wrap;
}

@media(max-width: 580px) {
    .glass-content {
        padding: 0;
        max-width: 90vw;
    }
}

.glass-content__link {
    margin-bottom: -1px;
    margin-top: 6px;
    transition: transform 0.2s ease-out;
}

    .glass-content__link img {
        width: 78px;
    }

    .glass-content__link:hover {
        transform: scale(1.1);
    }

    .glass-content__link:active {
        transform: scale(0.95);
    }

.player {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.player {
    touch-action: none;
}

.player__thumb {
    display: flex;
    align-items: center;
}

.player__img {
    width: 5rem;
    height: auto;
    border-radius: 0.5rem;
    margin-right: 1rem;
    transition: transform 0.25s ease-out;
}

    .player__img:hover {
        transform: scale(1.1);
    }

    .player__img:active {
        transform: scale(0.95);
    }

.player__legend {
    color: black;
}

.player__legend__title,
.player__legend__sub-title {
    margin: 0;
    font-size: 1rem;
}

.player__legend__sub-title {
    opacity: 0.6;
}

.player__controls {
    display: flex;
    align-items: center;
}

    .player__controls > :first-child {
        margin-right: 2rem;
    }

.glass-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: black;
    transition: color 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

    .glass-item.active > svg {
        fill: #7a0808 !important;
        filter: drop-shadow(0 0 4px rgba(150, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(110, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(70, 0, 0, 0.5));
    }

@media (max-width: 768px) {
    .glass-item {
        font-size: 0.8em;
    }
}

.glass-item svg {
    fill: #999999;
    height: 40px;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
    transition: transform 0.25s ease-out;
}

    .glass-item svg:hover {
        transform: scale(1.1);
    }

    .glass-item svg:active {
        transform: scale(0.95);
    }

.glass-item--active {
    background: rgba(0, 0, 0, 0.25);
    color: var(--lg-red);
    margin: -8px -40px;
    padding: 0.5rem 2.5rem;
    border-radius: 3rem;
}

    .glass-item--active svg {
        fill: var(--lg-red);
    }

/*-----------------------------*/
/*-MAP-------------------------*/
/*-----------------------------*/

.location-switch {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #333;
}

    .location-switch li {
        cursor: pointer;
        padding: 0.5em;
    }

        .location-switch li.current {
            color: rgb(255, 33, 26);
            text-shadow: 0 0 8px rgba(255, 33, 26,.8), 0 0 18px rgba(255, 33, 26,.65), 0 0 36px rgba(255, 33, 26,.45);
        }

.map {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    -webkit-mask-image: radial-gradient(circle, black 75%, transparent 100%);
    mask-image: radial-gradient(circle, black 75%, transparent 100%);
}

    .map::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background: rgba(255, 33, 26, 0.05);
        mix-blend-mode: color;
        box-shadow: inset 0 0 100px rgba(0, 0, 0, .45), inset 0 0 80px rgba(120, 0, 0, .16);

    }
    .map > img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .map.location {
        overflow-y: scroll;
        overflow-x: hidden;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
        max-width: 925px;
    }

@media(max-width: 925px) {
    .map > img {
        display: block;
        min-width: 925px;
        height: 100%;
    }

    .map.location {
        overflow-y: scroll;
        overflow-x: scroll;
    }
}

        /* Chrome, Edge, Safari */
        .map.location::-webkit-scrollbar {
            width: 8px; /* vertical scrollbar width */
            height: 8px; /* horizontal scrollbar height */
        }

        .map.location::-webkit-scrollbar-track {
            background: transparent; /* or a very light color */
        }

        .map.location::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.3);
            border-radius: 4px;
            border: 2px solid transparent; /* padding around thumb */
            background-clip: content-box;
        }

        .map.location > img.map-image {
            width: 100%;
            height: auto;
            filter: blur(10px);
            opacity: 0;
            transition: filter 0.8s ease, opacity 0.8s ease;
        }

            .map.location > img.map-image.loaded {
                filter: blur(0);
                opacity: 1;
                filter: saturate(0.45) brightness(0.95) contrast(1);
                background-color: rgba(80, 0, 0, 0.25);
                background-blend-mode: multiply;
            }

.map-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 1;
    filter: saturate(0.45) brightness(0.95) contrast(1);
    background-color: rgba(80, 0, 0, 0.25);
    background-blend-mode: multiply;
}

    .map.carriage {
        max-width: 520px;
    }

        .map.carriage > img {
            width: 520px;
        }

        .map.carriage.location > img.map-image {
            width: 520px;
        }

@keyframes animate {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}

.player {
    position: absolute;
    height: 100px;
    cursor: grab;
    -webkit-user-drag: none;
    user-drag: none;
    max-width: 100px;
    min-width: 80px;
    width: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 999999;    
}

    .player img {
        height: 100%;
        width: auto;
        max-width: 100%;
        display: block; /* removes inline quirks */
    }

    .player::after {
        content: "";
        position: absolute;
        bottom: -5px; /* Distance from bottom of image */
        left: 50%;
        transform: translateX(-50%);
        width: 80px; /* Width of shadow */
        height: 12px; /* Height/thickness of shadow */
        background: rgba(0, 0, 0, 0.3); /* semi-transparent black */
        border-radius: 50%; /* Makes it an oval */
        filter: blur(4px); /* Softens the shadow */
        pointer-events: none; /* So it doesn’t block clicks */
        z-index: -1; /* Behind the player */
    }


    .player .tooltip {
        visibility: hidden;
        background-color: rgba(0,0,0,0.8);
        color: #fff;
        text-align: center;
        padding: 6px 10px 3px;
        border-radius: 6px;
        position: absolute;
        z-index: 10;
        bottom: 115%; /* above the player */
        left: 50%;
        transform: translateX(-50%) translateY(10px); /* start slightly lower */
        white-space: nowrap;
        font-size: 0.8rem;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* On hover: fade in and move up */
    .player:hover .tooltip {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* move to final position */
    }

.carriage .player {
    height: 160px;
    max-width: 100px;
}

.player.landscape {
    max-width: 160px;
    height: 220px;
    height: auto;
}

.carriage .player.landscape {
    max-width: 240px;
    height: 160px;
}


.player > img {
    display: block; /* prevent inline gap */
    max-width: 100%;
    max-height: 100%;
    height: auto; /* preserve aspect ratio */
    width: auto; /* let image decide width */
}

/*-----------------------------*/
/*-PLAYER PICKER---------------*/
/*-----------------------------*/

.player-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    animation: picker-fade-in 0.2s ease-out;
}

.player-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(480px, calc(100vw - 2rem));
    max-height: min(600px, 80vh);
    padding: 1.5rem;
    background: #11131a;
    border: 1px solid #343744;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    animation: picker-pop-in 0.2s ease-out;
}

    .player-picker h3 {
        margin: 0 2rem 1.25rem 0;
        font-size: 1.25rem;
    }

.player-picker-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: #999;
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

    .player-picker-close:hover {
        color: #fe7b1f;
        background: rgba(254, 123, 31, 0.1);
    }

.player-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.player-picker-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #20232d;
    color: inherit;
    border: 1px solid #393d4a;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

    .player-picker-option:hover {
        border-color: #fe7b1f;
        background: #2b2d37;
        transform: translateY(-2px);
    }

    .player-picker-option img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }

@keyframes picker-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes picker-pop-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/*-----------------------------*/
/*-PLAYER ACTIONS--------------*/
/*-----------------------------*/

.player-actions {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 20;
}

.player-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #484b58;
    border-radius: 50%;
    background: #11131a;
    color: white;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

    .player-action:hover {
        transform: translateY(-3px);
        border-color: #fe7b1f;
    }

    .player-action.active {
        border-color: #fe7b1f;
        background: #432719;
    }

    .player-action.remove:hover {
        border-color: #ff4545;
        background: #451b20;
    }

/*-----------------------------*/
/*-FIRE------------------------*/
/*-----------------------------*/
.fire {
    font-size: 7px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    margin: 0em auto 0 auto;
    position: absolute;
    width: 2em;
    height: 2em;
    opacity: 0.5;
    pointer-events: none;
    margin-top: 20px;
    transform: scale(0.6) translateX(-100%) translateY(20%);
}

.player .fire {
    left: 50% !important;
    top: 0% !important;
    position: absolute;
}

.particle {
    animation: rise 1s ease-in infinite;
    background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 5em;
    height: 5em;
}

.fire.blue .particle {
    background-image: radial-gradient(#4fc3ff 20%, rgba(79, 195, 255, 0) 70%);
}

.particle:nth-of-type(1) {
    animation-delay: 0.4968642875s;
    left: calc((100% - 5em) * 0);
}

.particle:nth-of-type(2) {
    animation-delay: 0.9312749218s;
    left: calc((100% - 5em) * 0.02);
}

.particle:nth-of-type(3) {
    animation-delay: 0.3814037167s;
    left: calc((100% - 5em) * 0.04);
}

.particle:nth-of-type(4) {
    animation-delay: 0.3343346062s;
    left: calc((100% - 5em) * 0.06);
}

.particle:nth-of-type(5) {
    animation-delay: 0.0072568586s;
    left: calc((100% - 5em) * 0.08);
}

.particle:nth-of-type(6) {
    animation-delay: 0.81816079s;
    left: calc((100% - 5em) * 0.1);
}

.particle:nth-of-type(7) {
    animation-delay: 0.5693493148s;
    left: calc((100% - 5em) * 0.12);
}

.particle:nth-of-type(8) {
    animation-delay: 0.544492249s;
    left: calc((100% - 5em) * 0.14);
}

.particle:nth-of-type(9) {
    animation-delay: 0.8147395453s;
    left: calc((100% - 5em) * 0.16);
}

.particle:nth-of-type(10) {
    animation-delay: 0.0108257865s;
    left: calc((100% - 5em) * 0.18);
}

.particle:nth-of-type(11) {
    animation-delay: 0.9311473605s;
    left: calc((100% - 5em) * 0.2);
}

.particle:nth-of-type(12) {
    animation-delay: 0.5534456875s;
    left: calc((100% - 5em) * 0.22);
}

.particle:nth-of-type(13) {
    animation-delay: 0.7027561692s;
    left: calc((100% - 5em) * 0.24);
}

.particle:nth-of-type(14) {
    animation-delay: 0.3424941761s;
    left: calc((100% - 5em) * 0.26);
}

.particle:nth-of-type(15) {
    animation-delay: 0.5534999728s;
    left: calc((100% - 5em) * 0.28);
}

.particle:nth-of-type(16) {
    animation-delay: 0.8678541037s;
    left: calc((100% - 5em) * 0.3);
}

.particle:nth-of-type(17) {
    animation-delay: 0.3559851823s;
    left: calc((100% - 5em) * 0.32);
}

.particle:nth-of-type(18) {
    animation-delay: 0.9854785847s;
    left: calc((100% - 5em) * 0.34);
}

.particle:nth-of-type(19) {
    animation-delay: 0.1410366852s;
    left: calc((100% - 5em) * 0.36);
}

.particle:nth-of-type(20) {
    animation-delay: 0.3758573601s;
    left: calc((100% - 5em) * 0.38);
}

.particle:nth-of-type(21) {
    animation-delay: 0.0569199397s;
    left: calc((100% - 5em) * 0.4);
}

.particle:nth-of-type(22) {
    animation-delay: 0.7848419648s;
    left: calc((100% - 5em) * 0.42);
}

.particle:nth-of-type(23) {
    animation-delay: 0.5062351072s;
    left: calc((100% - 5em) * 0.44);
}

.particle:nth-of-type(24) {
    animation-delay: 0.9921707656s;
    left: calc((100% - 5em) * 0.46);
}

.particle:nth-of-type(25) {
    animation-delay: 0.6692322239s;
    left: calc((100% - 5em) * 0.48);
}

.particle:nth-of-type(26) {
    animation-delay: 0.8346726291s;
    left: calc((100% - 5em) * 0.5);
}

.particle:nth-of-type(27) {
    animation-delay: 0.1715227871s;
    left: calc((100% - 5em) * 0.52);
}

.particle:nth-of-type(28) {
    animation-delay: 0.5388703375s;
    left: calc((100% - 5em) * 0.54);
}

.particle:nth-of-type(29) {
    animation-delay: 0.8898927228s;
    left: calc((100% - 5em) * 0.56);
}

.particle:nth-of-type(30) {
    animation-delay: 0.8168167627s;
    left: calc((100% - 5em) * 0.58);
}

.particle:nth-of-type(31) {
    animation-delay: 0.4806441262s;
    left: calc((100% - 5em) * 0.6);
}

.particle:nth-of-type(32) {
    animation-delay: 0.2695658826s;
    left: calc((100% - 5em) * 0.62);
}

.particle:nth-of-type(33) {
    animation-delay: 0.7571371052s;
    left: calc((100% - 5em) * 0.64);
}

.particle:nth-of-type(34) {
    animation-delay: 0.3166931874s;
    left: calc((100% - 5em) * 0.66);
}

.particle:nth-of-type(35) {
    animation-delay: 0.394047549s;
    left: calc((100% - 5em) * 0.68);
}

.particle:nth-of-type(36) {
    animation-delay: 0.0214250426s;
    left: calc((100% - 5em) * 0.7);
}

.particle:nth-of-type(37) {
    animation-delay: 0.977186211s;
    left: calc((100% - 5em) * 0.72);
}

.particle:nth-of-type(38) {
    animation-delay: 0.8500524678s;
    left: calc((100% - 5em) * 0.74);
}

.particle:nth-of-type(39) {
    animation-delay: 0.8961444645s;
    left: calc((100% - 5em) * 0.76);
}

.particle:nth-of-type(40) {
    animation-delay: 0.5703905789s;
    left: calc((100% - 5em) * 0.78);
}

.particle:nth-of-type(41) {
    animation-delay: 0.2662597528s;
    left: calc((100% - 5em) * 0.8);
}

.particle:nth-of-type(42) {
    animation-delay: 0.1518637413s;
    left: calc((100% - 5em) * 0.82);
}

.particle:nth-of-type(43) {
    animation-delay: 0.7776789423s;
    left: calc((100% - 5em) * 0.84);
}

.particle:nth-of-type(44) {
    animation-delay: 0.0427616104s;
    left: calc((100% - 5em) * 0.86);
}

.particle:nth-of-type(45) {
    animation-delay: 0.1738190744s;
    left: calc((100% - 5em) * 0.88);
}

.particle:nth-of-type(46) {
    animation-delay: 0.2368082427s;
    left: calc((100% - 5em) * 0.9);
}

.particle:nth-of-type(47) {
    animation-delay: 0.2425460052s;
    left: calc((100% - 5em) * 0.92);
}

.particle:nth-of-type(48) {
    animation-delay: 0.5996151075s;
    left: calc((100% - 5em) * 0.94);
}

.particle:nth-of-type(49) {
    animation-delay: 0.5408116607s;
    left: calc((100% - 5em) * 0.96);
}

.particle:nth-of-type(50) {
    animation-delay: 0.5285011437s;
    left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    25% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-10em) scale(0);
    }
}


/*-----------------------------*/
/*-ECLIPSE---------------------*/
/*-----------------------------*/
#eclipse {
    width: 80vh;
    height: 80vh;
    position: relative;
    overflow: hidden;
    max-width: 980px;
    max-height: 980px;
    min-width: 480px;
    min-height: 480px;
}

@media(max-width: 520px) {
    body {
        width: 100vw;
        overflow-x: hidden;
    }

    .page {
        overflow: hidden;
    }

    #eclipse {
        position: absolute;
        width: 80vh;
        max-width: 50vw;
        height: 80vh;
        max-height: 50vw;
        overflow: hidden;
    }
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer-1 {
    animation: 30s linear rotate infinite;
    transform-origin: 66% 40%;
    background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.46) 3.96%, rgba(17, 21, 28, 0) 8.33%, rgba(17, 21, 28, 0) 8.33%) 69.5% 37.7%/17.2% 17.2% no-repeat, radial-gradient(ellipse at 50% 50%, var(--color-brand) 0%, rgba(17, 21, 28, 0) 47.22%) 74.1% 35.6%/33.6% 36.6% no-repeat;
    /* Rays */
}

.layer-2 {
    animation: 20s linear rotate infinite reverse;
    transform-origin: 66% 40%;
    background: radial-gradient( ellipse at 50% 50%, rgba(17, 21, 28, 0) 20%, #09090b 29%) 77.4% 33.8%/40% 40% no-repeat, repeating-conic-gradient( from 15deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.51) 2.64%, rgba(17, 21, 28, 0) 5.56%, rgba(17, 21, 28, 0) 5.56%) 69.5% 37.7%/17.2% 17.2% no-repeat;
    /* Rays */
}

.layer-3 {
    animation: 20s linear rotate infinite;
    background: repeating-conic-gradient( from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 8.1%, rgba(17, 21, 28, 0) 16.67%, rgba(17, 21, 28, 0) 16.67% ) 0 0/100% 100% no-repeat;
    /* Rays */
}

.layer-4 {
    animation: 40s linear rotate infinite reverse;
    background: repeating-conic-gradient( from 355deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 2.86%, rgba(17, 21, 28, 0) 5.88%, rgba(17, 21, 28, 0) 5.88% ) 0% 0%/100% 100% no-repeat;
    /* Rays */
}

.layer-5 {
    animation: 40s linear rotate infinite;
    background: repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.26) 6.62%, rgba(17, 21, 28, 0) 7.69%, rgba(17, 21, 28, 0) 7.69% ) 0% 0%/100% 100% no-repeat;
    /* Rays */
}

.layer-6 {
    background: radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.27) 0%, rgba(17, 21, 28, 0) 63.54%) 67% 39.3%/5.8% 5.8% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(17, 21, 28, 0) 40.28%, rgba(255, 183, 163, 0.05) 52.43%, rgba(17, 21, 28, 0) 63.54%) 68% 38.6%/13% 13% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.55) 0%, rgba(17, 21, 28, 0) 63.54%) 66.9% 39.3%/3.4% 3.4% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.2) 0%, rgba(17, 21, 28, 0) 66.67%) 70.7% 36.5%/25.6% 25.6% no-repeat, radial-gradient( ellipse at 50% 50%, #09090b 26%, rgba(17, 21, 28, 0) 26.4%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.04) 0%, rgba(17, 21, 28, 0) 69.79%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(255, 240, 148, 0.11) 0%, rgba(17, 21, 28, 0) 52.43%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 51% 49%, rgba(17, 21, 28, 0) 23.96%, #09090b 40.63%) 0% 0%/100% 100% no-repeat, repeating-conic-gradient( from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(254, 123, 31, 0.14) 11.04%, rgba(17, 21, 28, 0) 20%, rgba(17, 21, 28, 0) 20%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 52% 48%, rgba(17, 21, 28, 0) 23.96%, #09090b 34.03%) 0% 0%/100% 100% no-repeat, radial-gradient( ellipse at 50% 50%, rgba(254, 123, 31, 0.29) 28%, rgba(17, 21, 28, 0) 30%) 0% 0%/100% 100% no-repeat;
    /* glow */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*-----------------------------*/
/*-CARD------------------------*/
/*-----------------------------*/

.card-container {
    perspective: 1000px;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;    
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

.card {
    position: relative;
    width: 220px;
    min-height: 220px;
    padding: 2em;
    color: white;
    border-radius: 10px;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

    .card h2 {
        z-index: 2;
        text-transform: uppercase;
        text-shadow: rgba(0,0,0,0.5) 0px 2px 2px;
    }

    .card p {
        font-weight: bold;
        font-size: 1.6rem;
        text-transform: math-auto;
    }

@media (max-width: 768px) {
    .card p {
        font-size: 0.8rem;
    }
}

.card > svg {
    max-width: 80px;
}

.grid.four .card {
    width: 120px;
}

.card.large {
    width: 100%;
    max-width: min(100%, 80vh);
    height: auto;
    max-height: 80vh;
    min-width: 400px;
}
.card.medium {
    width: 100%;
    max-width: min(100%, 40vh);
    height: auto;
    max-height: 40vh;
    aspect-ratio: 1;
    min-width: 400px;
}

.card-container.message {
    position: absolute;
    z-index: 999999;
}

.card-container .card {
    min-height: 200px;
}

.card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.card.large {
    min-width: min(480px, 90vw);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
}

    .card.large > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


@media (max-width: 768px) {
    .card.large {
        max-height: 100vw;
        min-height: revert;
    }
}

.card .character-box {
    background: #e0e0e0;
    width: 300px;
    margin: 0 auto;
    border-radius: 30px;
}

.card img.gif {
    width: auto;
    position: relative;
    height: 120px;
}

@media (max-width: 768px) {
    .card.large.limited {
        min-height: 380px;
        margin: 10px;
        width: calc(100% - 20px);
        min-width: revert;
    }
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(var(--angle, 135deg), rgba(255,255,255,0.1), rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    transition: background 0.2s ease;
}

.card .description {
    padding: 10px;
    position: relative;    
    max-width: 400px;
}

.card .description .content {
    
}

.card .title {
    position: relative;    
    font-size: 3rem;
}

    .card .title h3 {
        font-family: var(--font-family-title);
        -webkit-mask-image: url('/img/title-grunge-mask.webp');
        mask-image: url('/img/title-grunge-mask.webp');
        -webkit-mask-mode: luminance;
        mask-mode: luminance;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: cover;
        mask-size: cover;
        text-shadow: rgba(0,0,0,0.5) 0px 2px 2px;
        margin: 0;
        text-transform: uppercase;
    }

        .card .title h3::first-letter {
            color: #7a0808;
            font-size: 1.2em;
        }

.card .description .content p {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    margin: 0;    
    text-align: right;
}

.glow {
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 200px;
    height: 200px;
    background: radial-gradient( circle at center, rgba(199, 242, 208, 0.28), rgba(170, 255, 220, 0.12) 35%, transparent 80% );
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: top 0.1s, left 0.1s, opacity 0.3s ease;
    z-index: 0;
}


.card:hover .glow {
    opacity: 1;
}

:root {
    --glitch-width: min(100%, 350px);
    --glitch-height: calc(var(--glitch-width) * 1.25);
    --gap-horizontal: 10px;
    --gap-vertical: 2px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: transparent;
    --blend-color-5: transparent;
}

@media (max-width: 900px) {
    :root {
        --glitch-width: min(100%, 300px);
        --glitch-height: calc(var(--glitch-width) * 1.25);
    }
}

@media (max-width: 600px) {
    :root {
        --glitch-width: min(100%, 280px);
        --glitch-height: calc(var(--glitch-width) * 1.25);
    }
}

.glitch--style-1 {
    --gap-horizontal: 20px;
    --gap-vertical: 2px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: transparent;
    --blend-color-5: transparent;
}

.glitch--style-2 {
    --gap-horizontal: 5px;
    --gap-vertical: 10px;
    --time-anim: 2s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: luminosity;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: #4d8c60;
    --blend-color-4: transparent;
    --blend-color-5: #c9b09a;
}

.glitch--style-3 {
    --gap-horizontal: 20px;
    --gap-vertical: 2px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: multiply;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: #af4563;
    --blend-color-4: transparent;
    --blend-color-5: transparent;
}

.glitch--style-4 {
    --gap-horizontal: 5px;
    --gap-vertical: 20px;
    --time-anim: 5s;
    --blend-mode-1: none;
    --blend-mode-2: exclusion;
    --blend-mode-3: hard-light;
    --blend-mode-4: overlay;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: #52f1cd;
    --blend-color-3: #525df1;
    --blend-color-4: #f19b52;
    --blend-color-5: transparent;
}

.glitch--style-5 {
    --gap-horizontal: 5px;
    --gap-vertical: 20px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: overlay;
    --blend-mode-5: overlay;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: #000;
    --blend-color-5: #8d16f2;
}

.glitch--style-6 {
    --gap-horizontal: 5px;
    --gap-vertical: 20px;
    --time-anim: 2.25s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: overlay;
    --blend-mode-4: none;
    --blend-mode-5: none;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: rgba(255,255,255,0.2);
    --blend-color-4: transparent;
    --blend-color-5: transparent;
}

.grid {
    position: relative;
    padding: 1em;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 4rem 1rem;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #5a0808 #09090c;
}

.grid__item {
    position: relative;
    padding: 0vh;
    max-height: 300px;
}

    .grid::-webkit-scrollbar {
        width: 8px;
    }

    .grid::-webkit-scrollbar-track {
        background: #09090c;
    }

    .grid::-webkit-scrollbar-thumb {
        background: #5a0808;
        border-radius: 8px;
    }

        .grid::-webkit-scrollbar-thumb:hover {
            background: #800d0d;
        }

.grid__item {
    margin: 0 0 20px 0;
    position: relative;
}

    .grid__item:nth-child(odd) {
        /*! margin-top: -40vh; */
    }

.grid__item-title {
    position: absolute;
    margin: 0;
    font-size: 3vw;
    font-family: var(--font-family-title);
    font-weight: 800;
    padding: 2rem;
    bottom: 0;
    pointer-events: none;
    line-height: 1;
    -webkit-mask-image: url('/img/title-grunge-mask.webp');
    mask-image: url('/img/title-grunge-mask.webp');
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
    text-transform: uppercase;
}

    .grid__item-title::first-letter {
        color: #7a0808;
        font-size: 1.2em;
    }

    .grid__item-title span {
        display: block;
        position: relative;
        font-family: var(--font-mono);
        font-size: var(--fs-micro);
        font-weight: 500;
        letter-spacing: var(--ls-micro);
        text-transform: uppercase;
        opacity: 0;
        color: var(--color-subtitle);
    }

.glitch:hover + .grid__item-title span {
    opacity: 1;
    animation: glitch-anim-text 0.5s linear;
}

@media screen and (max-width: 55em) {
    .grid {
        grid-template-columns: 100%;
        margin-top: 3em;
    }

    .grid__item {
        margin: 0 0 3em;
    }

        .grid__item:nth-child(odd) {
            margin-top: 0;
        }

            .grid__item-title, .grid__item:nth-child(odd) .grid__item-title {
                font-size: 2em;
                text-align: center;
                width: 100%;
                padding: 0;
                top: 20%;
            }
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Glitch styles */
.glitch {
    position: relative;
    width: min(100%, 350px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

    .glitch:hover {
        cursor: pointer;
    }

.glitch__img {
    position: absolute;
    top: calc(-1 * var(--gap-vertical));
    left: calc(-1 * var(--gap-horizontal));
    width: calc(100% + var(--gap-horizontal) * 2);
    height: calc(100% + var(--gap-vertical) * 2);
    background: url(../img/clues/test.webp) no-repeat 50% 0;
    background-color: var(--blend-color-1);
    background-size: cover;
    background-position: center center;
    transform: translate3d(0,0,0);
    background-blend-mode: var(--blend-mode-1);
    filter: saturate(0.25) brightness(0.75) contrast(1.1);
    background-color: rgba(80, 0, 0, 0.25);
    background-blend-mode: multiply;
}

/* Set the background colors for the glitch images*/
.glitch__img:nth-child(2) {
    background-color: var(--blend-color-2);
    background-blend-mode: var(--blend-mode-2);
}

.glitch__img:nth-child(3) {
    background-color: var(--blend-color-3);
    background-blend-mode: var(--blend-mode-3);
}

.glitch__img:nth-child(4) {
    background-color: var(--blend-color-4);
    background-blend-mode: var(--blend-mode-4);
}

.glitch__img:nth-child(5) {
    background-color: var(--blend-color-5);
    background-blend-mode: var(--blend-mode-5);
}

/* Hide all images except the first one */
.glitch__img:nth-child(n+2) {
    opacity: 0;
}

/* Hovers */

/* On hover we show the 2nd, 3rd, 4th and 5th image*/
.glitch:hover .glitch__img:nth-child(n+2) {
    opacity: 1;
}

/* Hover animations for horizontal case */
.glitch:hover .glitch__img:nth-child(2) {
    transform: translate3d(var(--gap-horizontal),0,0);
    animation: glitch-anim-1-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(3) {
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
    animation: glitch-anim-2-horizontal var(--time-anim) infinite linear alternate;
}

.glitch:hover > .glitch__img:nth-child(4) {
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
    animation: glitch-anim-3-horizontal var(--time-anim) infinite linear alternate;
}

/* Hover animations for vertical case */
.glitch--vertical:hover .glitch__img:nth-child(2) {
    transform: translate3d(0, var(--gap-vertical), 0);
    animation: glitch-anim-1-vertical var(--time-anim) infinite linear alternate;
}

.glitch--vertical:hover > .glitch__img:nth-child(3) {
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0);
    animation: glitch-anim-2-vertical var(--time-anim) infinite linear alternate;
}

.glitch--vertical:hover > .glitch__img:nth-child(4) {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1,-1,1);
    animation: glitch-anim-3-vertical var(--time-anim) infinite linear alternate;
}

/* Hover flash animation on last image */
.glitch:hover > .glitch__img:nth-child(5) {
    animation: glitch-anim-flash 0.5s steps(1,end) infinite;
}

/* Animations */

/* Horizontal */
@keyframes glitch-anim-1-horizontal {
    0% {
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }

    10% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }

    20% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }

    30% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }

    40% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }

    50% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }

    60% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }

    70% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }

    80% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }

    90% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }

    100% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
}

@keyframes glitch-anim-2-horizontal {
    0% {
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }

    15% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }

    22% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }

    31% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }

    45% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }

    51% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }

    63% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }

    76% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }

    81% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }

    94% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }

    100% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
}

@keyframes glitch-anim-3-horizontal {
    0% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    }

    5% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    }

    10% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    }

    25% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }

    27% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    }

    30% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    }

    33% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }

    37% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    }

    40% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }

    45% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    }

    50% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    }

    53% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    }

    57% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    }

    60% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    }

    65% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    }

    70% {
        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    }

    73% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }

    80% {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    }

    100% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    }
}

/* Vertical */
@keyframes glitch-anim-1-vertical {
    0% {
        -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
        clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
    }

    10% {
        -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
        clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
    }

    20% {
        -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
        clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
    }

    30% {
        -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
        clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
    }

    40% {
        -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
        clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
    }

    50% {
        -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
        clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
    }

    60% {
        -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
        clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
    }

    70% {
        -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
        clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
    }

    80% {
        -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
        clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
    }

    90% {
        -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
        clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
    }

    100% {
        -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
        clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
    }
}

@keyframes glitch-anim-2-vertical {
    0% {
        -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
        clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
    }

    15% {
        -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
        clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
    }

    22% {
        -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
        clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
    }

    31% {
        -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
        clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    }

    45% {
        -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
        clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
    }

    51% {
        -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
        clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
    }

    63% {
        -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
        clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    }

    76% {
        -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
        clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
    }

    81% {
        -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
        clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
    }

    94% {
        -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
        clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
    }

    100% {
        -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
        clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
    }
}

@keyframes glitch-anim-3-vertical {
    0% {
        -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
        clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
    }

    5% {
        -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
        clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
    }

    10% {
        -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
        clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
    }

    25% {
        -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
        clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    }

    27% {
        -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
        clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
    }

    30% {
        -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
        clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
    }

    33% {
        -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
        ;
        clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
    }

    37% {
        -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
        ;
        clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
    }

    40% {
        -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
        clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
    }

    45% {
        -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
        clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
    }

    50% {
        -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
        clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
    }

    53% {
        -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
        clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
    }

    57% {
        -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
        clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
    }

    60% {
        -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
        clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
    }

    65% {
        -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
        clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
    }

    70% {
        -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
        clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
    }

    73% {
        -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
        clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    }

    80% {
        -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
        clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
    }

    100% {
        -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
        clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
    }
}

@keyframes glitch-anim-text {
    0% {
        opacity: 1;
        transform: translate3d(-10px,0,0) scale3d(-1,-1,1);
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }

    10% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }

    20% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }

    35% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }

    50% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }

    60% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }

    70% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }

    80% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }

    90% {
        transform: translate3d(-10px,0,0) scale3d(-1,-1,1);
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale3d(1,1,1);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Flash */
@keyframes glitch-anim-flash {
    0% {
        opacity: 0.2;
        transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
    }

    33%, 100% {
        opacity: 0;
        transform: translate3d(0,0,0);
    }
}

.puzzle-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 880px;
    height: 80vh;
    top: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

/*-----------------------------*/
/*-GLITCH----------------------*/
/*-----------------------------*/



/*-----------------------------*/
/*-CONTROL---------------------*/
/*-----------------------------*/

ul.strip {
    max-height: 220px;
    overflow-x: scroll;
    list-style: none;
    width: 100%;
    max-width: 980px;
    min-height: 220px;
    display: flex;
    justify-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent; /* thumb color / track color */
}

    /* Chrome, Edge, Safari */
    ul.strip::-webkit-scrollbar {
        width: 8px; /* vertical scrollbar width */
        height: 8px; /* horizontal scrollbar height */
    }

    ul.strip::-webkit-scrollbar-track {
        background: transparent; /* or a very light color */
    }

    ul.strip::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.3);
        border-radius: 4px;
        border: 2px solid transparent; /* padding around thumb */
        background-clip: content-box;
    }

    ul.strip li {
        margin: 0 10px 0 0;
    }

        ul.strip li .card-container.hidden img {
            opacity: 0.3 !important;
        }

        ul.strip li .card-container h2 {
            color: white;
            z-index: 2;
            pointer-events: none;
        }


/*--------------------------------------------------*/
/*-MICROCHIP----------------------------------------*/
/*--------------------------------------------------*/

:root {
    --hue: 34;
    --primary1: hsl(var(--hue),90%,90%);
    --primary3: hsl(var(--hue),90%,70%);
    --primary7: hsl(var(--hue),90%,30%);
    --primary9: hsl(var(--hue),90%,10%);
    --trans-dur: 0.3s;
}

#components-reconnect-modal {
    background: rgba(0, 0, 0, 0.75);
}

    #components-reconnect-modal a {
        color: orange !important;
        cursor: pointer;
    }

.microchip {
    display: block;
    margin: 0 auto;
    width: 8em;
    height: auto;
}

.microchip__center, .microchip__dot, .microchip__line, .microchip__lines, .microchip__spark, .microchip__wave {
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-iteration-count: infinite;
}

.microchip__core, .microchip__dot {
    fill: var(--primary7);
    transition: fill var(--trans-dur);
}

.microchip__center, .microchip__wave {
    transform-origin: 25px 25px;
}

.microchip__center {
    animation-name: center-scale;
}

.microchip__dot--1 {
    animation-name: dot-scale1;
    transform-origin: 3px 38px;
}

.microchip__dot--2 {
    animation-name: dot-scale2;
    transform-origin: 3px 54px;
}

.microchip__dot--3 {
    animation-name: dot-scale3;
    transform-origin: 3px 70px;
}

.microchip__dot--4 {
    animation-name: dot-scale4;
    transform-origin: 3px 3px;
}

.microchip__dot--5 {
    animation-name: dot-scale5;
    transform-origin: 20px 3px;
}

.microchip__dot--6 {
    animation-name: dot-scale6;
    transform-origin: 3px 30px;
}

.microchip__dot--7 {
    animation-name: dot-scale7;
    transform-origin: 37px 3px;
}

.microchip__dot--8 {
    animation-name: dot-scale8;
    transform-origin: 54px 3px;
}

.microchip__dot--9 {
    animation-name: dot-scale9;
    transform-origin: 71px 3px;
}

.microchip__line, .microchip__spark, .microchip__wave {
    transition: stroke var(--trans-dur);
}

.microchip__line {
    stroke: var(--primary7);
}

.microchip__line--1 {
    animation-name: line-draw1;
}

.microchip__line--2 {
    animation-name: line-draw2;
}

.microchip__line--3 {
    animation-name: line-draw3;
}

.microchip__line--4 {
    animation-name: line-draw4;
}

.microchip__line--5 {
    animation-name: line-draw5;
}

.microchip__line--6 {
    animation-name: line-draw6;
}

.microchip__line--7 {
    animation-name: line-draw7;
}

.microchip__line--8 {
    animation-name: line-draw8;
}

.microchip__line--9 {
    animation-name: line-draw9;
}

.microchip__lines {
    animation-name: lines-scale;
    transform-origin: 54px 54px;
}

.microchip__spark, .microchip__wave {
    animation-timing-function: linear;
    stroke: var(--primary3);
}

.microchip__spark--1 {
    animation-name: spark1;
}

.microchip__spark--2 {
    animation-name: spark2;
}

.microchip__spark--3 {
    animation-name: spark3;
}

.microchip__spark--4 {
    animation-name: spark4;
}

.microchip__spark--5 {
    animation-name: spark5;
}

.microchip__spark--6 {
    animation-name: spark6;
}

.microchip__spark--7 {
    animation-name: spark7;
}

.microchip__spark--8 {
    animation-name: spark8;
}

.microchip__spark--9 {
    animation-name: spark9;
}

.microchip__wave--1 {
    animation-name: wave-scale1;
}

.microchip__wave--2 {
    animation-name: wave-scale2;
}

/* Animations */
@keyframes center-scale {
    from, to {
        transform: scale(0);
    }

    12.5%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale1 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale2 {
    from, 10.5%, 87.5%, to {
        transform: scale(0);
    }

    23%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale3 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale4 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale5 {
    from, 11.5%, 87.5%, to {
        transform: scale(0);
    }

    24%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale6 {
    from, 14.5%, 85%, to {
        transform: scale(0);
    }

    27%, 72.5% {
        transform: scale(1);
    }
}

@keyframes dot-scale7 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes dot-scale8 {
    from, 11%, 87.5%, to {
        transform: scale(0);
    }

    23.5%, 75% {
        transform: scale(1);
    }
}

@keyframes dot-scale9 {
    from, 20%, 81.25%, to {
        transform: scale(0);
    }

    32.5%, 68.75% {
        transform: scale(1);
    }
}

@keyframes line-draw1 {
    from, 93.75%, to {
        stroke-dashoffset: 59;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw2 {
    from, 93.75%, to {
        stroke-dashoffset: 42;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw3 {
    from, 93.75%, to {
        stroke-dashoffset: 59;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw4 {
    from, 93.75%, to {
        stroke-dashoffset: 78;
    }

    25%, 68.75% {
        stroke-dashoffset: 18;
    }
}

@keyframes line-draw5 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw6 {
    from, 93.75%, to {
        stroke-dashoffset: 91;
    }

    25%, 68.75% {
        stroke-dashoffset: 31;
    }
}

@keyframes line-draw7 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes line-draw8 {
    from, 93.75%, to {
        stroke-dashoffset: 43;
    }

    25%, 68.75% {
        stroke-dashoffset: 0;
    }
}

@keyframes line-draw9 {
    from, 93.75%, to {
        stroke-dashoffset: 60;
    }

    25%, 68.75% {
        stroke-dashoffset: 17;
    }
}

@keyframes lines-scale {
    from {
        opacity: 1;
        transform: scale(0);
    }

    12.5%, 75% {
        opacity: 1;
        transform: scale(1);
    }

    93.75%, to {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes spark1 {
    from, 27.5% {
        stroke-dashoffset: 59;
    }

    50%, 52.5% {
        stroke-dashoffset: -25;
    }

    75%, to {
        stroke-dashoffset: -109;
    }
}

@keyframes spark2 {
    from, 27.5% {
        stroke-dashoffset: 42;
    }

    50%, 52.5% {
        stroke-dashoffset: -42;
    }

    75%, to {
        stroke-dashoffset: -126;
    }
}

@keyframes spark3 {
    from, 27.5% {
        stroke-dashoffset: 59;
    }

    50%, 52.5% {
        stroke-dashoffset: -25;
    }

    75%, to {
        stroke-dashoffset: -109;
    }
}

@keyframes spark4 {
    from, 27.5% {
        stroke-dashoffset: 78;
    }

    50%, 52.5% {
        stroke-dashoffset: -42;
    }

    75%, to {
        stroke-dashoffset: -162;
    }
}

@keyframes spark5 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -60;
    }

    75%, to {
        stroke-dashoffset: -180;
    }
}

@keyframes spark6 {
    from, 27.5% {
        stroke-dashoffset: 91;
    }

    50%, 52.5% {
        stroke-dashoffset: -29;
    }

    75%, to {
        stroke-dashoffset: -149;
    }
}

@keyframes spark7 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -26;
    }

    75%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes spark8 {
    from, 27.5% {
        stroke-dashoffset: 43;
    }

    50%, 52.5% {
        stroke-dashoffset: -43;
    }

    75%, to {
        stroke-dashoffset: -129;
    }
}

@keyframes spark9 {
    from, 27.5% {
        stroke-dashoffset: 60;
    }

    50%, 52.5% {
        stroke-dashoffset: -26;
    }

    75%, to {
        stroke-dashoffset: -112;
    }
}

@keyframes wave-scale1 {
    from, 0%, 25%, 50%, 75% {
        stroke-width: 6px;
        transform: scale(1);
    }

    10%, 35%, 60%, 85%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}

@keyframes wave-scale2 {
    from, 5%, 30%, 55%, 80% {
        stroke-width: 6px;
        transform: scale(1);
    }

    15%, 40%, 65%, 90%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-rejected {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100vh;
        width: 100vw;
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }


/*--------------------------------------------------*/
/*-PULSE--------------------------------------------*/
/*--------------------------------------------------*/
.pulse .fa-solid {
    font-size: 15px;
    padding: 8px;
    border-radius: 50%;
    background: transparent;
}

.pulse {
    width: 3rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pulse,
    .pulse::after,
    .pulse::before {
        content: "";
        display: grid;
        grid-area: 1/1;
        aspect-ratio: 1;
        border-radius: 50%;
        box-shadow: 0 0 0 0 #33333311;
        animation: pulsing 3s linear infinite var(--s, 0s);
    }

        .pulse::before {
            --s: 1s;
        }

        .pulse::after {
            --s: 2s;
        }

        .pulse:hover {
            background: #880808;
            color: #880808;
        }

@keyframes pulsing {
    to {
        box-shadow: 0 0 0 2rem #0000;
    }
}

/*------------------------------------*/
/*-RAIN-------------------------------*/
/*------------------------------------*/
section.rain {
    height: 1456px;
    position: absolute;
    overflow-y: hidden;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.2;
    z-index: 9;
}

.drop {
    background: -webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)) );
    background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
    width: 1px;
    height: 89px;
    position: absolute;
    bottom: 200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;
}

/* animate the drops*/
@-webkit-keyframes fall {
    to {
        margin-top: 900px;
    }
}

@-moz-keyframes fall {
    to {
        margin-top: 900px;
    }
}

/*------------------------------------*/
/*-HEADER-----------------------------*/
/*------------------------------------*/
.banner-text {
    pointer-events: none;
    margin-left: 30px;
}

.hero-text {
    display: flex;
    flex-wrap: wrap;
    font-size: 3rem;
    color: #FFF;
    pointer-events: none;
}

.hero-word {
    margin-right: 0.35em;
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
}

.hero-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
    font-size: 4rem;
    letter-spacing: 1.05rem;
    color: rgba(255, 255, 255, 0.4);
    animation: heroLetterIn 0.6s ease forwards, heroLetterFidget 4s ease-in-out infinite;
    animation-delay: 0s, 0.6s; /* start fidget after fade-in */
    pointer-events: none;
    text-shadow: 0 0 10px #5e0905, 0 0 20px #a31009;
}

@keyframes glitchText {
}

@media(max-width: 768px) {
    .banner-text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .hero-letter {
        font-size: 2rem;
    }
}

@keyframes heroLetterIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blash {
    color: #7a0c07;
}

@keyframes heroLetterFidget {
    0% {
        text-shadow: 0 0 6px #7a0c07, 0 0 10px #5e0905;
        transform: skewX(0);
    }

    20% {
        text-shadow: -1px 0 #6b0a06, 1px 0 #5a0805;
        transform: skewX(2deg);
    }

    40% {
        text-shadow: 0 0 6px #7a0c07, 0 0 10px #5e0905;
        transform: skewX(0);
    }

    60% {
        text-shadow: 1px 0 #6b0a06, -1px 0 #5a0805;
        transform: skewX(-2deg);
    }

    80% {
        text-shadow: 0 0 6px #7a0c07, 0 0 10px #5e0905;
        transform: skewX(0);
    }
}

/*------------------------------------*/
/*-CURSOR-----------------------------*/
/*------------------------------------*/

* {
    cursor: none !important;
}

.point-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #6f0808;
    box-shadow: 0 0 10px 3px rgba(120, 0, 0, 0.45), 0 0 24px 8px rgba(70, 0, 0, 0.25);
    mix-blend-mode: screen;
    scale: 0.3;
    z-index: 9999;
    transition-property: transform, scale, opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
}

.custom-cursor--link {
    scale: 1;
}

.custom-cursor--init {
    opacity: 1;
}


/*------------------------------------*/
/*-TERMINAL---------------------------*/
/*------------------------------------*/
:root {
    --accent-primary: #ff4e42;
    --accent-secondary: #c2362f;
    --accent-tertiary: #ffb3ab;
    --panel-bg: rgba(30, 26, 24, 0.7);
    --panel-border: rgba(255, 78, 66, 0.3);
    --panel-highlight: rgba(255, 78, 66, 0.1);
}

.terminal-panel {
    left: 20px;
    bottom: 20px;
    width: 500px;
    height: 150px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    overflow: hidden;
    pointer-events: auto;
    z-index: 10;
    position: fixed;
    bottom: 20px;
    left: 20px;
    overflow: hidden;
    font-family: var(--font-mono);
    box-shadow: 0 0 0 1px rgba(255, 78, 66,0.08), 0 0 70px rgba(255, 78, 66,0.18), inset 0 0 140px rgba(0,0,0,0.9);
}

.scanlines {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}

.flicker {
    position: absolute;
    inset: 0;
    z-index: 31;
    pointer-events: none;
    background: rgba(53,255,122,0.02);
    animation: flick 4s steps(2) infinite;
}

@keyframes flick {
    0%, 96%, 100% {
        opacity: 0;
    }

    97% {
        opacity: 1;
    }
}

.terminal-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 29;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.75) 100%);
}

.terminal-header {
    padding: 0.5rem 0.625rem;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.875rem;
    color: var(--accent-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.lp-dot {
    width: 7px;
    height: 7px;
    display: inline-flex;
    border-radius: 50%;
    background: var(--color-main);
    box-shadow: 0 0 8px var(--color-main);
    animation: pulse-2 1.8s ease-in-out infinite;
}

@keyframes pulse-2 {
    50% {
        opacity: 0.3;
    }
}

.terminal-content {
    padding: 0.625rem;
    height: calc(100% - 31px);
    overflow-y: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.terminal-line {
    margin-bottom: 0.3125rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.command-line {
    color: white;
}

.regular-line {
    color: var(--text-highlight);
}

.typing {
    position: relative;
}

    .typing::after {
        content: "|";
        position: absolute;
        -webkit-animation: blink 1s infinite;
        animation: blink 1s infinite;
    }

@-webkit-keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.terminal-panel {
    max-width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
}

.terminal-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.terminal-line {
    white-space: pre-wrap;
}

@media (max-width: 600px) {
    .terminal-panel {
        left: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
        height: 130px;
    }
}

.terminal-panel {
    transform: translateY(calc(100% + 40px));
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    pointer-events: none;
}

    .terminal-panel.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .terminal-panel {
        transition: none;
    }
}

/*------------------------------------*/
/*-TITLE------------------------------*/
/*------------------------------------*/
.title-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: start;
    pointer-events: none;
    z-index: 100;
}

.title-frame {
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: end;
    background: rgba(10,18,16,.08);
    backdrop-filter: blur(2px);
    position: relative;
}

    .title-frame::before,
    .title-frame::after {
        content: "";
        position: absolute;
        inset: 16px;
        pointer-events: none;
    }

    .title-frame::after {
        inset: 28px;
        opacity: .35;
    }

    .title-frame h1 {
        margin: 0;
        font-family: 'Dominique', sans-serif;
        font-size: clamp(5rem, 10vw, 8rem);
        font-weight: 900;
        letter-spacing: .08em;
        color: rgb(232, 255, 238);
        -webkit-mask-image: url('/img/title-grunge-mask.webp');
        mask-image: url('/img/title-grunge-mask.webp');
        -webkit-mask-mode: luminance;
        mask-mode: luminance;
        -webkit-mask-position: 50% 50%;
        mask-position: 50% 50%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 120% 120%;
        mask-size: 120% 120%;
        animation: title-grunge 8s ease-in-out infinite;
        user-select: none;
        text-transform: uppercase;
        position: relative;
    }

@keyframes title-grunge {
    0% {
        -webkit-mask-position: 48% 50%;
        mask-position: 48% 50%;
    }

    25% {
        -webkit-mask-position: 52% 48%;
        mask-position: 52% 48%;
    }

    50% {
        -webkit-mask-position: 49% 53%;
        mask-position: 49% 53%;
    }

    75% {
        -webkit-mask-position: 53% 49%;
        mask-position: 53% 49%;
    }

    100% {
        -webkit-mask-position: 48% 50%;
        mask-position: 48% 50%;
    }
}

        .title-frame h1::first-letter {
            color: #7a0808;
            font-size: 1.2em;
        }      

.glass-button {
    text-transform: uppercase;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    position: relative;
    color: white !important;
    border-radius: 30px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.3);
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    cursor: pointer;
    line-height: 2.2;
    margin: 0;
    text-decoration: none;
    padding: 0.1em 1em;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}