/* -----------------------------------
   RESET + BODY
----------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  background: #203d41;
  font-family: sans-serif;
  overflow-x: hidden;
}

/* -----------------------------------
   HERO / BACKGROUND
----------------------------------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------
   PARACHUTE APE
----------------------------------- */
.hero__parachute {
  position: absolute;
  left: -0.99%; /* –25px / 2538px */
  top: -0.68%; /* –48px / 7027px */
  width: 41.9%; /* 1063px / 2538px */
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   MONEY APE
----------------------------------- */
.hero__moneyape {
  position: absolute;
  left: 0%;
  top: 81.25%;
  width: 97.26%;
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   LOGO (Fade-In)
----------------------------------- */
.hero__logo {
  position: absolute;
  width: 32.6%; /* 827px / 2538px */
  max-width: 827px;
  top: 6.28%; /* 441px / 7027px */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeInExp 2s cubic-bezier(0.42, 0, 1, 1) 0.7s forwards;
  pointer-events: none;
}

/* -----------------------------------
   INFO-RECTANGLE
----------------------------------- */
.hero__info {
  position: absolute;
  left: 28.57%;
  top: 22.67%;
  width: 42.4%;
  pointer-events: none;
}
.hero__info-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------
   DISCLAIMER
----------------------------------- */
.hero__disclaimer {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 40vw;
  max-width: 400px;
  pointer-events: none;
}

/* -----------------------------------
   SOCIAL BUTTONS
----------------------------------- */
.hero__social {
  position: absolute;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hero__social img {
  display: block;
  width: 100%;
}
.hero__social:hover,
.hero__social:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.hero__twitter {
  left: 28.22%;
  top: 43.55%;
  width: 17.23%;
}
.hero__dex {
  left: 48.92%;
  top: 42.29%;
  width: 13.12%;
}
.hero__telegram {
  left: 65.58%;
  top: 44.41%;
  width: 10.8%;
}

/* -----------------------------------
   HOW TO BUY Header (ht.png)
----------------------------------- */
.hero__ht {
  position: absolute;
  left: 34.41%; /* 873px / 2538px */
  top: 61.38%; /* 4313px / 7027px */
  width: 32%; /* 812px / 2538px */
  max-width: 812px;
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   SLIDER (zentriert)
----------------------------------- */
.slider {
  position: absolute;
  width: 34.08%; /* 865px / 2538px */
  max-width: 865px;
  top: 63.73%; /* 4479px / 7027px */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}
.slides-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.slide {
  display: none;
  max-width: 100%;
  max-height: 100%;
}
.slide.active {
  display: block;
}

/* -----------------------------------
   SLIDER-PFEILE (weit außerhalb)
----------------------------------- */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.slider-btn img {
  display: block;
  width: 32px;
  height: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.slider-btn:hover,
.slider-btn:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.slider-btn.prev {
  left: -25%;
}
.slider-btn.next {
  right: -25%;
}

/* -----------------------------------
   SCROLL-DOWN BUTTON (fixed)
----------------------------------- */
.scroll-down {
  position: fixed;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 999;
}
.scroll-down:hover {
  color: white;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, -10px);
  }
  60% {
    transform: translate(-50%, -5px);
  }
}

/* -----------------------------------
   KEYFRAMES
----------------------------------- */
@keyframes fadeInExp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* -----------------------------------
   OPTIONAL RESPONSIVE
----------------------------------- */
@media (max-width: 1024px) {
  .slider {
    width: 40vw;
  }
}
@media (max-width: 768px) {
  .slider {
    width: 60vw;
  }
}

/* -----------------------------------
   SITE-WIDE NOISE OVERLAY
----------------------------------- */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/noise.png") repeat;
  opacity: 0.25;
  z-index: 9999;
  mix-blend-mode: overlay;
  animation: noiseAnim 0.02s steps(1) infinite;
}

@keyframes noiseAnim {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: 64px 32px;
  }
  20% {
    background-position: -32px -16px;
  }
  30% {
    background-position: 16px -48px;
  }
  40% {
    background-position: -48px 48px;
  }
  50% {
    background-position: 32px -32px;
  }
  60% {
    background-position: -16px 16px;
  }
  70% {
    background-position: 48px -64px;
  }
  80% {
    background-position: -64px 64px;
  }
  90% {
    background-position: 24px -8px;
  }
  100% {
    background-position: 0 0;
  }
}

/* -----------------------------------
   LOGO + SUBTITLE CONTAINER
----------------------------------- */
.hero__logo-container {
  position: absolute;
  top: 14.28%; /* wie dein hero__logo */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none; /* falls du Hover-Effekte für darunter liegende Elemente brauchst */
}

/* Subtitle direkt unter dem Logo */
.hero__subtitle {
  /* entfernt pointer-events:none; */
  pointer-events: auto;
  cursor: pointer;
  margin-top: 0.5rem;
  color: #302101;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 2rem);
  line-height: 1.2;
  white-space: nowrap;
  position: relative; /* für späteren Toast */
}

/* kleine Feedback‑Meldung */
.copy-feedback {
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: fade-in-out 1s forwards;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}