/* Dimensional choreography. Content remains visible without this enhancement. */
[data-motion] {
  transform-origin: 50% 70%;
  backface-visibility: hidden;
}
[data-motion="hero-line"],
[data-motion="heading"] {
  transform-origin: 0 100%;
}
[data-motion="row"] {
  transform-origin: 15% 50%;
}
[data-motion="step"] {
  transform-origin: 50% 0;
}
.hero-copy,
.section-heading,
.contact-copy {
  perspective: 1400px;
}

/* Separate the entrance plane from the pointer plane to compose both effects. */
.work-grid {
  align-items: start;
}
.work-card-scene {
  min-width: 0;
  position: relative;
  perspective: 1400px;
}
.work-card-scene:nth-child(2) {
  margin-top: 40px;
}
.work-card-scene:nth-child(3) {
  margin-top: 80px;
}
.tilt-shell {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glare-x: 50%;
  --glare-y: 50%;
  --tilt-active: 0;
  position: relative;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
}
.tilt-shell::before {
  content: "";
  position: absolute;
  inset: 6px 4px -5px;
  border: 1px solid #71815b;
  border-radius: 8px;
  background: #2b3322;
  transform: translateZ(-16px);
  box-shadow: 0 26px 44px -12px #04070399;
  opacity: calc(var(--tilt-active) * 0.9);
  transition: opacity 0.35s;
  pointer-events: none;
}
.tilt-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #d9fc8238;
  border-radius: 5px;
  background: radial-gradient(
    ellipse at var(--glare-x) var(--glare-y),
    #e5ffb322,
    transparent 65%
  );
  opacity: var(--tilt-active);
  transform: translateZ(1px);
  transition: opacity 0.35s;
  pointer-events: none;
}
.tilt-shell .work-card {
  margin-top: 0;
  position: relative;
}
.tilt-shell:focus-within {
  transform: none;
}
.tilt-shell:focus-within::after,
.tilt-shell:focus-within::before {
  opacity: 0;
}

/* An exploded architecture drawing unfolds under the reader's scroll. */
.craft-panel[data-scroll-scene] {
  --scene-progress: 0;
  isolation: isolate;
}
.architecture-orbit {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13%;
  height: 58%;
  pointer-events: none;
  opacity: 0.45;
  transform: perspective(900px) rotateX(35deg)
    rotateZ(calc(-18deg + var(--scene-progress, 0) * 20deg));
}
.architecture-orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid #64794e40;
  border-radius: 50%;
}
.architecture-orbit i:first-child::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 13%;
  top: 13%;
  background: #6c8745;
  border: 2px solid #e5e8da;
  border-radius: 50%;
}
.architecture-orbit i:last-child {
  inset: 9%;
  border-style: dashed;
  transform: rotateY(30deg);
}
[data-scroll-scene] .architecture {
  flex-shrink: 0;
  margin-bottom: 60px;
  perspective: 1100px;
  z-index: 1;
}
[data-scroll-scene] .architecture-layer {
  --layer-spread: -30px;
  --layer-drift: -10px;
  --layer-depth: 24px;
  transform: translate3d(
      calc(var(--scene-progress) * var(--layer-drift)),
      calc(var(--scene-progress) * var(--layer-spread)),
      calc(var(--scene-progress) * var(--layer-depth))
    )
    rotateX(calc(49deg - var(--scene-progress) * 13deg))
    rotateZ(calc(-28deg + var(--scene-progress) * 12deg));
  transition: box-shadow 0.3s;
  box-shadow:
    -4px 7px 0 #a8b599,
    -7px 14px 22px -16px #283b1570;
}
[data-scroll-scene] .layer-1 {
  --layer-spread: -9px;
  --layer-drift: -3px;
  --layer-depth: 8px;
}
[data-scroll-scene] .layer-2 {
  --layer-spread: 12px;
  --layer-drift: 4px;
  --layer-depth: -8px;
}
[data-scroll-scene] .layer-3 {
  --layer-spread: 33px;
  --layer-drift: 11px;
  --layer-depth: -24px;
  box-shadow:
    -4px 7px 0 #889c62,
    -7px 16px 22px -13px #283b153b;
}
.audit-seal-scene {
  --scene-progress: 0;
  flex-shrink: 0;
  perspective: 1000px;
}
.audit-seal-scene .audit-seal {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(calc(-10deg + var(--scene-progress) * 12deg))
    rotateY(calc(var(--scene-progress) * 28deg)) rotateZ(-13deg);
  background: linear-gradient(125deg, #ffffff12, transparent 65%);
}
.audit-seal-scene .audit-seal::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid #546d3230;
  transform: translateZ(-12px);
  box-shadow: 0 15px 35px -26px #293e2180;
}

@media (hover: hover) and (pointer: fine) {
  .service-row .service-icon {
    transform-origin: center;
    transition:
      transform 0.5s var(--ease),
      color 0.3s;
  }
  .service-row:hover .service-icon {
    transform: perspective(350px) translateZ(22px) rotateY(-24deg)
      rotateX(12deg);
    color: #52722d;
  }
  .service-row .circle-link {
    transition:
      transform 0.5s var(--ease),
      background 0.25s,
      border-color 0.25s;
  }
  .service-row:hover .circle-link {
    transform: perspective(350px) rotateY(-16deg) translateZ(10px);
  }
}
@media (max-width: 699px) {
  .work-card-scene:nth-child(2),
  .work-card-scene:nth-child(3) {
    margin-top: 0;
  }
  .audit-seal-scene {
    display: none;
  }
  [data-scroll-scene] .architecture-layer {
    transform: translateY(
        calc(var(--scene-progress) * var(--layer-spread) * 0.65)
      )
      rotateX(calc(49deg - var(--scene-progress) * 7deg))
      rotateZ(calc(-28deg + var(--scene-progress) * 7deg));
  }
}

/* Pausing settles entrances and keeps every interactive surface stationary. */
html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after {
  transition: none !important;
  animation: none !important;
}
html.motion-paused .button:hover,
html.motion-paused .button:hover .icon,
html.motion-paused .nav-link:hover span,
html.motion-paused .nav-link[aria-current="location"] span,
html.motion-paused .circle-link:hover,
html.motion-paused .service-row:focus-within .circle-link,
html.motion-paused .work-card:hover .signal-bars i:nth-child(2n) {
  transform: none;
}

html.motion-paused [data-motion] {
  opacity: 1 !important;
}
html.motion-paused [data-tilt] {
  transform: none;
}
html.motion-paused .tilt-shell::before,
html.motion-paused .tilt-shell::after {
  opacity: 0;
}
html.motion-paused .service-row:hover .service-icon,
html.motion-paused .service-row:hover .circle-link {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    opacity: 1 !important;
  }
  [data-tilt] {
    transform: none;
  }
  .tilt-shell::before,
  .tilt-shell::after {
    display: none;
  }
  [data-scroll-scene] .architecture-layer {
    transform: rotateX(49deg) rotateZ(-28deg);
  }
  .architecture-orbit {
    transform: perspective(900px) rotateX(35deg) rotateZ(-18deg);
  }
  .audit-seal-scene .audit-seal {
    transform: rotateZ(-13deg);
  }
  .service-row:hover .service-icon,
  .service-row:hover .circle-link {
    transform: none;
  }
}