/* ==========================================================================
   Fairacres Lighting — shared styles (used by all pages, on top of Tailwind)
   Palette: dusk navy #1A293C · near-black #141821 · cream #F4EEE3 · gold #C9A24B
   ========================================================================== */

:root {
  --navy: #1A293C;
  --ink: #141821;
  --cream: #F4EEE3;
  --gold: #C9A24B;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--ink);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif headlines get slightly tighter, more elegant tracking */
.font-serif {
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Gold CTA glow — subtle at rest, warm bloom on hover/focus
   -------------------------------------------------------------------------- */
.btn-gold {
  background-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 rgba(201, 162, 75, 0);
  transition: box-shadow 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background-color: #d6b25e;
  box-shadow: 0 0 28px rgba(201, 162, 75, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.btn-outline {
  border: 1px solid rgba(201, 162, 75, 0.5);
  color: var(--gold);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--gold);
  background-color: rgba(201, 162, 75, 0.08);
  box-shadow: 0 0 20px rgba(201, 162, 75, 0.25);
}

/* --------------------------------------------------------------------------
   Cards — quiet lift + gold edge on hover
   -------------------------------------------------------------------------- */
.card {
  background-color: rgba(26, 41, 60, 0.65);
  border: 1px solid rgba(244, 238, 227, 0.08);
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  border-color: rgba(201, 162, 75, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Scroll-reveal animation (elements with .reveal fade/rise in when visible;
   assets/site.js adds .is-visible via IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger helper for grids of revealed items */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-gold:hover { transform: none; }
  .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Decorative touches
   -------------------------------------------------------------------------- */

/* Thin gold rule used under section headings */
.gold-rule {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 162, 75, 0.2));
}

/* Hero backdrop: deep dusk gradient with a warm horizon glow.
   Doubles as the fallback behind .hero-photo if the photo hasn't loaded. */
.hero-dusk {
  background:
    radial-gradient(1100px 420px at 50% 108%, rgba(201, 162, 75, 0.18), transparent 65%),
    linear-gradient(180deg, #0E1624 0%, var(--navy) 60%, #223349 100%);
}

/* --------------------------------------------------------------------------
   Home hero photo: full-bleed dusk photo, softly blurred, veiled in navy so
   the headline stays crisp and the section fades seamlessly into the
   near-black content below (no hard seam).
   -------------------------------------------------------------------------- */
.hero-photo {
  position: absolute;
  /* Oversized so the blur never exposes an edge; extra negative bottom
     drops the photo lower (cropping foreground driveway) so the lit
     roofline sits below the headline and body copy. */
  inset: -14px -14px -110px;
  /* Real trimmed/compressed lit install photo; the .hero-dusk gradient
     behind this div is the fallback if it is ever missing. Anchored to the
     bottom so the lit house fills the lower half and the headline gets
     clean sky above it. */
  background-image: url("/assets/hero-house.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* barely-there blur: the copy gets its own veil, the lights stay crisp */
  filter: blur(2px) brightness(0.92);
  transform: scale(1.03);
}

.hero-veil {
  position: absolute;
  inset: 0;
  /* Darker over the sky where the nav + headline sit; nearly clear over the
     lit roofline so the lights read; short fade at the very bottom for a
     seamless seam into the near-black section below. Mobile gets a slightly
     stronger mid-veil because the copy overlaps more of the photo. */
  background: linear-gradient(
    180deg,
    rgba(20, 24, 33, 0.78) 0%,
    rgba(26, 41, 60, 0.55) 32%,
    rgba(26, 41, 60, 0.32) 58%,
    rgba(26, 41, 60, 0.22) 84%,
    rgba(20, 24, 33, 0.94) 100%
  );
}

@media (min-width: 768px) {
  .hero-photo {
    inset: -14px -14px -140px;
  }

  .hero-veil {
    background: linear-gradient(
      180deg,
      rgba(20, 24, 33, 0.74) 0%,
      rgba(26, 41, 60, 0.42) 30%,
      rgba(26, 41, 60, 0.14) 56%,
      rgba(26, 41, 60, 0.12) 84%,
      rgba(20, 24, 33, 0.94) 100%
    );
  }
}

/* Keep hero copy crisp over the photo */
.hero-copy {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.6), 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* Photo panel (info page): real photo over a dusk-gradient fallback, so the
   layout never shows a broken image even before the photo file exists. */
.photo-panel {
  aspect-ratio: 16 / 10;
  border-radius: 1rem;
  border: 1px solid rgba(244, 238, 227, 0.1);
  background-image:
    linear-gradient(180deg, rgba(26, 41, 60, 0.1), rgba(20, 24, 33, 0.35)),
    url("/assets/hero-house.jpg"),
    radial-gradient(700px 260px at 50% 100%, rgba(201, 162, 75, 0.25), transparent 65%),
    linear-gradient(180deg, #0e1624 0%, #1a293c 55%, #31435c 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Install video: portrait clip presented in a phone-style frame
   -------------------------------------------------------------------------- */
.video-frame {
  width: min(320px, 78vw);
  aspect-ratio: 9 / 16;
  border-radius: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.35);
  background-color: var(--ink);
  box-shadow:
    0 0 40px rgba(201, 162, 75, 0.16),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Before/after comparison slider (drag or use arrow keys to reveal)
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(244, 238, 227, 0.12);
  aspect-ratio: 16 / 10;
  cursor: ew-resize;
  touch-action: pan-y; /* horizontal drag compares; vertical still scrolls */
  user-select: none;
  background-color: var(--ink);
}

.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The "after" layer occupies the right side of the divider and is
   revealed by adjusting its clip rectangle */
.compare .compare-after {
  clip-path: inset(0 0 0 50%);
}

.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(244, 238, 227, 0.9);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(201, 162, 75, 0.5), 0 6px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.compare-label {
  position: absolute;
  top: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(20, 24, 33, 0.75);
  color: var(--cream);
  pointer-events: none;
}

.compare-label--before { left: 12px; }
.compare-label--after { right: 12px; color: var(--gold); }

/* Keyboard access: an invisible range input drives the same value */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.video-frame video {
  width: 100%;
  height: 100%;
  /* contain (not cover): the full 9:16 clip is always visible, never
     cropped; any rounding sliver letterboxes against the ink background */
  object-fit: contain;
  background-color: var(--ink);
  display: block;
}

/* Honeypot field — visually removed but present for bots (do not use display:none;
   some bots skip hidden inputs) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Native form controls on dark backgrounds */
input, select, textarea {
  color-scheme: dark;
}