/* ==========================================================================
   07-MARQUEE.CSS  —  the "coming soon" ticker band
   --------------------------------------------------------------------------
   A quiet strip between the hero and the templates, listing the occasions we
   are still working on. The items scroll slowly and endlessly to the left.

   HOW THE ENDLESS LOOP WORKS (no JavaScript involved)
   The list of items is printed TWICE, side by side, inside one long track.
   The track then slides left by exactly half its own width and instantly
   snaps back to the start. Because the second half is identical to the
   first, the snap is invisible — it looks like one unbroken loop.

   TO CHANGE THE SPEED: edit --marquee-duration in css/01-tokens.css.
   A bigger number is slower.
   ========================================================================== */

.coming-soon {
  background-color: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-6);
}

/* ==========================================================================
   THE SCROLLING STRIP
   ========================================================================== */
.marquee {
  position: relative;
  /* Nothing may spill sideways out of this band and give the page a
     horizontal scrollbar. */
  overflow: hidden;
  padding-block: var(--space-4);
  margin-top: var(--space-4);

  /* Items dissolve at both edges instead of being cut off with a hard line */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hovering holds the ticker still so a name can be read properly */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__set {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   ONE ITEM  —  ✦ Wedding Invitation
   The left and right margins are what space the items out. They are also
   what keeps the loop seamless: the gap where the list wraps around is made
   of the same two margins as every other gap, so it matches exactly.
   ========================================================================== */
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline: clamp(1.5rem, 3vw, 3rem);
  white-space: nowrap;

  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-marquee);
  letter-spacing: 0.01em;
  /* Deliberately quiet. This is upcoming work, not the main offer, so it
     must never compete with the template cards below. */
  color: var(--ink-muted);
}

.marquee__star {
  width: var(--star-size);
  height: var(--star-size);
  flex: none;
  fill: var(--orange);
}


/* ==========================================================================
   REDUCED MOTION
   If the visitor's device asks for less movement, the ticker stops being a
   ticker. The duplicate copy is removed and the items re-lay themselves as a
   centred, wrapped, completely still list — fully readable, never frozen
   halfway through a scroll.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
    width: auto;
    max-width: 100%;
  }

  /* The second, screen-reader-hidden copy is only there to make the loop
     seamless. With no loop, it is not needed. */
  .marquee__set--duplicate {
    display: none;
  }

  .marquee__set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-2);
  }
}