/* ===================================================================
   Scroll paw-print trail
   - Generates a wavy line of alternating left/right paw prints down
     the whole page (see js/scroll-fx.js for the generation logic).
   - Each paw stays invisible until scrolled into view, then "stamps"
     into place.
   - Paws that land on top of real content (headings, text, images,
     cards) automatically fade to near-invisible -- see the
     `.over-content` class, toggled by JS based on real measured
     positions, not just stacking order.
=================================================================== */

#paw-trail{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; /* above section backgrounds, below sticky nav/header */
}

.paw{
  position: absolute;
  width: 30px;
  height: 30px;
  --reveal-opacity: .8;      /* default "in blank space" opacity */
  --mx: 1;                    /* set per-paw by JS: 1 or -1, alternates the footstep look */
  opacity: 0;                 /* hidden until scrolled into view */
  transform: scale(calc(.4 * var(--mx)), .4) rotate(var(--r, 0deg));
  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.paw.seen{
  opacity: var(--reveal-opacity);
  transform: scale(var(--mx), 1) rotate(var(--r, 0deg));
}

/* Smart content-detection: JS measures real content and applies this
   class to any paw whose position overlaps it. Higher specificity
   than the base .paw rule, so it always wins regardless of source
   order or whether .seen is also present. */
.paw.over-content{
  --reveal-opacity: .32;
}

.paw svg{
  width: 100%;
  height: 100%;
  fill: var(--primary-color, #9349DC);
}

@media (prefers-reduced-motion: reduce){
  .paw{ transition: none !important; }
}

/* ===================================================================
   Footer "peeking mascot" -- a 3D illusion made from two images:
   - .footer-mascot-body sits mostly ABOVE the footer's top edge, and
     is given a negative z-index so the part that dips down behind
     the edge is actually covered by the footer's own background --
     it looks like the footer "wall" is in front of the body.
   - .footer-mascot-paws sits just below the same edge, drawn on top
     of the footer's background, like paws draped over the wall.
   This only works because #site-footer below is given its own
   stacking context (position + z-index): that's what makes the
   negative z-index child hide behind *this* element's background
   specifically, rather than behind the whole page.
=================================================================== */

#site-footer{
  position: relative;
  z-index: 0;
}

.footer-mascot{
  position: absolute;
  top: 0;
  right: 8%;               /* placeholder position -- move to taste */
  width: 320px;
  max-width: 34vw;
  pointer-events: none;
}

.footer-mascot-body,
.footer-mascot-paws{
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Anchored to the footer's top edge (bottom:0 on this 0-height container),
   then pushed DOWN by most of its own height with translateY -- since
   translateY(%) is relative to the element's own box, this ratio holds
   at any width. Only the top ~38% (head/ears/back) stays above the
   edge -- the rest dips behind and is covered by #site-footer's own
   background via the negative z-index. */
.footer-mascot-body{
  bottom: 111px;
  z-index: -1;               /* hidden behind #site-footer's own background */
  transform: translateY(62%);
}

/* Anchored to the same edge from the top, then pulled up slightly so
   the paws sit right on the seam -- fully inside the footer, drawn in
   front of its background/content, like they're hooked over the ledge. */
.footer-mascot-paws{
  top: -25px;
  z-index: 1;                 /* drawn on top of the footer's background/content */
  transform: translateY(-18%);
}

@media (max-width: 767px){
    .footer-mascot-body{
        bottom: 52px;
    }
    .footer-mascot-paws{
        top: -11px;
    }
}
@media (max-width: 767px){
  .footer-mascot{
    right: 50%;
    transform: translateX(50%);
    width: 190px;
  }
}