/* Traction Digital Studio — shared styles (Tailwind CDN handles utilities; this file covers what it can't) */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Barlow', sans-serif;
  color: #343434;
}

.font-display {
  font-family: 'Barlow Condensed', sans-serif;
}

/* Terrain divider: a thin line that fades left-to-right, echoing the mark's motion lines */
.terrain-rule {
  height: 3px;
  background: linear-gradient(90deg, #749A96 0%, rgba(116,154,150,0.15) 100%);
  border-radius: 999px;
}

.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -12px rgba(52,52,52,0.25);
}

/* Hero capability strip: two identical groups back-to-back, scrolled
   from -50% to 0% so the loop is seamless and reads as moving left-to-right. */
.marquee-track {
  width: max-content;
  animation: traction-marquee 22s linear infinite;
}
@keyframes traction-marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-lift, .card-lift:hover { transition: none; transform: none; }
  .marquee-track { animation: none; transform: translateX(0%); }
}

/* Visible keyboard focus using brand celadon */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #749A96;
  outline-offset: 2px;
}