/* 
  FridayMerge - Mysterious Interactive Visuals 
*/

:root {
    --bg-color: #050508;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    pointer-events: none;
    user-select: none;

    /* Mix-blend-mode makes the text "absorb" the background colors */
    mix-blend-mode: overlay;

    /* New complex animation: Fade in bright, then dim down to be lit by the spheres */
    animation: fadeAndDim 5s ease-in-out forwards;
    opacity: 0;
}

.logo-text {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 200;
    letter-spacing: 0.2em;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
}

.subtitle {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 0.5em;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.8;
}

.corner-logo {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 20;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.corner-logo:hover {
    opacity: 1;
}

.fm-icon {
    width: 75px;
    height: auto;
    mix-blend-mode: overlay;
    transition: filter 0.3s ease;
}

@keyframes fadeAndDim {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
        filter: blur(10px);
    }

    /* Peak brightness (fully visible) */
    40% {
        opacity: 1;
        transform: translate(-50%, -50%);
        filter: blur(0px);
    }

    /* Holds peak brightness for a moment */
    60% {
        opacity: 1;
    }

    /* Dims down to heavily rely on the canvas spheres for lighting */
    100% {
        opacity: 0.2;
        /* Dims so that the blend-mode lighting is more dramatic */
        transform: translate(-50%, -50%);
        filter: blur(0px);
    }
}