html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.nav-back-container {
  position: fixed; /* Always stays in view */
  top: 30px;
  left: 30px;
  z-index: 9999; /* Stays on top of everything */
}

.nav-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.6);
  border: 3px solid #fff;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.nav-arrow {
  width: 25px;
  transform: rotate(180deg); /* Flips arrow to point left */
  filter: brightness(0) invert(1); /* Makes arrow white */
}

.nav-back-button:hover {
  background: #ff0000; /* Pokémon Red */
  transform: scale(1.1);
}

.nav-text {
  position: absolute;
  bottom: -22px;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: white;
  text-shadow: 2px 2px #000;
}
/* 1. Unlock the main window */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden; /* Prevent the leaf-shake wobble */
  overflow-y: visible !important; /* MUST be visible for Lenis to 'see' the height */
  margin: 0;
  padding: 0;
}

/* 2. Fix the Background */
body {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
              url('../images/Cartoon_green_texture_grass.jpg');
  background-repeat: repeat;
  background-size: 30vh;
  background-attachment: fixed;
}
.content {
 max-height: fit-content

}
main {
  min-height: 200vh; 
}
/*PARTICLES*/
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Allows you to click links behind the leaves */
  z-index: 1; 
  
  /* THE FIXES */
  overflow: hidden;      /* Prevents leaves from expanding the page width */
  contain: strict;       /* Optimization: tells browser not to worry about layout changes inside here */
}

.leaf {
  position: absolute;
  top: -20px;
  border-radius: 2px 10px; /* Leaf shape */
  opacity: 0.8;
  animation: fall-and-sway linear infinite;
}

@keyframes fall-and-sway {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
  }
  25% {
    transform: translateY(25vh) rotate(45deg) translateX(30px);
  }
  50% {
    transform: translateY(50vh) rotate(90deg) translateX(-30px);
  }
  75% {
    transform: translateY(75vh) rotate(135deg) translateX(30px);
  }
  100% {
    transform: translateY(110vh) rotate(180deg) translateX(0);
  }
}
/*START*/
.intropoke {
  padding: 0%;
  scale: .8;
  margin-left: 23%;
  margin-right: 30%;
  transform: translateY(50%);
}
/*carousel*/
.MagicScroll {
  transform: translateX(50%) translateY(70%);
  z-index: 1;
  position: relative;
}

.scrollcontainer {
  width: 50%;
  
}

#pokeball2 {
  z-index: 1000 !important;
  position: relative;
}

.MagicScroll a {
  color: rgba(0, 0, 0, 0) !important;
  position: relative;
}

.ball-link {
    z-index: 100000 !important;
    
}
.MagicScroll a:hover {
  text-decoration: none;
}

/* The Glow Effect (Pulsing) */
@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(255, 123, 0, 0.76); }
  50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(250, 212, 2, 0.885); }
  100% { box-shadow: 0 0 5px rgba(255, 123, 0, 0.76); }
}

/* The Wiggle Effect (Shaking) */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(7deg); }
  50% { transform: rotate(-7deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* Apply to the images */
.ball-link img {
  transition: transform 0.2s ease-in-out;
  /* Ensure the glow doesn't get cut off by the border-radius */
  border-radius: 60% !important; 
  animation: wiggle 0.5s ease-in-out infinite, glow 1.5s infinite;
}

/* Trigger on Hover */
.ball-link:hover img {
 transform: scale(1.2);
  cursor: pointer;
}


/* This targets the library's generated wrapper */
.mcs-item {
    overflow: visible !important;
}

/* This targets your internal link wrapper */
.scrollcontainer div {
    overflow: visible !important;
}

.ball-link {
    display: inline-block;
    padding: 20px; /* Gives the glow 20px of space on all sides */
    border-radius: 50%; /* Matches the ball shape */
    overflow: visible !important; /* Forces the container to show what's outside it */
}
/* Lightbox Container */
.lightbox {
  display: none; /* Secretly hidden */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Dimmed background */
  overflow-y: auto !important; /* Enables vertical scrolling */
    max-height: 100vh;           /* Ensures it doesn't go off-screen */
    -webkit-overflow-scrolling: touch; /* Makes scrolling smooth on iPhone */
}

/* Show the lightbox when the ID is targeted (#img1) */
.lightbox:target {
  display: flex;
  justify-content: center;
  align-items: center;
}
.youtube-container {
     width: 100%;
  height: 100%;
}

#youtube-player{
    transform: translateY(-30vh);
   scale:.7;
}
/* Close Button and Overlay */
.close-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  text-decoration: none;
}


/*text*/
.textbox-containermain h1{
  padding: 10px ;
  line-height: 1.5;
  font-family: 'Press Start 2P', static;
  font-size: .7em;
  text-align: center;
 
}
.textbox-containermain {
  background-color: aliceblue;
  min-height: 30vh;
  width: 90vw;
  margin-left: 19%;
  margin-top: -35%;
}

.ultraball {
  transform: translateY(20%);
}

/*section2*/
.section2 {
  
  transform: translateY(70vh);
  padding-bottom: 50vh;
}
/*TYPING START*/
.gotcha {
  display: inline-block;
  padding: 15px;
  border: 4px rgba(255, 255, 255, 0);   /* Outer Blue */
  outline: 4px solid #000000;  /* Inner Yellow */
  outline-offset: -8px;       /* Moves the yellow inside the blue */
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 25px;
}
.gotcha-text{
  /* 2. The Typing Setup */
  overflow: hidden; /* Ensures the text is hidden until typed */
  border-right: .15em solid #FFCB05; /* The blinking cursor */
  white-space: nowrap; /* Keeps the text on one line */
  margin: 0 auto; 
  letter-spacing: .15em; 
  
  /* 3. The Animations */
  /* 'typing' expands the width, 'blink' makes the cursor flash */
  animation: 
    typing 3s steps(30, end) infinite alternate, 
    blink-caret .75s step-end infinite;
}

/* The Typing Logic */
@keyframes typing {
  0% { width: 0 }
  60% { width: 100% } /* Pause slightly at the end before deleting */
  100% { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #000000; }
}
.gotcha h1 {
  font-family: 'Press Start 2P', static;
  font-size: 2em;
    color: #ffffff; /* Pokemon Yellow */
    
    /* The first number is thickness, the second is color */
    -webkit-text-stroke: 1.2px #000000; /* Pokemon Blue */
    
    /* This is a fallback for older browsers */
    text-stroke: 3px #3C5AA6;
}
/*ARROW START*/
.arrow {
  margin-left: 34%;

/* Applying the combined animation */
animation: 
        bounce-up-down 1s ease-in-out infinite alternate,
        pulse-glow 0.5s ease-in-out infinite alternate; 
}

@keyframes bounce-up-down {
    0% {
        transform: translateY(-80vh);
       
    }
    100% {
        transform: translateY(-100vh);
    }
}

@keyframes pulse-glow {
    from { filter: drop-shadow(0 0 10px #FFCB05); }
    to { filter: drop-shadow(0 0 50px #ffb805); }
}
/*POKEBALL GOTCHA START*/
.reveal-ball-container {
  padding-top: 40vh;
  transform: translateX(1vw);
  height:100vh;
}
.reveal-ball1{
  scale: 2;
  margin-left: 60%;
  transform: translateY(0vh);
}
.reveal-ball{
  animation: 
        wiggle 0.5s ease-in-out infinite, 
        pulse-glow 0.5s ease-in-out infinite alternate;
}
#ballreveal {
    /* Gives the section breathing room so it doesn't look like it's 
     hitting a wall at the top of the browser */
  scroll-margin-top: 50px; 
  overflow: visible; 
  min-height: 120vh;
  /* Ensure the section is tall enough to allow a full scroll animation */
  min-height: 100vh; 
  will-change: transform; /* Optimization for smooth browser rendering */
}

@media only screen and (max-width: 768px) {
  .nav-back-button {
    scale: .8;
    margin-top: -20px;
    margin-left: -20px;
  }
  .intropoke{
    scale: .3;
    transform: translateX(-105vw);
    margin-bottom: -100%;
  }
  .ball-link {
    scale: 70%;
  }

.scrollcontainer {
  width: 50%;
  
}
.MagicScroll {
  width: 200%;
  transform: translateX(0) translateY(100%);
}
#pokeball2 {
  scale: 80%;

}
.youtube-container {
  scale:60%;
}
.gotcha {
  scale: .33;
  transform: translateX(-100%);
}
.arrow-container {
  zoom:.5;
  margin-right: 90vw!important;

}
.reveal-ball-container {
  margin-top: 50vh;
}
.reveal-ball1{
  scale: 1.2;
  margin-left: 33vw;
  transform: translateY(-10vh);
}
}
@media only screen and (min-width: 920px) {
  /*text*/
  .youtube-container {
    position: relative;
  }

  .textbox-container {
    position: fixed;
    transform: translateX(-49vw) translateY(50vh);
  }
  .textbox-containermain h1{
  padding: 20px ;
  line-height: 2;
  font-family: 'Press Start 2P', static;
  font-size: 1em;
  text-align: center;
 
}
.ultraball {
  transform: translateY(0%);
}

}

@media (max-width: 1590px) and (min-width: 920px) {
  .intropoke {
    transform:translateX(-13%) translateY(15vh)!important ;
  }
  .scrollcontainer {
    margin-top: -5%!important;
  }
  .gotcha {
  
  transform: translateX(16%);
}
}

@media only screen and (min-width: 1600px)
{
.gotcha {
  
  transform: translateX(33%);
}
.arrow-container {
 
  margin-right: -5vw!important;

}

}