/* Trust Encar hero art 1.1.0. Silk and live lines; original Korean emblem. */
.main-banner.te-hero-motion {
  position: relative;
}

/* Keep the original halo above the banner background and below cars (z: 2).
   No stacking context is introduced on the banner or its content wrapper. */
.te-home-hero-emblem.te-hero-emblem {
  z-index: 1;
}
.te-hero-emblem.te-hero-art-paused .loader > span {
  animation-play-state: paused !important;
}

.te-hero-motion .te-hero-lines {
  position: absolute;
  z-index: 0;
  top: 12%;
  bottom: 0;
  left: 34%;
  right: -2%;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 77%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 77%, transparent 100%);
  mask-composite: intersect;
}
.te-hero-motion .te-hero-lines > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.te-hero-motion .te-hero-line {
  fill: none;
  stroke: url(#te-hero-thread-color);
  stroke-width: .95px;
  stroke-opacity: .7;
  vector-effect: non-scaling-stroke;
}
.te-hero-motion .te-hero-line:nth-child(9n + 1) {
  stroke-width: 1.4px;
  stroke-opacity: .9;
}
.te-hero-motion .te-hero-spark {
  fill: #fff4e9;
  stroke: #c47773;
  stroke-width: .45px;
  opacity: .9;
}

/* Same desktop aspect ratio and mobile height as the outgoing .waves SVG. */
.te-hero-motion .te-hero-silk {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 150 / 28;
  margin-bottom: -7px;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.te-hero-motion .te-hero-silk > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.te-hero-motion .te-hero-silk-thread {
  fill: none;
  stroke: #fff;
  stroke-opacity: .3;
  stroke-width: .65px;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 960px) {
  .te-hero-motion .te-hero-lines {
    left: 16%;
    top: 15%;
    opacity: .65;
  }
  .te-hero-motion .te-hero-line:nth-child(2n),
  .te-hero-motion .te-hero-silk-thread:nth-child(2n) {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .te-hero-motion .te-hero-silk {
    aspect-ratio: auto;
    height: 40px;
    min-height: 40px;
  }
  .te-hero-motion .te-hero-lines {
    left: 11%;
    right: -20%;
    top: 14%;
    bottom: 4%;
    opacity: .48;
  }
}
@media (prefers-reduced-motion: reduce) {
  .te-hero-emblem .loader > span {
    animation: none !important;
  }
}
