/* Lonely Looking Clam
   The drawing is a 1024x1024 square. `.stage` is a square sized to cover the
   viewport with 10% slack, anchored on the clam rather than on the image
   centre, so the clam stays put at any aspect ratio. Everything inside is
   positioned as a percentage of that square, so the layers never drift apart. */

:root {
  --paper: #f9f4e5;
  --ink: #1c0a04;

  /* clam sprite, as a fraction of the 1024px drawing */
  --sprite-x: 29.5898%;
  --sprite-y: 42.4805%;
  --sprite-w: 41.7969%;
  --sprite-h: 26.5625%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--paper);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  -webkit-tap-highlight-color: transparent;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: default;
  touch-action: none;          /* petting must not scroll the page */
  user-select: none;
  -webkit-user-select: none;
}
.scene.touchable { cursor: grab; }
.scene.pressing  { cursor: grabbing; }

.stage {
  --s: calc(max(100vw, 100dvh) * 1.1);
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: 50%;
  top: 54%;
  /* put the clam's centre (50.4%, 58.1% of the drawing) on that point */
  transform: translate(-50.4%, -58.1%);
}

.flats,
.shell {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
}

.flats {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Three nested wrappers, so each motion gets its own pivot: `.rock` leans the
   whole clam about its base, `.squash` deforms it about its middle, and `.lid`
   swings the upper shell about the point where the lips meet. All three are
   driven from clam.js on every frame. */
.rock {
  position: absolute;
  left: var(--sprite-x);
  top: var(--sprite-y);
  width: var(--sprite-w);
  height: var(--sprite-h);
  transform-origin: 49.77% 93.75%;   /* where the clam meets the mud */
  will-change: transform;
}

.squash {
  position: absolute;
  inset: 0;
  transform-origin: 49.8% 86%;
  will-change: transform;
}

.jaw,
.lid {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.lid { transform-origin: 2.8% 58.57%; }   /* the hinge, at the left lip */

.jaw > .shell,
.shell,
.face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.face { overflow: visible; pointer-events: none; }

.mark {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cheek {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-width: 1.6;
  opacity: 0;
}

/* ---- the two bits of chrome ---- */

.hint,
.sound {
  position: fixed;
  font-family: inherit;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.hint {
  left: 50%;
  bottom: calc(2.2rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 1.4s ease;
}
.hint.show { opacity: 0.32; }

.sound {
  right: calc(1.2rem + env(safe-area-inset-right));
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  padding: 0.5rem 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0.28;
  transition: opacity 0.4s ease;
}
.sound:hover,
.sound:focus-visible { opacity: 0.6; }
.sound[aria-pressed="true"] { opacity: 0.55; }
.sound span { font-style: normal; margin-right: 0.15em; }

@media (prefers-reduced-motion: reduce) {
  .hint { transition-duration: 0.01ms; }
}