.anim {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .anim {
    display: none;
  }
}

.anim__smoke {
  position: absolute;
  opacity: 0.9;
}

.anim__smoke.smoke_1 {
  background: url("../img/bg/animation/smoke_1.png");
  background-position: 0px 50%;
  width: 100%;
  height: 671px;
  top: -300px;
  animation: smoke-1 14s linear infinite;
}

@keyframes smoke-1 {
  from {
    background-position: 0px 50%;
  }
  to {
    background-position: 1166px 50%;
  }
}

.anim__smoke.smoke_2 {
  background: url("../img/bg/animation/smoke_2.png");
  background-position: 0px 50%;
  width: 100%;
  height: 558px;
  left: 0px;
  top: -300px;
  animation: smoke-2 10s linear infinite;
}

@keyframes smoke-2 {
  from {
    background-position: 0px 50%;
  }
  to {
    background-position: 914px 50%;
  }
}

.anim__smoke.smoke_3 {
  background: url("../img/bg/animation/smoke_1.png");
  background-position: 0px 50%;
  width: 100%;
  height: 671px;
  bottom: -100px;
  animation: smoke-3 18s linear infinite;
  z-index: 1;
}

@keyframes smoke-3 {
  from {
    background-position: 0px 50%;
  }
  to {
    background-position: 1166px 50%;
  }
}

.anim__smoke.smoke_4 {
  background: url("../img/bg/animation/smoke_2.png");
  background-position: 0px 50%;
  width: 100%;
  height: 558px;
  left: 0px;
  bottom: -200px;
  animation: smoke-4 14s linear infinite;
  z-index: 1;
}
@keyframes smoke-4 {
  from {
    background-position: 0px 50%;
  }
  to {
    background-position: 914px 50%;
  }
}

.anim__smoke.smoke_5 {
  background: url("../img/bg/animation/smoke_2.png");
  background-position: 0px 56%;
  width: 100%;
  height: 671px;
  bottom: -100px;
  animation: smoke-5 18s linear infinite;
  z-index: 1;
}
@keyframes smoke-5 {
  from {
    background-position: 0px 50%;
  }
  to {
    background-position: 1166px 50%;
  }
}

/* make it dark gray*/
.anim__smoke {
  position: absolute;
  filter: grayscale(100%) brightness(180%);
}

/* Bottom fade (absolute, overlays background+content) */
.smoke-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background: linear-gradient(to bottom, rgba(18,18,18,0) 0%, #121212 100%);
  pointer-events: none;
  z-index: 2;
}



.anim__smoke {
  animation-duration: 60s !important;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}








section {
  position: relative; /* needed so ::before/::after can anchor */
  overflow: hidden;   /* make sure fade stays inside */
}

section::before,
section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;         /* fade size */
  pointer-events: none; /* no blocking clicks */
  z-index: 1;           /* above background, below content */
}

section::before {
  top: 0;
  background: linear-gradient(to top, rgba(18, 18, 18, 0) 0%, #121212 100%);
}

section::after {
  bottom: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, #121212 100%);
}





section.home.old_index_first {
	position: relative;
	/* needed for pseudo-elements */
}

section.home.old_index_first::before,
section.home.old_index_first::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 30px;
	pointer-events: none;
	z-index: 2;
	/* overlays background + smoke, but not content */
  opacity: 1;
}

section.home.old_index_first::before {
	top: 0;
	background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, #121212 100%);
}

section.home.old_index_first::after {
	bottom: 0;
	background: linear-gradient(to top, rgba(18, 18, 18, 0) 0%, #121212 100%);
}

/* 🚀 This ensures your text/buttons are above the fades */
.home__container {
	position: relative;
	z-index: 3;
	/* higher than the 2 of ::before/::after */
}