/* ═══════════════════════════════════════════════════════════════
   marquee.css  –  Continuous Scrolling Ticker-Tape Component
   Reusable, configurable, accessible infinite scroll marquee.
   ═══════════════════════════════════════════════════════════════ */

/* ── WRAPPER ─────────────────────────────────────────────────── */

.marquee-wrapper {
  width: 100%;
  height: var(--marquee-height);
  background-color: var(--marquee-bg);
  border-top: var(--border-base);
  border-bottom: var(--border-base);

  display: flex;
  align-items: center;
  overflow: hidden;

  position: relative;
  z-index: var(--z-marquee);

  /* Mask edges for a fade-in / fade-out effect */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

/* ── COLOUR THEME VARIANTS ──────────────────────────────────── */

.marquee-wrapper--pink {
  --marquee-bg:    var(--color-accent-pink);
  --marquee-color: var(--color-surface);
  height: 36px;
}

.marquee-wrapper--black {
  --marquee-bg:    var(--color-ink);
  --marquee-color: var(--color-primary);
  height: 52px;
  --marquee-font-size: var(--text-base);
}

/* ── SCROLLING TRACK ─────────────────────────────────────────── */

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  white-space: nowrap;

  /* Animate: slides the full width leftward then loops */
  animation: marqueeScroll var(--marquee-duration) linear infinite;
  will-change: transform;
}

/* Reversed direction variant */
.marquee-wrapper--reverse .marquee-track {
  animation-direction: reverse;
}

/* Fast variant */
.marquee-track--fast {
  animation-duration: 14s;
}

/* ── INDIVIDUAL ITEMS ────────────────────────────────────────── */

.marquee-item {
  font-family: var(--font-display);
  font-size: var(--marquee-font-size);
  font-weight: var(--marquee-font-weight);
  letter-spacing: var(--marquee-letter-spacing);
  text-transform: uppercase;
  color: var(--marquee-color);
  line-height: 1;
  flex-shrink: 0;
}

/* ── SEPARATOR BETWEEN ITEMS ─────────────────────────────────── */

.marquee-item:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--marquee-color);
  border-radius: 50%;
  margin-left: var(--marquee-gap);
  opacity: 0.6;
  vertical-align: middle;
}

/* ── KEYFRAME ───────────────────────────────────────────────── */

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Translate by exactly half the track width (since we duplicate items) */
    transform: translateX(-50%);
  }
}

/* ── PAUSE ON HOVER (accessibility / usability) ─────────────── */

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    /* Fallback: show items in a static wrapping row */
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
  }

  .marquee-wrapper {
    height: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CAUTION MARQUEE VARIANT
   Yellow background, thick black borders top & bottom,
   bold black text — sits flush against the hero bottom edge.
   ═══════════════════════════════════════════════════════════════ */

.marquee-wrapper--caution {
  --marquee-bg:    var(--color-primary);       /* mustard yellow  */
  --marquee-color: var(--color-ink);           /* stark black     */
  --marquee-font-size: var(--text-base);
  --marquee-letter-spacing: var(--tracking-wide);

  height: auto;
  padding: 16px 0;

  /* Thick top AND bottom black borders for the "caution tape" look */
  border-top:    4px solid var(--color-ink);
  border-bottom: 4px solid var(--color-ink);

  position: relative;
  z-index: 5;

  /* Slightly faster than default for urgency */
  animation: none; /* wrapper itself doesn't animate */
}

.marquee-wrapper--caution .marquee-track {
  animation-duration: 22s;   /* faster scroll */
}

/* ── Diagonal stripe texture inside the caution bar ─────────── */
.marquee-wrapper--caution::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent         0px,
    transparent        12px,
    rgba(0, 0, 0, 0.06) 12px,
    rgba(0, 0, 0, 0.06) 14px
  );
  pointer-events: none;
  z-index: 0;
}

/* Push track above the stripe texture */
.marquee-wrapper--caution .marquee-track {
  position: relative;
  z-index: 1;
}

/* Remove the dot separators — the long text runs end-to-end */
.marquee-wrapper--caution .marquee-item:not(:last-child)::after {
  display: none;
}

/* Responsive Marquee Adjustments */
@media (max-width: 767px) {
  .marquee-track {
    animation-duration: 25s !important; /* Slow down animation slightly on smaller screen widths */
  }
  .marquee-wrapper--caution .marquee-track {
    animation-duration: 30s !important;
  }
}