/* Footer variant "perch": the owl leaves the Trinity key, flies a loop around the elephant and lands on its back.
   Loaded only by B2-final-v2-perch.html; the existing footer is not changed. Motion needs JS + no reduced-motion. */
.pkf2-keys{position:relative}
.pkf2-fly,.pkf2-trail{position:absolute;pointer-events:none}
.pkf2-fly{left:0;top:0;z-index:3;will-change:transform;transform-origin:50% 60%;visibility:hidden}
.pkf2-fly.is-flying,.pkf2-fly.is-perched{visibility:visible}
.pkf2-fly img{display:block;width:100%;height:auto}
.pkf2-fly.is-flying img{animation:pkf2-flap .24s ease-in-out infinite;transform-origin:50% 80%}
.pkf2-fly.is-perched{z-index:2}
.pkf2-trail{left:0;top:0;width:100%;height:100%;overflow:visible;z-index:2}
.pkf2-trail path.dots{fill:none;stroke:var(--g-terra,#b54b32);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.1 11;opacity:.8}
.pkf2-trail path.reveal{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.pkf2-dot{position:absolute;left:75%;top:13%;width:15.6%;aspect-ratio:1;border-radius:50%;background:var(--g-terra,#b54b32);opacity:0;transition:opacity .4s}
.pkf2-keys.is-flown .pkf2-tn .pkf2-mark img{opacity:0;transition:opacity .25s}
.pkf2-keys.is-flown .pkf2-dot{opacity:1}
.pkf2-tn .pkf2-mark img{transition:opacity .25s}
/* the mark see-saw is replaced: the pair settles, then rocks together once the owl is on the elephant */
.pkf2.is-live:not(.is-still) .pkf2-pk .pkf2-mark,
.pkf2.is-live:not(.is-still) .pkf2-tn .pkf2-mark,
.pkf2.is-live:not(.is-still) .pkf2-pk .pkf2-mark::after,
.pkf2.is-live:not(.is-still) .pkf2-tn .pkf2-mark::after{animation:none}
.pkf2-keys.is-perched .pkf2-pk .pkf2-mark{animation:pkf2-pair 6.5s ease-in-out infinite!important}
.pkf2-keys.is-perched .pkf2-pk .pkf2-mark::after{animation:none!important}
.pkf2-keys.is-thump .pkf2-pk .pkf2-mark{animation:pkf2-thump .42s cubic-bezier(.3,1.4,.5,1) 1!important}
.pkf2-mark{overflow:visible}
@keyframes pkf2-flap{0%,100%{transform:scaleY(1) rotate(0)}50%{transform:scaleY(.9) rotate(-5deg)}}
@keyframes pkf2-pair{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes pkf2-thump{0%{transform:translateY(0)}35%{transform:translateY(5px) rotate(-2deg)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pkf2-fly,.pkf2-trail,.pkf2-dot{display:none}}

/* once the owl is on the elephant, the Trinity key quietly lets go: dot and shadow fade, the label rises to the middle */
.pkf2-dot{transition:opacity .5s,transform .6s cubic-bezier(.3,.9,.3,1)}
.pkf2-keys.is-perched .pkf2-dot{opacity:0;transform:scale(.2)}
.pkf2-tn .pkf2-mark::after{transition:opacity .5s}
.pkf2-keys.is-perched .pkf2-tn .pkf2-mark::after{opacity:0}
.pkf2-tn .pkf2-name{transition:transform .8s cubic-bezier(.3,.9,.3,1)}
.pkf2-keys.is-perched .pkf2-tn .pkf2-name{transform:translateY(var(--tn-lift,0px))}

/* treat: the Trinity card is fed to the elephant; what remains of it is a plain text link */
.pkf2-food{position:absolute;z-index:4;pointer-events:none;overflow:visible}
.pkf2-tn{transition:background-color .6s,box-shadow .6s,transform .16s}
.pkf2-keys.is-eaten .pkf2-tn{background:transparent;box-shadow:none}
.pkf2-keys.is-eaten .pkf2-tn .pkf2-name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pkf2-keys.is-eaten .pkf2-tn .pkf2-name::after{content:" \2197";text-decoration:none;display:inline-block}
.pkf2-keys.is-munch .pkf2-pk .pkf2-mark img{animation:pkf2-munch .5s cubic-bezier(.3,1.4,.5,1) 2}
@keyframes pkf2-munch{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.07) rotate(-3deg)}}

/* wings: only while the owl is in the air, three poses beaten about three times a second */
.pkf2-fly .pkf2-wings{position:absolute;left:0;top:0;width:100%;height:auto;overflow:visible;z-index:0}
.pkf2-fly img{position:relative;z-index:1}
.pkf2-fly .pkf2-wings .w{display:none;fill:#3d1e12}
.pkf2-fly.is-flying .pkf2-wings .w-mid{display:block}
@media (prefers-reduced-motion:no-preference){
  .pkf2-fly.is-flying .pkf2-wings .w-up{display:block;animation:pkf2-wup .34s steps(1,end) infinite}
  .pkf2-fly.is-flying .pkf2-wings .w-down{display:block;animation:pkf2-wdown .34s steps(1,end) infinite}
  .pkf2-fly.is-flying .pkf2-wings .w-mid{animation:pkf2-wmid .34s steps(1,end) infinite}
  @keyframes pkf2-wup{0%{visibility:visible}25%,100%{visibility:hidden}}
  @keyframes pkf2-wmid{0%{visibility:hidden}25%{visibility:visible}50%{visibility:hidden}75%,100%{visibility:visible}}
  @keyframes pkf2-wdown{0%,50%{visibility:hidden}50%{visibility:visible}75%,100%{visibility:hidden}}
}