/* ============================================================
   ProductTrio - homepage touches
   Three additions kept from the redesign exploration:
   1. mono hero eyebrow  2. rotating client-logo marquee
   3. custom cursor (dot + ring)
   Loaded after the shared Webflow stylesheet.
   ============================================================ */

/* ---------- 1. hero eyebrow ---------- */
.pt-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: #546681;
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px; margin-bottom: 18px; white-space: nowrap;
  text-align: left;
}
.pt-eyebrow .dot-sep {
  width: 5px; height: 5px; border-radius: 50%;
  background: #dcb958; display: inline-block;
}
@media (max-width: 640px) {
  .pt-eyebrow { font-size: 11px; letter-spacing: 2px; }
}

/* ---------- 2. rotating client logos ---------- */
.pt-marquee {
  overflow: hidden; position: relative; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pt-marquee-track {
  display: flex; align-items: center; gap: clamp(48px, 6vw, 90px);
  width: max-content; animation: ptMarquee 34s linear infinite;
  padding-right: clamp(48px, 6vw, 90px);
}
.pt-marquee:hover .pt-marquee-track { animation-play-state: paused; }
.pt-marquee-track a { flex: none; display: flex; align-items: center; }
.pt-marquee-track img {
  height: 32px; width: auto; max-width: 180px; object-fit: contain;
  opacity: 0.85; transition: opacity .3s ease;
}
.pt-marquee-track img:hover { opacity: 1; }
@keyframes ptMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pt-marquee { mask-image: none; -webkit-mask-image: none; }
  .pt-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---------- 3. custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; background: #4d53c4; }
.cursor-ring {
  width: 34px; height: 34px; border: 1.5px solid rgba(77, 83, 196, 0.45);
  transition: width .28s ease, height .28s ease, border-color .28s ease, background-color .28s ease;
}
.cursor-ring.is-active {
  width: 56px; height: 56px;
  border-color: rgba(220, 185, 88, 0.9);
  background: rgba(220, 185, 88, 0.10);
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}