/* Keep motion separate from the site's manually customized presentation. */
.reveal {
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1),
    clip-path 1.1s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.pre-reveal { opacity: 0; transform: translate3d(0, 34px, 0); }
.reveal.visible, .reveal:focus-within { opacity: 1; transform: none; }
.reveal:nth-child(n) { transition-delay: var(--reveal-delay, 0ms); }
.about-visual.reveal { clip-path: inset(0 0 0 0 round 6px); }
.about-visual.pre-reveal { clip-path: inset(8% 0 0 0 round 6px); }
.about-visual.visible { clip-path: inset(0 0 0 0 round 6px); }
.material-output, .product-image { overflow: hidden; }
.material-card.pre-reveal .material-output img,
.product-card.pre-reveal .product-image img { transform: scale(1.065); }
.material-output img, .product-image img {
  transition: transform 1.25s cubic-bezier(.22, 1, .36, 1);
}
.material-card.visible .material-output img,
.product-card.visible .product-image img { transform: scale(1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .material-card.visible:hover { transform: translateY(-5px); }
  .benefit.visible:hover { transform: translateY(-3px); }
  .material-card.visible:hover .material-output img { transform: scale(1.04); }
  .product-card.visible:hover .product-image img { transform: scale(1.03); }
}
.process-step .step-icon { transition: border-color .65s ease, box-shadow .65s ease; }
.process-step.visible .step-icon { box-shadow: 0 0 0 5px #b4da5910; }
.process-step.visible::after { transition-delay: var(--reveal-delay, 0ms); }
main > section:focus, #inquiry-form:focus, main:focus { outline: none; }
@media (max-width: 680px) {
  .reveal.pre-reveal { transform: translate3d(0, 22px, 0); }
  .reveal.visible, .reveal:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.pre-reveal { opacity: 1; transform: none; clip-path: none; }
  .material-card.pre-reveal .material-output img,
  .product-card.pre-reveal .product-image img { transform: none; }
}