/* impeccable-disable marquee: the strips step through sprite frames, nothing scrolls past */
/* ============================================================
   THE FLOCK  (client delivery, 2026-09-29)
   Bella's own butterflies, cut out of the flock she generated:
   five clean loops, pink, white and purple, each one a strip of
   frames from its own seamless loop. A strip plays by stepping
   an inner image sideways inside a clipped box, which is a
   transform, so the whole flock lives on the compositor.

   .bfy            the box. --w sets its width, the ratio is the frame's
   .bfy img        the strip, --n frames wide, stepped --n times per loop
   .perch          pinned to a card edge, with a shadow on the page
   .fly            a wrapper on a flight path across the screen
   .bob            a wrapper that drifts in place, for the clusters

   Reduced motion: the strips freeze on their first frame and the
   flyers are not rendered.
   ============================================================ */

.bfy{
  position:relative;display:block;
  width:var(--w,80px);
  overflow:hidden;pointer-events:none;
  transform:rotate(var(--rot,0deg)) scaleX(var(--mir,1));
}
.bfy img{
  display:block;height:auto;max-width:none;
  width:calc(var(--n) * 100%);
  animation:bf-strip calc(var(--n) * var(--ft,42ms)) steps(var(--n)) infinite;
  animation-delay:var(--phase,0s);
  will-change:transform;
}
@keyframes bf-strip{to{transform:translateX(-100%)}}

/* pinned to a card edge. The card keeps its own clipping, the
   butterfly sits on a wrapper outside it, half on and half off. */
.perch{position:absolute;z-index:6;filter:drop-shadow(0 10px 8px rgba(39,26,77,.22))}
.perch--slow{--ft:70ms}

/* The flock clears the cards so their edges cannot slice through wings. */
.flock{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.fly{position:absolute;left:0;top:0;animation:var(--path) var(--dur) linear infinite;animation-delay:var(--delay,0s)}
.fly .bfy{width:min(var(--w,80px),84px);filter:drop-shadow(0 6px 6px rgba(39,26,77,.12))}
.fly--m .bfy{--mir:-1}

/* drifting in place, for the clusters over the card corners */
.bob{position:absolute;left:var(--x,0);top:var(--y,0);animation:bf-bob var(--bd,7s) ease-in-out infinite alternate;animation-delay:var(--phase,0s)}
@keyframes bf-bob{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(6px,-12px,0) rotate(4deg)}}
.cluster{position:absolute;z-index:6;pointer-events:none}
.cluster .bfy{filter:drop-shadow(0 10px 8px rgba(39,26,77,.22))}

/* ---------- the flight paths ----------
   Four keep to the side margins, a frame around the page. Two
   cross it slowly, low and behind the cards, which is the
   "fluttering around the page" the client asked for. */
@keyframes fly1{
  0%  {transform:translate3d(2vw,112vh,0) rotate(-14deg)}
  20% {transform:translate3d(10vw,82vh,0) rotate(16deg)}
  40% {transform:translate3d(1vw,56vh,0) rotate(-20deg)}
  60% {transform:translate3d(12vw,32vh,0) rotate(12deg)}
  80% {transform:translate3d(3vw,8vh,0) rotate(-16deg)}
  100%{transform:translate3d(9vw,-22vh,0) rotate(10deg)}
}
@keyframes fly2{
  0%  {transform:translate3d(calc(100vw - var(--w) - 3vw),114vh,0) rotate(14deg)}
  25% {transform:translate3d(calc(100vw - var(--w) - 12vw),84vh,0) rotate(-18deg)}
  50% {transform:translate3d(calc(100vw - var(--w) - 2vw),52vh,0) rotate(20deg)}
  75% {transform:translate3d(calc(100vw - var(--w) - 11vw),20vh,0) rotate(-12deg)}
  100%{transform:translate3d(calc(100vw - var(--w) - 4vw),-22vh,0) rotate(16deg)}
}
@keyframes fly3{
  0%  {transform:translate3d(8vw,-20vh,0) rotate(-10deg)}
  30% {transform:translate3d(0vw,24vh,0) rotate(18deg)}
  60% {transform:translate3d(11vw,62vh,0) rotate(-14deg)}
  100%{transform:translate3d(2vw,114vh,0) rotate(12deg)}
}
@keyframes fly4{
  0%  {transform:translate3d(calc(100vw - var(--w) - 9vw),-20vh,0) rotate(12deg)}
  35% {transform:translate3d(calc(100vw - var(--w) - 1vw),30vh,0) rotate(-16deg)}
  70% {transform:translate3d(calc(100vw - var(--w) - 12vw),70vh,0) rotate(18deg)}
  100%{transform:translate3d(calc(100vw - var(--w) - 3vw),114vh,0) rotate(-10deg)}
}
/* the crossers: corner to corner, a long slow arc */
@keyframes fly5{
  0%  {transform:translate3d(-12vw,96vh,0) rotate(-8deg)}
  30% {transform:translate3d(22vw,64vh,0) rotate(12deg)}
  55% {transform:translate3d(52vw,54vh,0) rotate(-10deg)}
  80% {transform:translate3d(82vw,26vh,0) rotate(14deg)}
  100%{transform:translate3d(108vw,-6vh,0) rotate(-6deg)}
}
@keyframes fly6{
  0%  {transform:translate3d(108vw,74vh,0) rotate(8deg)}
  25% {transform:translate3d(76vw,40vh,0) rotate(-14deg)}
  50% {transform:translate3d(46vw,58vh,0) rotate(10deg)}
  75% {transform:translate3d(18vw,30vh,0) rotate(-12deg)}
  100%{transform:translate3d(-12vw,4vh,0) rotate(6deg)}
}

/* phone: the hero cluster moves off the corner, where the note and the
   badge live, to the right edge over her shoulder */
@media (max-width:899px){
  .perch--hero-a{right:16px!important;top:38%!important}
  .perch--hero-b{left:auto!important;right:46px!important;top:34%!important}
  .perch--hero-c{right:8px!important;top:54%!important}
  .hero-wrap > .bfy--pink-small:not(.perch--hero-b){left:8px!important}
  .split__media > .bfy--lav-mid{right:-8px!important}
  .split__media > .bfy--pink-small{left:-8px!important}
}
/* beside the section headings, where the line art used to sit */
.sec-h{position:relative}
.sec-h .perch--h{right:-4px;top:-20px}

/* phone: two small crossers only, the rest of the flock perches */
.fly--desk{display:none}
@media (min-width:900px){
  .fly--desk{display:block}
  .fly--mob{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bfy img,.bob,.fly{animation:none!important}
  .flock{display:none!important}
}

/* Every frame of these five original loops has been reviewed on plum.
   Other cuts contained baked-in wing damage, neighbors or matte debris. */
.bfy--white-side-a{--n:43;aspect-ratio:186/185}
.bfy--white-big{--n:32;aspect-ratio:250/241}
.bfy--pink-small{--n:28;aspect-ratio:190/184}
.bfy--lav-mid{--n:32;aspect-ratio:250/244}
.bfy--lav-tiny{--n:44;aspect-ratio:147/146}