/* Muscadet: the Atlantic mouth of the Loire. A cold, wet, wind-scoured place, and an
   evening about three rocks. The ground is wet slate rather than the series' default
   green, and the three rocks carry the colour, because they are what the evening
   compares. Oyster cream for text, shell gold for controls, Atlantic blue for water. */
html[data-theme="atlantic"] {
  --bg: #1a2328;
  --deep: #131a1f;
  --ink: #ece7db;
  --muted: #9fabb2;
  --line: #35424a;
  --accent: #d8bd86;
  --water: #6fa9bf;
  --rose: #c99a92;
  --surface: #22303a;
  --button: #233039;
  --hover: #2e3f4a;
  --body: #c3ced4;
  --land: #26343c;
  --land-line: #5d7480;
  --primary-ink: #131a1f;
  --primary-hover: #ead7a8;
  --selected: #d8bd8614;
  --track: #334049;
  --backdrop: #070d11bd;

  --rock-gneiss: #b7bab0;
  --rock-granite: #d3b09b;
  --rock-gabbro: #7f9a93;
}

/* The three rocks are the spine of the evening, so they are colour-coded wherever they
   appear: the specimen cards, and the rock column of the closing table. */
.rock[data-rock="gneiss"] h3, .rock[data-rock="gneiss"] .rock-select h3 { color: var(--rock-gneiss); }
.rock[data-rock="granite"] h3, .rock[data-rock="granite"] .rock-select h3 { color: var(--rock-granite); }
.rock[data-rock="gabbro"] h3, .rock[data-rock="gabbro"] .rock-select h3 { color: var(--rock-gabbro); }
.rock[data-rock="gneiss"] .rock-select[aria-pressed="true"] { border-color: var(--rock-gneiss); }
.rock[data-rock="granite"] .rock-select[aria-pressed="true"] { border-color: var(--rock-granite); }
.rock[data-rock="gabbro"] .rock-select[aria-pressed="true"] { border-color: var(--rock-gabbro); }
.result-table td:nth-child(3) { color: var(--muted); }

/* Screen 8 puts the pale rock beside the dark one, which is the comparison the whole
   second half of the evening rests on. */
.rock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rock-pair .rock { border: 0; padding-bottom: 0; }
.rock-pair .specimen img { height: 190px; }

/* Lees settling. Toggling the control re-renders the figure, so the specks mount already
   in their final position — a transition would never run. Animations do play on insertion,
   so the fall is a keyframe animation instead. Each speck carries its own fall distance,
   sideways drift and delay, so they arrive over several seconds rather than dropping as
   one block; the bed builds underneath them and the wine above clears. */
@keyframes lees-fall { from { transform: translate(0, 0); } to { transform: translate(var(--drift, 0), var(--fall, 0)); } }
@keyframes lees-bed-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lees-clear { from { opacity: 1; } to { opacity: .68; } }

.lees-figure .lees-bed { opacity: 0; }
.lees-figure.settle .yeast { animation: lees-fall 2.4s cubic-bezier(.45, .02, .75, .68) var(--delay, 0s) both; }
.lees-figure.settle .lees-bed { animation: lees-bed-in 1.7s ease 1.2s both; }
.lees-figure.settle .lees-wine { animation: lees-clear 2.2s ease .7s both; }

/* With motion reduced the animations are suppressed globally, so the settled state is
   declared outright rather than being left mid-air. */
@media (prefers-reduced-motion: reduce) {
  .lees-figure.settle .yeast { transform: translate(var(--drift, 0), var(--fall, 0)); }
  .lees-figure.settle .lees-bed { opacity: 1; }
  .lees-figure.settle .lees-wine { opacity: .68; }
}

@media (max-width: 800px) {
  .rock-pair { gap: 10px; }
  .rock-pair .specimen img { height: 120px; }
  /* The shared narrow-screen rule lays a rock card out side-on, which is too wide when
     two of them share the row. Keep the paired cards stacked. */
  .rock-pair .rock { display: block; }
  .rock-pair .rock h3 { font-size: 19px; }
  .rock-pair .rock > p { font-size: 11px; }
  .rock-pair .rock .art { display: block; max-height: 150px; }
}

/* The locator strip runs under the wine screens, small enough not to compete with them. */
.locator { max-width: 420px; margin: 16px auto 0; }
.locator .art { max-height: 190px; }