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

:root {
    --logo-text-color: #f6e9fe;
    --overall-text-color: #f6e9fe;
    --loader-dot-color: #A51FF6;
    --bg: #171922;
}

::selection {
    background-color: rgba(226, 14, 14, 0.687);
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: block;
}

body {
    background-color: var(--bg);
    overflow: hidden; /* Prevent scrolling */
}

.lookContainer {
    position: absolute;
    display: block;
    user-select: none;
    width: 100vw;
    height: 100vh;
    z-index: 998;
}

.bgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/Fun-Mayhem_Brain_eyless.svg');
    background-size: 200%; /* Scale the image to 200% */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    filter: blur(1vw) saturate(0) opacity(0.5);
    z-index: -1; /* Ensure it stays behind other content */
}

.ofContainer {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.iconLogoContainer {
    position: relative;
    width: 20%;
    max-width: 500px;
    left: 40vw;
    top: 30vh;
    z-index: 999;
    transform-origin: center center;
    -webkit-animation: bounce-in-bck 1.1s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
            animation: bounce-in-bck 1.1s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
}

.eye {
    position: absolute;
    border-radius: 41%;
    height: 15%;
    width: 14%;
    left: 28%;
    top: 31%;
    z-index: 999;
    background: transparent;
    transform-style: preserve-3d;
}

.eyeball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 35%;
    z-index: 999;
    background: #020442;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: none;
}

.textLogoContainer {
    position: absolute;
    display: block;
    width: 30%;
    max-width: 500px;
    left: 5vw;
    top: 50vh;
    z-index: 1;
}

#textLogo {
    shape-rendering: crispEdges;
}

#textLogoAND,
#textLogoFUN,
#textLogoMAYHEM {
    fill: transparent;
    animation: animate-stroke 3s ease-in-out 1 alternate forwards;
}

#textLogoVFXINC {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 10px;
    animation: animate-fade-in 2s 1 alternate forwards;
}

#textLogoAND {
    font-size: 65px;
}

#textLogoAND,
#textLogoFUN,
#textLogoMAYHEM {
    font-family: "Luckiest Guy";
}

#textLogoFUN {
    font-size: 64px;
}

#textLogoMAYHEM {
    font-size: 47px;
}

.brain-image {
    width: 100%;
    height: auto;
    transform-origin: center center;
}
.jiggle {
    -webkit-animation: jiggle 0.9s cubic-bezier(0.445, 0.050, 0.550, 0.950) both;
        animation: jiggle 0.9s cubic-bezier(0.445, 0.050, 0.550, 0.950) both;
}

/* @keyframes jiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
} */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes jiggle {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  @keyframes jiggle {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
              transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
              transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
              transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
              transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
              transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }  

@keyframes animate-stroke {
    0% {
        fill: transparent;
        stroke: var(--logo-text-color);
        stroke-width: 0.15;
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 20%;
    }
    50% {
        fill: transparent;
        stroke: var(--logo-text-color);
        stroke-width: .8;
    }
    80% {
        fill: var(--logo-text-color);
        stroke: transparent;
        stroke-width: 0.1;
        stroke-dashoffset: -25%;
        stroke-dasharray: 32% 0;
    }
    100% {
        fill: var(--logo-text-color);
        stroke: transparent;
        stroke-width: 0;
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
    }
}

@keyframes animate-fade-in {
    0%, 60% {
        fill: transparent;
        opacity: 0;
    }
    100% {
        fill: var(--logo-text-color);
        opacity: 1;
    }
}

@-webkit-keyframes bounce-in-bck {
    0% {
        -webkit-transform: scale(7);
                transform: scale(7);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(1.24);
                transform: scale(1.24);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(1.04);
                transform: scale(1.04);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-bck {
    0% {
        -webkit-transform: scale(7);
                transform: scale(7);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(1.5);
                transform: scale(1.5);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(1.24);
                transform: scale(1.24);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(1.04);
                transform: scale(1.04);
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}