/* Homepage parcel illustrations sit in the sections' breathing room. */
.parcel-section {
  position: relative;
  isolation: isolate;
}

.parcel-section > .container {
  position: relative;
  z-index: 1;
}

.parcel {
  --parcel-size: 7.5rem;
  --parcel-angle: -8deg;
  --parcel-duration: 7s;
  --parcel-delay: -2s;
  --parcel-lift: -12px;
  --parcel-drift: 2px;
  --parcel-turn: 3deg;
  position: absolute;
  z-index: 0;
  width: var(--parcel-size);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 12px #28121716);
  animation: parcel-float var(--parcel-duration) ease-in-out var(--parcel-delay) infinite alternate;
}

.parcel--small {
  --parcel-size: 5.5rem;
  --parcel-duration: 8.5s;
  --parcel-delay: -5s;
  --parcel-lift: -9px;
  --parcel-angle: 9deg;
}

.parcel--large {
  --parcel-size: 10.5rem;
  --parcel-duration: 9s;
  --parcel-delay: -3.5s;
  --parcel-lift: -16px;
  --parcel-angle: 5deg;
}

.parcel--top-right {
  top: 0.65rem;
  right: max(0.75rem, calc((100% - 86rem) / 2));
}

.parcel--bottom-left {
  bottom: 0.4rem;
  left: max(0.75rem, calc((100% - 86rem) / 2));
}

.parcel--bottom-right {
  bottom: 0.5rem;
  right: max(1rem, calc((100% - 86rem) / 2 + 1rem));
}

.hero > .parcel--large {
  --parcel-lift: -42px;
  --parcel-drift: -8px;
  --parcel-turn: 6deg;
  --parcel-duration: 3.4s;
  --parcel-delay: -1.2s;
  z-index: 3;
  top: 18%;
  right: max(1.5rem, calc((100% - 86rem) / 2 + 0.5rem));
}

.hero > .parcel--small {
  --parcel-size: 7rem;
  --parcel-lift: -34px;
  --parcel-drift: 10px;
  --parcel-turn: -6deg;
  --parcel-duration: 4.2s;
  --parcel-delay: -2.4s;
  z-index: 3;
  bottom: 14.5rem;
  left: max(0.2rem, calc((100% - 86rem) / 2 - 4rem));
}

.why__artwork {
  position: relative;
  min-width: 0;
}

.why__artwork > .parcel {
  --parcel-size: 13rem;
  z-index: 2;
  bottom: -1.25rem;
  right: -1.25rem;
}

.final-cta > .parcel {
  --parcel-size: 12rem;
  top: 0.5rem;
  right: max(1.5rem, calc((100% - 86rem) / 2 + 0.5rem));
}

@keyframes parcel-float {
  from {
    transform: translate3d(0, 0, 0) rotate(var(--parcel-angle));
  }
  to {
    transform: translate3d(var(--parcel-drift), var(--parcel-lift), 0) rotate(calc(var(--parcel-angle) + var(--parcel-turn)));
  }
}

@media (width <= 900px) {
  .parcel { --parcel-size: 5.75rem; }
  .parcel--small { --parcel-size: 4.25rem; }
  .parcel--large { --parcel-size: 7rem; }
  .hero > .parcel--large { top: 12%; right: 0.75rem; left: auto; }
  .hero > .parcel--small { --parcel-size: 5.5rem; top: 42%; bottom: auto; left: 0.15rem; }
  .why__artwork > .parcel { --parcel-size: 11rem; right: 0.25rem; }
  .final-cta > .parcel { --parcel-size: 10rem; }
}

@media (width <= 600px) {
  .parcel { --parcel-size: 5.5rem; --parcel-lift: -7px; }
  .parcel--small { --parcel-size: 4.25rem; }
  .parcel--large { --parcel-size: 6.5rem; }
  .parcel--top-right { top: 0.25rem; right: 0.75rem; }
  .parcel--bottom-left { bottom: 0.15rem; left: 0.25rem; }
  .parcel--bottom-right { bottom: 0.15rem; right: 0.75rem; }
  .hero > .parcel--large { top: 6.75rem; right: 0.75rem; }
  .hero > .parcel--small { --parcel-size: 5rem; top: 29rem; left: 0.1rem; }
  .why__artwork > .parcel { --parcel-size: 10rem; right: 0.25rem; }
  .final-cta { padding-top: 10rem; }
  .final-cta > .parcel { --parcel-size: 9rem; top: 0.5rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .parcel {
    animation: none;
    transform: rotate(var(--parcel-angle));
  }
}