/* ==========================================================================
   Up Keep Elétrica — bespoke CSS
   Purpose: the only hand-written CSS on the site. Lifted verbatim from
   design_system/upkeep-design-system.html so the pages and the design system
   cannot drift apart. Everything else is Tailwind utilities.
   Created: 2026-08-26
   ========================================================================== */

body {
  background-color: #FFFFFF;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll reveal — curve inherited unchanged from the reference system */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* The logo sub-wordmark tracking, measured from the artwork: 0.8em.
   No Tailwind utility comes close, so it is declared explicitly. */
.tracking-logo {
  letter-spacing: 0.8em;
  margin-right: -0.8em;
}

/* Accordion */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Scrollbar, warm to match the palette */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F4E9D7; }
::-webkit-scrollbar-thumb { background: #D6C3A5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #AB9181; }

/* --------------------------------------------------------------------------
   EXCEPTION — components not present in the design system, composed from its
   primitives. Documented here rather than invented inline.
   -------------------------------------------------------------------------- */

/* Floating WhatsApp button. Uses the design system's WhatsApp colour
   (#25D366 / #1EBE5A) and its duration-300 transition; only the circular
   shape and fixed position are new. */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
}
@media (min-width: 640px) {
  .wa-float { right: 1.5rem; bottom: 1.5rem; }
}

/* Fixed-header anchor offset. The bar is h-20 (80px); without this, in-page
   anchors land underneath it. */
:target { scroll-margin-top: 6rem; }
@media (min-width: 1024px) { :target { scroll-margin-top: 8rem; } }

/* Respect a reduced-motion preference: the entrance and hover transitions are
   decorative, so they are switched off rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}