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

html, body {
  width: 100%;
  /* overflow: hidden;  ← REMOVE OR COMMENT THIS LINE */
  overflow-x: hidden;   /* Keep horizontal scroll hidden */
  overflow-y: auto;     /* Enable vertical scrolling */
  background: black;
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: normal;
  min-height: 700vh;    /* Enables scroll to 600vh+ */
  margin: 0;
  padding: 0;
}

#psp-canvas {
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

    opacity: 0.5;
    mix-blend-mode: overlay;
    z-index: -9;
}

#TitleDiv {
    z-index: 50;
    height: 100vh;
    width: 100vw;
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
}

#TitleDiv-TitleArea {
    color: white;
    z-index: 100;
    position: absolute;
    top: 40vh;
    left: 20vw;
    user-select: none;
}

.textTitle-nyxef {
    font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 6.2em;
}
.textTitle-psp {
    font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5.7em;
}
.textTitle-catch {
    font-size: 3em;
}

/* Animation keyframes for slide-up + fade-in */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base animation class - hidden initially */
.animate-on-load {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  /* cubic-bezier provides a nice ease-out effect */
}

/* Staggered delays for sequencing */
.animate-title {
  animation-delay: 0.3s; /* Start title after slight pause */
}

.animate-subtext {
  animation-delay: 0.9s; /* Start subtext after title finishes */
}

.HeroSection, .FinalSection {
  /* Base styles - JS will toggle .active class */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  text-align: center;
  padding: 2rem;
  /* Don't set position/opacity here - JS handles it */
}

/* Optional: style your content inside sections */
.HeroSection h2, .FinalSection h2 {
  font-family: "Anton SC", sans-serif;
  font-size: 4rem;
  margin-bottom: 1rem;
}