/* mole: the visitor digs. Layers come from strata.css; this file stacks the dig on top.
   z order: layers 0 < roots 2 < darkness 3 < tunnel & finds 5 < mole 6 < column 10 */
body { overflow-x: hidden; }

/* in the dig, a layer is just ground: no title of its own, only its name at the contact.
   clip: fossils near the right edge would widen the page. body's hidden does not stop a phone from
   zooming out to the wider page, and then innerHeight outgrows svh and the mole never reaches the Moho */
#core .layer { min-height: max(150svh, var(--fit, 0px)); overflow-x: clip; } /* --fit: finds.ts, on the deepest only */
#core .layer:first-child { padding-top: 6vh; }

.vein {
  position: absolute; left: 0; right: 0; height: 22px;
  background: color-mix(in oklch, var(--bg) 55%, white);
  opacity: .55;
}

.dig { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
.tunnel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tunnel path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tunnel-rim    { stroke: rgb(255 246 232 / .28); stroke-width: 34px; }
.tunnel-hollow { stroke: rgb(24 16 10 / .82);    stroke-width: 24px; }
/* the way in: a bowl pressed into the surface, the tunnel's width at its floor, and the soil thrown out.
   The spoil runs on as the ground line, the section's boldest line, drawn like the face's outline */
.tunnel .crater { fill: #413A35; } /* opaque: the hollow's .82 over the topsoil, so the overlap doesn't darken */
.tunnel .spoil  { stroke: var(--ground-ink); stroke-width: 1.8px; }

/* a find: hidden until the tunnel reaches its vein, then it stays lit above the dark */
.find {
  position: absolute; left: clamp(16px, 9vw, 160px);
  width: min(34em, calc(100% - var(--column-w) - 2 * clamp(16px, 9vw, 160px)));
  padding: 22px 24px 24px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mincho);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 30%, transparent), 0 24px 48px -24px rgb(0 0 0 / .6);
  pointer-events: auto;
  container-type: inline-size; /* the title sizes against the card (.find h2) */
  visibility: hidden; opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 0s 600ms;
}
.find.is-found { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* a 16:5 slice of the work across the card's top edge, like a core sample (art/finds.mjs) */
.find-strip { display: block; width: calc(100% + 48px); height: auto; margin: -22px -24px 18px; aspect-ratio: 16 / 5; object-fit: cover; border-bottom: 1px solid color-mix(in oklch, var(--ink) 30%, transparent); }
.find-depth { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--dim); font: 400 13px/1.4 var(--plain); font-variant-numeric: tabular-nums; } /* gap, not a margin on the tag: a tag that wraps starts flush left */
.find-tag { display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: 2px; font-size: 12px; line-height: 1.5; }
/* 11cqi: an unbreakable Latin title (BATHYSCAPHE) still fits a 320px screen; it binds only below ~400px, on every card alike */
.find h2 { margin-top: 8px; font-size: min(clamp(28px, 4vw, 44px), 11cqi); font-weight: 600; line-height: 1.1; letter-spacing: 0.03em; line-break: strict; word-break: auto-phrase; text-wrap: balance; }
.find p { margin-top: 12px; font-size: 16px; line-height: 1.85; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
.find a { display: inline-block; margin-top: 14px; color: var(--link); font: 400 15px/1.4 var(--plain); text-underline-offset: 4px; }
.find ul { list-style: none; }

.log { position: absolute; left: clamp(16px, 9vw, 160px); color: #D6E6DF; font-family: var(--mincho); pointer-events: auto; }
.log h2 { font-size: 22px; font-weight: 600; }
.log ol { margin-top: 14px; list-style: none; display: grid; gap: 8px; font: 400 15px/1.5 var(--plain); }
.log a { color: #9FD8C6; text-underline-offset: 4px; }
.log span { display: inline-block; min-width: 6em; color: #8EA69D; font-variant-numeric: tabular-nums; }

/* the mole is blind: deeper, the dark closes in to the few hand-widths it can feel */
.dark {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  /* the reach leans the way the nose points: it smells ahead, it does not see */
  background: radial-gradient(circle at calc(var(--mx, 50%) + var(--fx, 0px)) calc(50% + var(--my, 0px) + var(--fy, 0px)),
    transparent 0, transparent var(--r, 240px), rgb(6 8 8 / var(--d, 0)) calc(var(--r, 240px) * 2.4));
}

/* a 1px engraving like the fossils, in sand; the dark halo keeps it legible on the pale topsoil */
.mole {
  position: fixed; top: 50%; left: 0; z-index: 6;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  /* translate/rotate as separate properties: translate applies after rotate, so the turn stays on the spot */
  translate: var(--mx, 50vw) var(--my, 0px); /* --my: off the viewport middle only while on the surface or sinking in */
  rotate: var(--ma, 0deg);
  transition: rotate 140ms ease-out;
  pointer-events: none;
}
.mole svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: #F4E9DA; stroke-width: 1px;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 1px rgb(24 16 10 / .9));
}
/* above the ground the digger is not drawn: there, the mole is the face at the hole (.peek) */
.on-surface .mole { visibility: hidden; }

/* waiting at the hole: the owner's drawing, open at the bottom, standing on the ground line.
   The box ends at the line, so sliding the drawing down reads as ducking into the hole. */
.peek {
  position: absolute; width: 96px; aspect-ratio: 1897 / 1412; /* mole.svg's viewBox: the drawing plus room for its added stroke */
  translate: -50% -100%; overflow: hidden;
}
.peek-body { position: relative; height: 100%; translate: 0 100%; transition: translate 200ms ease-in; }
.peeking .peek-body { translate: 0 0; transition: translate 420ms var(--ease); }
.peek img { position: relative; display: block; width: 100%; height: 100%; }
/* the drawing is lines only; the roots behind would show through its body. This fills the body:
   the outline's outermost x on each of 40 rows (path 0 of mole.svg, the one spanning the drawing),
   measured before the stroke was added, so it stays inside the thickened line */
.peek-body::before {
  content: ''; position: absolute; inset: 0; background: var(--air);
  clip-path: polygon(40.5% 0.6%, 34.8% 3.1%, 31.3% 5.5%, 28.5% 8%, 26.1% 10.5%, 24.2% 13%, 22.4% 15.5%, 20.9% 18%, 19.7% 20.5%, 18.4% 22.9%, 17.4% 25.4%, 16.5% 27.9%, 15.5% 30.4%, 14.8% 32.9%, 14.1% 35.4%, 13.5% 37.9%, 13% 40.3%, 12.5% 42.8%, 12.1% 45.3%, 11.7% 47.8%, 11.4% 50.3%, 11.2% 52.8%, 11% 55.3%, 10.7% 57.7%, 10.1% 60.2%, 9% 62.7%, 7.8% 65.2%, 6.6% 67.7%, 5.5% 70.2%, 4.6% 72.7%, 3.8% 75.1%, 3.1% 77.6%, 2.5% 80.1%, 2% 82.6%, 1.6% 85.1%, 1.3% 87.6%, 1% 90.1%, 0.7% 92.5%, 0.6% 95%, 0.5% 97.5%, 0.4% 100%,
    99.6% 100%, 99.6% 97.5%, 99.5% 95%, 99.4% 92.5%, 99.2% 90.1%, 98.9% 87.6%, 98.5% 85.1%, 98.1% 82.6%, 97.6% 80.1%, 97% 77.6%, 96.3% 75.1%, 95.6% 72.7%, 94.7% 70.2%, 93.6% 67.7%, 92.5% 65.2%, 91.2% 62.7%, 90.1% 60.2%, 88.9% 57.7%, 88.1% 55.3%, 87.6% 52.8%, 87.4% 50.3%, 87.1% 47.8%, 86.7% 45.3%, 86.2% 42.8%, 85.7% 40.3%, 85% 37.9%, 84.4% 35.4%, 83.6% 32.9%, 82.8% 30.4%, 81.8% 27.9%, 80.8% 25.4%, 79.6% 22.9%, 78.4% 20.5%, 76.9% 18%, 75.3% 15.5%, 73.5% 13%, 71.5% 10.5%, 69.1% 8%, 66.4% 5.5%, 62.8% 3.1%, 57.5% 0.6%);
}
/* the Moho stays above the dark (z 4): when the mole reaches it, the whole face lights */
#core .moho { z-index: 4; }
.log, #core .moho { visibility: hidden; opacity: 0; transition: opacity 600ms var(--ease), visibility 0s 600ms; }
.log.is-found, #core .moho.is-found { visibility: visible; opacity: 1; transition-delay: 0s; }
/* the sign where the samples start (strata.css): in the dig it comes up like a card, beside the
   tunnel and above it (finds.ts), and the copy in its layer stands down; the plain page keeps that copy.
   The glow in the layer's colour holds the letters clear where a narrow screen leaves it over the tunnel */
html.digging #core .sample-line { display: none; }
.dig .sample-line {
  position: absolute; left: clamp(16px, 9vw, 160px); width: max-content; margin: 0;
  text-shadow: 0 0 2px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg);
  visibility: hidden; opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 0s 600ms;
}
.dig .sample-line.is-found { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* Not digging (no scripts, or one broke: see index.astro): the ground reads as a plain page.
   The finds come as a list under the deepest layer and above the Moho, which says nothing below
   it has been dug: #core is unboxed so its layers, the finds and the Moho can be put in that order.
   What only the dig can drive is not drawn. */
html:not(.digging) body { display: flex; flex-direction: column; }
html:not(.digging) #core { display: contents; }
html:not(.digging) .dig { order: 1; position: static; height: auto !important; padding: 0 0 12vh; } /* !important: a broken dig may have set its height */
html:not(.digging) #core .moho { order: 2; }
html:not(.digging) :is(.find, .log) {
  position: static; margin: 48px clamp(16px, 9vw, 160px) 0;
  visibility: visible; opacity: 1; transform: none;
}
html:not(.digging) .find { width: min(34em, calc(100% - 2 * clamp(16px, 9vw, 160px))); }
html:not(.digging) #core .moho { visibility: visible; opacity: 1; }
html:not(.digging) :is(.tunnel, .roots, .dark, .mole, .peek, .column, .dig .sample-line) { display: none; }
html:not(.digging) .surface { box-shadow: inset 0 -2px var(--ground-ink); } /* the ground line, with no hole in it; a shadow takes no height */

/* buried for no reason: drawn as an engraving in the layer's own ink */
.fossil {
  position: absolute;
  color: color-mix(in oklch, var(--ink) 34%, transparent);
  fill: none; stroke: currentColor; stroke-width: 1.6px;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.fossil use { vector-effect: non-scaling-stroke; }