/* Animated LiveCMS thumbnail: 16:9 cover crop of the 3:2 SVG. */
.windows-float {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d5effc;
}

.windows-float svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}

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

.windows-float #win-back,
.windows-float #win-code,
.windows-float #win-image,
.windows-float #word-editable {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.windows-float #win-back {
  animation: windows-float-back 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.windows-float #win-code {
  animation: windows-float-code 4.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.windows-float #win-image {
  animation: windows-float-image 4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.windows-float #word-editable {
  animation: windows-float-editable 5.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes windows-float-back {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(10px, -28px, 0) rotate(-2.4deg); }
}

@keyframes windows-float-code {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-16px, -36px, 0) rotate(3deg); }
}

@keyframes windows-float-image {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(14px, -40px, 0) rotate(-3.2deg); }
}

@keyframes windows-float-editable {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-8px, -24px, 0) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .windows-float #win-back,
  .windows-float #win-code,
  .windows-float #win-image,
  .windows-float #word-editable {
    animation: none;
  }
}