@import "../logo-animationen/styles.css";

.motion-stage {
  aspect-ratio: 864 / 760;
  max-width: 54rem;
}

.stage-canvas {
  aspect-ratio: 864 / 1821;
}

.paper-motion-root {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 864 / 760;
  width: 100%;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}

.paper-motion-layer,
.paper-motion-final,
.paper-motion-plate {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
}

.paper-motion-plate {
  inset: 0;
  width: 100%;
  height: 100%;
}

.paper-motion-sheet-wrap {
  position: absolute;
  top: 19.7368%;
  left: 6.713%;
  width: 46.0648%;
  aspect-ratio: 445 / 661;
  transform-origin: 49% 2%;
}

.paper-motion-registrierpunkt .paper-motion-sheet-wrap {
  transform-origin: 11.5% 7.9%;
}

.paper-motion-sheet {
  width: 100%;
  height: auto;
}

.paper-motion-shadow {
  position: absolute;
  top: 20.4%;
  left: 7.1%;
  width: 45.5%;
  height: 77.2%;
  background: rgb(17 24 32 / 18%);
  filter: blur(9px);
  transform: translate(7px, 8px);
}

.paper-motion-clip {
  top: 14.9%;
  left: 26.15%;
  width: 9.03%;
  height: auto;
  transform-origin: 50% 72%;
}

.paper-motion-final {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  clip-path: polygon(6.5% 14.8%, 35.2% 14.8%, 35.2% 19%, 53.2% 25.6%, 52% 97.8%, 6.3% 97.8%);
}

.paper-motion-slice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.paper-motion-slice:nth-child(1) {
  clip-path: inset(0 0 65.8% 0);
}

.paper-motion-slice:nth-child(2) {
  clip-path: inset(32.9% 0 32.9% 0);
}

.paper-motion-slice:nth-child(3) {
  clip-path: inset(65.8% 0 0 0);
}

@media (max-width: 56rem) {
  .motion-stage {
    position: sticky;
    top: 0;
    z-index: 4;
    width: min(100%, calc(42svh * 864 / 760));
    max-height: 42svh;
    background: var(--surface);
  }

  .animation-selector button {
    scroll-margin-top: calc(42svh + var(--space-3));
  }
}

@media (prefers-reduced-motion: reduce) {
  .paper-motion-root {
    display: none;
  }
}

@media (forced-colors: active) {
  .paper-motion-root {
    display: none;
  }

  .motion-stage {
    outline-color: CanvasText;
  }
}