/*
 * The character's colours and the small set of states its script switches. Any page can use the crab by
 * linking this file with tokens.css and importing /site/crab.mjs; nothing here depends on the page layout.
 * The crab is drawn in the ink of the surface it stands on: sand-coloured on the sea, sea-coloured on the sand.
 */
.crab {
  --crab-body: var(--ink);
  --crab-cut: var(--field);
  display: block;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}
.on-sand .crab,
.crab.on-sand,
.on-sand .shell-glyph,
.shell-glyph.on-sand {
  --crab-body: var(--field);
  --crab-cut: var(--ink);
}
.shell-glyph {
  --crab-body: var(--ink);
  --crab-cut: var(--field);
  display: block;
  overflow: visible;
}

.crab-body { fill: var(--crab-body); }
.crab-cut { fill: var(--crab-cut); }
.crab-light { fill: var(--light); }
.crab-alarm { fill: var(--alarm); }
.crab-part {
  stroke: var(--crab-cut);
  stroke-width: 3.6;
  stroke-linejoin: round;
  paint-order: stroke;
}
.crab-line {
  fill: none;
  stroke: var(--crab-cut);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crab-feeler {
  fill: none;
  stroke: var(--crab-body);
  stroke-width: 3;
  stroke-linecap: round;
}
.crab-halo {
  fill: none;
  stroke: var(--crab-cut);
  stroke-width: 14;
  stroke-linecap: round;
}
.crab-stalk {
  fill: none;
  stroke: var(--crab-body);
  stroke-width: 7.5;
  stroke-linecap: round;
}
.crab-eye {
  fill: var(--light);
  stroke: var(--crab-body);
  stroke-width: 3.4;
}
.crab-eyehalo { fill: var(--crab-cut); }
.crab-pupil { fill: var(--field); }

/* The body is only clipped to the shell's opening while it is moving through it. */
.crab:not([data-state]) .crab-clip,
.crab[data-state='out'] .crab-clip { mask: none; }

/* Hidden until the crab is inside its shell; the script flips these, never the layout. */
.crab-door { visibility: hidden; }
.crab[data-state='in'] .crab-door,
.crab[data-state='peek'] .crab-door { visibility: visible; }
.crab[data-state='in'] .crab-out,
.crab[data-state='peek'] .crab-out,
.crab[data-state='in'] .crab-far,
.crab[data-state='peek'] .crab-far { visibility: hidden; }
.crab[data-state='in'] .crab-eyes { visibility: hidden; }

/* Small marks: drop the hairline details and thicken what is left so it survives at 40 pixels. */
.crab--mark .crab-fine,
.crab--mark .crab-feeler,
.shell-glyph--small .crab-fine { display: none; }
.crab--mark .crab-line,
.shell-glyph--small .crab-line { stroke-width: 6; }
.crab--mark .crab-stalk { stroke-width: 12; }
.crab--mark .crab-halo { stroke-width: 20; }
.crab--mark .crab-eye { stroke-width: 5; }