/* Archeologie: een oud ticket uit het zand. */

.celebration[data-mode="archeology"] { --c1: #3b2410; --c2: #b7791f; --c3: #fde68a; --glow: rgb(251 191 36 / .5); }

.cel-dig-scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #fcd9a0 0%, #f4b860 45%, #c97b2e 100%); }
.cel-dig-sun {
  position: absolute; right: 12vw; top: 8vh; width: 20vh; height: 20vh; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, #fde68a 45%, rgb(253 230 138 / 0) 70%);
}
.cel-dig-dunes {
  position: absolute; left: -10vw; right: -10vw; bottom: 0; height: 52vh;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, #e7b96d 0 60%, transparent 61%),
    radial-gradient(ellipse 70% 45% at 80% 35%, #dca95a 0 60%, transparent 61%),
    linear-gradient(180deg, transparent 18%, #d6a052 18%, #b9833a);
}

.cel-fossil {
  position: absolute; left: 50%; top: 44vh; width: min(60vw, 80vh); padding: 3vh 4vh; color: #3b2a14;
  transform: translate(-50%, 6vh) rotate(-3deg);
  background:
    radial-gradient(circle at 80% 20%, rgb(120 72 20 / .25) 0 4vh, transparent 4.2vh),
    linear-gradient(135deg, #f1e3bf, #d8bf88 60%, #c4a467);
  clip-path: polygon(0 4%, 6% 0, 18% 3%, 31% 0, 47% 4%, 63% 1%, 78% 4%, 93% 0, 100% 6%, 98% 30%, 100% 55%, 97% 80%, 100% 96%, 88% 100%, 70% 97%, 52% 100%, 35% 96%, 18% 100%, 3% 97%, 0 75%, 2% 50%, 0 25%);
  filter: drop-shadow(0 1vh 2vh rgb(0 0 0 / .35));
}
.cel-fossil-ref { font-family: ui-monospace, Menlo, monospace; font-size: 2.6vh; font-weight: 700; color: #7c4a14; }
.cel-fossil-title { margin-top: 1vh; font-family: Georgia, "Times New Roman", serif; font-size: 3.8vh; font-weight: 700; line-height: 1.2; }
.cel-fossil-meta { margin-top: 1.2vh; font-family: Georgia, serif; font-size: 2.2vh; font-style: italic; color: #6b4b22; }
.cel-fossil-stain {
  position: absolute; right: 6vh; bottom: 3vh; width: 9vh; height: 9vh; border-radius: 50%;
  border: 1vh solid rgb(120 72 20 / .25); border-left-color: transparent;
}

.cel-dig-mound {
  --dug: 0;
  position: absolute; left: 50%; top: calc(36vh + var(--dug) * 26vh); width: calc(78vh - var(--dug) * 30vh); height: calc(40vh - var(--dug) * 34vh);
  translate: -50% 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / .2) 0 3vh, transparent 3.2vh),
    linear-gradient(180deg, #e3b56a, #c4964c);
  transition: top .25s, width .25s, height .25s;
  box-shadow: inset 0 2vh 3vh rgb(255 255 255 / .15);
}

.cel-dig-brush {
  position: absolute; left: 0; top: 0; width: 18vh; height: 5vh; visibility: hidden;
  background: linear-gradient(90deg, #7c4a14 0 60%, #3f2a12 60% 70%, #f5deb3 70%);
  border-radius: 1vh; box-shadow: 0 1vh 1.5vh rgb(0 0 0 / .35);
}

.cel-dig-slab {
  position: absolute; left: 50%; top: 9vh; padding: 2.4vh 5vh; opacity: 0; text-align: center;
  border-radius: 1.4vh 1.4vh .6vh .6vh;
  background:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / .12) 0 2vh, transparent 2.2vh),
    radial-gradient(circle at 75% 70%, rgb(0 0 0 / .12) 0 3vh, transparent 3.2vh),
    linear-gradient(160deg, #a8a29e, #78716c 60%, #57534e);
  box-shadow: inset 0 .6vh 0 rgb(255 255 255 / .25), inset 0 -.8vh 0 rgb(0 0 0 / .3), 0 2vh 3vh rgb(0 0 0 / .45);
}
.cel-dig-age {
  font-family: Georgia, "Times New Roman", serif; font-size: 5.2vh; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #57534e; text-shadow: 0 .25vh 0 rgb(255 255 255 / .35), 0 -.2vh 0 rgb(0 0 0 / .45);
}
.cel-dig-year { margin-top: .6vh; font-family: Georgia, serif; font-size: 2.6vh; letter-spacing: .2em; text-transform: uppercase; color: #e7e5e4; }

.cel-dig-caption {
  position: absolute; left: 0; right: 0; bottom: 6vh; text-align: center;
  font-family: var(--font-brand); font-size: 5vh; color: #fff7d6; text-shadow: 0 .4vh 0 #7c4a14, 0 0 3vh rgb(0 0 0 / .4);
}
