/* CHAT012 Team Curves owner fix.
   This stylesheet anchors the existing team ornaments to the photo grid only.
   It must be linked after styles.css and language-menu.css. */

.team {
  --team-side-pad: max(48px, calc((100vw - 1280px) / 2));
  --team-content-width: calc(100vw - (var(--team-side-pad) * 2));
  --team-grid-tail-pad: 54px;
  --team-left-accent-width: clamp(64px, 5vw, 82px);
  --team-right-accent-width: clamp(84px, 8vw, 126px);
}

.team .team-accent {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: normal;
}

.team .team-accent-left {
  grid-column: 2;
  justify-self: start;
  top: auto;
  right: auto;
  bottom: -2px;
  left: 0;
  width: var(--team-left-accent-width);
  height: min(100%, 420px);
  opacity: 0.58;
  z-index: 3;
  transform: translateX(-100%);
  transform-origin: right bottom;
  animation: teamAccentLeftDrift 10s ease-in-out infinite alternate !important;
}

.team .team-accent-right {
  top: auto;
  right: auto;
  bottom: -2px;
  left: calc(var(--team-side-pad) + var(--team-content-width) - var(--team-grid-tail-pad));
  width: var(--team-right-accent-width);
  height: min(100%, 420px);
  opacity: 0.54;
  z-index: 3;
  transform: translateX(-2%);
  transform-origin: left bottom;
  animation: teamAccentRightDrift 9s ease-in-out infinite alternate !important;
}

@keyframes teamAccentLeftDrift {
  from {
    opacity: 0.52;
    transform: translateX(-100%) translate3d(0, 0, 0);
  }

  to {
    opacity: 0.62;
    transform: translateX(-100%) translate3d(2px, -3px, 0);
  }
}

@keyframes teamAccentRightDrift {
  from {
    opacity: 0.5;
    transform: translateX(-2%) translate3d(0, 0, 0);
  }

  to {
    opacity: 0.58;
    transform: translateX(-2%) translate3d(-3px, -4px, 0);
  }
}

@media (max-width: 760px) {
  .team {
    --team-side-pad: 18px;
  }

  .team .team-accent {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team .team-accent-left,
  .team .team-accent-right,
  .team .team-accent path {
    animation: none !important;
  }

  .team .team-accent-left {
    transform: translateX(-100%);
  }

  .team .team-accent-right {
    transform: translateX(-2%);
  }
}