:root {
  /* Interactions can be energetic through sudden pigment flashes and quick artifact rotations. */
  --umber: #20150F;
  --parchment: #E7D3AE;
  --gold: #C59A4A;
  --verdigris: #47715F;
  --sienna: #A54E2B;
  --lapis: #283B58;
  --ochre: #C4643B;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Literata", Georgia, serif;
  --label: "Alegreya Sans SC", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background:
    radial-gradient(circle at 74% 14%, rgba(40, 59, 88, .45), transparent 28rem),
    radial-gradient(circle at 18% 70%, rgba(165, 78, 43, .22), transparent 34rem),
    linear-gradient(115deg, #20150F 0%, #150d09 42%, #28170f 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(231, 211, 174, .08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(196, 100, 59, .11) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 47%, rgba(197, 154, 74, .04) 48% 52%, transparent 53%);
  background-size: 5px 6px, 9px 11px, 31px 31px;
  mix-blend-mode: screen;
  opacity: .55;
  z-index: 30;
}

.grain.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .38;
  background:
    repeating-radial-gradient(circle at 17% 23%, rgba(231, 211, 174, .13) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(67deg, rgba(32, 21, 15, .12) 0 1px, transparent 1px 7px);
  animation: settleGrain 7s ease-out both;
}

.smoke-field span {
  position: fixed;
  width: 42vw;
  height: 20vw;
  border-radius: 50%;
  background: rgba(40, 59, 88, .28);
  filter: blur(45px);
  pointer-events: none;
  animation: kilnSmoke 16s ease-in-out infinite alternate;
  z-index: 1;
}

.smoke-field span:nth-child(1) { left: 48%; top: 10%; }
.smoke-field span:nth-child(2) { left: 8%; top: 57%; background: rgba(71, 113, 95, .20); animation-delay: -5s; }
.smoke-field span:nth-child(3) { left: 62%; top: 72%; background: rgba(165, 78, 43, .22); animation-delay: -9s; }

.mote-field { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .45;
  box-shadow: 0 0 8px rgba(197, 154, 74, .7);
}

.workshop { position: relative; z-index: 3; }
.chamber {
  min-height: 100vh;
  position: relative;
  padding: clamp(2rem, 5vw, 5.5rem);
  isolation: isolate;
}

.hero { display: grid; grid-template-columns: minmax(7rem, 16vw) 1fr; align-items: center; gap: 3vw; }

.artifact-column {
  min-height: 82vh;
  border-left: 2px solid rgba(197, 154, 74, .5);
  border-right: 1px solid rgba(71, 113, 95, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: translateX(-1vw) rotate(-1.5deg);
}

.vertical-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: clamp(4.8rem, 11vw, 11rem);
  line-height: .74;
  letter-spacing: -.08em;
  color: rgba(231, 211, 174, .9);
  text-shadow: 0 18px 40px rgba(0,0,0,.65);
}

.seal-stack { position: absolute; right: -1.3rem; top: 10%; display: grid; gap: 1rem; }
.seal-stack span,
.gear,
.bead {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, #E7D3AE, #C59A4A 32%, #A54E2B 67%, #20150F 100%);
  color: var(--umber);
  box-shadow: inset -6px -8px 16px rgba(32, 21, 15, .42), 0 12px 24px rgba(0,0,0,.35);
}
.seal-stack span { width: 2.5rem; height: 2.5rem; border-radius: 46% 54% 40% 60%; font-family: var(--label); animation: stampPress 5s infinite; }
.seal-stack span:nth-child(even) { animation-delay: -2s; }

.title-slab {
  width: min(68vw, 880px);
  min-height: 46vh;
  margin-left: 4vw;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  transform: rotate(-5deg) translateY(1vh);
  clip-path: polygon(5% 6%, 91% 0, 99% 76%, 79% 100%, 0 90%);
  background:
    radial-gradient(circle at 78% 22%, rgba(197,154,74,.25), transparent 13rem),
    linear-gradient(135deg, #A54E2B, #C4643B 42%, #7b3824 76%, #20150F);
  box-shadow: 0 45px 100px rgba(0,0,0,.55), inset 0 0 55px rgba(32, 21, 15, .35);
  animation: clayBreathe 5.8s ease-in-out infinite;
}

.title-slab::before,
.artifact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(circle at 34% 36%, rgba(231,211,174,.18) 0 1px, transparent 1px 5px);
  opacity: .45;
  pointer-events: none;
}

.slab-mark,
.section-label,
.text-strip,
.annotation {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.slab-mark { color: var(--umber); background: rgba(231, 211, 174, .58); padding: .35rem .7rem; }
h1, h2 { font-family: var(--display); margin: 0; font-weight: 700; }
h1 { font-size: clamp(7rem, 18vw, 17rem); line-height: .72; letter-spacing: -.08em; color: var(--parchment); text-shadow: 0 7px 0 rgba(32,21,15,.32); }
h2 { font-size: clamp(3.2rem, 7vw, 7.5rem); line-height: .84; color: var(--parchment); letter-spacing: -.045em; }
p { font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.62; max-width: 38rem; }

.crack { position: absolute; height: 3px; background: var(--umber); transform-origin: left; opacity: .66; }
.crack-one { width: 42%; left: 23%; top: 28%; transform: rotate(18deg); }
.crack-two { width: 29%; left: 54%; top: 68%; transform: rotate(-31deg); }

.glyph-orbit .shard {
  position: absolute;
  font-family: var(--label);
  color: var(--parchment);
  padding: .55rem .8rem;
  background: rgba(40, 59, 88, .76);
  border: 1px solid rgba(197, 154, 74, .42);
  clip-path: polygon(8% 0, 100% 12%, 88% 100%, 0 78%);
  box-shadow: 0 20px 38px rgba(0,0,0,.35);
  animation: magnetize 1.1s cubic-bezier(.2,.9,.16,1) both, shardFloat 5s ease-in-out infinite;
}
.s1 { right: 13vw; top: 10vh; }
.s2 { right: 6vw; bottom: 18vh; animation-delay: .12s, -2s; }
.s3 { left: 29vw; bottom: 9vh; animation-delay: .22s, -1s; }
.s4 { right: 26vw; top: 72vh; animation-delay: .35s, -3s; }
.s5 { left: 23vw; top: 15vh; animation-delay: .48s, -4s; }
.hero-note { position: absolute; right: 5vw; bottom: 6vh; width: 22rem; color: rgba(231,211,174,.72); }

.bead-nav { position: fixed; right: 1.6rem; top: 50%; transform: translateY(-50%); display: grid; gap: 1rem; z-index: 40; }
.bead { width: 1.1rem; height: 1.1rem; border-radius: 50%; transition: transform .25s ease, background .25s ease; }
.bead.active { transform: scale(1.85); background: radial-gradient(circle, #E7D3AE, #C4643B 55%, #20150F); }

.temper { padding-top: 14vh; }
.tablet {
  width: min(74vw, 860px);
  min-height: 58vh;
  margin-left: 20vw;
  padding: 5rem 4rem;
  clip-path: polygon(2% 10%, 74% 0, 98% 23%, 87% 95%, 12% 100%, 0 72%);
  background: linear-gradient(140deg, #7e3e27, #A54E2B 40%, #C4643B 78%, #5b281b);
  box-shadow: 0 38px 85px rgba(0,0,0,.48);
}
.stamp-band { display: flex; gap: .8rem; margin-bottom: 4rem; transform: rotate(-3deg); }
.stamp-band i { width: 2.2rem; height: 2.2rem; border-radius: 42%; border: 2px solid var(--umber); background: rgba(231,211,174,.26); animation: stampPress 3.4s infinite; }
.stamp-band i:nth-child(2n) { animation-delay: -1.5s; }
.text-strip { position: absolute; left: 6vw; bottom: 17vh; max-width: 22rem; color: var(--gold); border-top: 1px solid var(--gold); padding-top: .8rem; }
.angled { transform: rotate(8deg); }

.bind { background: linear-gradient(95deg, rgba(40,59,88,.32), transparent 54%); }
.loom { width: min(78vw, 980px); margin: 10vh 0 0 8vw; min-height: 64vh; position: relative; }
.threads { position: absolute; inset: 0; transform: rotate(-6deg); }
.threads span { position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #47715F, #C59A4A, transparent); box-shadow: 0 0 16px rgba(71,113,95,.55); animation: pullTaut 4.2s ease-in-out infinite; }
.threads span:nth-child(1) { top: 12%; }.threads span:nth-child(2) { top: 26%; animation-delay: -.6s; }.threads span:nth-child(3) { top: 42%; animation-delay: -1.2s; }.threads span:nth-child(4) { top: 58%; animation-delay: -1.8s; }.threads span:nth-child(5) { top: 74%; animation-delay: -2.4s; }.threads span:nth-child(6) { top: 88%; animation-delay: -3s; }
.loom-copy { position: relative; margin-left: 22vw; padding: 4rem; width: min(51vw, 690px); background: rgba(32,21,15,.72); border-left: 5px solid var(--verdigris); box-shadow: 0 25px 70px rgba(0,0,0,.38); }
.mask-silhouette { position: absolute; right: 8vw; bottom: 8vh; width: 18vw; height: 31vw; background: linear-gradient(#283B58, #20150F); clip-path: polygon(50% 0, 74% 12%, 83% 40%, 66% 100%, 34% 100%, 17% 40%, 26% 12%); opacity: .7; }

.animate { display: grid; grid-template-columns: 1fr 40vw; align-items: center; gap: 2rem; }
.machine { height: 70vh; margin-left: 6vw; position: relative; background: radial-gradient(circle, rgba(197,154,74,.16), transparent 55%); }
.vessel-rim { position: absolute; left: 5%; top: 10%; width: 42vw; height: 42vw; border: 2rem solid rgba(71,113,95,.62); border-radius: 50%; clip-path: polygon(0 16%, 100% 0, 87% 100%, 12% 88%); animation: morphRim 7s ease-in-out infinite; }
.gear { position: absolute; border-radius: 50%; font-family: var(--display); font-size: 4rem; color: var(--umber); animation: rotateGlyph 9s linear infinite; }
.glyph-a { width: 10rem; height: 10rem; left: 8vw; top: 17vh; }
.glyph-b { width: 7rem; height: 7rem; left: 25vw; top: 37vh; animation-direction: reverse; }
.glyph-c { width: 5rem; height: 5rem; left: 17vw; top: 54vh; }
.clay-label { padding: 3rem; background: #E7D3AE; color: #20150F; clip-path: polygon(4% 0, 100% 8%, 93% 100%, 0 86%); transform: rotate(3deg); }
.clay-label h2 { color: #20150F; }

.release { display: flex; align-items: center; justify-content: flex-end; }
.release-map { width: min(69vw, 880px); padding: 5rem; margin-right: 10vw; background: linear-gradient(135deg, rgba(40,59,88,.88), rgba(32,21,15,.92)); border: 1px solid rgba(197,154,74,.4); clip-path: polygon(0 13%, 88% 0, 100% 71%, 71% 100%, 9% 89%); }
.seal-button { display: inline-block; margin-top: 1rem; padding: 1rem 1.25rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .16em; color: #20150F; background: #C59A4A; text-decoration: none; border-radius: 50% 44% 48% 52%; transition: transform .2s ease, background .2s ease; }
.seal-button:hover { transform: rotate(-6deg) scale(1.07); background: #C4643B; }
.bead-string { position: absolute; left: 7vw; top: 16vh; display: flex; flex-direction: column; gap: 1.2rem; }
.bead-string span { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #E7D3AE, #C59A4A 50%, #A54E2B); box-shadow: 0 12px 20px rgba(0,0,0,.35); }

.section-label { color: var(--gold); margin-bottom: 1.4rem; }
.artifact { position: relative; overflow: hidden; transition: transform .45s ease, filter .45s ease; }
.artifact.awake { transform: rotate(var(--wake-rotate, 1.5deg)) scale(1.018); filter: saturate(1.18); }

@keyframes settleGrain { from { opacity: .9; transform: scale(1.04); } to { opacity: .38; transform: scale(1); } }
@keyframes kilnSmoke { from { transform: translate3d(-4vw, 1vh, 0) rotate(-4deg); } to { transform: translate3d(4vw, -3vh, 0) rotate(7deg); } }
@keyframes clayBreathe { 0%,100% { clip-path: polygon(5% 6%, 91% 0, 99% 76%, 79% 100%, 0 90%); } 50% { clip-path: polygon(3% 10%, 94% 3%, 96% 82%, 74% 98%, 2% 86%); } }
@keyframes magnetize { from { opacity: 0; transform: translate3d(var(--scatter-x, 8vw), var(--scatter-y, -8vh), 0) rotate(28deg); } to { opacity: 1; transform: translate3d(0,0,0) rotate(-4deg); } }
@keyframes shardFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes stampPress { 0%, 70%, 100% { transform: translateY(0) rotate(0deg); } 77% { transform: translateY(8px) rotate(-7deg); } 83% { transform: translateY(2px) rotate(4deg); } }
@keyframes pullTaut { 0%,100% { transform: scaleX(.85); opacity: .45; } 50% { transform: scaleX(1.04); opacity: 1; } }
@keyframes morphRim { 0%,100% { border-radius: 50%; transform: rotate(0deg); } 50% { border-radius: 44% 56% 48% 52%; transform: rotate(7deg); } }
@keyframes rotateGlyph { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .hero, .animate { display: block; }
  .artifact-column { min-height: 38vh; }
  .title-slab, .tablet, .loom-copy, .release-map { width: 92vw; margin-left: 0; margin-right: 0; padding: 2.2rem; }
  .hero-note, .text-strip { position: relative; right: auto; bottom: auto; left: auto; margin: 2rem 0; }
  .bead-nav { right: .7rem; }
  .glyph-orbit .shard { display: none; }
  .animate { padding-top: 8vh; }
  .machine { height: 44vh; }
  .vessel-rim { width: 75vw; height: 75vw; }
}