.skip-intro {
  position: fixed;
  left: 50%;
  bottom: 1.15rem;
  z-index: 21;
  margin: 0;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  border: 1px solid rgba(224, 176, 122, 0.45);
  padding: 0.45rem 0.75rem;
  background: rgba(12, 11, 9, 0.88);
  color: var(--copper, #e0b07a);
  font: 0.78rem/1.2 "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.skip-intro[hidden],
html:not(.constructing) .skip-intro { display: none; }
html.constructing .skip-intro:not([hidden]) { display: block; }

html.constructing,
html.constructing body { overflow: hidden; }
html.constructing .site-header,
html.constructing #main { pointer-events: none; }
html.constructing .skip,
html.constructing .skip-intro { pointer-events: auto; }

@keyframes construct-unlock-pe {
  0%, 99% { pointer-events: none; }
  100% { pointer-events: auto; }
}
html.constructing .site-header,
html.constructing #main {
  animation: construct-unlock-pe 4200ms forwards;
}

html.constructing body::before {
  animation: grid-fade 1800ms forwards;
}
@keyframes grid-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.constructing body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  z-index: 12;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--copper, #e0b07a), transparent);
  box-shadow: 0 0 18px rgba(224, 176, 122, 0.85);
  animation: machine-scan 2600ms cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes machine-scan {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.constructing .rail-x { animation: rail-x 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .rail-y { animation: rail-y 1100ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rail-x {
  0% { transform: scaleX(0); opacity: 0; }
  60% { transform: scaleX(1); opacity: 0.95; }
  100% { transform: scaleX(1); opacity: 0.35; }
}
@keyframes rail-y {
  0% { transform: scaleY(0); opacity: 0; }
  60% { transform: scaleY(1); opacity: 0.95; }
  100% { transform: scaleY(1); opacity: 0.35; }
}

.constructing .brand-name {
  animation: brand-in 700ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes brand-in {
  from { transform: translateX(-2.8rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.constructing .monogram {
  animation: mono-tick 650ms 40ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mono-tick {
  from { transform: translateY(-1.6rem) scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.constructing .nav-links > *,
.constructing .exit-logo {
  animation: nav-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.constructing .nav-links > *:nth-child(1) { animation-delay: 220ms; }
.constructing .nav-links > *:nth-child(2) { animation-delay: 320ms; }
.constructing .nav-links > *:nth-child(3) { animation-delay: 420ms; }
.constructing .nav-links > *:nth-child(4) { animation-delay: 520ms; }
.constructing .nav-links > *:nth-child(5) { animation-delay: 620ms; }
.constructing .exit-logo { animation-delay: 720ms; }
@keyframes nav-in {
  from { transform: translateY(-1.8rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.constructing .hero .kicker {
  animation: kicker-in 640ms 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes kicker-in {
  from { transform: translateY(-1.6rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.constructing .lead {
  animation: from-bottom-block 720ms 1680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.constructing .hero-actions {
  animation: from-bottom-block 680ms 1980ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes from-bottom-block {
  from { transform: translateY(2.4rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.constructing .machine-plate {
  animation: plate-in 980ms 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes plate-in {
  from { transform: translateX(80%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.constructing .bracket.tl { animation: br-tl 700ms 1180ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .bracket.tr { animation: br-tr 700ms 1240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .bracket.bl { animation: br-bl 700ms 1300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .bracket.br { animation: br-br 700ms 1360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .plate-mono { animation: plate-mono 700ms 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.constructing .machine-plate figcaption { animation: from-bottom-block 520ms 1500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes br-tl {
  from { transform: translate(-18px, -18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes br-tr {
  from { transform: translate(18px, -18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes br-bl {
  from { transform: translate(-18px, 18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes br-br {
  from { transform: translate(18px, 18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes plate-mono {
  from { transform: translateY(-1.4rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.constructing .library .section-kicker {
  animation: kicker-in 560ms 1760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.constructing .row {
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}
.constructing .row.from-left { animation-name: row-left; }
.constructing .row.from-right { animation-name: row-right; }
.constructing .group .row:nth-child(2) { animation-delay: 1880ms; }
.constructing .group .row:nth-child(3) { animation-delay: 2000ms; }
.constructing .group .row:nth-child(4) { animation-delay: 2120ms; }
.constructing .group .row:nth-child(5) { animation-delay: 2240ms; }
.constructing .group .row:nth-child(6) { animation-delay: 2360ms; }
.constructing .group .row:nth-child(7) { animation-delay: 2480ms; }
.constructing .group .row:nth-child(8) { animation-delay: 2600ms; }
.constructing .group .row:nth-child(9) { animation-delay: 2720ms; }
.constructing .group .row:nth-child(10) { animation-delay: 2840ms; }
.constructing .group .row:nth-child(11) { animation-delay: 2960ms; }
.constructing .group .row:nth-child(12) { animation-delay: 3080ms; }
@keyframes row-left {
  from { transform: translateX(-3.2rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes row-right {
  from { transform: translateX(3.2rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.constructing .detail .prose {
  animation: from-bottom-block 720ms 1760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.constructing .host-line {
  animation: from-bottom-block 600ms 2100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.constructing .about,
.constructing .contact,
.constructing .site-footer {
  animation: rest-in 700ms 2400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rest-in {
  from { transform: translateY(1.4rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.slide-letters .word { display: inline-block; white-space: nowrap; }
.slide-letters .glyph { display: inline-block; }
.constructing .glyph,
.locking .glyph { will-change: transform, opacity; }
.constructing .glyph {
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  animation-delay: calc(420ms + var(--n, 0) * 42ms);
}
.constructing .glyph.from-left { animation-name: glyph-left; }
.constructing .glyph.from-right { animation-name: glyph-right; }
.constructing .glyph.from-top { animation-name: glyph-top; }
.constructing .glyph.from-bottom { animation-name: glyph-bottom; }
.glyph[data-n="0"] { --n: 0; }
.glyph[data-n="1"] { --n: 1; }
.glyph[data-n="2"] { --n: 2; }
.glyph[data-n="3"] { --n: 3; }
.glyph[data-n="4"] { --n: 4; }
.glyph[data-n="5"] { --n: 5; }
.glyph[data-n="6"] { --n: 6; }
.glyph[data-n="7"] { --n: 7; }
.glyph[data-n="8"] { --n: 8; }
.glyph[data-n="9"] { --n: 9; }
.glyph[data-n="10"] { --n: 10; }
.glyph[data-n="11"] { --n: 11; }
.glyph[data-n="12"] { --n: 12; }
.glyph[data-n="13"] { --n: 13; }
.glyph[data-n="14"] { --n: 14; }
.glyph[data-n="15"] { --n: 15; }
.glyph[data-n="16"] { --n: 16; }
.glyph[data-n="17"] { --n: 17; }
.glyph[data-n="18"] { --n: 18; }
.glyph[data-n="19"] { --n: 19; }
.glyph[data-n="20"] { --n: 20; }
.glyph[data-n="21"] { --n: 21; }
.glyph[data-n="22"] { --n: 22; }
.glyph[data-n="23"] { --n: 23; }
.glyph[data-n="24"] { --n: 24; }
.glyph[data-n="25"] { --n: 25; }
.glyph[data-n="26"] { --n: 26; }
.glyph[data-n="27"] { --n: 27; }
.glyph[data-n="28"] { --n: 28; }
.glyph[data-n="29"] { --n: 29; }
.glyph[data-n="30"] { --n: 30; }
.glyph[data-n="31"] { --n: 31; }
.glyph[data-n="32"] { --n: 32; }
.glyph[data-n="33"] { --n: 33; }
.glyph[data-n="34"] { --n: 34; }
.glyph[data-n="35"] { --n: 35; }
.glyph[data-n="36"] { --n: 36; }
@keyframes glyph-left {
  from { transform: translateX(-2.4em); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-right {
  from { transform: translateX(2.4em); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-top {
  from { transform: translateY(-0.85em); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-bottom {
  from { transform: translateY(0.85em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.locking h2 {
  animation: heading-lock 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heading-lock {
  from { transform: translateX(-0.6em); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

html.constructing .exit-logo { pointer-events: auto; }
html.dismantling #skip-intro,
html.assembling #skip-intro { display: none !important; }
html.dismantling body::after { content: none !important; animation: none !important; }

html.dismantling .exit-veil {
  animation: veil-in 480ms 980ms ease forwards;
}
html.assembling .exit-veil { opacity: 1; }
@keyframes veil-in { to { opacity: 1; } }

html.assembling .site-header,
html.assembling #main,
html.assembling .site-footer,
html.assembling .rail-y,
html.assembling .rail-x { visibility: hidden; }

@keyframes glyph-out-left {
  from { transform: translateX(-7vw); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-out-right {
  from { transform: translateX(7vw); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-out-top {
  from { transform: translateY(-5vh); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes glyph-out-bottom {
  from { transform: translateY(5vh); opacity: 0; }
  to { transform: none; opacity: 1; }
}

html.dismantling .row,
html.dismantling .machine-plate,
html.dismantling .bracket,
html.dismantling .plate-mono,
html.dismantling .machine-plate figcaption,
html.dismantling .rail-x,
html.dismantling .rail-y,
html.dismantling .monogram,
html.dismantling .brand-name,
html.dismantling .kicker,
html.dismantling .section-kicker,
html.dismantling .lead,
html.dismantling .hero-actions,
html.dismantling .prose,
html.dismantling .host-line,
html.dismantling .about,
html.dismantling .contact,
html.dismantling .site-footer,
html.dismantling .nav-links > *,
html.dismantling .exit-logo {
  animation-duration: 1300ms !important;
  animation-delay: 0ms !important;
  animation-direction: reverse !important;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) !important;
}
html.dismantling .glyph {
  animation-duration: 1100ms !important;
  animation-delay: calc(var(--n, 0) * 18ms) !important;
  animation-direction: reverse !important;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1) !important;
  animation-fill-mode: both !important;
}
html.dismantling .glyph.from-left { animation-name: glyph-out-left !important; }
html.dismantling .glyph.from-right { animation-name: glyph-out-right !important; }
html.dismantling .glyph.from-top { animation-name: glyph-out-top !important; }
html.dismantling .glyph.from-bottom { animation-name: glyph-out-bottom !important; }

html.assembling .edge-top {
  animation: edge-from-top 1700ms cubic-bezier(0.7, 0, 0.2, 1) both;
}
html.assembling .edge-right {
  animation: edge-from-right 1700ms 140ms cubic-bezier(0.7, 0, 0.2, 1) both;
}
html.assembling .edge-bottom {
  animation: edge-from-bottom 1700ms 70ms cubic-bezier(0.7, 0, 0.2, 1) both;
}
html.assembling .edge-left {
  animation: edge-from-left 1700ms 210ms cubic-bezier(0.7, 0, 0.2, 1) both;
}
@keyframes edge-from-top {
  from { top: 0; }
  to { top: calc(50% - var(--logo-box) / 2); }
}
@keyframes edge-from-bottom {
  from { top: calc(100% - 2px); }
  to { top: calc(50% + var(--logo-box) / 2 - 2px); }
}
@keyframes edge-from-left {
  from { left: 0; }
  to { left: calc(50% - var(--logo-box) / 2); }
}
@keyframes edge-from-right {
  from { left: calc(100% - 2px); }
  to { left: calc(50% + var(--logo-box) / 2 - 2px); }
}
html.assembling .finale-r {
  animation: finale-r 800ms 1280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes finale-r {
  from { opacity: 0; transform: translate(-50%, -40%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
html.assembling .finale::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  z-index: 42;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--copper, #e0b07a), transparent);
  box-shadow: 0 0 18px rgba(224, 176, 122, 0.85);
  animation: machine-scan 1800ms cubic-bezier(0.45, 0, 0.2, 1) both;
}
html.assembling .glyph {
  animation-duration: 780ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  animation-delay: calc(1520ms + var(--n, 0) * 55ms);
}
html.assembling .glyph.from-left { animation-name: glyph-left; }
html.assembling .glyph.from-right { animation-name: glyph-right; }
html.assembling .glyph.from-top { animation-name: glyph-top; }
html.assembling .glyph.from-bottom { animation-name: glyph-bottom; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.constructing body::after { content: none; animation: none; }
  html.constructing .glyph,
  html.constructing .row,
  html.constructing .machine-plate,
  html.constructing .bracket,
  html.constructing .plate-mono,
  html.constructing .rail-x,
  html.constructing .rail-y,
  html.constructing .monogram,
  html.constructing .brand-name,
  html.constructing .kicker,
  html.constructing .section-kicker,
  html.constructing .lead,
  html.constructing .hero-actions,
  html.constructing .about,
  html.constructing .contact,
  html.constructing .site-footer,
  html.constructing .nav-links > *,
  html.constructing .exit-logo,
  html.constructing .detail .prose,
  html.constructing .host-line,
  html.dismantling .glyph,
  html.dismantling .row,
  html.dismantling .machine-plate,
  html.dismantling .exit-logo,
  html.dismantling .exit-veil,
  html.assembling .edge-top,
  html.assembling .edge-right,
  html.assembling .edge-bottom,
  html.assembling .edge-left,
  html.assembling .finale-r,
  html.assembling .glyph,
  html.assembling .finale::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html.assembling .finale-r { transform: translate(-50%, -50%) !important; }
  html.assembling .finale-name,
  html.assembling .finale-tld { transform: translateX(-50%) !important; }
  html.dismantling .exit-veil,
  html.assembling .exit-veil { opacity: 1 !important; }
}