/* Reused Dogoos website paw-sprint transition from public/site.css.
   Scoped to explicit appearance changes; reduced motion uses an instant swap. */
@property --sweep-r       { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* How soft the edge of the change is, and how far beyond it a print may be
   seen. Both animate up from ZERO, which is what makes the whole thing open
   out of the button rather than switch on at full width: with a fixed feather
   the very first frame would already show a disc of new theme as wide as it. */
@property --sweep-feather { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --sweep-halo    { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root.theme-changing::view-transition { pointer-events:none; }
:root.theme-changing::view-transition-group(root) { animation-duration: 1.6s; }
/* The default cross-fade would show BOTH themes at once through the mask. */
:root.theme-changing::view-transition-old(root),
:root.theme-changing::view-transition-new(root) { mix-blend-mode: normal; }
/* The outgoing theme sits still underneath; the incoming one arrives over it. */
:root.theme-changing::view-transition-old(root) { animation: none; z-index: 0; }

:root.theme-changing::view-transition-new(root) {
  z-index: 1;
  /* Three mask layers, top to bottom:
       1  the FRONT — the part of the page that has already turned over: a disc
                      growing out of the button, with a soft edge.
       2  the TRAIL — the prints themselves. One viewport-sized SVG, built in JS
                      so they land exactly where the runners run.
       3  the HALO  — a ring reaching a little beyond the front.
     composited as  front + (trail ∩ halo), which is the whole trick. A print is
     only visible while the front is near it, so prints fade up ahead of the
     change and are swallowed by it a moment later. That is what makes the edge
     read as paws rather than as an edge.

     The fallback in layer 2 is load-bearing: with no trail set the mask has to
     degrade to a plain soft-edged reveal, not to nothing at all. */
  -webkit-mask-image:
    radial-gradient(circle at var(--sweep-x, 50%) var(--sweep-y, 50%),
      #000 calc(var(--sweep-r) - var(--sweep-feather)),
      transparent var(--sweep-r)),
    var(--paw-trail, linear-gradient(#000, #000)),
    radial-gradient(circle at var(--sweep-x, 50%) var(--sweep-y, 50%),
      #000 calc(var(--sweep-r) + var(--sweep-halo) * .25),
      transparent calc(var(--sweep-r) + var(--sweep-halo)));
  mask-image:
    radial-gradient(circle at var(--sweep-x, 50%) var(--sweep-y, 50%),
      #000 calc(var(--sweep-r) - var(--sweep-feather)),
      transparent var(--sweep-r)),
    var(--paw-trail, linear-gradient(#000, #000)),
    radial-gradient(circle at var(--sweep-x, 50%) var(--sweep-y, 50%),
      #000 calc(var(--sweep-r) + var(--sweep-halo) * .25),
      transparent calc(var(--sweep-r) + var(--sweep-halo)));
  -webkit-mask-size: auto, 100% 100%, auto;
  mask-size: auto, 100% 100%, auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-composite: add, intersect, add;
  animation: paw-sprint 1.6s linear both;
}

@keyframes paw-sprint {
  0% {
    --sweep-r: 0px;
    --sweep-feather: 0px;
    --sweep-halo: 0px;
    /* It ACCELERATES the whole way, and never eases off. The first beat is
       slow enough to watch the prints step away from the button one at a time;
       from there it keeps gaining, so the change gets away from you rather
       than being slid across at a constant rate. It does not need a soft
       landing: --sweep-end deliberately overshoots the furthest corner, so the
       fastest part of the curve happens past the edge of the screen where
       there is nothing left to see. */
    animation-timing-function: cubic-bezier(.5, .03, .68, .62);
  }
  40% {
    /* The edge and the halo open out on the same accelerating curve as the
       front itself. Opening them early would light every print within a couple
       of hundred pixels of the button at once, which is the opposite of one
       paw after another. */
    --sweep-feather: 105px;
    --sweep-halo: 215px;
  }
  100% {
    --sweep-r: var(--sweep-end, 160vmax);
    --sweep-feather: 105px;
    --sweep-halo: 215px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No run. The JS skips it, and this is the backstop if it is ever reached
     anyway. */
  :root.theme-changing::view-transition-group(root),
  :root.theme-changing::view-transition-old(root),
  :root.theme-changing::view-transition-new(root) { animation: none; }
  :root.theme-changing::view-transition-new(root) { -webkit-mask-image: none; mask-image: none; }
}