:root {
  /* Compliance tokens from design typography prompt: “footprint.market” wordmark sits inside a glowing footprint lagoon; Playfair Display** Display* in 700 or 800 weight. */
  --deep-tide: #062A32;
  --sea-mint: #7EF2CF;
  --coral: #FF5E7E;
  --shell: #FFF1D0;
  --ultra: #176BFF;
  --gold: #D8B46A;
  --kelp: #173D2F;
  --display: "Playfair Display", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Manrope", "Inter", "Lato", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deep-tide);
  color: var(--shell);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 12%, rgba(126, 242, 207, .16), transparent 30%),
    radial-gradient(circle at 84% 36%, rgba(255, 94, 126, .14), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(23, 107, 255, .24), transparent 36%),
    linear-gradient(125deg, rgba(23, 61, 47, .76), rgba(6, 42, 50, .2) 38%, rgba(6, 42, 50, .95));
  z-index: -3;
}

.shoreline {
  position: relative;
  background-image:
    linear-gradient(118deg, transparent 0 18%, rgba(216, 180, 106, .18) 18.2%, transparent 18.6% 65%, rgba(255, 94, 126, .14) 65.2%, transparent 65.7%),
    radial-gradient(ellipse at 35% 42%, rgba(126, 242, 207, .08), transparent 35%);
}

.cove {
  min-height: 100vh;
  position: relative;
  padding: 8vw;
  isolation: isolate;
}

.hero-cove {
  display: grid;
  place-items: center;
  padding: 5vw;
}

.moon-disc {
  position: absolute;
  width: 34vw;
  height: 34vw;
  min-width: 280px;
  min-height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 208, .18), rgba(126, 242, 207, .08) 52%, transparent 70%);
  filter: blur(1px);
  top: 8vh;
  left: 8vw;
}

.lagoon-stage {
  width: min(1050px, 94vw);
  min-height: 82vh;
  position: relative;
  display: grid;
  place-items: center;
}

.footprint-svg {
  width: min(520px, 76vw);
  filter: drop-shadow(0 0 38px rgba(126, 242, 207, .32));
  animation: lagoonPulse 6s ease-in-out infinite;
}

.draw-foot {
  fill: rgba(126, 242, 207, .05);
  stroke: url(#soleGlow);
  stroke-width: 5;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: drawLine 2.7s ease forwards;
}

.wave-line {
  fill: none;
  stroke: var(--shell);
  stroke-width: 2.2;
  opacity: .72;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: drawLine 2.2s ease forwards .7s;
}

.delay-a { animation-delay: 1s; }
.delay-b { animation-delay: 1.25s; }
.delay-c { animation-delay: 1.5s; }

.brand-plaque {
  position: absolute;
  text-align: left;
  width: min(590px, 86vw);
  left: 6%;
  bottom: 9%;
  padding: 28px 34px;
  background: rgba(6, 42, 50, .76);
  border: 1px solid rgba(216, 180, 106, .54);
  clip-path: polygon(0 9%, 92% 0, 100% 78%, 88% 100%, 5% 95%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.overline {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: .9;
}

h1 { font-size: clamp(4rem, 12vw, 10.5rem); letter-spacing: -.07em; }
h1 em { color: var(--sea-mint); font-style: italic; }
h2 { font-size: clamp(3rem, 8vw, 7.4rem); max-width: 900px; }

p { font-size: clamp(1rem, 1.55vw, 1.18rem); line-height: 1.7; color: rgba(255, 241, 208, .82); }

.artifact, .line-object, .receipt-card, .auction-dial {
  cursor: pointer;
}

.artifact {
  position: absolute;
  color: var(--shell);
  border: 1px solid rgba(126, 242, 207, .48);
  background: rgba(23, 61, 47, .72);
  backdrop-filter: blur(12px);
  padding: 16px 18px;
  min-width: 132px;
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: driftIn .9s ease both;
}

.shell-receipt { top: 14%; right: 15%; clip-path: polygon(0 0, 88% 0, 100% 20%, 90% 100%, 5% 100%); animation-delay: .35s; }
.coral-abacus { top: 34%; left: 6%; border-color: rgba(255, 94, 126, .66); animation-delay: .65s; }
.kelp-tag { right: 7%; bottom: 25%; background: rgba(23, 61, 47, .9); clip-path: polygon(0 0, 100% 17%, 88% 100%, 8% 88%); animation-delay: .95s; }
.pearl-seal { left: 18%; bottom: 14%; border-radius: 50%; min-width: 78px; height: 78px; display: grid; place-items: center; color: var(--gold); animation-delay: 1.25s; }

.artifact-line { display: block; height: 1px; background: var(--shell); margin: 8px 0; width: 86px; }
.artifact-line.short { width: 54px; background: var(--gold); }
.coral-abacus i { display: inline-block; width: 16px; height: 16px; margin: 0 3px 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px rgba(255, 94, 126, .65); }

.scroll-note {
  position: absolute;
  right: 7vw;
  bottom: 32px;
  font-family: var(--serif);
  color: var(--gold);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tide-ruler {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 24px;
  padding: 18px 10px;
  border-left: 1px solid rgba(216, 180, 106, .44);
}

.ruler-notch {
  width: 58px;
  height: 18px;
  position: relative;
  display: block;
  background: rgba(216, 180, 106, .28);
  clip-path: polygon(0 0, 100% 24%, 76% 100%, 8% 78%);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}

.ruler-notch span {
  position: absolute;
  right: 68px;
  top: -5px;
  width: 110px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: .86rem;
  letter-spacing: .08em;
  opacity: .58;
}

.ruler-notch.active {
  background: var(--sea-mint);
  box-shadow: 0 0 22px rgba(126, 242, 207, .74);
  transform: translateX(-10px);
}

.arrival-cove {
  padding-top: 18vh;
  background: radial-gradient(ellipse at 22% 40%, rgba(255, 241, 208, .1), transparent 31%);
}

.receipts-cove {
  margin-top: -10vh;
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  background: linear-gradient(145deg, rgba(23, 61, 47, .72), rgba(6, 42, 50, .92)), radial-gradient(circle at 70% 38%, rgba(23, 107, 255, .28), transparent 32%);
}

.auction-cove {
  margin-top: -8vh;
  background: radial-gradient(circle at 72% 58%, rgba(255, 94, 126, .19), transparent 30%), radial-gradient(circle at 25% 70%, rgba(126, 242, 207, .16), transparent 34%);
}

.cove-number {
  position: absolute;
  top: 10vh;
  left: 6vw;
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 17rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 180, 106, .45);
  opacity: .62;
}

.editorial-plaque {
  width: min(820px, 82vw);
  position: relative;
  z-index: 3;
  transform: translateY(35px);
  opacity: .35;
  transition: transform 1s ease, opacity 1s ease;
}

.observed-cove.in-view .editorial-plaque { transform: translateY(0); opacity: 1; }
.arrival-plaque { margin-left: 20vw; }
.receipts-plaque { margin-left: 4vw; padding-top: 10vh; }
.auction-plaque { margin-left: 12vw; padding-top: 8vh; }

.angled-market-panel {
  position: absolute;
  right: 8vw;
  top: 18vh;
  width: min(390px, 42vw);
  height: 520px;
  background: linear-gradient(150deg, rgba(126, 242, 207, .2), rgba(23, 107, 255, .24), rgba(255, 94, 126, .12));
  border: 1px solid rgba(216, 180, 106, .48);
  clip-path: polygon(0 9%, 100% 0, 88% 84%, 16% 100%);
}

.stall-list { position: absolute; inset: 80px 42px; display: grid; gap: 28px; align-content: center; }
.stall-list span, .bid-tags span {
  display: block;
  padding: 13px 18px;
  color: var(--shell);
  font-family: var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(216, 180, 106, .5);
}

.footprint-object {
  position: absolute;
  left: 11vw;
  bottom: 12vh;
  width: 170px;
  height: 260px;
  border: 2px solid rgba(126, 242, 207, .7);
  border-radius: 48% 52% 55% 45% / 38% 45% 56% 62%;
  box-shadow: inset 0 0 38px rgba(126, 242, 207, .12), 0 0 28px rgba(126, 242, 207, .22);
}

.reef-shard { position: absolute; background: var(--coral); clip-path: polygon(6% 0, 100% 34%, 66% 100%, 0 74%); opacity: .9; }
.shard-one { width: 110px; height: 220px; right: 28vw; bottom: 8vh; transform: rotate(24deg); }
.shard-two { width: 70px; height: 145px; left: 38vw; top: 20vh; background: var(--gold); transform: rotate(-34deg); }

.receipt-cluster {
  position: absolute;
  right: 8vw;
  top: 28vh;
  display: grid;
  gap: 26px;
  transform: rotate(-4deg);
}

.receipt-card {
  width: 330px;
  padding: 28px;
  background: rgba(255, 241, 208, .92);
  color: var(--deep-tide);
  clip-path: polygon(0 0, 86% 0, 100% 18%, 92% 100%, 0 92%);
  box-shadow: 18px 22px 0 rgba(126, 242, 207, .18);
}

.receipt-card.coral { transform: translateX(-72px); box-shadow: 18px 22px 0 rgba(255, 94, 126, .18); }
.receipt-card.gold { transform: translateX(30px); box-shadow: 18px 22px 0 rgba(216, 180, 106, .18); }
.receipt-card span { display: block; height: 2px; background: var(--kelp); margin: 13px 0; opacity: .75; }
.receipt-card strong { font-family: var(--serif); letter-spacing: .14em; text-transform: uppercase; }

.bottle-columns { position: absolute; left: 9vw; bottom: 12vh; display: flex; gap: 24px; align-items: end; }
.bottle-columns i { width: 54px; height: 260px; border: 1px solid rgba(126, 242, 207, .55); border-radius: 24px 24px 8px 8px; background: linear-gradient(180deg, rgba(126, 242, 207, .16), rgba(23, 107, 255, .1)); }
.bottle-columns i:nth-child(2) { height: 340px; border-color: rgba(216, 180, 106, .6); }
.bottle-columns i:nth-child(3) { height: 210px; border-color: rgba(255, 94, 126, .55); }

.auction-dial {
  position: absolute;
  right: 13vw;
  top: 21vh;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 106, .65);
  background: radial-gradient(circle, rgba(126, 242, 207, .16), rgba(6, 42, 50, .84) 62%);
  box-shadow: 0 0 55px rgba(126, 242, 207, .17);
}

.auction-dial::before { content: ""; position: absolute; inset: 42px; border: 1px dashed rgba(255, 241, 208, .42); border-radius: 50%; }
.hand { position: absolute; left: 50%; top: 50%; width: 2px; transform-origin: 50% 0; background: var(--gold); }
.hand.long { height: 132px; transform: rotate(216deg); }
.hand.short { height: 88px; transform: rotate(128deg); background: var(--coral); }
.auction-dial em { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); color: var(--gold); font-family: var(--display); font-size: 2rem; }

.bid-tags { position: absolute; left: 10vw; bottom: 15vh; width: min(480px, 50vw); display: grid; gap: 14px; }
.bid-tags span { background: rgba(23, 61, 47, .78); clip-path: polygon(0 0, 94% 0, 100% 50%, 92% 100%, 0 100%); }
.final-wake { position: absolute; right: 8vw; bottom: 10vh; font-family: var(--display); font-size: clamp(2rem, 5vw, 5rem); color: var(--sea-mint); max-width: 600px; line-height: .95; }

.cursor-ledger {
  position: fixed;
  left: 0;
  top: 0;
  width: 42px;
  height: 64px;
  border: 1px solid rgba(126, 242, 207, .55);
  border-radius: 48% 52% 54% 46% / 38% 44% 56% 62%;
  pointer-events: none;
  z-index: 30;
  opacity: .38;
  transform: translate(-80px, -80px) rotate(-18deg);
  box-shadow: 9px 8px 0 rgba(255, 94, 126, .22), -6px -4px 0 rgba(216, 180, 106, .2);
}

.trail-print {
  position: fixed;
  width: 28px;
  height: 42px;
  border: 1px solid rgba(126, 242, 207, .44);
  border-radius: 48% 52% 54% 46% / 38% 44% 56% 62%;
  pointer-events: none;
  z-index: 10;
  animation: fadeTrail 2.8s ease forwards;
  box-shadow: 6px 5px 0 rgba(255, 94, 126, .18), -4px -3px 0 rgba(216, 180, 106, .14);
}

.cost-label {
  position: fixed;
  max-width: 280px;
  padding: 13px 16px;
  background: rgba(6, 42, 50, .92);
  border: 1px solid rgba(216, 180, 106, .75);
  color: var(--shell);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transform: translate(12px, 12px);
  transition: opacity .25s ease;
  clip-path: polygon(0 0, 94% 0, 100% 22%, 94% 100%, 6% 100%);
}

.cost-label.visible { opacity: 1; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes lagoonPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes driftIn { from { opacity: 0; transform: translateY(30px) rotate(-3deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes fadeTrail { 0% { opacity: .45; transform: translate(-50%, -50%) rotate(var(--r)); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.8); } }

@media (max-width: 820px) {
  .tide-ruler { right: 10px; }
  .brand-plaque, .arrival-plaque, .receipts-plaque, .auction-plaque { margin-left: 0; left: auto; width: 86vw; }
  .artifact { position: relative; inset: auto; margin: 10px; display: inline-grid; }
  .angled-market-panel, .receipt-cluster, .auction-dial, .bid-tags, .final-wake, .bottle-columns { position: relative; inset: auto; width: 82vw; margin: 44px 0 0; }
  .receipt-card { width: 78vw; }
  .auction-dial { height: 82vw; }
}