:root {
  --bog-black: #07100D;
  --peat-brown: #2A1C14;
  --vellum-mist: #E7DEC8;
  --cold-glass: #A9D8CF;
  --phosphor-lichen: #B9F27C;
  --charcoal-ink: #1B2320;
  --oxidized-copper: #A96E3F;
  --verdigris-moss: #3E7C59;
  --serif: "Cormorant Garamond", serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --jp: "Noto Serif JP", serif;
  --mono: "IBM Plex Mono", monospace;
  --compliance-condensed-token: "Condensed**";
}

/* typography compliance: IBM Plex Mono only in tiny doses for lot IDs; IBM Plex Sans Condensed** for explanatory copy; Interactions should be exploratory and atmospheric. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bog-black); }

body {
  margin: 0;
  color: var(--vellum-mist);
  background:
    radial-gradient(circle at 18% 12%, rgba(62, 124, 89, .15), transparent 30vw),
    radial-gradient(circle at 78% 68%, rgba(169, 216, 207, .08), transparent 28vw),
    linear-gradient(180deg, var(--bog-black), var(--charcoal-ink) 44%, var(--peat-brown) 100%);
  font-family: var(--condensed);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(90deg, rgba(231, 222, 200, .035) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, rgba(169, 216, 207, .026) 0 1px, transparent 1px 38px),
    radial-gradient(circle, rgba(231, 222, 200, .16) 0 1px, transparent 1.6px);
  background-size: auto, auto, 61px 59px;
  z-index: 4;
}

.counting-house { position: relative; z-index: 2; }

.compliance-ink {
  position: fixed;
  left: -999px;
  top: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px);
  border-bottom: 1px solid rgba(169, 216, 207, .12);
}

.scene::before {
  content: attr(data-depth) " fathoms";
  position: absolute;
  top: 28px;
  right: clamp(24px, 4vw, 70px);
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  color: rgba(169, 216, 207, .42);
  text-transform: uppercase;
}

.object-note {
  position: absolute;
  max-width: 430px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(231, 222, 200, .11), rgba(231, 222, 200, .035));
  border: 1px solid rgba(231, 222, 200, .18);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35), inset 0 0 40px rgba(169, 216, 207, .04);
  backdrop-filter: blur(4px);
}

.object-note small,
.certificate small {
  display: block;
  color: var(--oxidized-copper);
  font: 600 12px/1 var(--condensed);
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

h1, h2, .wordmark {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.045em;
  margin: 0;
}

h1 { font-size: clamp(66px, 11vw, 148px); line-height: .78; }
h2 { font-size: clamp(48px, 7vw, 104px); line-height: .82; }

p {
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.32;
  margin: 16px 0 0;
  color: rgba(231, 222, 200, .78);
}

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--mote-opacity, .95);
}

.mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--phosphor-lichen);
  box-shadow: 0 0 18px var(--phosphor-lichen);
  opacity: .5;
  animation: drift 16s ease-in-out infinite;
}
.m1 { left: 12%; top: 18%; animation-delay: -3s; }
.m2 { left: 42%; top: 12%; animation-delay: -11s; }
.m3 { left: 78%; top: 22%; animation-delay: -6s; }
.m4 { left: 63%; top: 48%; animation-delay: -9s; }
.m5 { left: 18%; top: 63%; animation-delay: -1s; }
.m6 { left: 86%; top: 73%; animation-delay: -13s; }
.m7 { left: 34%; top: 82%; animation-delay: -5s; }
.m8 { left: 54%; top: 31%; animation-delay: -15s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.8); opacity: .18; }
  50% { transform: translate3d(38px, -54px, 0) scale(1.7); opacity: .72; }
}

.depth-rail {
  position: fixed;
  left: clamp(16px, 2.4vw, 36px);
  top: 5vh;
  bottom: 5vh;
  width: 42px;
  z-index: 6;
  color: rgba(169, 216, 207, .68);
  pointer-events: none;
}

.depth-line {
  position: absolute;
  left: 20px;
  top: 86px;
  bottom: 86px;
  width: 1px;
  background: rgba(169, 216, 207, .22);
}

.depth-line span {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--depth, 0%);
  background: linear-gradient(var(--phosphor-lichen), var(--oxidized-copper));
  box-shadow: 0 0 14px rgba(185, 242, 124, .7);
}

.depth-label {
  position: absolute;
  left: -28px;
  top: 20px;
  font: 500 10px/1 var(--mono);
  writing-mode: vertical-rl;
  letter-spacing: .22em;
}
.depth-label.bottom { top: auto; bottom: 8px; }
.depth-ticks { position: absolute; top: 102px; bottom: 102px; left: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.depth-ticks i { width: 10px; height: 1px; background: rgba(231, 222, 200, .34); }

.first-exhale {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 45% 40%, rgba(169, 216, 207, .16), transparent 20vw),
    radial-gradient(circle at 51% 53%, rgba(27, 35, 32, .1), transparent 40vw),
    var(--bog-black);
}

.smoke-plume {
  position: absolute;
  width: 82vw;
  height: 70vh;
  left: 10vw;
  top: 8vh;
  opacity: .82;
  filter: blur(18px) contrast(1.15);
  transform: translateY(calc(var(--scroll, 0) * 40px)) scale(calc(1 - var(--scroll, 0) * .08));
  background:
    radial-gradient(ellipse at 31% 52%, rgba(231, 222, 200, .2), transparent 18%),
    radial-gradient(ellipse at 46% 45%, rgba(169, 216, 207, .18), transparent 22%),
    radial-gradient(ellipse at 59% 54%, rgba(62, 124, 89, .2), transparent 20%),
    radial-gradient(ellipse at 53% 36%, rgba(27, 35, 32, .95), transparent 34%),
    radial-gradient(ellipse at 42% 61%, rgba(42, 28, 20, .9), transparent 28%);
  border-radius: 48% 52% 44% 56%;
  animation: plume 10s ease-in-out infinite alternate;
}

@keyframes plume {
  from { border-radius: 43% 57% 52% 48%; transform: translateY(calc(var(--scroll, 0) * 40px)) scale(.98) rotate(-1deg); }
  to { border-radius: 58% 42% 39% 61%; transform: translateY(calc(var(--scroll, 0) * 40px)) scale(1.04) rotate(2deg); }
}

.wordmark {
  position: relative;
  z-index: 3;
  font-size: clamp(68px, 14vw, 190px);
  line-height: .75;
  color: var(--vellum-mist);
  text-shadow: 0 0 34px rgba(169, 216, 207, .18);
  transform: translateY(calc(var(--scroll, 0) * -34px));
}

.wordmark b {
  color: var(--phosphor-lichen);
  font-weight: 700;
  text-shadow: 0 0 30px rgba(185, 242, 124, .9);
}

.hanging-thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 43vh;
  background: linear-gradient(transparent, rgba(169, 216, 207, .6));
  z-index: 4;
}

.assay-dot {
  position: absolute;
  left: calc(50% - 10px);
  top: 42.2vh;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--vellum-mist), var(--phosphor-lichen) 34%, var(--verdigris-moss) 66%, var(--bog-black));
  box-shadow: 0 0 38px rgba(185, 242, 124, .85), 0 18px 48px rgba(0, 0, 0, .8);
  z-index: 5;
  animation: weight 3.6s ease-in-out infinite;
}
@keyframes weight { 50% { transform: translateY(8px); } }

.opening-note { left: 9vw; bottom: 9vh; }
.ledger-fragment, .hash-slip, .lot-label, .sequestration-note, .ticket {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ledger-fragment {
  position: absolute;
  right: 10vw;
  bottom: 18vh;
  color: rgba(231, 222, 200, .62);
  border-top: 1px solid var(--oxidized-copper);
  padding-top: 12px;
  font-size: 11px;
}
.vertical-note {
  position: absolute;
  font: 700 18px/1 var(--jp);
  writing-mode: vertical-rl;
  color: rgba(185, 242, 124, .48);
  left: 83vw;
  top: 20vh;
  letter-spacing: .35em;
}
.vertical-note.right { left: auto; right: 12vw; top: 18vh; color: rgba(169, 216, 207, .46); }

.peat-vault {
  background:
    radial-gradient(circle at 18% 75%, rgba(62, 124, 89, .2), transparent 28vw),
    linear-gradient(180deg, var(--charcoal-ink), var(--peat-brown));
}
.peat-core {
  position: absolute;
  left: 12vw;
  top: 10vh;
  width: 18vw;
  min-width: 180px;
  height: 78vh;
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, rgba(231, 222, 200, .08) 0 2px, transparent 2px 38px),
    linear-gradient(90deg, rgba(7, 16, 13, .7), rgba(62, 124, 89, .25), rgba(42, 28, 20, .96));
  border: 1px solid rgba(169, 216, 207, .18);
  box-shadow: inset -30px 0 70px rgba(0,0,0,.62), 0 0 80px rgba(62,124,89,.12);
}
.strata { position: absolute; inset: 19vh 14vw 14vh 31vw; }
.stratum {
  display: block;
  width: 100%;
  height: 16%;
  margin: 3.8vh 0;
  border: 0;
  border-radius: 999px 22px 22px 999px;
  background:
    radial-gradient(circle at 20% 50%, rgba(185, 242, 124, .42), transparent 5px),
    linear-gradient(90deg, rgba(7, 16, 13, .98), rgba(42, 28, 20, .88), rgba(62, 124, 89, .3));
  box-shadow: inset 0 1px rgba(231, 222, 200, .13), 0 18px 42px rgba(0, 0, 0, .28);
  transition: transform .45s ease, filter .45s ease;
}
.stratum:hover { transform: translateX(24px); filter: brightness(1.25); }
.vault-note { right: 8vw; bottom: 10vh; }
.sequestration-note {
  position: absolute;
  left: 34vw;
  top: 13vh;
  max-width: 360px;
  color: var(--cold-glass);
  font-size: 12px;
  border-left: 1px solid var(--oxidized-copper);
  padding-left: 14px;
}

.assay-table {
  background:
    radial-gradient(circle at 50% 68%, rgba(169, 216, 207, .14), transparent 32vw),
    linear-gradient(180deg, var(--peat-brown), var(--bog-black));
}
.table-grid {
  position: absolute;
  inset: 16vh 8vw 18vh 15vw;
  transform: rotate(-4deg);
  background-image:
    linear-gradient(rgba(169, 216, 207, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 216, 207, .18) 1px, transparent 1px);
  background-size: 64px 64px;
  border: 1px solid rgba(169, 216, 207, .18);
  opacity: .55;
}
.calibrated-line {
  position: absolute;
  left: 8vw;
  right: 9vw;
  top: 48vh;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--oxidized-copper) 0 18px, transparent 18px 28px);
  box-shadow: 0 0 26px rgba(169, 110, 63, .34);
}
.vial-row { position: absolute; left: 18vw; bottom: 22vh; display: flex; gap: clamp(22px, 6vw, 90px); align-items: end; }
.vial {
  position: relative;
  width: 72px;
  height: 190px;
  border: 1px solid rgba(169, 216, 207, .5);
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(90deg, rgba(169, 216, 207, .08), rgba(169, 216, 207, .3), rgba(7, 16, 13, .2));
  box-shadow: inset 12px 0 22px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.38);
  transition: transform .45s ease, box-shadow .45s ease;
}
.vial::before { content: ""; position: absolute; top: -26px; left: 17px; width: 36px; height: 30px; background: var(--peat-brown); border-radius: 8px 8px 3px 3px; border: 1px solid rgba(169,110,63,.7); }
.vial span { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 42%; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, rgba(62,124,89,.12), rgba(27,35,32,.75)); }
.vial.tall { height: 250px; }
.vial.amber span { background: linear-gradient(180deg, rgba(169,110,63,.22), rgba(42,28,20,.85)); }
.vial:hover { transform: translateY(-18px) rotate(2deg); box-shadow: 0 0 54px rgba(169, 216, 207, .22), 0 30px 80px rgba(0,0,0,.38); }
.assay-scale { position: absolute; right: 13vw; top: 25vh; width: 330px; height: 210px; }
.scale-beam { position: absolute; left: 30px; right: 30px; top: 72px; height: 2px; background: var(--oxidized-copper); transform: rotate(-5deg); }
.moon-weight { position: absolute; top: 102px; width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--vellum-mist), var(--oxidized-copper) 55%, var(--peat-brown)); box-shadow: 0 0 35px rgba(169,110,63,.38); }
.moon-weight.left { left: 12px; }
.moon-weight.right { right: 20px; transform: scale(.72); }
.lot-label { position: absolute; left: 18vw; bottom: 13vh; color: var(--phosphor-lichen); font-size: 12px; min-height: 20px; }
.assay-note { right: 10vw; top: 56vh; }

.lanterns {
  background:
    radial-gradient(circle at 65% 33%, rgba(185, 242, 124, .12), transparent 32vw),
    linear-gradient(180deg, var(--bog-black), var(--charcoal-ink));
}
.lantern-note { left: 9vw; top: 14vh; }
.lantern-field { position: absolute; inset: 18vh 8vw 12vh 44vw; }
.lantern {
  position: absolute;
  width: 92px;
  height: 150px;
  border: 1px solid rgba(169, 216, 207, .36);
  border-radius: 46px 46px 28px 28px;
  background: linear-gradient(90deg, rgba(169,216,207,.08), rgba(231,222,200,.06));
  box-shadow: 0 0 44px rgba(185,242,124,.09), inset 0 0 30px rgba(185,242,124,.06);
}
.lantern::before { content: ""; position: absolute; left: 45px; top: -76px; width: 1px; height: 76px; background: rgba(169,216,207,.32); }
.lantern span { position: absolute; inset: 27px 33px; border-radius: 50%; background: var(--phosphor-lichen); filter: blur(8px); opacity: .45; animation: flicker 2.5s ease-in-out infinite; }
.lantern.verified { box-shadow: 0 0 85px rgba(185,242,124,.55), inset 0 0 40px rgba(185,242,124,.18); border-color: rgba(185,242,124,.78); }
.l1 { left: 5%; top: 8%; } .l2 { left: 38%; top: 18%; transform: scale(1.25); } .l3 { left: 69%; top: 2%; transform: scale(.85); } .l4 { left: 54%; top: 55%; transform: scale(1.05); }
@keyframes flicker { 0%,100% { opacity: .3; transform: scale(.8); } 45% { opacity: .8; transform: scale(1.25); } 62% { opacity: .48; } }
.seal-ring {
  position: absolute;
  right: 13vw;
  bottom: 13vh;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 2px solid rgba(169, 110, 63, .6);
  color: rgba(169, 110, 63, .7);
  font: 700 18px/1 var(--jp);
  display: grid;
  place-items: center;
  opacity: .55;
  transform: rotate(-11deg) scale(.9);
  transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease;
}
.seal-ring span { position: absolute; }
.seal-ring span:nth-child(1) { top: 24px; } .seal-ring span:nth-child(2) { font-size: 46px; color: var(--oxidized-copper); } .seal-ring span:nth-child(3) { bottom: 24px; } .seal-ring span:nth-child(4) { transform: rotate(90deg); right: -14px; }
.seal-ring.lit { opacity: 1; transform: rotate(-4deg) scale(1); box-shadow: 0 0 58px rgba(169,110,63,.32); color: var(--phosphor-lichen); }
.hash-slip { position: absolute; left: 10vw; bottom: 16vh; color: rgba(169,216,207,.68); font-size: 11px; }

.exchange-canal {
  background:
    radial-gradient(ellipse at 50% 68%, rgba(169,216,207,.16), transparent 35vw),
    linear-gradient(180deg, var(--charcoal-ink), #07100D 70%);
}
.canal { position: absolute; left: 5vw; right: 0; top: 35vh; height: 42vh; background: linear-gradient(180deg, rgba(169,216,207,.08), rgba(7,16,13,.92)); border-top: 1px solid rgba(169,216,207,.18); border-bottom: 1px solid rgba(169,216,207,.12); overflow: hidden; }
.ripple { position: absolute; left: -10%; right: -10%; height: 1px; background: rgba(169,216,207,.2); animation: ripple 7s linear infinite; }
.r1 { top: 24%; } .r2 { top: 52%; animation-delay: -3s; } .r3 { top: 76%; animation-delay: -5s; }
@keyframes ripple { from { transform: translateX(-8%) scaleX(.9); } to { transform: translateX(8%) scaleX(1.1); } }
.ticket { position: absolute; width: 184px; height: 78px; padding: 17px; background: var(--vellum-mist); color: var(--peat-brown); font-size: 11px; box-shadow: 0 22px 50px rgba(0,0,0,.42); border: 1px solid rgba(169,110,63,.45); animation: floatTicket 12s ease-in-out infinite; }
.t1 { left: 12%; top: 18%; transform: rotate(-7deg); } .t2 { left: 48%; top: 48%; animation-delay: -5s; transform: rotate(4deg); } .t3 { left: 74%; top: 25%; animation-delay: -8s; transform: rotate(-2deg); }
@keyframes floatTicket { 50% { margin-left: 46px; margin-top: -16px; } }
.canal-note { left: 10vw; top: 10vh; }
.ledger-string { position: absolute; right: 12vw; top: 12vh; bottom: 10vh; width: 1px; background: linear-gradient(transparent, var(--oxidized-copper), transparent); transform: rotate(18deg); }

.quiet-close {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(185,242,124,.12), transparent 20vw),
    linear-gradient(180deg, var(--bog-black), var(--peat-brown));
}
.certificate {
  position: relative;
  width: min(720px, 76vw);
  min-height: 520px;
  padding: clamp(36px, 6vw, 76px);
  color: var(--peat-brown);
  background:
    radial-gradient(circle at 20% 18%, rgba(62,124,89,.12), transparent 18vw),
    repeating-linear-gradient(0deg, rgba(42,28,20,.04) 0 1px, transparent 1px 16px),
    var(--vellum-mist);
  border: 1px solid rgba(169, 110, 63, .72);
  box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 0 0 12px rgba(169,110,63,.08);
}
.certificate h2 { color: var(--bog-black); }
.certificate p { color: rgba(42,28,20,.76); max-width: 520px; }
.stamp { position: absolute; right: 44px; bottom: 44px; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--oxidized-copper); border: 2px solid var(--oxidized-copper); font: 700 18px/1.05 var(--serif); transform: rotate(-12deg); }
.closing-plume { position: absolute; width: 56vw; height: 56vw; border-radius: 50%; background: radial-gradient(circle, rgba(185,242,124,.09), transparent 58%); filter: blur(22px); animation: closeBreath 8s ease-in-out infinite alternate; }
@keyframes closeBreath { from { transform: scale(.88); opacity: .32; } to { transform: scale(1.1); opacity: .7; } }
.final-line { position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); max-width: 760px; text-align: center; color: rgba(231,222,200,.68); font-family: var(--jp); font-size: 17px; letter-spacing: .08em; }

@media (max-width: 760px) {
  .depth-rail { display: none; }
  .scene { padding: 24px; }
  .object-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 10vh; }
  .opening-note { margin-top: 55vh; }
  .wordmark { font-size: 22vw; }
  .strata { inset: 38vh 6vw 8vh 8vw; }
  .peat-core, .assay-scale { opacity: .45; }
  .vial-row { left: 12vw; gap: 18px; transform: scale(.75); transform-origin: left bottom; }
  .lantern-field { inset: 40vh 6vw 10vh 8vw; }
  .canal-note { margin-top: 0; }
  .certificate { width: 90vw; min-height: 460px; }
}