/* =========================================================
   MCN ENGINE — PROMOTION RAIL
   Dynamic Homepage Promotion System
========================================================= */

.mcn-promotion-rail {

  width: calc(100% - 28px);

  max-width: 1200px;

  min-height: 52px;

  margin: 12px auto 18px;

  box-sizing: border-box;

  overflow: hidden;

  display: flex;

  align-items: center;

  position: relative;

  background: var(--mcn-surface);

  color: var(--mcn-text);

  border: 1px solid var(--mcn-border);

  border-radius: 14px;

}


/* =========================================================
   PROMOTION TRACK
========================================================= */

.mcn-promotion-track {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  position: relative;

}


/* =========================================================
   PROMOTION ITEM — CAROUSEL MODE
========================================================= */

.mcn-promotion-item {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: max-content;

  max-width: none;

  white-space: nowrap;

  color: var(--mcn-text);

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;

}


/* =========================================================
   PROMOTION ROTATION
========================================================= */

/* Rotation is controlled by the MCN Promotion System. */


/* =========================================================
   PROMOTION ITEM
========================================================= */

/* Base promotion item styles are defined above. */


/* =========================================================
   PROMOTION ICON
========================================================= */

.mcn-promotion-icon {

  font-size: 16px;

  line-height: 1;

}


/* =========================================================
   PROMOTION TITLE
========================================================= */

.mcn-promotion-title {

  color: var(--mcn-text);

}


/* =========================================================
   PROMOTION TYPE
========================================================= */

.mcn-promotion-type {

  color: var(--mcn-primary);

  font-size: 11px;

  font-weight: 700;

}


/* =========================================================
   HOVER
========================================================= */

.mcn-promotion-item:hover {

  text-decoration: underline;

}


/* =========================================================
   GENTLE CENTER PAUSE ANIMATION
========================================================= */

.mcn-promotion-item {

  position: absolute;

  left: 50%;

  animation:
    mcn-promotion-gentle 7s ease-in-out forwards;

}


@keyframes mcn-promotion-gentle {

  0% {

    transform:
      translateX(120vw);

  }

  30% {

    transform:
      translateX(-50%);

  }

  68% {

    transform:
      translateX(-50%);

  }

  100% {

    transform:
      translateX(-120vw);

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .mcn-promotion-item {

    animation: none;

    transform:
      translateX(-50%);

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .mcn-promotion-rail {

    width:
      calc(100% - 24px);

    min-height:
      48px;

    margin:
      10px auto 16px;

    border-radius:
      12px;

  }

    .mcn-promotion-item {

    font-size:
      12px;

    max-width:
      none;

  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .mcn-promotion-rail {

    width:
      calc(100% - 20px);

  }

  .mcn-promotion-item {

    font-size:
      11px;

    left:
      50%;

  }

}