/* Shared responsive background for all twelve breathing protocols. */
body[data-protocol] {
  --motor-waterfall: url('/assets/images/motor-fullmoon-landscape-v1.webp');
  --motor-waterfall-shade: radial-gradient(ellipse at center, rgba(2, 12, 10, .68) 0%, rgba(2, 12, 10, .64) 28%, rgba(2, 12, 10, .40) 58%, rgba(2, 12, 10, .16) 100%);
}
html[data-theme='clean'] body[data-protocol] {
  --motor-waterfall-shade: radial-gradient(ellipse at center, rgba(2, 12, 10, .68) 0%, rgba(2, 12, 10, .64) 28%, rgba(2, 12, 10, .40) 58%, rgba(2, 12, 10, .16) 100%);
}
@media (orientation: portrait) {
  body[data-protocol] {
    --motor-waterfall: url('/assets/images/motor-fullmoon-portrait-v1.webp');
  }
}
body[data-protocol] .session-shell {
  background: var(--motor-waterfall-shade), var(--motor-waterfall) center / cover no-repeat;
}
body[data-protocol] #sessionStage[data-so-ham-visual='true'],
body[data-protocol] #sessionStage[data-clear-session-visual='true'] {
  background: transparent;
}
body[data-protocol] #sessionStage.motor-fullscreen-fallback,
body[data-protocol] #sessionStage:fullscreen {
  background: var(--motor-waterfall-shade), var(--motor-waterfall) center / cover no-repeat;
}
body[data-protocol] #sessionStage:-webkit-full-screen {
  background: var(--motor-waterfall-shade), var(--motor-waterfall) center / cover no-repeat;
}

/* The photograph requires light foregrounds, independent of the page theme. */
body[data-protocol] #sessionStage {
  --text: #ffffff;
  --muted: #e4edf2;
  --muted-2: #e4edf2;
  --lime: #80ff4f;
  --lime-ink: #80ff4f;
  --cyan: #66ddff;
  --cyan-ink: #66ddff;
  --coral: #ff8894;
  --coral-ink: #ff8894;
  --amber: #ffd578;
  --amber-ink: #ffd578;
  --line-strong: rgba(255, 255, 255, .72);
  --wash-1: rgba(0, 0, 0, .25);
  --wash-3: rgba(255, 255, 255, .35);
  color: var(--text);
}
body[data-protocol] #sessionStage .phase-name {
  color: #fff;
  text-shadow: 0 2px 4px #000, 0 0 18px rgba(0, 0, 0, .9);
}
body[data-protocol] #sessionStage .phase-count {
  color: var(--phase-color, var(--lime));
  font-weight: 800;
  text-shadow: 0 2px 4px #000, 0 0 12px #000;
}
body[data-protocol] #sessionStage .phase-kicker,
body[data-protocol] #sessionStage .cycle-readout {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px #000, 0 0 10px #000;
}
body[data-protocol] #sessionStage .breath-ring__chassis {
  stroke: #e4edf2;
  opacity: .85;
}
body[data-protocol] #sessionStage .breath-orb i {
  border: 2px solid var(--phase-color);
}
body[data-protocol] #sessionStage .breath-column i {
  border-width: 2px;
}
body[data-protocol] #sessionStage .breath-column i::before {
  background: linear-gradient(180deg, var(--phase-color), color-mix(in srgb, var(--phase-color) 65%, transparent));
}
/* Keep the wave prominent only when it is the selected visualization. */
body[data-protocol] #sessionStage[data-visual='wave'] .lane {
  opacity: .85;
}
body[data-protocol] #sessionStage[data-visual='wave'] .lane i {
  opacity: .85;
  box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}