/* Scroll choreography for the existing architectural assembly. */
.hero-frames {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  pointer-events: none;
}
.hero-frames i {
  position: absolute;
  width: 108%;
  aspect-ratio: 1;
  left: -4%;
  top: 2%;
  border: 1px solid #b4a4d22e;
  border-radius: 42px;
  background: linear-gradient(130deg, #cbb5ec03, transparent 50%, #bcaae808);
  transform: translateY(
      calc(var(--frame-index) * 28px - var(--hero-travel, 0) * (65px + var(--frame-index) * 35px))
    )
    rotateX(58deg) rotateZ(calc(-35deg + var(--hero-travel, 0) * 15deg));
}
.hero-frames i:nth-child(1) {
  --frame-index: 0;
}
.hero-frames i:nth-child(2) {
  --frame-index: 1;
}
.hero-frames i:nth-child(3) {
  --frame-index: 2;
}
.assembly-hero {
  --spread: calc(var(--hero-base-spread, 86px) + var(--hero-travel, 0) * 100px);
  --assembly-z: calc(-35deg + var(--hero-travel, 0) * 22deg);
  animation-name: layered-breathe;
}
.assembly-hero .plate-base {
  transform: translateZ(calc(var(--spread) * -1))
    translateX(calc(var(--hero-travel, 0) * -50px));
}
.assembly-hero .plate-ai {
  transform: translateX(calc(var(--hero-travel, 0) * 48px));
}
@keyframes layered-breathe {
  0%,
  100% {
    transform: translate(-50%, -42%) rotateX(57deg) rotateZ(var(--assembly-z));
  }
  50% {
    transform: translate(-50%, -46%) rotateX(59deg)
      rotateZ(calc(var(--assembly-z) + 3deg));
  }
}
.recognition {
  overflow: clip;
  isolation: isolate;
}
.recognition-inner {
  position: relative;
  z-index: 1;
}
.recognition-sheets {
  position: absolute;
  width: 620px;
  height: 520px;
  right: -80px;
  top: 0;
  perspective: 1000px;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
}
.recognition-sheets i {
  position: absolute;
  inset: 0;
  border: 1px solid #b2a2cc38;
  border-radius: 28px;
  background: linear-gradient(125deg, #b19ec906, #a693c408);
  transform: translate(
      calc(var(--sheet-index) * 42px),
      calc(
        var(--sheet-index) * 52px + (1 - var(--recognition-enter, 0)) * (130px + var(--sheet-index) * 55px)
      )
    )
    rotateX(45deg) rotateZ(calc(-32deg + var(--recognition-enter, 0) * 12deg));
}
.recognition-sheets i:nth-child(1) {
  --sheet-index: 0;
}
.recognition-sheets i:nth-child(2) {
  --sheet-index: 1;
}
.recognition-sheets i:nth-child(3) {
  --sheet-index: 2;
}
.recognition::after {
  transform: translateY(calc(70px - var(--recognition-enter, 0) * 38px));
}
.workflow-example {
  transform: perspective(1200px)
    translateY(calc((1 - var(--deck-enter, 0)) * 65px))
    rotateX(calc((1 - var(--deck-enter, 0)) * 7deg));
  transform-origin: center bottom;
}
.workflow-example::before {
  transform: translate(
      calc(12px + (1 - var(--deck-enter, 0)) * 14px),
      calc(12px + (1 - var(--deck-enter, 0)) * 18px)
    )
    rotate(calc((1 - var(--deck-enter, 0)) * 7deg));
}
.workflow-example::after {
  transform: translate(6px, 6px)
    rotate(calc((1 - var(--deck-enter, 0)) * -4deg));
}
.application-choice {
  translate: calc((1 - var(--row-enter, 1)) * -26px) 0;
}
.approach {
  padding-block: 136px 120px;
  align-items: start;
}
.approach-layout {
  align-items: start;
}
.approach-heading {
  position: sticky;
  top: 130px;
  padding-block: 28px;
}
.steps {
  padding-bottom: 24px;
}
.steps li {
  position: sticky;
  top: calc(120px + var(--card-index, 0) * 23px);
  min-height: 340px;
  padding: 36px 32px 28px;
  margin-bottom: 145px;
  border: 1px solid #656071;
  border-radius: 18px;
  background: linear-gradient(130deg, #25252e, #1c1c24);
  box-shadow: 0 18px 40px #03020933;
  transform-origin: center top;
  transform: scale(var(--card-scale, 1));
}
.steps li:nth-child(1) {
  --card-index: 0;
}
.steps li:nth-child(2) {
  --card-index: 1;
  background: linear-gradient(130deg, #2d2937, #22202b);
}
.steps li:nth-child(3) {
  --card-index: 2;
  background: linear-gradient(130deg, #34303f, #292531);
  margin-bottom: 0;
}
.steps li > div {
  min-width: 0;
  flex: 1;
}
.steps li:last-child {
  padding-bottom: 28px;
}
.steps h3 {
  font-size: 29px;
}
.steps p {
  color: #bab5c8;
}
.steps .step-num {
  color: #beaed7;
}
.step-diagram {
  display: block;
  margin-top: 38px;
  width: 100%;
  height: 100px;
  overflow: visible;
}
.step-diagram > path,
.step-diagram rect {
  stroke: #786786;
  stroke-width: 1.2;
}
.step-diagram rect,
.step-diagram > path:not(:first-child) {
  fill: #292431;
}
.step-diagram .diagram-accent {
  fill: #4b355f;
  stroke: #b195cc;
}
.step-diagram .diagram-detail {
  stroke: #c8b6db;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.close {
  overflow: clip;
}
.invitation {
  transform: perspective(1600px)
    translateY(calc((1 - var(--close-enter, 0)) * 55px))
    rotateX(calc((1 - var(--close-enter, 0)) * 7deg))
    scale(calc(0.94 + var(--close-enter, 0) * 0.06));
  transform-origin: center bottom;
}
.invitation-layers i {
  transform: rotate(
      calc(-28deg + (1 - var(--close-enter, 0)) * var(--i) * 4deg)
    )
    translateY(calc(var(--i) * 44px + var(--invitation-shift, 0px)));
}
html.keyboard-navigation .application-choice {
  translate: none;
}
html.keyboard-navigation .workflow-example,
html.keyboard-navigation .invitation {
  transform: none;
}
@media (max-width: 1100px) {
  .assembly-hero {
    --hero-base-spread: 70px;
  }
  .steps li {
    padding: 28px 24px;
    gap: 18px;
  }
  .steps h3 {
    font-size: 25px;
  }
}
@media (max-width: 760px) {
  .assembly-hero {
    --hero-base-spread: 63px;
    --spread: calc(63px + var(--hero-travel, 0) * 70px);
  }
  .hero-frames i {
    width: 106%;
    top: 0;
    border-radius: 28px;
  }
  .recognition-sheets {
    width: 420px;
    height: 300px;
    right: -200px;
    top: 50px;
    opacity: 0.6;
  }
  .approach {
    padding-block: 70px 75px;
  }
  .approach-heading {
    position: relative;
    top: auto;
    padding: 0;
  }
  .steps {
    margin-top: 42px;
    padding-bottom: 0;
  }
  .steps li {
    top: calc(24px + var(--card-index) * 18px);
    min-height: 305px;
    margin-bottom: 110px;
    gap: 14px;
    padding: 26px 20px;
  }
  .steps li:last-child {
    margin-bottom: 0;
  }
  .step-diagram {
    margin-top: 28px;
  }
  .workflow-example::before {
    transform: translate(10px, 12px)
      rotate(calc((1 - var(--deck-enter, 0)) * 3deg));
  }
}
@media (prefers-reduced-motion: reduce),
  (max-height: 680px) and (max-width: 760px) {
  .hero-frames i,
  .recognition-sheets i {
    transform: none;
    opacity: 0.2;
  }
  .hero-frames {
    display: none;
  }
  .assembly-hero {
    --hero-travel: 0;
  }
  .workflow-example,
  .invitation {
    transform: none;
  }
  .application-choice {
    translate: none;
  }
  .workflow-example::before {
    transform: translate(10px, 10px);
  }
  .workflow-example::after {
    transform: translate(5px, 5px);
  }
  .approach-heading,
  .steps li {
    position: relative;
    top: auto;
  }
  .steps li {
    min-height: 0;
    margin-bottom: 24px;
    transform: none;
  }
  .recognition::after {
    transform: translateY(40px);
  }
  .invitation-layers i {
    transform: rotate(-28deg) translateY(calc(var(--i) * 44px));
  }
}

.workflow-shell {
  min-width: 0;
  width: 100%;
}