/* Seamless Systems — supplemental styles
   Tailwind via CDN handles 99% of styling. This file adds:
   - Hero crossfade animation (smooth, long-duration dissolve)
   - Page-load fade-in (kills FOUC flash on navigation)
   - prefers-reduced-motion respect
   - focus rings
   - small Tailwind-can't-express details
*/

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

/* Match the body background BEFORE Tailwind CDN loads, so the first paint
   is already charcoal instead of a flash of white. */
html {
  scroll-behavior: smooth;
  background: var(--charcoal);
  color-scheme: dark;
}
body {
  -webkit-font-smoothing: antialiased;
  background: var(--charcoal);
  color: var(--offwhite);
}

/* Page curtain — handles BOTH navigation halves with a single element.
   On page load: curtain is opaque from the very first painted byte (SSR
     + inline critical CSS). Once fonts loaded + Tailwind applied + LCP
     image decoded, app.js adds .is-hidden which fades it out (500ms).
     Net effect: every page reveal is one smooth charcoal-to-content
     fade, with zero FOUC or font-swap flash possible.
   On leaving a page: app.js adds .is-leaving which fades the curtain
     back IN (320ms) over the current page, then navigates. Because the
     curtain is the LAST painted state of the leaving page AND the FIRST
     painted state of the arriving page (same color, same element-id),
     the browser shows uninterrupted solid charcoal across navigation. */
#page-curtain {
  position: fixed;
  inset: 0;
  background: #2B2B28; /* must exactly match the inline critical CSS */
  opacity: 1; /* opaque by default — paints over the page until ready */
  pointer-events: none;
  z-index: 9999;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
#page-curtain.is-hidden {
  opacity: 0;
}
#page-curtain.is-leaving {
  opacity: 1;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero crossfade — 3 photo stills dissolve across each other slowly.
   Long 2.5s ease-in-out makes the transition feel like a film dissolve
   instead of an animation step. GPU-promoted via translateZ for
   buttery 60fps on any phone.

   Ken Burns runs PERMANENTLY on every layer (infinite alternate), not
   gated by .is-active. This is critical: if the animation were gated by
   the active class, removing the class would snap the transform back to
   scale(1) instantly while opacity fades over 2.5s — that snap is
   exactly the "quick zoom-out" the eye reads as jerky. By running the
   animation on every layer all the time, the outgoing layer keeps
   drifting smoothly during its fade-out. Each layer gets a different
   animation-delay so the 3 layers aren't all at the same scale at the
   same instant — preserves the visual variety. */
.hero-layer {
  transition: opacity 2.5s ease-in-out;
  will-change: opacity, transform;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  animation: kenburns 28s ease-in-out infinite alternate;
}
.hero-layer:nth-child(1) { animation-delay: 0s; }
.hero-layer:nth-child(2) { animation-delay: -9s; }
.hero-layer:nth-child(3) { animation-delay: -18s; }
.hero-layer.is-active {
  opacity: 1;
}
@keyframes kenburns {
  from { transform: translateZ(0) scale(1); }
  to   { transform: translateZ(0) scale(1.10); }
}

/* Hero slogan rotator — fades the H1 text in/out instead of swapping
   it instantly, so the text change feels in sync with the image dissolve. */
#hero-rotator {
  display: inline-block;
  transition: opacity 600ms ease-in-out;
  will-change: opacity;
}
#hero-rotator.is-fading { opacity: 0; }

/* Hero headline — refined typographic polish.
   Soft text-shadow lifts the type off the photo without a hard edge
   (way more elegant than a heavy black overlay). Subtle weight/tracking
   adjustment to take the edge off the all-caps Bebas Neue. */
.hero-headline {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

/* Warm radial wash on the hero — barely visible, but ties the photo
   color temperature to the brand copper accent. Adds depth without
   noticeably tinting the image. */
.hero-warm-wash {
  background: radial-gradient(
    ellipse at 75% 35%,
    rgba(179, 92, 46, 0.10) 0%,
    rgba(179, 92, 46, 0.03) 35%,
    transparent 70%
  );
}

/* ── Refined CTA buttons ───────────────────────────────────────────────
   Replaces the chunky shadow-hard / heavy 2px-border template look with
   custom-crafted controls: precise proportions, subtle depth, smooth
   hover micro-interactions, and an animated arrow on the primary. */
.btn-primary {
  background: var(--copper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* No outer glow — a quiet 1px inset highlight + a small drop shadow is
     all a refined button needs. The big copper glow we had before looked
     like a Bootstrap demo button. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out,
              background 200ms ease-out;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover {
  background: #C26938; /* +1 step warmer */
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-primary .btn-arrow {
  transition: transform 220ms ease-out;
}
.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}

/* Secondary CTA — text link with phone icon. Deliberately quiet so the
   primary copper CTA dominates the visual hierarchy. The phone number
   gets a subtle copper-on-hover underline to signal interactivity. */
.btn-link {
  position: relative;
  transition: color 200ms ease-out;
  padding: 2px 0;
}
.btn-link .btn-link-num {
  position: relative;
  display: inline-block;
}
.btn-link .btn-link-num::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 200ms ease-out, background 200ms ease-out;
}
.btn-link:hover .btn-link-num::after {
  opacity: 1;
  background: var(--copper);
}

/* Service hero (per-page) — single still with a gentle drift */
.hero-kenburns {
  animation: kenburns 22s ease-out forwards;
  will-change: transform;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
}

/* Hide scrollbar on horizontally-scrollable tab strips */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Service ticker active state — refined with a thin underline accent */
.hero-pill {
  position: relative;
  padding-bottom: 4px;
}
.hero-pill::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms ease-out;
}
.hero-pill.is-active { color: var(--copper); }
.hero-pill.is-active::after { transform: scaleX(1); }

/* 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 — kill all animations, hold static images.
   The page-load fade-in is still allowed but instant so reduced-motion
   users don't see a blank charcoal page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body { opacity: 1 !important; transition: none !important; }
  .hero-layer,
  .hero-kenburns { transition: none; transform: none; animation: none; }
  #hero-rotator { transition: none; }
  .btn-primary, .btn-link { transition: background-color 200ms ease-out, color 200ms ease-out; }
  .btn-primary:hover { transform: none; }
  .btn-primary .btn-arrow { transition: none; }
  .btn-primary:hover .btn-arrow { transform: none; }
  .hero-pill::after { transition: none; }
  /* Disable the page-curtain entirely — reduced-motion users get an
     instant navigation rather than a fade-out. */
  #page-curtain { transition: none; display: 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);
}

/* ─────────────────────────────────────────────────────────────────────────
   AEO answer block — visually distinguishes "short answer" content for AI
   Overviews / voice. Speakable schema also targets .aeo-answer.
   ───────────────────────────────────────────────────────────────────────── */
.aeo-answer {
  font-weight: 500;
}

/* Blog prose — typography for /blog/:slug long-form HTML body */
.prose-blog h2 {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--offwhite);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.prose-blog h3 {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--offwhite);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose-blog p {
  margin-bottom: 1.1rem;
  line-height: 1.75;
}
.prose-blog ul,
.prose-blog ol {
  margin: 1rem 0 1.5rem 1.5rem;
  padding-left: 0.5rem;
}
.prose-blog ul { list-style: disc; }
.prose-blog ol { list-style: decimal; }
.prose-blog li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}
.prose-blog li::marker { color: #B35C2E; }
.prose-blog strong { color: var(--offwhite); font-weight: 700; }
.prose-blog a {
  color: #B35C2E;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease-out;
}
.prose-blog a:hover { color: #C28B2C; }