/* 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__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(2rem, 5vw, 4rem);
}

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

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

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

@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;
}

.exchanges__logo--freelance {
 width: 301px;
 height: 42px;
 animation-delay: 0.5s;
}

.exchanges__logo--fl {
 width: 51px;
 height: 42px;
 animation-delay: 2s;
}

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

/* Создаем псевдоэлементы с активными картинками */
.exchanges__platform--freelance::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 301px;
 height: 42px;
 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;
}

.exchanges__platform--fl::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 51px;
 height: 42px;
 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;
}

@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;
 }
}

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

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

 .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;
 }
 
 .exchanges__logo--freelance {
   width: clamp(200px, 50vw, 301px);
   height: auto;
 }
 
 .exchanges__logo--fl {
   width: clamp(40px, 10vw, 51px);
   height: auto;
 }
 
 .exchanges__platform--freelance::before {
   width: clamp(200px, 50vw, 301px);
   height: auto;
 }
 
 .exchanges__platform--fl::before {
   width: clamp(40px, 10vw, 51px);
   height: auto;
 }
}

@media (width <= 480px) {
 .exchanges__platforms {
   flex-direction: column;
   gap: clamp(1rem, 3vw, 1.5rem);
   width: 100%;
 }
 
 .exchanges__logo--freelance {
   max-width: 250px;
   height: auto;
 }
 
 .exchanges__logo--fl {
   max-width: 40px;
   height: auto;
 }
 
 /* Убираем анимации на мобильных */
 .exchanges__title,
 .exchanges__platform,
 .exchanges__logo {
   animation: none;
 }
}

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