/*
  Flight: the landing page's load-in (flight.js). Wren sweeps up through the
  page from under it, seen from above, right up against the camera with her
  wings held open, and the page is uncovered behind her. She flies off the
  top, comes back in small from the top left and settles to the left of the
  name as the sitting print, in the logo's place.

  This file only adds the bird, the cover that hides the page until the wings
  have passed, and the perch; the page underneath is style.css as it is.
*/

/* The paper's grain lies over the bird as over everything else. */
body::before { z-index: 3; }

/* ---------- the perch: where she ends up, part of the page ---------- */

/* The sitting print takes the logo's place beside the name. */
.home-link .perch {
  width: auto;
  height: 2.75rem;
  margin: -.5rem -.1rem 0 0;
  border-radius: 0;
  box-shadow: none;
  transform-origin: 50% 100%;
}

/* Until she lands, the perch is empty. */
[data-flight="pending"] .perch,
[data-flight="running"] .perch { opacity: 0; }

/* ---------- the flight layer ---------- */

.flight {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

[data-flight="pending"] .flight,
[data-flight="running"] .flight { display: block; }

/*
  The cover is plain paper down to a soft edge that rides under the wings.
  If the script never starts, it lifts on its own so the page is never lost.
*/
.flight-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: var(--paper);
  animation: flight-failsafe .3s ease 2.9s forwards;
  will-change: transform, opacity;
}

[data-flight="running"] .flight-cover { animation: none; }

@keyframes flight-failsafe { to { opacity: 0; visibility: hidden; } }

/* The drawing is a 1254 px square; the bird spans 97% of it. Laid out at 627. */
.flight-bird {
  position: absolute;
  left: 0;
  top: 0;
  width: 627px;
  height: 627px;
  transform-origin: 50% 50%;
  transform: translate(-9999px, 0);
  will-change: transform, opacity;
}

.flight-bird img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

/* Each wing turns about its shoulder, so a beat or the fold shortens it toward the body. */
.flight-bird .wing-l { transform-origin: 43.7% 37.5%; }
.flight-bird .wing-r { transform-origin: 56.3% 37.5%; }

/*
  The bird itself is drawn from a 4x copy of the drawing (a 5016 px grid), each
  layer cropped to its own box and placed back on that grid, so she stays
  sharp when she fills the screen. The shadows keep the whole square.
  README.md says where the drawing came from.
*/
.flight-wren img { inset: auto; }
.flight-wren .trunk { left: 37.779%; top: 16.647%; width: 23.983%; height: 66.009%; }
.flight-wren .wing-l { left: 1.535%; top: 26.954%; width: 48.644%; height: 37.022%; transform-origin: 86.68% 28.43%; }
.flight-wren .wing-r { left: 49.821%; top: 29.167%; width: 48.684%; height: 34.729%; transform-origin: 13.31% 23.94%; }

.flight-shade { opacity: .12; }

@media (prefers-color-scheme: dark) {
  .flight-shade { filter: brightness(0); }
}