/* STAGE styles. Everything inside the exterior visualization SVG.
   State is driven by three data attributes on the svg root, set by stage.js:
   data-material (5 cladding skins, 420ms cross-fade),
   data-scene (day / dusk, 700ms), data-stories (1 / 2, 700ms). */

.st-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- ink work */

.st-ink {
  fill: none;
  stroke: color-mix(in oklab, var(--ink, oklch(0.24 0.01 85)) 55%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.st-lined {
  stroke: color-mix(in oklab, var(--ink, oklch(0.24 0.01 85)) 45%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.st-ink-soft {
  fill: none;
  stroke: color-mix(in oklab, var(--ink, oklch(0.24 0.01 85)) 22%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.st-none {
  fill: none;
}

.st-dims .st-dim,
.st-dims .st-dim-tick {
  stroke: color-mix(in oklab, var(--taupe, oklch(0.745 0.028 95)) 75%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.st-dims .st-dim {
  stroke-dasharray: 5 4;
}

/* ------------------------------------------------------------------- site */

.st-sky-b {
  opacity: 0;
  transition: opacity var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-sky-b {
  opacity: 1;
}

.st-ground {
  fill: oklch(0.915 0.02 105);
  transition: fill var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-ground {
  fill: oklch(0.4 0.03 145);
}

.st-grade {
  stroke: color-mix(in oklab, var(--ink, oklch(0.24 0.01 85)) 40%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.st-pine {
  fill: oklch(0.66 0.045 150);
  transition: fill var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-pine-far {
  fill: oklch(0.78 0.03 150);
}

.st-svg[data-scene='dusk'] .st-pine {
  fill: oklch(0.3 0.035 190);
}

.st-svg[data-scene='dusk'] .st-pine-far {
  fill: oklch(0.42 0.035 200);
}

.st-shadow {
  transition: opacity var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-shadow {
  opacity: 0.35;
}

/* ------------------------------------------------ timber, piers, chimney */

.st-timber,
.st-frame {
  fill: var(--timber, oklch(0.87 0.04 85));
  transition: fill var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-timber,
.st-svg[data-scene='dusk'] .st-frame {
  fill: oklch(0.56 0.035 80);
}

.st-pier {
  fill: oklch(0.38 0.012 80);
  transition: fill var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-pier {
  fill: oklch(0.27 0.012 80);
}

.st-flue {
  fill: oklch(0.25 0.012 75);
}

/* ------------------------------------------------------- material skins */

.st-skin {
  opacity: 0;
  transition: opacity var(--dur-med, 420ms) var(--ease-out, ease-out);
}

.st-svg[data-material='seam-black'] .st-skin[data-skin='seam-black'],
.st-svg[data-material='charred-cedar'] .st-skin[data-skin='charred-cedar'],
.st-svg[data-material='corten'] .st-skin[data-skin='corten'],
.st-svg[data-material='thermo'] .st-skin[data-skin='thermo'],
.st-svg[data-material='stainless'] .st-skin[data-skin='stainless'] {
  opacity: 1;
}

/* Envelope shade so every cladding settles into the evening. */
.st-shade {
  fill: var(--charcoal, oklch(0.255 0.008 85));
  opacity: 0;
  transition: opacity var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-scene='dusk'] .st-shade {
  opacity: 0.3;
}

/* -------------------------------------------------------- glazing + glow */

.st-glow,
.st-bloom,
.st-spill {
  opacity: 0;
  transition: opacity var(--dur-slow, 700ms) var(--ease-out, ease-out);
  pointer-events: none;
}

.st-svg[data-scene='dusk'] .st-glow {
  opacity: 1;
}

.st-svg[data-scene='dusk'] .st-bloom {
  opacity: 0.6;
}

.st-svg[data-scene='dusk'] .st-spill {
  opacity: 0.55;
}

/* --------------------------------------------------------------- stories */

.st-house {
  transition: opacity var(--dur-slow, 700ms) var(--ease-out, ease-out);
}

.st-svg[data-stories='1'] .st-house[data-house='2'],
.st-svg[data-stories='2'] .st-house[data-house='1'] {
  opacity: 0;
}

/* --------------------------------------------------------------- swatches */

.st-swatch {
  display: block;
  width: 100%;
  height: 100%;
}

.st-swatch-edge {
  stroke: color-mix(in oklab, var(--ink, oklch(0.24 0.01 85)) 35%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .st-sky-b,
  .st-ground,
  .st-pine,
  .st-shadow,
  .st-timber,
  .st-frame,
  .st-pier,
  .st-skin,
  .st-shade,
  .st-glow,
  .st-bloom,
  .st-spill,
  .st-house {
    transition: none;
  }
}

/* integration pass: fog-muted pines + dimension labels */
.st-pine { fill: oklch(0.62 0.035 150 / 0.5); }
.st-pine-far { fill: oklch(0.68 0.028 150 / 0.34); }
.st-svg[data-scene='dusk'] .st-pine { fill: oklch(0.33 0.028 170 / 0.7); }
.st-svg[data-scene='dusk'] .st-pine-far { fill: oklch(0.37 0.024 170 / 0.45); }
.st-dim-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: oklch(0.49 0.015 85 / 0.75);
}
.st-svg[data-scene='dusk'] .st-dim-label { fill: oklch(0.87 0.018 95 / 0.6); }