/* ========================================
   CAROUSEL ANIMATION STYLES
   ======================================== */
/* 
   Використовується на всіх service сторінках:
   - digital-advertising.html
   - web-animations.html  
   - sound-design.html
   - explainer-videos.html
   - showreels.html
   
   Анімація "Choose my service and get..." з горизонтальним карусельним ефектом
   Текст вилітає вправо з fade out ефектом, потім з'являється зліва з fade in
   Включає стилі для тексту, контейнерів та keyframes анімації
*/

/* Контейнер для анімованого тексту */
.animated-text-container {
  text-align: left;
  margin: 0 0 30px 0;
}

/* Статичний текст "Choose my service and get" */
.animated-text {
  font-family: var(--font-family);
  font-size: 1.3rem;
  font-weight: 700;
  color: white;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
}

/* Статичний текст (альтернативний клас) */
.static-text {
  font-family: var(--font-family);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  height: 40px;
}

/* Контейнер для анімованих текстів (карусель) */
.circular-texts {
  display: inline-block;
  width: 400px;
  text-align: left;
  height: 50px;
  vertical-align: top;
  position: relative;
  overflow: visible;
  white-space: nowrap;
}

/* Окремі елементи анімованого тексту */
.circular-texts > div {
  font-family: var(--font-family);
  font-size: 1.3rem;
  opacity: 0;
  position: absolute;
  font-weight: 700;
  color: white;
  box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
  line-height: 1.2;
  height: 40px;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translateX(-30px);
}

/* ПОСЛІДОВНЕ ПРОКРУЧУВАННЯ: 1-й → 2-й → 3-й → 4-й → 5-й → 1-й → 2-й → 3-й → 4-й → 5-й → і так завжди */

/* Булет 1: Заїзджає зліва, стоїть 2 сек, летить праворуч, повторюється після 5-го */
.circular-texts > div:nth-child(1) {
  animation: bullet-single 11.5s ease-out infinite 0s;
}

/* Булет 2: Залітає після того, як 1-й зникне */
.circular-texts > div:nth-child(2) {
  animation: bullet-single 11.5s ease-out infinite 2.3s;
}

/* Булет 3: Залітає після того, як 2-й зникне */
.circular-texts > div:nth-child(3) {
  animation: bullet-single 11.5s ease-out infinite 4.6s;
}

/* Булет 4: Залітає після того, як 3-й зникне */
.circular-texts > div:nth-child(4) {
  animation: bullet-single 11.5s ease-out infinite 6.9s;
}

/* Булет 5: Залітає після того, як 4-й зникне */
.circular-texts > div:nth-child(5) {
  animation: bullet-single 11.5s ease-out infinite 9.2s;
}

/* Keyframe для послідовного прокручування - Жжжжжжж-жух! */
@keyframes bullet-single {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px);
  }
  25% {
    opacity: 0;
    transform: translateX(500px);
  }
  100% {
    opacity: 0;
    transform: translateX(500px);
  }
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

/* Tablet styles (768px) */
@media (max-width: 768px) {
  .animated-text {
    font-size: 1.2rem;
  }
  .static-text {
    font-size: 1.2rem;
    height: 35px;
  }
  .circular-texts > div {
    font-size: 1.2rem;
    height: 35px;
  }
  .circular-texts {
    width: 320px;
    height: 40px;
    overflow: visible;
  }
  
  /* Анімація працює на планшетах */
  @keyframes bullet-single {
    0% { opacity: 0; transform: translateX(-50px); }
    5% { opacity: 1; transform: translateX(0px); }
    20% { opacity: 1; transform: translateX(0px); }
    25% { opacity: 0; transform: translateX(400px); }
    100% { opacity: 0; transform: translateX(400px); }
  }
}

/* Mobile styles (480px) */
@media (max-width: 480px) {
  .animated-text-container {
    overflow: hidden;
  }
  .animated-text {
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .static-text {
    font-size: 1.1rem;
    height: auto;
    margin-bottom: 5px;
  }
  .circular-texts {
    width: 280px;
    height: 35px;
    overflow: visible;
    display: flex;
    justify-content: center;
  }
  .circular-texts > div {
    font-size: 1.1rem;
    height: 30px;
  }
  
  /* Анімація працює на мобільних */
  @keyframes bullet-single {
    0% { opacity: 0; transform: translateX(-50px); }
    5% { opacity: 1; transform: translateX(0px); }
    20% { opacity: 1; transform: translateX(0px); }
    25% { opacity: 0; transform: translateX(300px); }
    100% { opacity: 0; transform: translateX(300px); }
  }
}