/**
 * TVK Pipe Hover — один лёгкий эффект на блоке с трубой (desktop)
 * v1.1
 */

@media (min-width: 901px) and (pointer: fine) {
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.4s ease;
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx img,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx video {
    transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.28) 50%,
      transparent 58%
    );
    transform: translateX(-130%);
    transition: opacity 0.25s ease;
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:hover::after,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:focus-within::after {
    opacity: 1;
    animation: tvkPipeShine 0.75s ease-out forwards;
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:hover img,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:hover video,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:focus-within img,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx:focus-within video {
    filter: brightness(1.06) saturate(1.08);
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx--hero:hover,
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx--hero:focus-within {
    box-shadow:
      0 28px 72px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 201, 167, 0.32),
      0 0 40px rgba(0, 201, 167, 0.16) !important;
  }

  html.tvk-pipe-hover-on body.home-page #products .catalog-card__media.tvk-pipe-fx:hover,
  html.tvk-pipe-hover-on body.home-page #products .catalog-card__media.tvk-pipe-fx:focus-within {
    box-shadow:
      inset 0 0 0 1px rgba(0, 201, 167, 0.35),
      0 12px 32px rgba(0, 0, 0, 0.35);
  }

  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx .catalog-tag {
    z-index: 3;
  }

  @keyframes tvkPipeShine {
    to {
      transform: translateX(130%);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.tvk-pipe-hover-on body.home-page .tvk-pipe-fx::after {
    animation: none !important;
    opacity: 0 !important;
  }
}