@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

body { padding: 0; margin: 0 }

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

#storytelling-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1000;
}

#parallax-background {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  transform: translate(var(--mouse-x), var(--mouse-y)) scale(1.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 0;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0.7;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-in-out;
  z-index: 2;
}

.slide.active {
  opacity: 1;
  transform: translateY(0);
}

.slide-content {
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
  color: white;
}

.slide-title {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.05rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out 0.2s;
  margin: 0;
}

#slide-1 .slide-title,
#slide-2 .slide-title,
#slide-3 .slide-title {
  font-size: clamp(1.5rem, 4vw, 2.625rem);
}

#slide-4 .slide-title {
  font-size: clamp(2.5rem, 8vw, 9.375rem);
  line-height: 0.9;
  font-weight: normal;
  position: relative;
  display: inline-block;
  z-index: 1;
}

#slide-4 .slide-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 160%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.7) 0%,    /* slightly darker center */
    rgba(0, 0, 0, 0.3) 35%,  /* gentle fade outward */
    rgba(107, 97, 97, 0.1) 60%,   /* soft transition */
    rgba(0, 0, 0, 0) 100%     /* fully transparent edge */
  );
  pointer-events: none;
  z-index: -1;
  filter: blur(8px); /* gives that smooth soft-shadow look */
}

#loading-title {
  font-family: 'Arial', sans-serif;
  font-size: clamp(2.5rem, 8vw, 9.375rem);
  font-weight: normal;
  line-height: 0.9;
  color: white;
  text-align: center;
  margin: 0 0 3rem 0;
}

@media (min-width: 1440px) and (min-height: 900px) {
  .slide-content {
    max-width: 1000px;
    padding: 0 40px;
  }
  
  #slide-1 .slide-title,
  #slide-2 .slide-title,
  #slide-3 .slide-title {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.1;
  }
  
  #slide-4 .slide-title {
    font-size: clamp(4rem, 7vw, 12rem);
    line-height: 0.85;
  }
  
  #slide-4 .slide-title::before {
    width: 150%;
    height: 170%;
  }
  
  #loading-title {
    font-size: clamp(4rem, 7vw, 12rem);
    line-height: 0.85;
    margin-bottom: 4rem;
  }
}

@media (min-width: 2560px) and (min-height: 1440px) {
  .slide-content {
    max-width: 1400px;
    padding: 0 60px;
  }
  
  #slide-1 .slide-title,
  #slide-2 .slide-title,
  #slide-3 .slide-title {
    font-size: clamp(2.5rem, 3vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
  }
  
  #slide-4 .slide-title {
    font-size: clamp(6rem, 6vw, 15rem);
    line-height: 0.8;
    letter-spacing: 0.01em;
  }
  
  #slide-4 .slide-title::before {
    width: 160%;
    height: 180%;
  }
  
  #loading-title {
    font-size: clamp(6rem, 6vw, 15rem);
    line-height: 0.8;
    margin-bottom: 5rem;
    letter-spacing: 0.01em;
  }
}

.slide.active .slide-title {
  opacity: 1;
  transform: translateY(0);
}

.slide-text {
  font-family: 'Arial', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in-out 0.4s;
}

.slide.active .slide-text {
  opacity: 1;
  transform: translateY(0);
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-family: 'Arial', sans-serif;
  font-size: 0.9rem;
  opacity: 0.8;
  z-index: 3;
  transition: opacity 0.5s ease-in-out;
}

.scroll-indicator span {
  display: block;
  margin-top: 8px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
  margin: 0 auto;
  animation: bounce 2s infinite;
}

.scroll-arrow.up {
  transform: rotate(-135deg);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(-10px);
  }
  60% {
    transform: rotate(45deg) translateY(-5px);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  font-size: 5px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  margin: 0 auto 2rem;
  display: inline-block;
  background: transparent;
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

@keyframes dotPulse1 {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

@keyframes dotPulse2 {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

@keyframes dotPulse3 {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.dot-1 {
  animation: dotPulse1 1.5s infinite;
  animation-delay: 0s;
}

.dot-2 {
  animation: dotPulse2 1.5s infinite;
  animation-delay: 0.3s;
}

.dot-3 {
  animation: dotPulse3 1.5s infinite;
  animation-delay: 0.6s;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (max-width: 768px) {
  .slide-content {
    padding: 0 15px;
    max-width: 90%;
  }
  
  #slide-1 .slide-title,
  #slide-2 .slide-title {
    font-size: clamp(1.25rem, 5vw, 2rem);
    line-height: 1.2;
  }
  
  #slide-3 .slide-title {
    font-size: clamp(1.5rem, 6vw, 3rem);
    line-height: 1.2;
  }
  
  #loading-title {
    font-size: clamp(2rem, 12vw, 6rem);
    line-height: 0.9;
    margin-bottom: 2rem;
  }
  
  .scroll-indicator {
    bottom: 20px;
    font-size: 0.8rem;
  }
  
  .scroll-arrow {
    width: 16px;
    height: 16px;
  }
  
  /* Enter button responsive sizing */
  #slide3-enter-button {
    padding: 18px 50px !important;
    font-size: 1.1rem !important;
    min-width: 120px !important;
  }
}

@media (max-width: 480px) {
  .slide-content {
    padding: 0 10px;
    max-width: 95%;
  }
  
  #slide-1 .slide-title,
  #slide-2 .slide-title {
    font-size: clamp(1rem, 6vw, 1.5rem);
    line-height: 1.3;
  }
  
  #slide-3 .slide-title {
    font-size: clamp(1.25rem, 8vw, 2.5rem);
    line-height: 1.3;
  }
  
  #loading-title {
    font-size: clamp(1.5rem, 15vw, 4rem);
    line-height: 0.95;
    margin-bottom: 1.5rem;
  }
  
  /* Enter button responsive sizing for small screens */
  #slide3-enter-button {
    padding: 16px 40px !important;
    font-size: 1rem !important;
    min-width: 100px !important;
  }
}

#unity-container {
  position: absolute;
  width: 100%;
  height: 100%;
  outline: none !important;
  border: none !important;
}

#unity-container.unity-desktop {
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: none;
}

#unity-container.unity-mobile {
  position: fixed; 
  width: 100%; 
  height: 100% 
}

#unity-canvas {
  background: #231F20; 
  width: 100% !important;
  height: 100% !important;
  outline: none !important;
  border: none !important;
}

.unity-mobile #unity-canvas {
  width: 100%; 
  height: 100%;
  outline: none !important;
  border: none !important;
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

.slide3-header .back-home-btn:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.slide3-header .back-home-btn:hover img {
  transform: scale(1.1);
}

.slide3-header .action-icon:hover {
  transform: translateY(-1px);
}

.slide3-header .action-icon:hover img {
  transform: scale(1.1);
}

/* Removed fixed mobile breakpoints - now using responsive clamp() values in inline styles */