@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,600&display=swap');


/*
 ========== ================ ========== 
 ========== STATIC CSS RULES ========== 
 ========== ================ ========== 
*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.menu {
  display: flex;
  justify-content: center;
  flex-flow: column;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

.flexbox-main {
  display: flex;
}

.flexbox-tools,
.flexbox-resources,
.flexbox-options {
  display: none;
}

ul {
  position: relative;
  left: 4.94vw;
}

li {
  width: -moz-fit-content;
  width: fit-content;
  list-style: none;
  line-height: 1.8;
  transform: scale(1, 0.96);
}

a {
  font-family: 'Rubik', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 3.35vh;
  font-style: italic;
  color: #B9B0AB;
  -webkit-text-stroke: 0.0724vh #B9B0AB;
}


/*
 ========== ======================== ========== 
 ========== TEXT ANIMATION CSS RULES ========== 
 ========== ======================== ========== 
*/

/* 
This block styles the pseudo-element created for each span. 
The pseudo-element's content is set to the value of the 'data-char' attribute of the span.
The text stroke is applied to this pseudo-element, which is positioned absolutely behind the original text.
This creates the effect of a text stroke that is layered below other text styles.
*/

span::before {
  content: attr(data-char);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 0.45vh black;
}

/* 
This block applies a hover effect to list items and their child anchor elements.
When a list item is hovered, focused, or selected, an animation is applied to the list item and a color change is applied to the anchor element within it.
This method ensures that all effects are applied at the same time.
*/

li:hover,
li:focus,
li:focus-within,
li.selected {
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-animation: zoomzoom 0.5s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
  animation: zoomzoom 0.5s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes zoomzoom {
  from {transform: scale(1.256);}
  to {transform: scale(1.184);}
}

li:hover a,
li:focus a,
li:focus-within a,
li.selected a {
  color: #E1DEDD;
  -webkit-text-stroke: 0.065vh #E1DEDD;
}


/*
 ========== ========================== ========== 
 ========== SCREEN ANIMATION CSS RULES ========== 
 ========== ========================== ========== 
*/

.loading-screen {
  background-image: url(./resources/media/titlebg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  max-width: 140%;
  max-height: 140%;
  -webkit-animation-duration: 6.5s;
  animation-duration: 6.5s;
  -webkit-animation-name: fadeInOut_loading-screen;
  animation-name: fadeInOut_loading-screen;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInOut_loading-screen {
  0% {opacity: 0;}
  60% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes fadeInOut_loading-screen {
  0% {opacity: 0;}
  60% {opacity: 1;}
  100% {opacity: 0;}
}

.background {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
  -webkit-animation-duration: 3.27s;
  animation-duration: 3.27s;
  -webkit-animation-name: fadeIn_background;
  animation-name: fadeIn_background;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /*z-index: -1;*/
}
@-webkit-keyframes fadeIn_background {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn_background {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.iframe-container {
  pointer-events: none;
  box-sizing: border-box;
  height: 66.667vw;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  width: 177.77777778vh;
}

iframe {
  /* Extend it beyond the viewport... */
  width: 300%;
  height: 100%;
  /* ...and bring it back again */
  margin-left: -100%;
}

.image-background {
  display: none;
  background-image: url(./resources/media/bg-cycore-01x.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  max-width: 140vw;
  max-height: 140%;
  z-index: 0;
}

.blinds {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-animation-delay: 5.0s;
  animation-delay: 5.0s;
  -webkit-animation-duration: 2.67s;
  animation-duration: 2.67s;
  -webkit-animation-name: fadeIn_blinds;
  animation-name: fadeIn_blinds;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 100vw;
  min-width: 100%;
  height: 100%;
  min-height: 580px;
  background-image: url(./resources/media/blinds2.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
@-webkit-keyframes fadeIn_blinds {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn_blinds {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.menu-container {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
  -webkit-animation-duration: 2.67s;
  animation-duration: 2.67s;
  -webkit-animation-name: fadeIn_menu-container;
  animation-name: fadeIn_menu-container;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
@-webkit-keyframes fadeIn_menu-container {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn_menu-container {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.vignette {
  background: radial-gradient(circle at 50% 50%, transparent, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 100%);
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 50vh;
  padding-bottom: 50vh;
  -webkit-animation-duration: 6.5s;
  animation-duration: 6.5s;
  -webkit-animation-name: fadeIn_vignette;
  animation-name: fadeIn_vignette;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  max-width: 100vw;
  min-width: 80%;
  max-height: auto;
  z-index: 2;
}
@-webkit-keyframes fadeIn_vignette {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn_vignette {
  0% {opacity: 0;}
  100% {opacity: 1;}
}