/* ──────────────────────────────────────────
   Futures SECTION
────────────────────────────────────────── */
.features {
  position: relative;
  padding: 6rem 2vw;
  color: var(--white);
  overflow: visible;
}

.features__bg {
  position: absolute;
  inset: 0;
  background: url('../img/features/back.png') center/110vw no-repeat;
  z-index: 0;
}

.features__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
}

.features__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
}

.features__cube {
  flex-shrink: 0;
  width: 400px;
  height: 400px;
  background: url('../img/features/cube_off.png') center/contain no-repeat;
  transition: background-image 0.4s ease;
}

.feature-item {
  display: grid;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  padding: 1rem 1rem 2rem;
  background: linear-gradient(to bottom, #66129060, #67128667, #380d545b);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 1px solid #b341ff;
  transition: scale 0.5s ease;
  max-width: 489px;
  max-height: 228px;
  z-index: 0;
}

.featuresImages{
  transition: transform 0.3s ease;
}

.featuresImages:hover{
  transform: scale(1.1);
}



.featureBlockInfo {
  display: flex;
}

.feature-item__icon {
  width: 30%;
  height: auto;
  margin: 0;
  height: 6vw;
}

.feature-item__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.features-track {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  scroll-snap-type: x mandatory;
  /* overflow-x: auto; */
  padding-bottom: 1rem;
  touch-action: pan-x;
  cursor: grab;
}

  .feature-item__text {
    font-size: 1.1rem;
    line-height: 1.4;
  }

/* hidden scroll tag*/
@media screen and (max-width: 768px) {
  .features-track {
    animation: pulse 2s infinite ease-in-out; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
  }

  .features-track::-webkit-scrollbar {
    display: none; 
  }
/* PulseLight */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(113, 17, 173, 0.5), 0 0 10px rgba(90, 15, 137, 0.29);
  }
  50% {
    box-shadow: 0 0 20px rgb(138, 30, 184), 0 0 10px rgba(103, 26, 136, 0.691);
  }
}

}

.scroll-arrow-mobile {
  display: none;
}

/* ─── ADAPTIVE ───────────────────── */
@media screen and (max-width: 992px) {
  .features__inner {
    flex-direction: column;
    align-items: center;
  }

  .features__cube {
    width: 300px;
    height: 300px;
  }
}

@media screen and (max-width: 768px) {

  .features__bg {
  background: radial-gradient(
      circle at center,
      #42175d 5%,
      #2d014c 25%,
      #000000 90%
    );
  position: absolute;
  inset: 0;
  background-image: url(../img/features/backMobile.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  z-index: 0;
}

  .features__cube:hover {
    background-image: url('../img/features/cube_on.png');
  }
  .features__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .features__col {
    width: 100%;
  }

  .features-track {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    padding-bottom: 0rem;
    touch-action: pan-x;
    cursor: grab;
    animation: pulse 2s infinite ease-in-out; 
    height: 47vw;
    border-radius: 5%;
  }

  .features-track:active {
    cursor: grabbing;
  }

  .featuresImages img{
    width: 24rem;
  }

@keyframes pulsePurpleS {
  0%, 100% {
    box-shadow: 0 0 10px rgb(185, 69, 252);
  }
  50% {
    box-shadow: 0 0 20px rgba(203, 109, 254, 0.953);
  }
}

  .feature-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 90vw;
    max-width: 489px;
    width: 100%;
    gap: 0px;
    border-radius: 10px;
    transition: transform 0.2s ease-out;
    animation: pulsePurpleS 2s ease-in-out infinite;
  }


  .feature-item__icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .featureBlockInfo {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .feature-item__text {
    font-size: 1.150rem;
    line-height: 1.4;
    margin-top: 8%;
  }

  .featureTitleInfo {
    margin-bottom: 0.5rem;
  }

  .features__cube {
    margin: 0 auto;
    width: 300px;
    height: 300px;
  }
  .scroll-arrow-mobile {
    display: block;
    font-size: 1.5rem;
    color: #5912a4;
    text-align: end;
    animation: bounceRight 1.5s infinite;
  }

  @keyframes bounceRight {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(8px);
    }
  }
}

@media screen and (max-width: 576px) {
  .features__cube {
    width: 250px;
    height: 250px;
  }
}

@media screen and (min-width: 769px) {
  .features-track {
    flex-direction: column;
    gap: 2.5rem;
    cursor: default;
    touch-action: none;
  }

  .features__cube {
    transition: background-image 0.4s ease-in-out;
  }

  .features__cube:hover {
    background-image: url('../img/features/cube_on.png');
  }

  .feature-item {
    transition: transform 0.4s ease, box-shadow 0.3s ease;
  }

  .feature-item:hover {
    z-index: 10000;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(126, 30, 190, 0.4);
  }
}