/* styles\exchanges.css */

.exchanges {
 padding: clamp(4rem, 8vh, 6rem) 0;
 background-color: transparent;
 position: relative;
 width: 100%;
}

/* Горизонтальные сепараторы */
.exchanges__separator {
 position: relative;
 width: 100%;
 height: 1px;
 background: linear-gradient(90deg, 
   transparent 0%, 
   rgba(255, 255, 255, 0.12) 12%, 
   rgba(255, 255, 255, 0.12) 50%, 
   rgba(255, 255, 255, 0.12) 88%, 
   transparent 100%
 );
}

.exchanges__separator--top {
  margin-bottom: 15px;
}

.exchanges__separator--bottom {
  margin-top: 15px;
}

/* Вертикальные сепараторы между логотипами */
.exchanges__separator-vertical {
  width: 1px;
  height: 50px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  flex-shrink: 0;
}

.exchanges__content {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 gap: clamp(3rem, 8vw, 8rem);
 min-height: 120px;
 max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
 margin: 0 auto;
 padding: 0 var(--container-padding-x);
 position: relative;
}

.exchanges__title {
 font-family: var(--font-family-accent);
 font-size: clamp(1.5rem, 4vw, 2.625rem);
 font-weight: 600;
 background: linear-gradient(90deg, #82A7DA 0%, #7EE2E2 50%, #FFFFFF 100%);
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 margin: 0;
 flex-shrink: 0;
 animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
 0%, 100% {
   opacity: 0.9;
 }
 50% {
   opacity: 1;
 }
}

.exchanges__platforms {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: clamp(3rem, 6vw, 5rem);
}

.exchanges__platform {
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.4s ease;
 text-decoration: none;
 opacity: 0.8;
 position: relative;
 min-width: 120px;
 animation: platformFloat 4s ease-in-out infinite;
}

.exchanges__platform:nth-child(1) {
 animation-delay: 0s;
}

.exchanges__platform:nth-child(3) {
 animation-delay: 1s;
}

.exchanges__platform:nth-child(5) {
 animation-delay: 2s;
}

@keyframes platformFloat {
 0%, 100% {
   transform: translateY(0px);
 }
 50% {
   transform: translateY(-3px);
 }
}

.exchanges__logo {
 transition: all 0.4s ease;
 filter: brightness(0.9);
 animation: logoBreath 5s ease-in-out infinite;
 display: block;
 max-width: 100%;
 height: auto;
 object-fit: contain;
}

.exchanges__logo--kwork {
 max-height: 42px;
 width: auto;
 animation-delay: 0.5s;
}

.exchanges__logo--freelance {
 max-height: 42px;
 width: auto;
 animation-delay: 2s;
}

.exchanges__logo--fl {
 max-height: 42px;
 width: auto;
 animation-delay: 3.5s;
}

@keyframes logoBreath {
 0%, 100% {
   transform: scale(1);
   filter: brightness(0.9);
 }
 50% {
   transform: scale(1.02);
   filter: brightness(1.1);
 }
}

/* Создаем псевдоэлементы с активными картинками */
.exchanges__platform--kwork::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url('../images/exchanges/kwork-active.png');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0;
 transition: opacity 0.4s ease;
 pointer-events: none;
}

.exchanges__platform--freelance::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url('../images/exchanges/freelance-ru-active.png');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0;
 transition: opacity 0.4s ease;
 pointer-events: none;
}

.exchanges__platform--fl::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url('../images/exchanges/fl-active.png');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0;
 transition: opacity 0.4s ease;
 pointer-events: none;
}

@media (any-hover: hover) {
 .exchanges__platform:hover {
   transform: translateY(-5px);
   opacity: 1;
   animation-play-state: paused;
 }
 
 .exchanges__platform:hover::before {
   opacity: 1;
 }
 
 .exchanges__platform:hover .exchanges__logo {
   opacity: 0;
   animation-play-state: paused;
 }
}

@media (any-hover: none) {
 .exchanges__platform:active {
   transform: translateY(-2px);
   opacity: 1;
 }
 
 .exchanges__platform:active::before {
   opacity: 1;
 }
 
 .exchanges__platform:active .exchanges__logo {
   opacity: 0;
 }
}

/* Промежуточное разрешение 1300px - 769px */
@media (width <= 1300px) and (width > 768px) {
 .exchanges__content {
   gap: clamp(2rem, 4vw, 4rem);
 }

 .exchanges__platforms {
   gap: clamp(1.5rem, 3vw, 2.5rem);
 }

 .exchanges__platform {
   min-width: 80px;
 }

 .exchanges__logo--kwork {
   max-height: 36px;
 }

 .exchanges__logo--freelance {
   max-height: 36px;
 }

 .exchanges__logo--fl {
   max-height: 36px;
 }

 .exchanges__separator-vertical {
   height: 40px;
 }
}

@media (width <= 768px) {
.exchanges__separator--top {
  margin-bottom: 25px;
}

.exchanges__separator--bottom {
  margin-top: 25px;
}

 /* Скрываем вертикальные сепараторы на планшетах */
 .exchanges__separator-vertical {
   display: none;
 }

 .exchanges__content {
   flex-direction: column;
   text-align: center;
   gap: clamp(1.5rem, 5vw, 2.5rem);
   padding: 0 clamp(1rem, 4vw, 2rem);
 }
 
 .exchanges__platforms {
   flex-direction: row;
   gap: clamp(1.5rem, 4vw, 2rem);
   justify-content: center;
   flex-wrap: wrap;
 }

 .exchanges__platform {
   min-width: auto;
 }
 
 .exchanges__logo--kwork {
   max-width: 90px;
 }

 .exchanges__logo--freelance {
   max-width: 200px;
 }
 
 .exchanges__logo--fl {
   max-width: 40px;
 }
}

@media (width <= 480px) {
 /* Скрываем вертикальные сепараторы на мобильных */
 .exchanges__separator-vertical {
   display: none;
 }

 .exchanges__platforms {
   flex-direction: column;
   gap: clamp(1rem, 3vw, 1.5rem);
   width: 100%;
 }

 .exchanges__platform {
   min-width: auto;
 }
 
 .exchanges__logo--kwork {
   max-width: 90px;
 }

 .exchanges__logo--freelance {
   max-width: 250px;
 }
 
 .exchanges__logo--fl {
   max-width: 40px;
 }
 
 /* Убираем анимации на мобильных */
 .exchanges__title,
 .exchanges__platform,
 .exchanges__logo {
   animation: none;
 }
}

@media (prefers-reduced-motion: reduce) {
 .exchanges__title,
 .exchanges__platform,
 .exchanges__logo {
   animation: none !important;
 }
}