/*
 * Floating pictures on a project page.
 *
 * Loaded only by project pages that have them, and written by the content
 * panel: the markup comes from Renderer::floaters(). After editing this file,
 * bump FLOATERS_CSS_VERSION in panel/includes/renderer.php and republish the
 * projects that use it, or returning visitors keep the old copy for a year.
 *
 * The widths below are repeated in Renderer::FLOATER_SLOTS so each picture's
 * sizes attribute matches the width it is drawn at. Change the two together.
 *
 * Positions are percentages of the project's details area, so a longer page
 * spreads them further apart. The layout is the one drawn by hand for John
 * Finlay's levitating stones.
 */

.work-details-area-inner {
  position: relative;
}

/* Covers the details area without creating a stacking context of its own, so
   the blurred pieces below can still come in front of the page's content.
   It stops short of the area's bottom padding (the .section-spacing values in
   style.css), so the percentages below are measured over the content and the
   last piece lands beside the last picture rather than in the empty space
   under it. */
.floaters {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 100px;
  pointer-events: none;
  user-select: none;
}

@media only screen and (max-width: 1919px) {
  .floaters { bottom: 90px; }
}

@media only screen and (max-width: 1399px) {
  .floaters { bottom: 80px; }
}

@media only screen and (max-width: 1199px) {
  .floaters { bottom: 60px; }
}

.floater {
  position: absolute;
  z-index: 5;
  will-change: transform;
}

.floater img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes floater-drift-slow-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(15px, -25px) rotate(4deg); }
}

@keyframes floater-drift-slow-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-20px, 15px) rotate(-5deg); }
}

@keyframes floater-drift-medium-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, -30px) rotate(6deg); }
}

@keyframes floater-drift-medium-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(25px, 20px) rotate(-6deg); }
}

@keyframes floater-drift-fast-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(30px, -15px) rotate(8deg); }
}

@keyframes floater-drift-fast-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-25px, 25px) rotate(-8deg); }
}

.floater--1 img { animation: floater-drift-slow-1 12s ease-in-out infinite; }
.floater--2 img { animation: floater-drift-medium-2 9s ease-in-out infinite; }
.floater--3 img { animation: floater-drift-slow-2 15s ease-in-out infinite; }
.floater--4 img { animation: floater-drift-fast-1 8s ease-in-out infinite; }
.floater--5 img { animation: floater-drift-medium-1 10s ease-in-out infinite; }
.floater--6 img { animation: floater-drift-fast-2 7s ease-in-out infinite; }
.floater--7 img { animation: floater-drift-slow-1 14s ease-in-out infinite; }
.floater--8 img { animation: floater-drift-medium-2 11s ease-in-out infinite; }

.floater--1 { top: 15%; left: -6%; width: 250px; }
.floater--2 { top: 23%; right: -4%; width: 280px; }
.floater--3 { top: 38%; left: 3%; width: 160px; }
.floater--4 { top: 52%; right: 2%; width: 260px; }
.floater--5 { top: 66%; left: -5%; width: 290px; }
.floater--6 { top: 75%; right: -3%; width: 170px; }
.floater--7 { top: 86%; left: 2%; width: 220px; }
.floater--8 { top: 94%; right: 4%; width: 240px; }

/* Depth of field: some pieces soft and in front of the text, some behind. */
.floaters--blur .floater--2 { filter: blur(3px); z-index: 12; }
.floaters--blur .floater--4 { filter: blur(1px); }
.floaters--blur .floater--5 { filter: blur(4px); z-index: 12; }
.floaters--blur .floater--8 { filter: blur(2px); z-index: 12; }

@media only screen and (max-width: 1399px) {
  .floater--1 { width: 200px; left: -4%; }
  .floater--2 { width: 220px; right: -3%; }
  .floater--3 { width: 130px; }
  .floater--4 { width: 200px; }
  .floater--5 { width: 230px; left: -3%; }
  .floater--6 { width: 140px; }
  .floater--7 { width: 180px; }
  .floater--8 { width: 190px; }
}

@media only screen and (max-width: 1024px) {
  .floater--1 { width: 150px; left: -2%; }
  .floater--2 { width: 160px; right: -2%; }
  .floater--3 { width: 100px; }
  .floater--4 { width: 150px; }
  .floater--5 { width: 170px; left: -2%; }
  .floater--6 { width: 100px; }
  .floater--7 { width: 130px; }
  .floater--8 { width: 140px; }

  .floaters--blur .floater--2 { filter: blur(1.5px); }
  .floaters--blur .floater--5 { filter: blur(2px); }
  .floaters--blur .floater--8 { filter: blur(1px); }
}

/* An animated GIF stays sharp and behind the text wherever it lands. Blurring
   it would redraw the blur on every frame, eight times over on a busy page,
   and a sharp piece in front of the text would read as covering it. */
.floaters--blur .floater--animated {
  filter: none;
  z-index: 5;
}

/* A place moved into the empty column under the project's headline, for a
   page where the shared spot lands on a picture (Renderer::FLOATER_TWEAKS).
   The headline ends near 27.5% of the area on every width; the renderer also
   slows this piece's parallax so scrolling keeps it in that column. Once the
   columns stack, below 992px, there is no empty column and the piece keeps
   its shared spot. */
@media only screen and (min-width: 992px) {
  .floater--under-headline { top: 30.5%; left: 12%; }
}

@media only screen and (min-width: 1400px) {
  .floater--under-headline { top: 29.5%; }
}

/* On a phone they would sit on top of the text. Hidden, lazy pictures are
   never downloaded, so this costs a phone nothing. */
@media only screen and (max-width: 767px) {
  .floaters {
    display: none;
  }
}

/* Someone who has asked for less motion gets the pictures standing still. */
@media (prefers-reduced-motion: reduce) {
  .floater img {
    animation: none;
  }
}