/*@font-face {*/
/*    font-family: 'Sporttrop';*/
/*    src: url("../fonts/Sportrop.ttf") format("truetype");*/
/*}*/

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: 'Sportrop', Arial, sans-serif;
}

/* cursor: url('mouse/cross.cur'), auto; */


.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.background {
    display: block;
    position: fixed;
    opacity: 0.3;
    top: 0;
    left: 0.3%;
    width: 100%;
    height: 100%;
    transition: opacity 2s ease-in-out;
    z-index: -2;
}

.loading-text {
    font-family: 'Sportrop', Arial, sans-serif;
    color: rgba(227, 165, 208, 0.8);
    font-size: 1.5em;
}

/* Preloader animation with dots */
.loading-text .dot-1,
.loading-text .dot-2,
.loading-text .dot-3 {
    opacity: 0;
}

.introSinnersIIimage {
    display: block;
    z-index: 10;
    cursor: pointer;
    width: 5vw;
    height: auto;
    transition: opacity 3s ease; /* Smooth fade effect */
    animation: pulse 2s ease-in-out infinite;
}

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

.clickMeText {
    margin-top: 20px;
    font-size: 1.2em;
    color: rgba(227, 165, 208, 0.8);
    letter-spacing: 2px;
    text-align: center;
    transition: opacity 3s ease; /* Smooth fade effect */
    font-family: 'Sportrop', Arial, sans-serif;
}

.fade-out {
    opacity: 0;
}

.fade-out-soft {
  opacity: 0;
  transition: opacity 800ms ease;
}

.mute-button {
    position: fixed;
    top: 1.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.facebookImg {
    position: fixed;
    top: 4.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.instagramImg {
    position: fixed;
    top: 7.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.emailImg {
    position: fixed;
    top: 10.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.synethriaImg {
    position: fixed;
    top: 13.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.yoryosstylImg {
    position: fixed;
    top: 16.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

.homeImg {
    position: fixed;
    top: 19.25em; /* 20px ≈ 1.25em for base font size of 16px */
    right: 1.25em; /* 20px ≈ 1.25em */
    width: 2.125em; /* 50px ≈ 3.125em */
    height: 2.125em; /* 50px ≈ 3.125em */
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 1000;
}

/* Hover over buttons shade */
.mute-button.hover, .facebookImg.hover, .instagramImg.hover, .emailImg.hover, .synethriaImg.hover, .yoryosstylImg.hover, .homeImg.hover    {
    border-radius: 15px;
    box-shadow: 0 0 2vw rgba(63, 0, 165, 0.3);
}

/* Lightbox styles */
.lightbox {
    display: flex; /* Changed from 'none' to always be flex */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 1000;
    opacity: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Make it unclickable when hidden */
    transition: all 1s ease; /* Add transition */
}

.lightbox.show {
    opacity: 1;
    pointer-events: auto; /* Make it clickable when visible */
}

.lightbox-content {
    position: relative;
    width: 80%;
    max-width: 800px;
    min-height: 400px;
    height: 80vh;
    margin: 2.0vw auto;
    padding: 1vw;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url("pics/infinityBackground.png");
    background-size: auto;
    background-position: center;
    border-radius: 1vw;
    border: 0.01vw solid rgba(255, 0, 255, 0.3);
    color: rgba(63, 0, 165, 0.5);
    box-shadow: 0 0 2vw rgba(63, 0, 165, 0.3);
    z-index: 1001;
    overflow: auto;
    transform: scale(0.95); /* Start slightly smaller */
    opacity: 0; /* Start transparent */
    transition: all 1s ease; /* Add transition */
}

.lightbox.show .lightbox-content {
    transform: scale(1); /* Scale to full size when shown */
    opacity: 1; /* Become fully visible */
}

.timed-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sportrop', Arial, sans-serif;
    color: rgba(227, 165, 208, 0.8);
    filter: drop-shadow(0 0.1vw 0.7vw rgba(255,255,255,0.8));
    font-size: 1.2em;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1001;
    pointer-events: none;
    letter-spacing: 2px;
    width: 80%;
    max-width: 800px;
}

.timed-text.visible {
    opacity: 1;
}

.timed-text.invisible {
    opacity: 0;
}

.matrix-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: -1; /* Place behind other interactive elements */
}

.matrix-column {
    position: absolute;
    top: -20px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 1s;  /* Adjust for different fade in/out speed */
}

.matrix-cell {
    width: 20px;      /* Adjust for character spacing */
    height: 20px;     /* Adjust for line height */
    text-align: center;
    filter: drop-shadow(0 0.1vw 0.7vw rgba(255,255,255,0.8));
    color: #d0d0d0;   /* Color of random characters - can be changed */
    font-size: 16px;  /* Adjust for text size */
    transition: color 0.3s;  /* Adjust for color transition speed */
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Progress bar indicator */
.progressBar {
  display: none;
  height: 0.3vw;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #f0f0f0;
  transition: opacity 1s ease-in-out;
}

.progressBar.invisible {
    opacity: 0;
}

#progress {
  height: 100%;
  width: 0%;
  transition: width 100ms linear;
  background: linear-gradient(to right, #FF00FF, #D8A5D8);
}

/* Red Blue orbs */
.orb, .new-orbs {
    width: 7vw;
    height: 7vw;
    position: absolute;
    filter: drop-shadow(0 1vw 1.3vw rgba(0,0,0,0.5));
    transform: scale(0);
    opacity: 0;
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    cursor: pointer;
    }

.orb img, .new-orbs img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.orb.show, .new-orbs.show {
  opacity: 1;
  transform: translateX(var(--x)) scale(1);
}

.orb.expand, .new-orbs.expand {
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      width: 200vw;
      height: 200vw;
      opacity: 0;
    }

.orb.fade-out, .new-orbs.fade-out, .evolar.fade-out {
      opacity: 0;
      transition: opacity 300ms ease;
    }

.blueOrbExitText {
    display: none;
    margin-top: 20px;
    font-size: 1.2em;
    color: rgba(227, 165, 208, 0.8);
    letter-spacing: 2px;
    text-align: center;
    transition: opacity 2s ease; /* Smooth fade effect */
    font-family: 'Sportrop', Arial, sans-serif;
}

.fade-in {
  opacity: 1;
  transition: opacity 300ms ease;
}

.fade-in-2secs {
  opacity: 0.1;
  transition: opacity 2000ms ease-in-out;
}
    
/* Gods */
.evolar, .nexus, .equilibris, .claritas {
    width: 10vw;
    height: 10vw;
    position: absolute;
    /*filter: drop-shadow(0 1vw 1.3vw rgba(0,0,0,0.5));*/
    filter: drop-shadow(0 0.1vw 0.7vw rgba(255,255,255,0.8));
    transform: scale(0);
    opacity: 0;
    transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

.evolar img, .nexus img, .equilibris img, .claritas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evolar.show, .nexus.show, .equilibris.show, .claritas.show {
  opacity: 1;
  transform: translateX(var(--x)) scale(1);
}

/* Synethria's rooms */
.synethriaRoomTitle {
    display: none;
    position: absolute;
    top: 10%;
    font-size: 1.8em;
    color: rgba(63, 0, 165, 0.5);
    /*color: rgba(227, 165, 208, 0.8);*/
    letter-spacing: 0.1vw;
    text-align: center;
    transition: opacity 2s ease-in;  /* Keep transition on opacity only */
    font-family: 'Sportrop', Arial, sans-serif;
    filter: drop-shadow(0 0.1vw 0.3vw rgba(255,255,255,0.8));
    opacity: 0;
    z-index: 100;
}

.godsTitles {
    /*display: none;*/
    position: relative;
    /*top: 10%;*/
    width: 100%; /* Add this to ensure the text container spans the full width */
    margin-top: 1vw; /* Add some space between image and text */
    font-size: 1.0em;
    color: rgba(63, 0, 165, 0.5);
    /*color: rgba(227, 165, 208, 0.8);*/
    letter-spacing: 0.1vw;
    text-align: center;
    transition: opacity 2s ease-in;  /* Keep transition on opacity only */
    font-family: 'Sportrop', Arial, sans-serif;
    filter: drop-shadow(0 0.1vw 0.3vw rgba(255,255,255,0.8));
    opacity: 0;
    z-index: 100;
}

.synethriaRoomTitle.visible, .godsTitles.visible {
    opacity: 1;
}

.godsTimed-text {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Sportrop', Arial, sans-serif;
    /*color: rgba(227, 165, 208, 0.8);*/
    color: rgba(63, 0, 165, 0.5);
    filter: drop-shadow(0 0.1vw 0.3vw rgba(255,255,255,0.8));
    font-size: 1.2em;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 1001;
    pointer-events: none;
    letter-spacing: 2px;
    width: 80%;
    max-width: 800px;
}

.godsTimed-text.visible {
    opacity: 1;
}

.godsTimed-text.invisible {
    opacity: 0;
}

/* Lightbox Elements */
.socialElementsDiv {
    display: flex;
    gap: 1.5em; /* Adjust spacing between elements */
}

.facebookImgEnd, .instagramImgEnd {
    position: relative;
    display: none;
    opacity: 0;
    top: 2em;
    left: 1em;
    width: 2.125em;
    height: 2.125em;
    cursor: pointer;
    z-index: 1000;
}

.facebookImgEnd.show, .instagramImgEnd.show {
    display: block;
    opacity: 1;
}