/* make3d.bg holding page - Kiln & Clay tokens (the public identity chosen
   19 Aug 2026), light only. Every text/ground pair measured against WCAG:
   on the darker ground (--bg-grad) body 6.8:1, ink 11.5:1, muted 5.9:1,
   accent 5.0:1, teal 4.7:1; button text on fill 4.6:1 (measured 1 Oct 2026).
   Motion moves transform and opacity only, plays once on load, and the
   reduced-motion block shows the finished part with no movement. */

:root {
  --bg: #ecdfcc;
  --bg-grad: #e8d9c3;
  --card: #f5ecdc;
  --ink: #2c1f14;
  --body: #54432f;
  --muted: #5d4c35;
  --line: #cdb794;
  --line-strong: #a59174;
  --accent: #96401b;
  --fill: #b3502e;
  --fill-dark: #843f25;
  --on-fill: #fdf1e4;
  --teal: #0d6a5e;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --mono: Consolas, 'SF Mono', ui-monospace, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --layer: 12px;
  --pass: .45s;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--body);
  font: 16px/1.6 var(--sans);
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--card) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(165, 145, 116, .16) 47px 48px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-grad) 100%);
  -webkit-font-smoothing: antialiased;
}

.hold {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(40px, 9vh, 104px) 16px 28px;
}

/* ---- the part being printed ---------------------------------------- */

.build {
  position: relative;
  width: 168px;
  height: 140px;
  margin: 0 auto 26px;
}

.bed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

.layers {
  position: absolute;
  left: 18px;
  bottom: 6px;
  width: 132px;
  height: calc(var(--layer) * 8);
  display: flex;
  flex-direction: column-reverse;
}

.layers > span {
  display: block;
  height: var(--layer);
  background: var(--fill);
  box-shadow: inset 0 -2px 0 var(--fill-dark);
  transform-origin: left center;
  animation: lay var(--pass) linear both;
}

/* The nozzle runs left-to-right, then right-to-left: each layer is laid
   from the side the nozzle starts on. */
.layers > span:nth-child(even) { transform-origin: right center; }

.layers > span:nth-child(1) { animation-delay: calc(var(--pass) * 0); }
.layers > span:nth-child(2) { animation-delay: calc(var(--pass) * 1); }
.layers > span:nth-child(3) { animation-delay: calc(var(--pass) * 2); }
.layers > span:nth-child(4) { animation-delay: calc(var(--pass) * 3); }
.layers > span:nth-child(5) { animation-delay: calc(var(--pass) * 4); }
.layers > span:nth-child(6) { animation-delay: calc(var(--pass) * 5); }
.layers > span:nth-child(7) { animation-delay: calc(var(--pass) * 6); }
.layers > span:nth-child(8) { animation-delay: calc(var(--pass) * 7); }

.layers > .infill {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: none;
  box-shadow: none;
}

.layers > .infill i {
  display: block;
  width: 20px;
  height: 7px;
  background: var(--fill);
}

.layers > .infill.sparse { justify-content: space-around; }
.layers > .infill.sparse i { width: 10px; height: 5px; opacity: .6; }

.gantry {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 0;
  animation: climb calc(var(--pass) * 8) steps(8, jump-start) both;
}

.gantry::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 2px;
  border-radius: 1px;
  background: var(--line-strong);
  opacity: .7;
}

.nozzle {
  position: absolute;
  left: 11px;
  bottom: 0;
  width: 14px;
  height: 18px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 70% 72%, 60% 100%, 40% 100%, 30% 72%, 0 45%);
  animation:
    sweep var(--pass) linear 8 alternate both,
    rest .6s ease-out calc(var(--pass) * 8) both;
}

@keyframes lay {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes climb {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--layer) * -8)); }
}

@keyframes sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(132px); }
}

@keyframes rest {
  from { opacity: 1; }
  to   { opacity: .45; }
}

/* ---- words ----------------------------------------------------------- */

.kicker {
  margin: 0;
  text-align: center;
  font: .78rem/1.5 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}

.kicker b,
.foot b {
  font-weight: normal;
  color: var(--accent);
}

.langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.lang { padding: 36px clamp(20px, 4vw, 52px) 8px; }
.lang + .lang { border-left: 1px solid var(--line); }

.lang h1,
.lang h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.05rem + 2vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.lang p { margin: 0 0 14px; }

.lead {
  font-size: 1.08rem;
  color: var(--ink);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 8px 0 16px;
  padding: .8em 1.45em;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 var(--fill-dark), 0 12px 26px -16px rgba(132, 63, 37, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta::after {
  content: "\2192";
  transition: transform .2s ease;
}

.cta:hover { transform: translateY(-1px); box-shadow: 0 2px 0 var(--fill-dark), 0 16px 30px -16px rgba(132, 63, 37, .95); }
.cta:hover::after { transform: translateX(3px); }
.cta:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.fine {
  font: .8rem/1.55 var(--mono);
  color: var(--muted);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: .75rem/1.5 var(--mono);
  color: var(--muted);
}

/* ---- one orchestrated arrival ---------------------------------------- */

.r1, .r2, .r3, .r4 { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.r1 { animation-delay: .25s; }
.r2 { animation-delay: .5s; }
.r3 { animation-delay: .7s; }
.r4 { animation-delay: .95s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---- narrow screens ----------------------------------------------------- */

@media (max-width: 760px) {
  .langs { grid-template-columns: 1fr; }
  .lang { padding: 28px 0 6px; }
  .lang + .lang { border-left: 0; border-top: 1px solid var(--line); }
  .foot { flex-direction: column; }
}

/* ---- reduced motion: the finished part, nothing moving ------------------ */

@media (prefers-reduced-motion: reduce) {
  .layers > span,
  .r1, .r2, .r3, .r4 { animation: none; }
  .gantry { animation: none; transform: translateY(calc(var(--layer) * -8)); }
  .nozzle { animation: none; opacity: .45; }
  .cta, .cta::after { transition: none; }
}