/* Dark theme for the Driftless site. Loaded after site.css on pages with <html data-theme="dark">.
   Same decal system; surfaces are black and charcoal, outlines are grey, and a few blocks
   (the estimator, the reviews band, the closing band) flip back to the light tokens so the
   page never becomes plain black with text on it. */
:root[data-theme="dark"] {
  --ink: #f3f5f7;
  --paper: #171a1e;
  --wash: #0e1012;
  --wash-line: #3b4148;
  --text: #cfd5da;
  --mute: #98a1a9;
  --orange-soft: #3a2113;
  --edge: 2px solid #59616a;
  --drop: 6px 6px 0 #2b3036;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #000; }

/* blocks that flip back to light */
[data-theme="dark"] .est,
[data-theme="dark"] .flip,
[data-theme="dark"] .closing {
  --ink: #000; --paper: #fff; --wash: #eceff2; --wash-line: #cfd5db; --text: #23272b; --mute: #5b636b;
  --orange-soft: #ffe7d9; --edge: 2.5px solid #000; --drop: 6px 6px 0 #000;
  color: var(--text);
}
[data-theme="dark"] .est { box-shadow: 10px 10px 0 var(--orange); border-color: #000; }
[data-theme="dark"] .flip .stars { -webkit-text-stroke: 0.6px #000; }

[data-theme="dark"] .strip { background: var(--orange); color: #000; }
[data-theme="dark"] .strip a { color: #000; }
[data-theme="dark"] .top { background: #000; border-bottom-color: #2b3036; }
[data-theme="dark"] .on-ink { background: var(--wash); color: var(--text); }
[data-theme="dark"] .on-ink .btn { border-color: #000; }
[data-theme="dark"] footer { background: #000; border-top: 2px solid #2b3036; }

[data-theme="dark"] .btn { box-shadow: 4px 4px 0 var(--ink); }
[data-theme="dark"] .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
[data-theme="dark"] .btn-orange { color: #000; border-color: #000; }
[data-theme="dark"] .btn-white { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--orange); }
[data-theme="dark"] .btn-white:hover { box-shadow: 6px 6px 0 var(--orange); }
[data-theme="dark"] .est .btn, [data-theme="dark"] .closing .btn, [data-theme="dark"] .flip .btn { box-shadow: 4px 4px 0 #000; border-color: #000; }
[data-theme="dark"] .closing .btn-ink { box-shadow: 4px 4px 0 #fff; }
[data-theme="dark"] .flip .btn-white { background: #fff; color: #000; }
[data-theme="dark"] .closing .btn-white { background: #fff; color: #000; }
[data-theme="dark"] .stars { -webkit-text-stroke: 0; }

[data-theme="dark"] .logo-row div { background: #fff; border-color: #fff; }
[data-theme="dark"] .logo-row div.dark { background: #000; border-color: #3b4148; }
[data-theme="dark"] .svc-icon { border-color: #000; }
[data-theme="dark"] .svc-icon svg { stroke: #000; }
[data-theme="dark"] .svc .fact { border-top-color: #2b3036; }
[data-theme="dark"] .tag { background: #fff; color: #000; border-color: #000; }
[data-theme="dark"] .tag.after { background: var(--orange); }
[data-theme="dark"] .pair img, [data-theme="dark"] .work img, [data-theme="dark"] #map { border-color: var(--ink); }
[data-theme="dark"] .work figcaption, [data-theme="dark"] .towns li { color: var(--ink); }
[data-theme="dark"] .nav.open a { border-bottom-color: #2b3036; }
[data-theme="dark"] #map .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.95) contrast(0.9); }

/* Hero scene: dusk house, drifting mist, everything reacts to scroll through --sy (0 to 1) */
[data-theme="dark"] .hero { background: #05070a; --sy: 0; }
[data-theme="dark"] .hero::before { display: none; }
.scene-bg {
  position: absolute; inset: -6% -4%;
  background: url("../assets/img/hero-house.jpg") center 38% / cover no-repeat;
  filter: brightness(1.5) contrast(1.05);
  transform: scale(calc(1.04 + var(--sy) * 0.14)) translateY(calc(var(--sy) * 5%));
  transform-origin: 60% 60%; will-change: transform;
}
.scene-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.36) 46%, rgba(0,0,0,0) 100%),
    linear-gradient(0deg, #000 2%, rgba(0,0,0,0) 34%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%);
}
.fogs { position: absolute; inset: 0; overflow: hidden; transform: translateY(calc(var(--sy) * -14%)); opacity: calc(1 - var(--sy) * 0.7); will-change: transform, opacity; }
.fog { position: absolute; left: -60%; width: 220%; will-change: transform; }
.fog-a {
  bottom: -8%; height: 62%;
  background:
    radial-gradient(closest-side, rgba(196,212,228,0.36), rgba(196,212,228,0) 100%) 6% 70% / 46% 80% no-repeat,
    radial-gradient(closest-side, rgba(196,212,228,0.3), rgba(196,212,228,0) 100%) 52% 90% / 52% 90% no-repeat,
    radial-gradient(closest-side, rgba(196,212,228,0.34), rgba(196,212,228,0) 100%) 96% 60% / 44% 76% no-repeat;
  animation: drift-a 58s linear infinite alternate;
}
.fog-b {
  bottom: 12%; height: 48%;
  background:
    radial-gradient(closest-side, rgba(214,226,238,0.22), rgba(214,226,238,0) 100%) 22% 50% / 40% 90% no-repeat,
    radial-gradient(closest-side, rgba(214,226,238,0.18), rgba(214,226,238,0) 100%) 74% 40% / 48% 100% no-repeat;
  animation: drift-b 82s linear infinite alternate;
}
.fog-c {
  bottom: -18%; height: 46%;
  background:
    radial-gradient(closest-side, rgba(241,104,35,0.2), rgba(241,104,35,0) 100%) 34% 60% / 36% 90% no-repeat,
    radial-gradient(closest-side, rgba(226,234,242,0.3), rgba(226,234,242,0) 100%) 70% 80% / 56% 100% no-repeat;
  animation: drift-a 44s linear infinite alternate-reverse;
}
@keyframes drift-a { from { transform: translateX(0); } to { transform: translateX(24%); } }
@keyframes drift-b { from { transform: translateX(22%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .fog { animation: none; } }

[data-theme="dark"] .hero .wrap { padding-top: 132px; padding-bottom: 168px; }
[data-theme="dark"] .hero-copy { transform: translateY(calc(var(--sy) * -46px)); }
[data-theme="dark"] .hero-copy p { color: var(--ink); }
[data-theme="dark"] .hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.6); }
[data-theme="dark"] .rating a { color: var(--ink); }

@media (max-width: 980px) {
  [data-theme="dark"] .hero .wrap { padding-top: var(--s5); padding-bottom: 120px; gap: 92px; }
  .scene-shade { background: linear-gradient(0deg, #000 4%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.72) 100%); }
  .scene-bg { background-position: 62% 30%; }
  [data-theme="dark"] .est { box-shadow: 6px 6px 0 var(--orange); }
  [data-theme="dark"] .bar { background: #000; border-top-color: #2b3036; }
}

/* Scroll-scrubbed hero clip. js/site.js draws frames from assets/hero/ onto the canvas as the
   visitor scrolls. On wide screens the hero stays pinned for one extra screen while the camera
   moves; on phones the frames follow the normal scroll through the hero. */
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s; }
.hero.scrub.ready .scene-canvas { opacity: 1; }
.hero-pin { position: relative; overflow: hidden; }
@media (min-width: 981px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.fx .hero.scrub { height: 200vh; overflow: visible; margin-top: -96px; }
  html.fx .hero.scrub .hero-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
  html.fx .hero.scrub .hero-pin > .wrap { width: 100%; padding-top: 120px; padding-bottom: 110px; }
  html.fx .hero.scrub .hero-copy { transform: none; }
}

/* With a real clip in place: the clip's first frame is the still, the code-made mist is not needed,
   and on wide screens the estimator arrives as the camera pushes in (--p runs 0 to 1 while pinned). */
.hero.scrub .scene-bg { background-image: url("../assets/hero/poster.jpg"); background-position: center; filter: none; transform: none; inset: 0; }
.hero.scrub .fogs { display: none; }
.hero.scrub .scene-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.66) 32%, rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.06) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 24%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 18%);
}
.hero.scrub .rating { flex-basis: 100%; }
[data-theme="dark"] .hero.scrub h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.75); }
[data-theme="dark"] .hero.scrub .hero-copy p { text-shadow: 0 1px 12px rgba(0,0,0,0.8); }
@media (min-width: 981px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.fx .hero.scrub { --p: 0; --t: clamp(0, calc((var(--p) - 0.3) * 3.4), 1); }
  html.fx .hero.scrub .est-holder { opacity: var(--t); transform: translateX(calc((1 - var(--t)) * 90px)); }
}
@media (max-width: 980px) {
  .hero.scrub .scene-bg { background-image: url("../assets/hero/poster-m.jpg"); background-position: center top; background-size: 100% auto; }
  .hero.scrub .scene-canvas, .hero.scrub .scene-bg { height: calc(100vw * 16 / 9); max-height: 100%; }
  .hero.scrub .scene-shade { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 150px), linear-gradient(0deg, #000 0, #000 calc(100% - 100vw * 16 / 9), rgba(0,0,0,0) calc(100% - 100vw * 16 / 9 + 240px)); }
  [data-theme="dark"] .hero.scrub .wrap { padding-top: 22px; gap: 176px; padding-bottom: 110px; }
  .hero.scrub .hero-copy p, .hero.scrub .hero-call { display: none; }
}

[data-theme="dark"] .steps li::before { border-color: #000; }
[data-theme="dark"] .contact-list li { border-bottom-color: #2b3036; }
[data-theme="dark"] .menu-btn { box-shadow: 3px 3px 0 var(--orange); }
@media (max-height: 520px) and (orientation: landscape) {
  [data-theme="dark"] .hero.scrub .wrap { padding-top: 20px; gap: 40px; grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .hero.scrub .scene-canvas, .hero.scrub .scene-bg { height: 100%; max-height: none; }
  .hero.scrub .scene-bg { background-image: url("../assets/hero/poster.jpg"); background-size: cover; }
  .hero.scrub .scene-shade { background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 30%); }
}

[data-theme="dark"] .on-ink h2, [data-theme="dark"] .on-ink h3 { color: var(--ink); }
[data-theme="dark"] .on-ink .towns h3 { color: var(--orange); }