.excavation-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.excavation-stratum {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: inset 0 3px 1px #f7d89b20, inset 0 -12px 24px #10090520;
}

.excavation-stratum::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(167deg, transparent 24%, #130c0730 24.3%, transparent 25.5%, transparent 76%, #ffe6b514 76.5%, transparent 77.4%),
    repeating-linear-gradient(174deg, #f7d89b0c 0 1px, transparent 2px 13px, #130c0716 15px 17px, transparent 18px 47px),
    radial-gradient(ellipse at 13% 48%, #f5ddb322, transparent 38%);
}

.excavation-hero-fossil {
  filter: drop-shadow(14px 22px 8px #070401) drop-shadow(-2px -3px 1px #a975414a);
  transform: perspective(1000px) rotateY(-12deg) rotateZ(-4deg);
}

.excavation-hero-relief {
  position: absolute;
  z-index: -1;
  left: -310px;
  top: 80px;
  width: 820px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: perspective(1000px) rotateY(-14deg) rotate(-16deg);
  filter: saturate(.75) drop-shadow(24px 30px 18px #050201);
}

.excavation-relief-ready .excavation-hero-relief { opacity: .16; }
.excavation-relief-ready .excavation-hero-fossil { visibility: hidden; }

.excavation-surface {
  filter: drop-shadow(0 -9px 12px #09050288);
}

.excavation-surface g {
  filter: drop-shadow(3px 6px 2px #29190ab0) drop-shadow(-1px -1px 0 #fff8);
}

.excavation-imprint {
  position: absolute;
  z-index: -1;
  right: 4%;
  top: 50%;
  width: clamp(180px, 25vw, 360px);
  height: 240px;
  color: #17110c;
  opacity: .2;
  filter: drop-shadow(2px 4px 1px #09050166) drop-shadow(-1px -1px 0 #ffe5b955);
  pointer-events: none;
  transform: translateY(calc(-50% + var(--fossil-shift, 0px))) rotate(-12deg);
}

.excavation-stratum:nth-of-type(odd) .excavation-imprint {
  right: 37%;
  transform: translateY(calc(-50% + var(--fossil-shift, 0px))) rotate(14deg);
}

.excavation-stratum[data-stratum="3"] .excavation-imprint,
.excavation-stratum[data-stratum="4"] .excavation-imprint {
  color: #f3ead7;
  opacity: .16;
}

.excavation-gauge {
  --dig-progress: 0;
  position: fixed;
  z-index: 8;
  top: 50%;
  right: 14px;
  width: 34px;
  height: 218px;
  color: #bfae8f;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .25s, visibility .25s;
}

.excavation-gauge[data-visible="true"] {
  opacity: 1;
  visibility: visible;
}

.excavation-gauge__rail {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 12px;
  height: 150px;
  border-right: 1px solid #805333;
  background: repeating-linear-gradient(to bottom, #805333 0 1px, transparent 1px 15px);
  filter: drop-shadow(0 1px 2px #17110c);
}

.excavation-gauge__rail::after {
  content: '';
  position: absolute;
  inset: 0 -1px auto auto;
  width: 2px;
  height: calc(var(--dig-progress) * 100%);
  background: #ffb62e;
}

.excavation-gauge__foss {
  position: absolute;
  top: calc(2px + var(--dig-progress) * 150px);
  right: 4px;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 3px #17110c);
}

.excavation-gauge__depth {
  position: absolute;
  top: 180px;
  right: -2px;
  font-size: 10px;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: #f3ead7;
  text-shadow: 0 1px 4px #17110c, 0 1px 4px #17110c;
}

.excavation-gauge__toggle {
  position: absolute;
  top: 198px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #5a3220;
  border-radius: 50%;
  background: #17110c;
  color: #bfae8f;
  cursor: pointer;
  pointer-events: auto;
}

.excavation-gauge__toggle:hover {
  color: #ffb62e;
  border-color: #ffb62e;
}

.excavation-gauge__toggle:focus-visible {
  outline: 2px solid #ffb62e;
  outline-offset: 4px;
}

.excavation-gauge__toggle svg {
  width: 12px;
  height: 12px;
}

body:has(dialog[open]) .excavation-gauge {
  visibility: hidden;
  opacity: 0;
}

[data-excavation-paused="true"] .excavation-scene,
[data-excavation-paused="true"] .excavation-imprint {
  visibility: hidden;
}

@media (max-width: 800px) {
  .excavation-hero-relief { width: 530px; left: -285px; top: 140px; }
  .excavation-gauge {
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 92px;
    height: 36px;
    border: 1px solid #5a3220;
    border-radius: 999px;
    background: #17110ceb;
    transform: none;
  }

  .excavation-gauge__rail { display: none; }
  .excavation-gauge__foss { top: 1px; left: 3px; width: 27px; height: 27px; }
  .excavation-gauge__depth { top: 12px; left: 30px; right: auto; font-size: 9px; }
  .excavation-gauge__toggle { top: 2px; right: 1px; border: 0; background: none; }
  .excavation-imprint { width: 210px; opacity: .08; right: -45px; }
  .excavation-stratum:nth-of-type(odd) .excavation-imprint { right: -25px; }
}

@media (prefers-reduced-motion: reduce) {
  .excavation-scene,
  .excavation-gauge,
  .excavation-imprint { display: none; }
}