/* ==========================================================================
   Dividers + Decorative Elements
   ========================================================================== */

.divider {
  height: 0;
  border-top: 2px solid var(--stroke);
  margin-block: var(--sp-8);
}

.divider--thick { border-top-width: 4px; }
.divider--accent { border-top-color: var(--accent); border-top-width: 4px; }

/* Marquee-style divider with running text or icons */
.marquee {
  background-color: var(--ink);
  color: var(--bg);
  border-block: 2px solid var(--stroke);
  overflow: hidden;
  padding-block: var(--sp-3);
  font-family: var(--ff-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: clamp(1rem, 2vw, 1.5rem);
}

.marquee--accent {
  background-color: var(--accent);
  color: var(--ink-on-accent);
}

.marquee__track {
  display: flex;
  gap: var(--sp-8);
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.marquee__track > span::after {
  content: "✦";
  color: inherit;
  opacity: 0.6;
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---- Grid background pattern (neobrutalism signature) ----------------- */
/* Apply via class on hero/section: shows faint dotted/grid pattern */

.bg-grid {
  background-image:
    linear-gradient(to right,  rgba(17, 17, 17, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 17, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}

[data-theme="dark"] .bg-grid {
  background-image:
    linear-gradient(to right,  rgba(244, 244, 238, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 244, 238, 0.05) 1px, transparent 1px);
}

.bg-dots {
  background-image: radial-gradient(rgba(17, 17, 17, 0.18) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

[data-theme="dark"] .bg-dots {
  background-image: radial-gradient(rgba(244, 244, 238, 0.12) 1.2px, transparent 1.2px);
}