@import url("https://fonts.cdnfonts.com/css/minecraft-4");

* {
  padding: 0;
  margin: 0;
  /* outline: 2px solid blueviolet; */
}
html {
  scroll-behavior: smooth;
}
:root {
  --Brown-main: #bfa93e;
  --minecraft-font: "Minecraft", sans-serif;
  --idk: rgba(101, 240, 74, 0.829);
  --main-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  --long-ass-shadow-code: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
body {
  background-image: 
  url(assets/bg3-min.webp),
    linear-gradient(to bottom, #8B4513, #228B22)
    ;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sticky-text {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: green;
  color: white;
  padding: 8px 12px;
  font-size: 1rem;
  z-index: 1000;
  user-select: none;
  font-family: var(--minecraft-font);
  border-radius: 0px 10px 0px 0px;
}
.sticky-text2 {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: green;
  color: white;
  padding: 8px 12px;
  font-size: 1rem;
  z-index: 1000;
  user-select: none;
  font-family: var(--minecraft-font);
  border-radius: 10px 0 0 0;
}
.sticky-text,
.sticky-text2 {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @media screen and (max-width: 425px) {
    /* display: none; */
    font-size: 0.8rem;
  }
  @media screen and (max-width: 375px) {
    /* display: none; */
    font-size: 0.8rem;
  }
  @media screen and (max-width: 375px) {
    /* display: none; */
    font-size: 0.6rem;
  }
}

.sticky-text.hidden,
.sticky-text2.hidden {
  opacity: 0;
  transform: translateY(100%);
}

/* HEADERRRRR */
.overlap1 {
  position: absolute;
  top: 0;
  width: 100%;
}

.overlap2 {
  position: relative;
}

header {
  margin: 10px 10px 0px 10px;
  position: sticky;
  top: 10px;
  z-index: 1000;
  /* background-color: #408f13;
	 */
  background-position: center;
  border-radius: 5px;
  /* border: solid 3px;
	 */
}
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
@media screen and (max-width: 486px) {
  header nav {
    justify-content: center;
    margin-top: 25px;
  }
}
header nav .left-item {
  height: 100%;
  margin-left: 10px;
  margin-bottom: 7px;
}
header nav .left-item p {
  font-family: var(--minecraft-font);
  text-decoration: none;
  color: #9a6735;
  text-shadow: 0px 0px 4px #000;
}
header nav .left-item p,
header nav .left-item b {
  font-size: 1.4rem;
  font-size: clamp(1.4rem, 1.2799999999999998rem + 0.6000000000000001vw, 2rem);
}
header nav .right-items {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 486px) {
  header nav .right-items {
    display: none;
  }
}
header nav .right-items .ri1 img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0px 0px 6px brown);
}
header nav .right-items .ri2 img {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0px 0px 4px green);
}

/* VIDEOOO */
.video-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.tl-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1),
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 1)
  );
  pointer-events: none;
  z-index: 2;
}

/* SLDIERRRRRRRRRR */
.slider {
  height: 520px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1),
      transparent 70%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 10), transparent 40%),
    url(assets/RealismCraft_screenshot_0.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.slide-track {
  display: flex;
  width: max-content; /* auto width based on content */
  animation: scroll 60s linear infinite;
}

.slide {
  flex: 0 0 auto;
  width: 80vw; /* base width: 80% of viewport */
  max-width: 500px;
  padding: 0 10px;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Scroll animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Tablet devices */
@media screen and (max-width: 628px) {
  .slider {
    height: 400px;
  }

  .slide {
    width: 65vw;
  }
}
@media screen and (max-width: 472px) {
  .slider {
    height: 330px;
  }
}
@media screen and (max-width: 375px) {
  .slider {
    height: 300px;
  }
}
@media screen and (max-width: 375px) {
  .slider {
    height: 260px;
  }
}

/* INFOOOOOOOOOOOOOOO */

.realismcraft-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5.5rem;
  margin-bottom: 10rem;
}

.title-feature {
  width: 100%;
  text-align: center;
  font-size: 5rem;
  margin-bottom: 50px;
  margin-top: 20px;
  color: var(--Brown-main);
  text-shadow: 0px 0px 10px black;
  font-family: var(--minecraft-font);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.title-feature.visible {
  opacity: 1;
  transform: translateY(0);
}

.features-wrapper {
  width: 95%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.feature {
  font-family: var(--minecraft-font);
  background-color: white;
  box-shadow: var(--main-shadow);
  padding: 20px;
  border-radius: 8px;
}

.feature h3 {
  color: #bfa93e;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 2rem;
}

.feature p {
  margin: 0;
  line-height: 1.6;
  font-size: 1.5rem;
}

/* Initial state: hidden and slightly moved down */
.feature {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

/* When the feature becomes visible */
.feature.visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .title-feature {
    font-size: 2rem;
  }

  .feature {
    padding: 20px;
  }

  .feature h3 {
    font-size: 1.5rem;
  }

  .feature p {
    font-size: 1.2rem;
  }
}

/* SHOWCASEEEE Video 2*/
.showcase {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 5.6rem;
}
.off-tr {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  font-size: clamp(2rem, 1.1428571428571428rem + 4.285714285714286vw, 5rem);
  font-family: var(--minecraft-font);
  color: var(--Brown-main);
  text-shadow: 0px 0px 7px rgb(0, 0, 0);

  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.off-tr.visible {
  opacity: 1;
  transform: translateY(0);
}

.video-wrapper-sh {
  width: 90%;
  max-width: 1250px;
  aspect-ratio: 16 / 9;
  box-shadow: var(--long-ass-shadow-code);
  padding: 10px;
  background-color: black;
  border-radius: 10px;
}

.video-wrapper-sh iframe {
  width: 100%;
  height: 100%;
}

/* SCREEENNNNNSHOTSSS */
.BastaKiniSamokNingGridGiaatay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 11rem;

  @media screen and (max-width: 768px) {
    margin-top: 5rem;
  }
}
.sc-title {
  text-align: center;
  font-family: var(--minecraft-font);
  text-shadow: 0px 0px 10px black;
  font-size: clamp(2rem, 1.1428571428571428rem + 4.285714285714286vw, 5rem);
  color: var(--Brown-main);
  margin-bottom: 2rem;

  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.sc-title.visible {
  opacity: 1;
  transform: translateY(0);
}

.screenshots {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 1400px;
  width: 100%;
  border: 5px solid black;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
}

.screenshots img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: var(--long-ass-shadow-code);
  object-fit: cover;
}

.img1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}
.img2 {
  grid-row: 2 / 5;
  grid-column: 2 / 5;
  z-index: 2;
}
.img3 {
  grid-row: 4 / 6;
  grid-column: 1 / 3;
}
.img4 {
  grid-row: 1 / 3;
  grid-column: 4 / 6;
}
.img5 {
  grid-row: 4 / 6;
  grid-column: 4 / 6;
}
.img6 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}
.img7 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}
.img8 {
  grid-row: 5 / 6;
  grid-column: 3 / 4;
}
.img9 {
  grid-row: 3 / 3;
  grid-column: 5 / 6;
}

/* BUTTTOOON DOWNLOADDDADAD */
.download-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dbcon {
  height: 150px;
  width: 95%;
  max-width: 200px;
  margin-bottom: 20px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;

  & a {
    font-family: var(--minecraft-font);
    letter-spacing: 3px;
  }
}

.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(
    100% 100% at 100% 0,
    rgb(54, 196, 54) 0,
    green 100%
  );
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  height: 70px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 2rem;
  padding-bottom: 10px;
}

.button-29:focus {
  box-shadow: rgb(5, 248, 5) 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, green 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, green 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: green 0 3px 7px inset;
  transform: translateY(2px);
}

/* TIIL SA WEBSITE, FOOTER BAKAMO */
footer {
  width: 100%;
  height: 200px;
  background-color: #111;
  box-shadow: var(--long-ass-shadow-code);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  gap: 20px;
}

.footer-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--minecraft-font);
  color: #ccc;
  flex-wrap: wrap;
}

.left-logo,
.right-logo {
  flex: 1;
  font-size: 2rem;
  color: #bbb;
  text-align: center;
}

.creator-info {
  flex: 2;
  text-align: center;
}

.creator-web,
.creator-mc {
  font-size: 0.9rem;
  font-size: clamp(0.9rem, 0.7rem + 1vw, 1.6rem);
  margin: 0;
  color: #999;
  /* white-space: nowrap; */
  padding: 5px;
}

/* Responsive tweak */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 10px;
  }

  .left-logo,
  .right-logo,
  .creator-info {
    text-align: center;
    flex: unset;
  }
}