/* Animated marquee strips — Figma 843:165 / 843:249 / 843:155. Mixed display fonts, scrolling. */
.marquee {
  overflow: hidden;
  height: calc(137 * var(--px));   /* Figma strip height */
  display: flex;
  align-items: center;
}
.marquee--a { background: #6d3856; }   /* mauve */
.marquee--b { background: #2f255b; }   /* indigo */
.marquee--c { background: #ffeef6; }   /* pink, dark text */
.marquee--c .marquee__word { color: #1a1a1a; }
.marquee--d { background: #2b005f; }   /* purple — "!TRENDING!", under Book-a-room (1313:92) */
.marquee--e { background: #74234b; }   /* wine — mobile strip under What's on (1313:480) */

/* ---- Variant D "!TRENDING!" adapted to DESKTOP. The bar was built mobile-only
   (Figma mobile frame 1313:92, sized in --mpx); there is no desktop Figma frame,
   so this scales that design up into the desktop --px system — proportions kept
   (mobile strip 66 tall → desktop base 137, ≈2.08×). The base .marquee already
   gives the 137*--px height; these add the lead, note icons and six genre fonts.
   Guarded to ≥601px so it never collides with the --mpx mobile rules below. ---- */
@media (min-width: 601px) {
  .marquee--d .marquee__lead  { padding-left: calc(33 * var(--px)); padding-right: calc(31 * var(--px)); }
  .marquee--d .marquee__cell  { --cell-gap: calc(48 * var(--px)); --note-gap: calc(37 * var(--px)); }
  .marquee--d .marquee__note  { flex: 0 0 auto; width: calc(41.5 * var(--px)); height: calc(54 * var(--px)); }
  .f-doto     { font-family: "Doto", monospace; font-weight: 700; font-variation-settings: "ROND" 0; font-size: calc(60 * var(--px)); }
  /* Luminari is a macOS system font (no web release) — Uncial Antiqua stands in. */
  .f-luminari { font-family: "Luminari", "Uncial Antiqua", fantasy; font-size: calc(35.3 * var(--px)); letter-spacing: calc(3.88 * var(--px)); }
  .f-courier  { font-family: "Courier New", monospace; font-weight: 700; font-size: calc(43 * var(--px)); letter-spacing: calc(1.72 * var(--px)); }
  .f-dela     { font-family: "Dela Gothic One", sans-serif; font-size: calc(38.3 * var(--px)); letter-spacing: calc(1.53 * var(--px)); }
  .f-genos    { font-family: "Genos", sans-serif; font-weight: 700; font-size: calc(48.9 * var(--px)); letter-spacing: calc(1.96 * var(--px)); }
  .f-gruppo   { font-family: "Gruppo", sans-serif; font-size: calc(57.5 * var(--px)); letter-spacing: calc(2.3 * var(--px)); }
  .f-gravitas { font-family: "Gravitas One", serif; font-size: calc(37 * var(--px)); letter-spacing: calc(1.48 * var(--px)); }
}

/* Viewport clips the scrolling track. With a static lead (variant B) it fills the
   space AFTER the lead, so the scroll starts right after "What's new?". */
.marquee__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* Static lead label, pinned at the left; does not scroll. */
.marquee__lead {
  flex: 0 0 auto;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  padding-left: clamp(20px, calc(64 * var(--px)), 64px);
  padding-right: calc(80 * var(--px));
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee--rtl .marquee__track { animation-name: marquee-scroll-rtl; }
/* The keyframes above are only a NO-JS FALLBACK: landing.js disables them and
   drives the transform itself, re-measuring the group width every frame so the
   loop seam can never drift (the -50% here goes stale when the display webfonts
   load and widen the track — that painted the two word groups on top of each
   other). The JS also eases the strip to ~1/6 speed while hovered on
   hover-capable devices only. */
.marquee__group {
  display: flex;
  align-items: center;
}
/* Every note+word is one cell with the SAME right margin — so the space after
   the last word (the join between repeated copies) is identical to the space
   between any two words. Uniform by construction: no per-browser "seam" tuning,
   and no way for the wrap to look tighter than the rest of the strip. */
.marquee__cell {
  display: inline-flex;
  align-items: center;
  gap: var(--note-gap, 0px);                 /* note icon → its word */
  margin-right: var(--cell-gap, calc(80 * var(--px)));
}
.marquee__word {
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
/* No-JS fallback only (landing.js drives the transform itself). Track is 3
   copies, so one copy = -100%/3; moving by exactly one copy loops seamlessly. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@keyframes marquee-scroll-rtl {
  from { transform: translateX(-33.3333%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Marquee C is duplicated in two section positions (after SFE for desktop,
   before SFE for mobile); show only the one matching the breakpoint. */
.marquee--mobile-only { display: none; }
@media (max-width: 600px) {
  .marquee--desktop-only { display: none; }
  .marquee--mobile-only { display: flex; }
}

/* ---- Variant D: "!TRENDING!" (Figma "Frame 15641" 1313:92, 1518x66 on the
   421-wide mobile frame). Mobile-only, so everything is sized in --mpx, which is
   1 Figma-mobile px. "!TRENDING!" is the static lead at x=16; the six genres
   scroll past it, each preceded by the white note icon (1313:100..105, 20x26). */
@media (max-width: 600px) {
  .marquee.marquee--d { height: calc(66 * var(--mpx)); }
  .marquee--d .marquee__lead {
    padding-left: calc(16 * var(--mpx));
    padding-right: calc(15 * var(--mpx));
  }
  .marquee--d .marquee__cell {
    --cell-gap: calc(24 * var(--mpx));
    --note-gap: calc(18 * var(--mpx));
  }
  .marquee--d .marquee__note {
    flex: 0 0 auto;
    width: calc(20 * var(--mpx));
    height: calc(26 * var(--mpx));
  }
  .f-doto     { font-family: "Doto", monospace; font-weight: 700; font-variation-settings: "ROND" 0; font-size: calc(28.98 * var(--mpx)); }
  /* Luminari is a macOS system font (no web release) — Uncial Antiqua stands in elsewhere. */
  .f-luminari { font-family: "Luminari", "Uncial Antiqua", fantasy; font-size: calc(17.004 * var(--mpx)); letter-spacing: calc(1.871 * var(--mpx)); }
  .f-courier  { font-family: "Courier New", monospace; font-weight: 700; font-size: calc(20.737 * var(--mpx)); letter-spacing: calc(0.83 * var(--mpx)); }
  .f-dela     { font-family: "Dela Gothic One", sans-serif; font-size: calc(18.469 * var(--mpx)); letter-spacing: calc(0.739 * var(--mpx)); }
  .f-genos    { font-family: "Genos", sans-serif; font-weight: 700; font-size: calc(23.577 * var(--mpx)); letter-spacing: calc(0.943 * var(--mpx)); }
  .f-gruppo   { font-family: "Gruppo", sans-serif; font-size: calc(27.703 * var(--mpx)); letter-spacing: calc(1.108 * var(--mpx)); }
  .f-gravitas { font-family: "Gravitas One", serif; font-size: calc(17.84 * var(--mpx)); letter-spacing: calc(0.714 * var(--mpx)); }

  /* ---- Variant E: wine strip under What's on (Figma "Frame 15600" 1313:480,
     627x52). Row starts 16 from the left, 16.481 between words. ---- */
  .marquee.marquee--e { height: calc(52 * var(--mpx)); }
  .marquee--e .marquee__cell { --cell-gap: calc(16.481 * var(--mpx)); }
  .marquee--e .marquee__viewport { padding-left: calc(16 * var(--mpx)); }
  .f-lobster-m { font-family: "Lobster", cursive; font-size: calc(21.232 * var(--mpx)); }
  .f-climate-m {
    font-family: "Climate Crisis", cursive; font-variation-settings: "YEAR" 1990;
    font-size: calc(14.482 * var(--mpx)); letter-spacing: calc(-0.4345 * var(--mpx));
  }
}

/* per-word display fonts (substitutes for the Figma novelty set) */
.f-lobster   { font-family: "Lobster", cursive; font-size: calc(60 * var(--px)); letter-spacing: .02em; }
.f-comfortaa { font-family: "Comfortaa", cursive; font-weight: 700; font-size: calc(38 * var(--px)); letter-spacing: .18em; }
.f-mono      { font-family: "Monoton", cursive; font-size: calc(50 * var(--px)); letter-spacing: -.02em; }
.f-climate   { font-family: "Climate Crisis", cursive; font-size: calc(34 * var(--px)); }
.f-shade     { font-family: "Bungee Shade", cursive; font-size: calc(34 * var(--px)); }
.f-lead      { font-size: calc(52 * var(--px)); letter-spacing: .04em; }
.f-plain     { font-family: var(--font-sans); font-weight: 400; font-size: calc(34 * var(--px)); }
.f-serif     { font-family: var(--font-display); font-weight: 400; font-size: calc(46 * var(--px)); }
/* variant C (pink) — larger, like the Figma music-library strip */
.f-bold      { font-family: var(--font-sans); font-weight: 800; font-size: calc(52 * var(--px)); letter-spacing: .01em; }
.f-serif-it  { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(60 * var(--px)); }
.f-outline   {
  font-family: var(--font-sans); font-weight: 700; font-size: calc(52 * var(--px)); letter-spacing: .01em;
  color: transparent !important; -webkit-text-stroke: calc(1.6 * var(--px)) #1a1a1a;
}