/* =========================================================================
   The finish, told

   Beside the interiors and the exteriors, the thinking behind whichever
   palette or cladding is on show: its name, a short story in the
   statement's serif, and the lines that matter set in the finish's own
   colour, so the words change colour with the room. One copy per finish,
   stacked and crossed over by src/js/ui/variants.js like the pictures.
   ========================================================================= */

.finish {
  display: grid;
  margin-top: var(--space-6);
}

.finish__copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease-out),
    visibility 0s linear 0.5s;
}

.finish__copy.is-shown {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s var(--ease-out) 0.1s,
    visibility 0s;
}

/* the finish's colour, as on its swatch */
.finish__copy[data-variant="burgundy"] { --finish: var(--c-burgundy); }
.finish__copy[data-variant="sage"]     { --finish: var(--c-sage); }
.finish__copy[data-variant="tide"]     { --finish: var(--c-tide); }
.finish__copy[data-variant="vine"]     { --finish: var(--c-vine); }
.finish__copy[data-variant="obsidian"] { --finish: var(--c-obsidian); }
.finish__copy[data-variant="ivory"]    { --finish: var(--c-ivory); }
.finish__copy[data-variant="forge"]    { --finish: var(--c-forge); }
.finish__copy[data-variant="char"]     { --finish: var(--c-char); }
.finish__copy[data-variant="amber"]    { --finish: var(--c-amber); }

.finish__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--finish, var(--c-ink-3));
}

.finish__story {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem);
  line-height: 1.22;
  color: var(--c-ink);
  text-wrap: pretty;
}

.finish__key {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  line-height: 1.35;
  color: var(--finish, var(--c-ink-2));
  text-shadow: 0 0 22px color-mix(in oklab, var(--finish, transparent) 35%, transparent);
}

.finish__key span {
  display: block;
}

/* ---- Room by room (the interiors) ----
   The palette copy is written for each room, and the section names the
   room in the open panel (src/js/ui/room-copy.js). Of the copies for the
   palette on show, only that room's is seen; with no room named yet, the
   living room's, as it is the panel open first. The lines of what comes
   with each room cross over the same way. */
.interiors:not([data-room]) .finish__copy[data-room]:not([data-room="living"]),
.interiors[data-room="living"] .finish__copy:not([data-room="living"]),
.interiors[data-room="kitchen"] .finish__copy:not([data-room="kitchen"]),
.interiors[data-room="bathroom"] .finish__copy:not([data-room="bathroom"]),
.interiors[data-room="bedroom"] .finish__copy:not([data-room="bedroom"]),
.interiors:not([data-room]) .finish__standard:not([data-room="living"]),
.interiors[data-room="living"] .finish__standard:not([data-room="living"]),
.interiors[data-room="kitchen"] .finish__standard:not([data-room="kitchen"]),
.interiors[data-room="bathroom"] .finish__standard:not([data-room="bathroom"]),
.interiors[data-room="bedroom"] .finish__standard:not([data-room="bedroom"]) {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s var(--ease-out),
    visibility 0s linear 0.5s;
}

/* stacked in one place, so the room's line takes the space of one */
.finish__standards {
  display: grid;
}

.finish__standards .finish__standard {
  grid-area: 1 / 1;
  transition:
    opacity 0.5s var(--ease-out) 0.1s,
    visibility 0s;
}

/* What every finish shares, whichever is on show: quiet, in the page's
   small print. Its own element beside the finish rather than inside it,
   so each layout can set it where it lines up: under the story on a
   phone, level with the select line beside the pictures. */
.finish__standard {
  margin: var(--space-5) 0 0;
  max-width: 26rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink-3);
  text-wrap: pretty;
}

/* Where the story sits — beside the pictures, in a finish card — is the
   card's to say: finish-card.css. */