/* Shared before/after header: left skeleton slides over the finished UI. */
.layout-morph {
  --layout-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}

.layout-morph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.layout-morph__base {
  position: absolute;
  inset: 0;
}

.layout-morph__mover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 48.5%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 12px 12px 0;
  box-shadow: 8px 0 24px rgba(20, 30, 50, 0.22);
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: layout-morph-overlap 5.2s var(--layout-morph-ease) infinite;
}

.layout-morph__mover img {
  width: 206.185%;
  max-width: none;
}

.layout-morph--hero {
  margin: 0 0 2.5rem;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

@keyframes layout-morph-overlap {
  0%, 14% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  26% {
    transform: translate3d(3%, -1%, 0) scale(1.03);
  }
  48%, 72% {
    transform: translate3d(106.2%, 0, 0) scale(1);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-morph__mover {
    animation: none;
  }
}