/* servicios-cnc.html — dopolneniya tolko dlya etoy stranicy.
   Zamenyaet kartochki-ssylki iz service-d_1 (fon-kartinka + tekst poverh)
   na prostye bloki: renderi muebles-500 / cartel-500 po centru,
   tekst pod nimi. Sekcii materialy i faq ostayutsya na service-d_1.css.
   ns_styles.css ne tragaetsya, fayl podklyuchen tolko iz servicios-cnc.html. */

/* ---------------------------------------------------------------
   Svechenie .circle-bg-center v sekcii materialov.
   .bg-circle razmyt na blur(200px) i vyhodit za granicy sekcii.
   Sosednyaya sekciya idyot pozzhe v DOM s tem zhe z-index: 2 i
   neprozrachnym fonom — ona zakrashivala nizhnyuyu chast blura,
   i na styke byl viden zhestkiy obrez. Podnimaem sekciyu na 3,
   chtoby svechenie ugasalo plavno. Nav (z-index 999) vyshe.
   --------------------------------------------------------------- */

.materials-section {
  z-index: 3;
}

.cross-promo-halves {
  grid-column-gap: var(--grid--column-gap);
  grid-row-gap: var(--spacing--48);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

.cross-promo-block {
  grid-row-gap: var(--spacing--8);
  text-align: center;
  color: var(--_🎨-color--tokens---text-heading--strong);
  text-decoration: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.cross-promo-image {
  width: 100%;
  height: 320px;
  margin-bottom: var(--spacing--16);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.cross-promo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Slegka podnimaem render i zamedlyaem strelku pri hover —
   ta zhe logika, chto u .card-service-cross, no bez smeny fona. */

.cross-promo-image img {
  transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}

.cross-promo-block:hover .cross-promo-image img {
  transform: translateY(-4px) scale(1.03);
}

.cross-promo-block .button-slider {
  margin-top: var(--spacing--8);
  transition: transform .35s cubic-bezier(.2, .8, .25, 1);
}

.cross-promo-block:hover .button-slider {
  transform: translateX(var(--spacing--4));
}

/* ---------------------------------------------------------------
   Cartel: dve kartinki drug nad drugom. Nizhnyaya (svet vyklyuchen)
   zadayot razmer bloka, verhnyaya (svet vklyuchen) mercaet poverh neyo —
   illyuziya nervnogo neona, kotoryy v osnovnom gorit.
   --------------------------------------------------------------- */

.cross-promo-neon .neon-off {
  position: relative;
}

.cross-promo-neon .neon-on {
  width: 100%;
  height: 100%;
  animation: neon-flicker 7s ease-in-out infinite;
  position: absolute;
  inset: 0;
}

@keyframes neon-flicker {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }

  2% {
    opacity: .2;
    filter: none;
  }

  4% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }

  6% {
    opacity: .3;
    filter: none;
  }

  8% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }

  9% {
    opacity: .15;
    filter: none;
  }

  11% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }

  45% {
    opacity: 1;
  }

  46% {
    opacity: .3;
    filter: none;
  }

  48% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }

  78% {
    opacity: 1;
  }

  79% {
    opacity: .2;
    filter: none;
  }

  81% {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }
}

@media screen and (max-width: 767px) {
  .cross-promo-halves {
    grid-row-gap: var(--spacing--40);
    grid-template-columns: 1fr;
  }

  .cross-promo-image {
    height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cross-promo-image img,
  .cross-promo-block .button-slider {
    transition-duration: .01ms;
  }

  .cross-promo-neon .neon-on {
    animation: none;
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255, 64, 48, .55));
  }
}