/**
 * FOMO Ticker Styles — Task #1319523
 *
 * Layout: Full-width bar below sticky header (positioned via body padding).
 * Design: Dark #0f172a background, white text, gold accents for numbers.
 * Animation: Pure CSS marquee (no JS scroll), 60fps.
 * Mobile: Compact single-line version (375px).
 */

/* ── FOMO Ticker Bar ────────────────────────────────────────────────────────── */
#fomo-ticker {
  display: none;
  background: #0f172a;
  border-bottom: 1px solid rgba(245, 158, 11, 0.15);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  min-height: 38px;
  align-items: center;
  z-index: 999;
}

#fomo-ticker.visible {
  display: flex;
}

/* Inner ticker track — flex row, animates marquee */
.fomo-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0;
  gap: 0;
  animation: fomo-marquee 40s linear infinite;
}

@keyframes fomo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Each message segment */
.fomo-ticker-msg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 2.5rem;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.fomo-ticker-msg a {
  color: #fbbf24;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s;
}

.fomo-ticker-msg a:hover {
  color: #fde68a;
  text-decoration: underline;
}

/* Gold highlight for numbers */
.fomo-ticker-num {
  color: #fbbf24;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Separator dot between messages */
.fomo-ticker-sep {
  color: rgba(148, 163, 184, 0.4);
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 0.5rem;
}

/* Fire/activity emoji */
.fomo-ticker-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

/* ── Live Pulse Indicator ───────────────────────────────────────────────────── */
.fomo-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 1rem 0 0.5rem;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #4ade80;
}

.fomo-live-dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: fomo-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes fomo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%       { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

/* Bright flash when new activity fires */
@keyframes fomo-flash {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1); }
}

.fomo-live-dot.flash::before {
  animation: fomo-flash 0.5s ease-out forwards, fomo-pulse 1.8s ease-in-out infinite 0.5s;
}

/* +1 floating badge */
.fomo-plus-one {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #4ade80;
  color: #0f172a;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 20px;
  animation: fomo-plus-float 1s ease-out forwards;
  pointer-events: none;
}

@keyframes fomo-plus-float {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ── FOMO Ticker Loading Skeleton ──────────────────────────────────────────── */
#fomo-ticker.is-loading .fomo-ticker-track {
  opacity: 0;
}

#fomo-ticker:not(.is-loading) .fomo-ticker-loading {
  display: none;
}

/* ── Urgency Countdown Badges (Settlement Pages) ───────────────────────────── */
.fomo-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Closing soon — yellow/amber */
.fomo-badge-closing-soon {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Final call — red with pulse */
.fomo-badge-final-call {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
  animation: fomo-urgent-pulse 1.5s ease-in-out infinite;
}

@keyframes fomo-urgent-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%       { opacity: 0.85; box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

/* Closes today — solid red */
.fomo-badge-closes-today {
  background: #dc2626;
  color: #fff;
  font-size: 12px;
}

/* Just closed — gray */
.fomo-badge-closed {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.3);
}

/* Countdown timer text */
.fomo-countdown {
  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Pulsing CTA */
.fomo-cta-pulse {
  animation: fomo-cta-flash 1.2s ease-in-out infinite alternate;
}

@keyframes fomo-cta-flash {
  0%   { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ── Capacity / Filling-Up Warning ─────────────────────────────────────────── */
.fomo-capacity-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.fomo-capacity-track {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  overflow: hidden;
}

.fomo-capacity-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #dc2626);
  border-radius: 100px;
  transition: width 0.5s ease;
}

.fomo-capacity-fill.critical {
  background: linear-gradient(90deg, #dc2626, #b91c1c);
  animation: fomo-capacity-pulse 1s ease-in-out infinite alternate;
}

@keyframes fomo-capacity-pulse {
  0%   { opacity: 1; }
  100% { opacity: 0.7; }
}

.fomo-capacity-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

/* ── Mobile (375px) ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #fomo-ticker {
    min-height: 34px;
    font-size: 12px;
  }

  .fomo-ticker-msg {
    padding: 0 1.5rem;
    font-size: 12px;
  }

  .fomo-live-dot {
    font-size: 10px;
    padding: 0 0.75rem 0 0.5rem;
  }

  .fomo-live-dot::before {
    width: 6px;
    height: 6px;
  }

  .fomo-ticker-sep {
    padding: 0 0.25rem;
  }

  .fomo-urgency-badge {
    font-size: 11px;
    padding: 5px 10px;
  }

  .fomo-capacity-bar {
    min-width: 120px;
  }
}

@media (max-width: 375px) {
  #fomo-ticker {
    font-size: 11px;
  }

  .fomo-ticker-msg {
    font-size: 11px;
    padding: 0 1rem;
  }

  .fomo-urgency-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fomo-ticker-track {
    animation: none;
  }

  .fomo-badge-final-call {
    animation: none;
  }

  .fomo-capacity-fill.critical {
    animation: none;
  }

  .fomo-live-dot::before {
    animation: none;
  }
}