/* Seamless Systems — supplemental styles
   Tailwind via CDN handles 99% of styling. This file adds:
   - Hero crossfade animation
   - prefers-reduced-motion respect
   - focus rings
   - small Tailwind-can't-express details
*/

:root {
  --copper: #B35C2E;
  --ochre: #C28B2C;
  --charcoal: #2B2B28;
  --sandstone: #D6C6AE;
  --offwhite: #F4F1EA;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Hero crossfade — layers fade between 4 service images */
.hero-layer {
  transition: opacity 1.2s ease-in-out, transform 8s ease-out;
  will-change: opacity, transform;
}
.hero-layer.is-active {
  opacity: 1;
  transform: scale(1.06);
}

/* Service ticker active state */
.hero-pill.is-active { color: var(--copper); }

/* Focus rings — WCAG 2.2 AA */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
}

/* Native details/summary arrow off — we use our own */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* Selection */
::selection { background: var(--copper); color: var(--offwhite); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-layer { transition: none; transform: none; }
}

/* Form autofill — keep dark theme */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--offwhite);
  -webkit-box-shadow: 0 0 0px 1000px #1F1F1D inset;
  caret-color: var(--offwhite);
}