/* ==========================================================================
   Slogans
   Monotics WordPress Theme
   ========================================================================== */

.slogans {
  position: relative;
  padding: 56px 0;
  background: var(--navy2);
  border-top: 1px solid rgba(0, 200, 255, 0.06);
  border-bottom: 1px solid rgba(0, 200, 255, 0.06);
  overflow: hidden;
}

.slogans-inner {
  position: relative;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 개별 슬로건 아이템 */
.slogan-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  animation: slogan-cycle 20s infinite;
}

/* 첫 번째 아이템은 지연 없이 바로 시작 */
.slogan-item:first-child {
  animation-delay: 0s;
}

.slogan-main {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.4px;
  line-height: 1.35;
  margin: 0 0 10px;
}

.slogan-sub {
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0.2px;
  margin: 0;
}

/* 순환 애니메이션 — 총 20s 주기, 슬로건당 5s */
@keyframes slogan-cycle {
  0%   { opacity: 0; transform: translateY(14px); }
  6%   { opacity: 1; transform: translateY(0);    }
  19%  { opacity: 1; transform: translateY(0);    }
  25%  { opacity: 0; transform: translateY(-14px);}
  100% { opacity: 0; transform: translateY(14px); }
}