/* FaultTrace — small hand-written styles layered on top of Tailwind.
   Tailwind handles the bulk; this file is for things utilities don't cover. */

html { scroll-behavior: smooth; }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Hide the default <details> marker; we use a Lucide plus icon instead. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Crisp focus rings for keyboard users. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="switch"]:focus-visible {
  outline: 2px solid #EE4F27;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Canvas should never overflow its column. */
#demo-graph { display: block; max-width: 100%; }

/* Reviews marquee: auto-drift when .is-looping (set by marquee.js); scrollable strip otherwise.
   The scrollbar is hidden in both modes. */
.reviews-marquee { overflow-x: auto; scrollbar-width: none; }
.reviews-marquee::-webkit-scrollbar { display: none; }
.reviews-marquee.is-looping { overflow: hidden; }
.reviews-track { width: max-content; }
.is-looping .reviews-track { animation: reviews-drift 50s linear infinite; }
.reviews-marquee.is-looping:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-drift { to { transform: translateX(calc(-50% - 12px)); } }
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee.is-looping { overflow-x: auto; }
  .is-looping .reviews-track { animation: none; }
}

/* Scroll-reveal (classes applied by reveal.js; nothing happens under reduced motion). */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }

/* Interactive cards: n8n-style hover lift. Targets the cards that already opt into a hover border. */
[class*="hover:border-accent"] { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
[class*="hover:border-accent"]:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(238, 79, 39, .13); }
@media (prefers-reduced-motion: reduce) {
  [class*="hover:border-accent"]:hover { transform: none; }
}