/* Pentamarket Home Divider V1.2
   Single-pass ticker: one complete message crosses the viewport before looping.
   UI-only. No checkout/order/payment logic. */

.penta-banner-zone {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  margin-top: -26px;
  padding: 26px 28px 19px;
  background: #18263f;
}

.penta-devline,
.penta-devline * {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.penta-devline {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  color: #fff;
  background: #111827;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.20);
}

/* Thin August red/white section divider. */
.penta-devline::before,
.penta-devline::after {
  content: "";
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #dc2626 0 60px,
    #f8fafc 60px 120px
  );
}

.penta-devline-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  padding: 8px 0 9px;
  background: linear-gradient(
    90deg,
    rgba(190,36,220,.025),
    transparent 16%,
    transparent 84%,
    rgba(190,36,220,.025)
  );
}

/*
  IMPORTANT:
  Only one content group exists. 100vw of leading space puts its first letter
  just outside the right edge. translateX(-100%) moves the complete track
  (viewport lead-in + entire message) until the last letter has left the left
  edge. Only then does the animation restart off-screen on the right.
*/
.penta-devline-track {
  display: inline-flex;
  width: max-content;
  min-width: max-content;
  padding-left: 100vw;
  will-change: transform;
  animation: pentaDevlineTicker 16s linear infinite;
}

.penta-devline-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  padding: 0;
  white-space: nowrap;
}

.penta-devline-title,
.penta-devline-message {
  flex: 0 0 auto;
  line-height: 1.15;
  white-space: nowrap;
}

.penta-devline-title {
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.penta-devline-message {
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .006em;
}

/* The old purple bullet is intentionally removed. */
.penta-devline-separator {
  display: none !important;
}

@keyframes pentaDevlineTicker {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-100%,0,0); }
}

/* Admin preview uses the same single-pass behavior. */
.penta-devline.penta-devline--preview {
  left: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
  border-radius: 8px;
}

.penta-devline--preview .penta-devline-track {
  padding-left: 100%;
  animation-duration: 14s;
}

@media (min-width: 640px) {
  .penta-banner-zone {
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 22px;
  }

  .penta-devline::before,
  .penta-devline::after {
    height: 3px;
    background: repeating-linear-gradient(
      90deg,
      #dc2626 0 84px,
      #f8fafc 84px 168px
    );
  }

  .penta-devline-viewport {
    padding: 10px 0 11px;
  }

  .penta-devline-track {
    animation-duration: 20s;
  }

  .penta-devline-group {
    gap: 17px;
  }

  .penta-devline-title,
  .penta-devline-message {
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  .penta-banner-zone {
    margin-top: -31px;
    padding: 31px 36px 24px;
  }

  .penta-devline-track {
    animation-duration: 22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .penta-devline-track {
    animation: none;
    transform: none;
    padding-left: 16px;
  }
}