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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: lightblue; /*#e9e9e9;*/
    color: white;
  overflow: hidden;
  overflow-y: hidden;
    }

img {
    max-width: 100%;
    display: block;
    }

@view-transition {
  navigation: auto;
}


.splash {
  background: #000;
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: min(720px, 85vw);
}

.g-logo img{
  transform:translateY(115px);
}

.g-logo {
  z-index: 2;
  animation: hide 3.8s linear 0s both, 
             crash2 .8s linear 3.8s forwards;
}

@keyframes hide {
   0% {opacity:0;}
 100% {opacity:0;}
}

@keyframes crash2 {
   0% {
      transform: translateY(-1500px) rotate(-45deg) scale(15); opacity:1;}
  75% {
      transform: translateY(0px) rotate(-3deg) scale(.9); opacity:1;}
  80% {
      transform: translateY(0px) rotate(2deg) scale(1); opacity:1;}
  85% {
      transform: translateY(0px) rotate(-1deg) scale(1.1); opacity:1;}
  90% {
      transform: translateY(0px) rotate(1deg) scale(1); opacity:1;}
 100% {
      transform: translateY(0) rotate(0deg); opacity:1;}
}


/*
@keyframes crash2 {
   0% {
      transform: translateY(-1500px) rotate(-45deg) scale(15); opacity:1;}
  65% {
      transform: translateY(0) rotate(-15deg) scale(1); opacity:1;}
  70% {
      transform: translateY(-30px) rotate(20deg) scale(1.2); opacity:1;}
  75% {
      transform: translateY(-60px) rotate(-10deg) scale(1); opacity:1;}
  85% {
      transform: translateY(-20px) rotate(5deg) scale(1.2); opacity:1;}
 100% {
      transform: translateY(0) rotate(0deg); opacity:1;}
}

@keyframes crash {
   0% {
      transform: translateY(-1500px) rotate(-45deg) scale(15); opacity:1;}
  75% {
      transform: translateY(0) rotate(-15deg) scale(1); opacity:1;}
  80% {
      transform: translateY(-20px) rotate(10deg) scale(1.5); opacity:1;}
  90% {
      transform: translateY(-50px) rotate(-5deg); opacity:1;}
 100% {
      transform: translateY(0) rotate(0deg); opacity:1;}
}
*/

.word-container {
  display: flex;
  gap: 30px;
  transform:translateY(100px);
}

.word {
  font-size: 42px;
  font-weight: 900;
  color: white;
  opacity: 0;
  transform: translateY(80px) scale(0.8);
  animation: reveal 3.2s ease forwards;
  animation-delay: var(--delay);
  text-shadow:
    0 0 10px rgba(255,255,255,0.8), 
    0 0 25px rgba(255,255,255,0.5),
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.8);
    filter: blur(10px);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.mascot {
  position: relative;
  z-index:10;
  animation: hide 4.6s linear 0s both, 
             crash2 .8s linear 4.8s forwards;
}

.mascot img {
  width: 250px;
  transform:translateY(60px);
}

.taunt {
  position: absolute;
  top:120px;
  left:-10px;
  transform: translateY(80px) scale(0.8);
  animation: hide 5s ease-out 0s both, 
             reveal 6s ease-out 5.7s forwards;
}

.taunt h5 {
  font-size: 16px;
  color: white;
}

.taunt::after {
  content: "";
  position: absolute;
  right: -35%;
  top: -5%;
  width: 1px;
  height: 20px;
  background-color: white;
  transform: rotate(70deg);
  transform-origin: top;
}


.transition {
    background: linear-gradient(to bottom, #000000, #e9e9e9);
    width: 100%;
    min-height: 50vh; 
}


/* ================================================================= */

/*                             MOBILE                                */

/* ================================================================= */



@media (max-width: 600px) {

.logo {
  width: min(720px, 98vw);
  }

.g-logo img{
  transform:translateY(105px);
  }

.word-container {
  display: flex;
  gap: 10px;
  transform:translateY(100px);
  }

.word {
  font-size: 21px;
  }

.mascot img {
  width: 180px;
  }

.taunt::after {
  height: 20px;
  }

.taunt {
  top:110px;
  left:-35px;
  }

.taunt h5 {
  font-weight: 300;
  }

}