/* ============================================================
   Manfareed Logistics — companion styles
   Styling is Tailwind-first (see index.html). This file only
   holds the few things utilities can't express cleanly:
   base tweaks, the signature road-line, reveal animation,
   <details> marker reset, focus rings, and reduced motion.
   ============================================================ */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #F97316;
  outline-offset: 3px;
}

/* <details> marker reset (FAQ) */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Reveal-on-scroll — .reveal is added by JS so no-JS stays visible */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Signature: mile-marker amber road line ---------- */
.milemarkers { position: relative; }
.milemarkers::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 33px; height: 3px;
  background: linear-gradient(90deg, #F97316, #FFB27D);
  border-radius: 3px;
  opacity: .5;
}
@media (max-width: 1023px) {
  .milemarkers::before {
    left: 33px; right: auto; top: 33px; bottom: 33px;
    width: 3px; height: auto;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}