* { box-sizing: border-box; }

.animation-flottante {
 	display:flex;
 	align-items:center;
 	justify-content:center;

  --image-width: min(42vw, 420px);
  --join-overlap: 54px;
  --float-shadow: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.10));

  --left-base-x: -9px;
  --left-base-y: 6px;
  --left-base-scale: 1;

  --right-base-x: 10px;
  --right-base-y: -2px;
  --right-base-scale: 1.008;

  --enter-left-duration: 3s;
  --enter-right-duration: 3.2s;

  --base-image-width: 420px;
  --base-join-overlap: 54px;
  --scale-factor: 1;

  --image-width: calc(var(--base-image-width) * var(--scale-factor));
  --join-overlap: calc(var(--base-join-overlap) * var(--scale-factor));
}

.animation-flottante .item {
  flex: 0 0 auto;
  width: var(--image-width);
  display: block;
  position: relative;
  will-change: transform;
  backface-visibility: hidden;
}

.animation-flottante .item.left {
  margin-right: calc(var(--join-overlap) * -1);
  animation: enterLeft var(--enter-left-duration) cubic-bezier(.2,.82,.22,1) forwards;
}

.animation-flottante .item.right {
  margin-left: calc(var(--join-overlap) * -1);
  animation: enterRight var(--enter-right-duration) cubic-bezier(.2,.82,.22,1) forwards;
}

.animation-flottante .float-shell {
  display: block;
  width: 100%;
  will-change: transform;
  transform-origin: center center;
}

.animation-flottante .item.left .float-shell {
  animation: driftLeft 18s ease-in-out var(--enter-left-duration) infinite;
}

.animation-flottante .item.right .float-shell {
  animation: driftRight 21.5s ease-in-out var(--enter-right-duration) infinite;
}

.animation-flottante .float-core {
  display: block;
  width: 100%;
  filter: var(--float-shadow);
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}

.animation-flottante .item.left .float-core {
  animation:
    bobLeft 8.7s cubic-bezier(.45,.05,.55,.95) var(--enter-left-duration) infinite,
    swayLeft 12.9s ease-in-out var(--enter-left-duration) infinite;
}

.animation-flottante .item.right .float-core {
  animation:
    bobRight 10.8s cubic-bezier(.37,0,.63,1) var(--enter-right-duration) infinite,
    swayRight 15.4s ease-in-out var(--enter-right-duration) infinite;
}

@keyframes enterLeft {
  0% { transform: translate3d(-120vw, 0, 0) scale(0.98); }
  100% { transform: translate3d(var(--left-base-x), var(--left-base-y), 0) scale(var(--left-base-scale)); }
}

@keyframes enterRight {
  0% { transform: translate3d(120vw, 0, 0) scale(0.98); }
  100% { transform: translate3d(var(--right-base-x), var(--right-base-y), 0) scale(var(--right-base-scale)); }
}

@keyframes driftLeft {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  23%      { transform: translate3d(14px, -5px, 0) scale(1.012); }
  49%      { transform: translate3d(6px, -12px, 0) scale(0.996); }
  74%      { transform: translate3d(-11px, 3px, 0) scale(1.008); }
}

@keyframes driftRight {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  19%      { transform: translate3d(-7px, -13px, 0) scale(0.995); }
  52%      { transform: translate3d(13px, 7px, 0) scale(1.018); }
  82%      { transform: translate3d(-12px, 1px, 0) scale(1); }
}

@keyframes bobLeft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@keyframes bobRight {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}

@keyframes swayLeft {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.2deg); }
}

@keyframes swayRight {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-1.2deg); }
}

@media (max-width: 900px) {
  .animation-flottante {
    --image-width: min(48vw, 360px);
    --join-overlap: 34px;
  }
}

@media (max-width: 640px) {
  .animation-flottante {
    --image-width: min(52vw, 280px);
    --join-overlap: 20px;
  }
}