/* PROJECT 090 colour system v2.
   Ember = TO DO (heat, the work in front of you). Glacier = LOGGED (cool, done, permanent).
   The seven stages take their colour from their own photographs, so the climb runs warm to cold:
   creek amber, overlook moss, canyon blue, storm violet, sunset red, ridge ice, summit glacier. */
:root {
  --logged: #6aaee6;
  --logged-hi: #9ccbf0;
  --logged-deep: #16283a;
  --s1: #e6a54a;  /* START, creek */
  --s2: #a3c35c;  /* BUILD, overlook */
  --s3: #5aa7d6;  /* PUSH, canyon */
  --s4: #8f89e2;  /* DISCIPLINE, storm */
  --s5: #e2574c;  /* OWN IT, sunset */
  --s6: #7fcbe8;  /* PROVE IT, ridge */
  --s7: #cfe8ff;  /* FINAL, summit */
  --climb: linear-gradient(90deg, var(--s1) 0 14.28%, var(--s2) 0 28.57%, var(--s3) 0 42.85%, var(--s4) 0 57.14%, var(--s5) 0 71.42%, var(--s6) 0 85.71%, var(--s7) 0);
}
.logged { color: var(--logged); }

/* the ritual: LOGGED side turns cool */
.box__well--logged { box-shadow: inset 0 10px 24px rgba(0,0,0,.8), inset 0 0 0 1px #1d2a36, inset 0 -40px 60px -30px rgba(106,174,230,.16); }
.box__well--logged .box__label { color: var(--logged-hi); }
.box__well--logged .box__label .serial { color: var(--logged); }
.box__well--todo .box__label .serial { color: var(--ember); }
.stack--logged { outline-color: #2a4560; }
.steps li[data-step="3"].is-done .serial, .steps li[data-step="4"].is-done .serial { color: var(--logged); }

/* signup success = logged */
.drop__msg.is-ok { color: var(--logged-hi); }

/* seven stages: each card carries its colour */
.climb__rail .stage:nth-child(1) { --stage: var(--s1); }
.climb__rail .stage:nth-child(2) { --stage: var(--s2); }
.climb__rail .stage:nth-child(3) { --stage: var(--s3); }
.climb__rail .stage:nth-child(4) { --stage: var(--s4); }
.climb__rail .stage:nth-child(5) { --stage: var(--s5); }
.climb__rail .stage:nth-child(6) { --stage: var(--s6); }
.climb__rail .stage:nth-child(7) { --stage: var(--s7); }
.stage__range { color: var(--stage, var(--ember)); }
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--stage, var(--ember)); z-index: 1; transform-origin: left; transition: height .5s var(--ease); }
.stage:hover::before, .stage:focus-within::before { height: 6px; }
.stage__img { transition: transform 1.2s var(--ease), filter .6s; }
/* the climb as one line: warm at the creek, cold at the summit */
.climb .wrap::after { content: ""; display: block; height: 3px; margin-top: clamp(24px, 3vw, 36px); border-radius: 2px; background: var(--climb); opacity: .9; }

/* stage lists on deck pages */
.stagelist li:nth-child(1) .serial { color: var(--s1); }
.stagelist li:nth-child(2) .serial { color: var(--s2); }
.stagelist li:nth-child(3) .serial { color: var(--s3); }
.stagelist li:nth-child(4) .serial { color: var(--s4); }
.stagelist li:nth-child(5) .serial { color: var(--s5); }
.stagelist li:nth-child(6) .serial { color: var(--s6); }
.stagelist li:nth-child(7) .serial { color: var(--s7); }

/* all-90 scrubber: each stage's ticks in its colour, the current card stays ember */
.xs__seg:nth-child(1) { --stage: var(--s1); }
.xs__seg:nth-child(2) { --stage: var(--s2); }
.xs__seg:nth-child(3) { --stage: var(--s3); }
.xs__seg:nth-child(4) { --stage: var(--s4); }
.xs__seg:nth-child(5) { --stage: var(--s5); }
.xs__seg:nth-child(6) { --stage: var(--s6); }
.xs__seg:nth-child(7) { --stage: var(--s7); }
.xs__seg i.is-hit { background: var(--stage, var(--bone)); }
.x[data-stage="START"] .xs__seg:nth-child(1) .xs__lab, .x[data-stage="BUILD"] .xs__seg:nth-child(2) .xs__lab, .x[data-stage="PUSH"] .xs__seg:nth-child(3) .xs__lab, .x[data-stage="DISCIPLINE"] .xs__seg:nth-child(4) .xs__lab, .x[data-stage="OWN IT"] .xs__seg:nth-child(5) .xs__lab, .x[data-stage="PROVE IT"] .xs__seg:nth-child(6) .xs__lab, .x[data-stage="FINAL"] .xs__seg:nth-child(7) .xs__lab { color: var(--stage); }

/* stage cards: a wash of the stage colour rises from the bottom */
.climb__rail .stage::after { background: linear-gradient(180deg, rgba(15,15,14,.55), rgba(15,15,14,0) 30%, rgba(15,15,14,0) 46%, color-mix(in srgb, var(--stage) 30%, rgba(15,15,14,.9)) 100%); }
.climb__rail .stage::before { height: 4px; }
.climb__rail .stage__i { color: var(--stage); }

/* all 90: the room light changes with the stage you're walking through */
.x[data-stage="START"] { --stage: var(--s1); }
.x[data-stage="BUILD"] { --stage: var(--s2); }
.x[data-stage="PUSH"] { --stage: var(--s3); }
.x[data-stage="DISCIPLINE"] { --stage: var(--s4); }
.x[data-stage="OWN IT"] { --stage: var(--s5); }
.x[data-stage="PROVE IT"] { --stage: var(--s6); }
.x[data-stage="FINAL"] { --stage: var(--s7); }
.x::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(55% 45% at 50% 58%, color-mix(in srgb, var(--stage, var(--ember)) 16%, transparent), transparent 70%); transition: background 1s var(--ease); }
.x__word { -webkit-text-stroke-color: color-mix(in srgb, var(--stage, var(--bone)) 45%, transparent); }
.xinfo__num { color: var(--stage, var(--ember)); }
@media (max-width: 899px) { .climb .wrap::after { margin-bottom: 22px; } }
/* fix: the stage rail had 24px of hidden vertical scroll on phones, so a swipe could push the cards up and clip their tops */
.climb__rail { overflow-y: hidden; }