/* Seven paper faces use the supplied artwork; the last frame is the original. */
html[data-motion='full'].is-ready .hero-copy { animation: none; }
.origami-signature {
  display: block;
  background: transparent;
}
.origami-stage {
  display: block;
  position: relative;
  width: 109px;
  height: 55px;
  perspective: 320px;
  perspective-origin: 50% 45%;
}
.brand .origami-original { display: block; width: 100%; height: 100%; mix-blend-mode: normal; filter: url('#logo-paper-alpha'); }
.origami-pieces { position: absolute; inset: 0; visibility: hidden; pointer-events: none; perspective: inherit; }
.origami-piece, .origami-front { position: absolute; inset: 0; }
.origami-piece { transform-origin: var(--fold-origin); transform-style: preserve-3d; }
.origami-front {
  clip-path: var(--fold-clip);
  background: url('../img/logo-web.webp') 0 0 / 100% 100% no-repeat;
  filter: url('#logo-paper-alpha') drop-shadow(0 1px 1px rgb(8 27 54 / 20%));
}
.origami-signature[data-state='folding'] .origami-original { visibility: hidden; }
.origami-signature[data-state='folding'] .origami-pieces { visibility: visible; }
.origami-piece--u {
  --fold-clip: polygon(0 30.2%, 28% 30.2%, 28% 75.3%, 0 75.3%);
  --fold-origin: 28% 53%;
  --fold-from: translate3d(8px, -4px, 35px) rotateY(-150deg) rotateZ(-5deg);
  --fold-mid: translate3d(0, 0, 5px) rotateY(-34deg);
  --fold-delay: 100;
}
.origami-piece--s {
  --fold-clip: polygon(28% 30.2%, 58.5% 30.2%, 58.5% 75.3%, 28% 75.3%);
  --fold-origin: 28% 53%;
  --fold-from: translate3d(-8px, 5px, 30px) rotateY(145deg) rotateZ(4deg);
  --fold-mid: translate3d(0, 0, 5px) rotateY(30deg);
  --fold-delay: 300;
}
.origami-piece--blue {
  --fold-clip: polygon(59.5% 41.7%, 59.5% 39.6%, 79% 0, 80.5% 0, 80.5% 20.3%, 68.7% 42.6%, 59.5% 42.6%);
  --fold-origin: 68.7% 41%;
  --fold-from: translate3d(0, 8px, 28px) rotate3d(1, 1, 0, -155deg);
  --fold-mid: translate3d(0, 0, 4px) rotate3d(1, 1, 0, -32deg);
  --fold-delay: 570;
}
.origami-piece--red {
  --fold-clip: polygon(83.25% 0, 91.5% 0, 91.5% 42.6%, 83.25% 37%);
  --fold-origin: 84% 36.5%;
  --fold-from: translate3d(-4px, 10px, 34px) rotateX(-155deg) rotateZ(-4deg);
  --fold-mid: translate3d(0, 0, 4px) rotateX(-36deg);
  --fold-delay: 780;
}
.origami-piece--green {
  --fold-clip: polygon(59.5% 43.5%, 80.5% 43.5%, 80.5% 75.3%, 72.3% 75.3%, 72.3% 59%, 68.4% 59%, 59.5% 47%);
  --fold-origin: 79% 45%;
  --fold-from: translate3d(5px, -3px, 30px) rotate3d(1, -1, 0, 152deg);
  --fold-mid: translate3d(0, 0, 4px) rotate3d(1, -1, 0, 32deg);
  --fold-delay: 990;
}
.origami-piece--orange {
  --fold-clip: polygon(90.2% 43.5%, 100% 43.5%, 100% 47%, 95.5% 59%, 92% 59%, 91.5% 60%, 91.5% 75.3%, 83.25% 75.3%, 83.25% 57%);
  --fold-origin: 84.5% 58%;
  --fold-from: translate3d(-6px, -5px, 28px) rotateY(155deg) rotateX(20deg);
  --fold-mid: translate3d(0, 0, 4px) rotateY(34deg);
  --fold-delay: 1200;
}
.origami-piece--works {
  --fold-clip: polygon(12% 81.5%, 89% 81.5%, 89% 100%, 12% 100%);
  --fold-origin: 50% 82%;
  --fold-from: translate3d(0, -4px, 15px) rotateX(145deg);
  --fold-mid: translate3d(0, 0, 2px) rotateX(28deg);
  --fold-delay: 1350;
}
html[data-motion='reduced'] .origami-signature .origami-original { visibility: visible; }
html[data-motion='reduced'] .origami-signature .origami-pieces { visibility: hidden; }
@media (max-width: 900px) {
  .origami-stage { width: 93px; height: 47px; }
}
@media (max-width: 600px) {
  .origami-stage { width: 87px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .origami-signature .origami-original { visibility: visible !important; }
  .origami-signature .origami-pieces { visibility: hidden !important; }
}