/* =========================================================== butterflies ===
   Two animated butterflies. Kept in their own file so nothing here can
   disturb the existing site styles.

   #bfly1 — logo companion. Flies in from the bottom-left on load, lands on
            the right-hand corner of the nav banner at a sideways tilt, rests
            there with a slow wing beat. Startles on hover, loops on click.
   #bfly2 — wanderer. Drifts across the viewport forever, permanently BEHIND
            the content. It shows through wherever the page is open (the silk
            margins) and is hidden wherever a card covers it. Its z-index is
            fixed, never swapped — swapping it mid-scroll was what made it
            pop in and out.

   Stacking, bottom to top:
     html            background image (silk)
     #bfly2          z-index 1      <- always below the cards
     main / footer   z-index 2      <- the cards live in here
     .site-header    z-index 80
     #bfly1          z-index 9999   <- above everything
   ------------------------------------------------------------------------ */

.bfly {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;             /* never swallow clicks while in flight */
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);   /* parked off-screen pre-flight */
  backface-visibility: hidden;
}

/* Idle layer. Kept separate from .bfly so the resting bob can run as a CSS
   animation without fighting the JS-driven position transform on the parent. */
.bfly-bob { display: block; }

.bfly.is-landed .bfly-bob {
  animation: bflyBob 4.4s infinite ease-in-out;
}

@keyframes bflyBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-1.6px) rotate(-1.7deg); }
  65%      { transform: translateY(1.1px) rotate(1.5deg); }
}

/* The wing box. Two halves of the same PNG, hinged at the body, rotated in 3D
   so the flap reads as real wings rather than a squashed sprite. */
.bfly-wings {
  position: relative;
  display: block;
  perspective: 340px;
  transform-style: preserve-3d;
}

.bfly-wings .w {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-repeat: no-repeat;
  background-size: 200% 100%;       /* each half shows one half of the image */
  backface-visibility: visible;
}

.bfly-wings .wl {
  left: 0;
  background-position: left center;
  transform-origin: right center;
  animation: bflyFlapL var(--flap, 0.19s) infinite ease-in-out;
}

.bfly-wings .wr {
  right: 0;
  background-position: right center;
  transform-origin: left center;
  animation: bflyFlapR var(--flap, 0.19s) infinite ease-in-out;
}

/* Flight beat — fast and deep. */
@keyframes bflyFlapL {
  0%, 100% { transform: rotateY(-14deg); }
  50%      { transform: rotateY(66deg); }
}
@keyframes bflyFlapR {
  0%, 100% { transform: rotateY(14deg); }
  50%      { transform: rotateY(-66deg); }
}

/* Resting beat — slow, shallow, alive but calm. Used once landed. */
.bfly.is-landed .wl { animation: bflyRestL var(--rest, 2.6s) infinite ease-in-out; }
.bfly.is-landed .wr { animation: bflyRestR var(--rest, 2.6s) infinite ease-in-out; }

@keyframes bflyRestL {
  0%, 100% { transform: rotateY(-6deg); }
  45%      { transform: rotateY(30deg); }
}
@keyframes bflyRestR {
  0%, 100% { transform: rotateY(6deg); }
  45%      { transform: rotateY(-30deg); }
}

/* ------------------------------------------------------------- butterfly 1 */
#bfly1 {
  z-index: 9999;                    /* above the nav, above everything */
}

#bfly1 .bfly-wings {
  width: 93px;
  height: 62px;                     /* butterfly1.png is 1536x1024 (3:2) */
}

#bfly1 .bfly-wings .w {
  background-image: url("../../butterfly1.png");
}

/* Only clickable once it has settled on the logo, so it can never intercept
   a click meant for the page while it is crossing the screen. */
#bfly1.is-landed {
  pointer-events: auto;
  cursor: pointer;
}

/* ------------------------------------------------------------- butterfly 2 */
#bfly2 {
  /* Fixed for good — below main/footer (z-index 2), so it can never rise in
     front of a card. Nothing in the JS touches this value any more; swapping
     it mid-scroll was what made the butterfly pop in and out. */
  z-index: 1;
  pointer-events: none;             /* stays none — startle uses proximity */
}

#bfly2 .bfly-wings {
  width: 104px;
  height: 104px;                    /* butterfly2.png is 1024x1024 (1:1) */
}

#bfly2 .bfly-wings .w {
  background-image: url("../../butterfly2.png");
}

/* ------------------------------------------------------------- butterfly 3 */
/* Second wanderer. Same artwork, same size and same layer as #bfly2 — only its
   flight path and its habit of pausing mid-air differ. */
#bfly3 {
  z-index: 1;                       /* identical layer to #bfly2 */
  pointer-events: none;             /* startle is proximity-based */
}

#bfly3 .bfly-wings {
  width: 104px;
  height: 104px;
}

#bfly3 .bfly-wings .w {
  background-image: url("../../butterfly2.png");
}

/* Slow wing beat while it is resting mid-flight. Reuses the perched keyframes;
   only #bfly3 ever receives this class. */
.bfly.is-resting .wl { animation: bflyRestL var(--rest, 2.6s) infinite ease-in-out; }
.bfly.is-resting .wr { animation: bflyRestR var(--rest, 2.6s) infinite ease-in-out; }

/* Panicked wing beat right after a fright. */
.bfly.is-startled { --flap: 0.10s; }

/* --------------------------------------------------------------- reduced ---
   Honour the site's existing reduced-motion contract: no flight, no flapping.
   Butterfly 1 simply sits on the logo; the wanderer is removed. */
@media (prefers-reduced-motion: reduce) {
  .bfly-wings .wl,
  .bfly-wings .wr,
  .bfly.is-landed .wl,
  .bfly.is-landed .wr,
  .bfly.is-landed .bfly-bob { animation: none !important; }

  .bfly.is-resting .wl,
  .bfly.is-resting .wr { animation: none !important; }

  #bfly2, #bfly3 { display: none !important; }
}

/* Small screens: shrink all three so they never crowd the compact header. */
@media (max-width: 860px) {
  #bfly1 .bfly-wings { width: 69px; height: 46px; }
  #bfly2 .bfly-wings,
  #bfly3 .bfly-wings { width: 79px; height: 79px; }
}

@media (max-width: 620px) {
  #bfly1 .bfly-wings { width: 57px; height: 38px; }
  #bfly2 .bfly-wings,
  #bfly3 .bfly-wings { width: 68px; height: 68px; }
}