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

body {
body {
  background-image: url("D:\VS_codez\LOL\lllool.jpg");
  background-repeat: no-repeat;
  background-size: cover;         /* Scales image to fill screen */
  background-position: center;    /* Keeps it centered */
}
  font-family: system-ui, -apple-system, sans-serif;
 /* background: #000000;
  color: #f0f0f5;*/
  height: 100vh;
  overflow: hidden;
}

.hero {
  background: #0f0f1a;                    /* fallback dark color */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background 1.2s ease-in-out;
}

.hero.opened {
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&q=80&w=2000');
  /* ^ nice dramatic stormy/mountain background — change to whatever you like */
}
/* .hero {background-image: url("D:\VS_codez\LOL\lllool.jpg");
  /*background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('https://picsum.photos/1920/1080?blur') no-repeat center center;
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}*/

.slide-1, .slide-2, .reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

.slide-1.active,
.slide-2.active,
.reveal.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

h1 {
  font-size: 5.5rem;
   margin-bottom: 2rem;
  letter-spacing: -2px;
  background: linear-gradient(90deg, #00ff62, #10a25b, #014814);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
   color: rgb(255, 255, 255);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 3.8rem;
  margin-bottom: 3rem;
}

.btn-open,
.btn-yes,
.btn-no {
  font-size: 2.1rem;
  padding: 1.1rem 3.2rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.25s ease;
}

.btn-open {
  background: #6c0000;
  color: white;
}

.btn-open:hover {
  background: #d80246;
  transform: scale(1.08);
}

.btn-yes {
  background: #ff0015;
  color: white;
  margin-right: 4rem;
}

.btn-yes:hover {
  background: #ff0363;
  transform: scale(1.1);
}

.btn-no {
  background: #6d0000;
  color: white;
  position: relative;
}

.btn-no:hover,
.btn-no:active {
  transform: translate(var(--x), var(--y)) scale(1.05);
  background: #dc2626;
}

/* Final reveal image */
.reveal img {
  max-width: 800vw;
  max-height: 800vh;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Small helper class for dramatic entrance */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}