:root {
  --deep-ground: #1C0F0A;
  --dark-accent: #4A2518;
  --mid-warm: #6B3A2A;
  --primary: #C47A5A;
  --bright: #E87B4A;
  --cream: #F2E6D9;
  --dust: #D4A88C;
  --gold: #E8B86D;
  --rose: #E8A882;
  --umber: #3D1F14;
  --glass: rgba(28, 15, 10, 0.6);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--deep-ground);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 78% 12%, rgba(232, 184, 109, 0.1), transparent 30vw),
    radial-gradient(circle at 8% 66%, rgba(196, 122, 90, 0.14), transparent 34vw),
    linear-gradient(145deg, #1C0F0A 0%, #3D1F14 48%, #1C0F0A 100%);
  font-family: "IBM Plex Mono", "Fira Code", monospace;
}

.kiln {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  background: #1C0F0A;
}

.blob-field, #particleCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#particleCanvas { z-index: 2; opacity: .9; }
.blob-field { z-index: 1; }
.grid-veil { opacity: .04; transform-origin: 50% 50%; animation: gridTurn 120s linear infinite; }
.ambient { opacity: .66; fill: url(#primary-blob); transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; }
.ambient-a { animation: tectonicA 52s ease-in-out infinite alternate; }
.ambient-b { animation: tectonicB 58s ease-in-out infinite alternate; opacity: .48; }
.fragment-shapes .morph { fill: url(#primary-blob); opacity: .54; transform-box: fill-box; transform-origin: center; }
.blob-field.golden .ambient, .blob-field.golden .morph { fill: url(#gold-blob); opacity: .72; }
.m1 { animation: driftOne 24s ease-in-out infinite alternate; }
.m2 { animation: driftTwo 28s ease-in-out infinite alternate; }
.m3 { animation: driftThree 31s ease-in-out infinite alternate; }
.m4 { animation: driftFour 26s ease-in-out infinite alternate; }
.connection-lines line { stroke: #C47A5A; stroke-width: 1.2; opacity: .15; stroke-dasharray: 5 16; animation: linePulse 8s ease-in-out infinite; }

.radial-nav {
  position: fixed;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 20;
  width: 14rem;
  height: 14rem;
  pointer-events: none;
}

.nav-glyph {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(212, 168, 140, .35);
  border-radius: 50%;
  color: #E8B86D;
  background: rgba(28, 15, 10, .62);
  backdrop-filter: blur(16px) saturate(1.2);
  font: 700 1.4rem "Space Mono", monospace;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .35s, color .35s, box-shadow .35s;
}

.radial-nav:hover .nav-glyph, .radial-nav.open .nav-glyph {
  border-color: #E87B4A;
  color: #F2E6D9;
  box-shadow: 0 0 36px rgba(232, 123, 74, .28);
}

.radial-nav a {
  position: absolute;
  top: .72rem;
  left: .85rem;
  display: inline-flex;
  padding: .55rem .75rem;
  border: 1px solid rgba(196, 122, 90, .24);
  border-radius: 999px;
  color: #E87B4A;
  background: rgba(28, 15, 10, .72);
  backdrop-filter: blur(12px);
  text-decoration: none;
  font: 500 .75rem "Fira Code", monospace;
  letter-spacing: .2em;
  opacity: 0;
  transform: translate(0, 0) scale(.6);
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.9,.2,1), color .3s, background .3s;
  transition-delay: calc(var(--i) * 50ms);
  pointer-events: auto;
}

.radial-nav:hover a, .radial-nav.open a { opacity: 1; }
.radial-nav:hover a:nth-of-type(1), .radial-nav.open a:nth-of-type(1) { transform: translate(3.5rem, .2rem) scale(1); }
.radial-nav:hover a:nth-of-type(2), .radial-nav.open a:nth-of-type(2) { transform: translate(4.9rem, 2.9rem) scale(1); }
.radial-nav:hover a:nth-of-type(3), .radial-nav.open a:nth-of-type(3) { transform: translate(3.2rem, 5.8rem) scale(1); }
.radial-nav:hover a:nth-of-type(4), .radial-nav.open a:nth-of-type(4) { transform: translate(.2rem, 7.2rem) scale(1); }
.radial-nav a:hover { color: #F2E6D9; background: rgba(107, 58, 42, .76); }

main { position: relative; z-index: 0; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 5vw, 6rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  right: clamp(1rem, 3vw, 3rem);
  top: 50%;
  writing-mode: vertical-rl;
  color: rgba(212, 168, 140, .18);
  font: 500 .75rem "Fira Code", monospace;
  letter-spacing: .35em;
}

.lot-number {
  position: absolute;
  z-index: -1;
  font: 700 clamp(8rem, 20vw, 19rem) "Space Mono", monospace;
  letter-spacing: -.08em;
  color: rgba(242, 230, 217, .03);
  pointer-events: none;
}

.origin .lot-number { left: 6vw; bottom: 6vh; }
.fragments .lot-number { right: 5vw; top: 5vh; }
.assembly .lot-number { left: 4vw; top: 8vh; }
.value .lot-number { right: 8vw; bottom: 9vh; }

.origin-mark {
  text-align: center;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.45));
  animation: originRise 1800ms ease .3s both;
}

h1, h2 {
  margin: 0;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  color: #F2E6D9;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.17;
  letter-spacing: .15em;
}

h1 span { color: #E87B4A; }

h2 {
  color: #F2E6D9;
  font-size: clamp(1.35rem, 2.7vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: .09em;
}

p {
  color: #C49A82;
  font-size: clamp(.875rem, 1.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.85;
}

.micro {
  margin: 0 0 1rem;
  color: #E87B4A;
  font: 500 .75rem "Fira Code", monospace;
  letter-spacing: .2em;
}

.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #E8B86D;
  font: 700 2rem "Space Mono", monospace;
  opacity: 0;
  animation: cuePulse 2s ease-in-out 4s infinite;
}

.fragments {
  min-height: 200vh;
  align-content: space-evenly;
  justify-items: stretch;
  gap: 12vh;
}

.glass-card {
  position: relative;
  padding: clamp(1.4rem, 3vw, 3rem);
  border: 1px solid rgba(212, 168, 140, .22);
  border-radius: 2rem;
  background: rgba(28, 15, 10, .6);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32), inset 0 1px rgba(242, 230, 217, .08);
  overflow: hidden;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: auto auto -45% -20%;
  width: 75%;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 123, 74, .18);
  border-radius: 50%;
  opacity: .7;
}

.glass-card p:last-child { margin-bottom: 0; color: #D4A88C; }
.card-one { width: min(40vw, 36rem); margin-left: 8vw; }
.card-two { width: min(55vw, 45rem); margin-left: auto; margin-right: 10vw; }
.card-three { width: min(70vw, 54rem); margin-left: 18vw; }

.reveal-card {
  opacity: 0;
  transform: translateY(4rem) scale(.94);
  clip-path: circle(0% at 50% 50%);
  transition: opacity .75s ease, transform .9s cubic-bezier(.2,.9,.2,1), clip-path 1.1s ease;
}

.reveal-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: circle(145% at 50% 50%);
}

.assembly {
  grid-template-columns: minmax(18rem, .8fr) minmax(20rem, 1.2fr);
  gap: clamp(2rem, 5vw, 6rem);
}

.assembly-copy { width: min(40vw, 32rem); justify-self: end; }
.assembly-stage {
  position: relative;
  width: min(58vw, 44rem);
  height: min(70vh, 42rem);
  justify-self: start;
}

.piece {
  position: absolute;
  width: clamp(5.5rem, 11vw, 9rem);
  aspect-ratio: 1.1 / 1;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #4A2518, #6B3A2A 55%, #C47A5A);
  clip-path: path("M 18 6 C 34 -4 67 3 76 22 C 83 37 70 45 82 57 C 95 69 106 51 117 64 C 130 80 110 110 88 114 C 70 117 65 104 50 111 C 34 118 31 136 14 130 C -5 124 -4 91 10 78 C 23 66 37 75 43 61 C 50 44 16 39 18 6 Z");
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.36));
  transition: filter .35s ease, transform .7s cubic-bezier(.2,.9,.2,1), background .45s;
}

.piece::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,123,74,.4), transparent 62%);
  opacity: 0;
  transition: opacity .35s;
}

.piece:hover, .piece.assembled {
  filter: drop-shadow(0 0 30px rgba(232,123,74,.3)) drop-shadow(0 20px 32px rgba(0,0,0,.4));
  background: linear-gradient(135deg, #6B3A2A, #C47A5A 62%, #E87B4A);
}

.piece:hover::after, .piece.assembled::after { opacity: 1; }
.p1 { left: 2%; top: 10%; transform: rotate(-18deg); }
.p2 { left: 46%; top: 4%; transform: rotate(23deg); }
.p3 { right: 4%; top: 30%; transform: rotate(-8deg); }
.p4 { left: 18%; top: 42%; transform: rotate(34deg); }
.p5 { left: 55%; top: 56%; transform: rotate(-28deg); }
.p6 { left: 4%; bottom: 4%; transform: rotate(8deg); }
.p7 { right: 12%; bottom: 3%; transform: rotate(17deg); }
.piece.assembled { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)) scale(.92); }

.value { min-height: 100vh; }
.value::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,184,109,.2), rgba(232,123,74,.08) 28%, transparent 62%);
  filter: blur(24px);
  opacity: .85;
  animation: finalGlow 6s ease-in-out infinite alternate;
  z-index: -1;
}

.final-lock { text-align: center; }
.final-lock h2 {
  font-size: clamp(3rem, 11vw, 10rem);
  letter-spacing: .18em;
  color: #F2E6D9;
  text-shadow: 0 0 60px rgba(232, 184, 109, .26);
}
.final-lock p:last-child { color: #F2E6D9; font-weight: 300; letter-spacing: .24em; }

.ripple-layer { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.ripple {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(232, 123, 74, .6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 1.2s ease-out forwards;
}

@keyframes gridTurn { to { transform: rotate(1deg); } }
@keyframes tectonicA { to { transform: translate(4vw, -3vh) scale(1.08) rotate(7deg); } }
@keyframes tectonicB { to { transform: translate(-5vw, 4vh) scale(1.12) rotate(-9deg); } }
@keyframes driftOne { to { transform: translate(3vw, 5vh) rotate(12deg) scale(1.08); } }
@keyframes driftTwo { to { transform: translate(-4vw, 3vh) rotate(-10deg) scale(.94); } }
@keyframes driftThree { to { transform: translate(4vw, -5vh) rotate(9deg) scale(1.04); } }
@keyframes driftFour { to { transform: translate(-3vw, -4vh) rotate(-12deg) scale(1.09); } }
@keyframes linePulse { 50% { opacity: .28; stroke-dashoffset: -22; } }
@keyframes originRise { from { opacity: 0; transform: translateY(2rem) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cuePulse { 0%, 100% { opacity: .2; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, .8rem); } }
@keyframes finalGlow { to { transform: scale(1.08); opacity: 1; } }
@keyframes rippleExpand { to { opacity: 0; transform: translate(-50%, -50%) scale(22); } }

@media (max-width: 820px) {
  .card-one, .card-two, .card-three, .assembly-copy, .assembly-stage { width: 100%; margin: 0; }
  .assembly { grid-template-columns: 1fr; }
  .assembly-copy, .assembly-stage { justify-self: stretch; }
  .assembly-stage { height: 62vh; }
  .radial-nav { transform: scale(.86); transform-origin: top left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}