/* Contact card glow-border pulse, triggered on click */
@keyframes glowBorderAnim {
  0%   { box-shadow: 0 0 0px rgba(220,38,38,0.0); border-color: rgba(220,38,38,0.0); }
  50%  { box-shadow: 0 0 40px rgba(220,38,38,0.8); border-color: rgba(220,38,38,0.8); }
  100% { box-shadow: 0 0 0px rgba(220,38,38,0.0); border-color: rgba(220,38,38,0.0); }
}

.animate-glow {
  animation: glowBorderAnim 1s ease-out;
}

/* Tech-stack marquee */
.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: inline-flex;
  gap: 2.5rem;
  width: max-content;
  padding: 0.5rem 0;
}

/* Color/background/border for .marquee-item are set via Tailwind utility classes
   inline (light/dark variants) — this only handles structural/typographic rules. */
.marquee-item {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  white-space: nowrap;
}

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

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

.marquee-left  { animation: marqueeLeft 30s linear infinite; }
.marquee-right { animation: marqueeRight 30s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .marquee-left, .marquee-right, .animate-glow {
    animation: none;
  }
}