/* dmb-puck-float.css — companion stylesheet for dmb-puck-float.js.
   See the header comment in that file for wiring instructions.

   Everything here targets classes the JS module toggles on the EXISTING
   route-pet markup (#dmb-route-pet / .dmb-route-pet-button / .dmb-route-pet-sphere,
   authored in bundle-r12/js/directory.js + siteflow-v3.css). Nothing here
   restyles the sphere's resting look — only the press feedback (glow + one-shot
   pulse ring), the modal fade, and a safe-area probe used to read
   env(safe-area-inset-*) as real px in JS without a forced layout read on
   every frame.

   Load AFTER siteflow-v3.css so the !important glow layer can boost the
   sphere's existing box-shadow without editing the owner stylesheet. */

/* Base: opacity is already 1 by default, so declaring the transition here
   costs nothing until the JS module adds/removes .dmb-puck-fade-hidden. */
#dmb-route-pet{ transition:opacity .25s ease; }

/* Modal / card / dictionary-panel open — fade the puck out over 250ms.
   (siteflow-v3.css already force-hides the puck instantly, via
   visibility:hidden!important, while #dmb-dict-yacht/#dmb-dict-crew are open —
   see the html:has() rule near the top of that file. This class is what
   actually DOES the fading for register.html's #portal-modal-backdrop.open /
   body.portal-card-open, which carry no such owner rule.) */
#dmb-route-pet.dmb-puck-fade-hidden{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Press glow — boosts the sphere's own copper box-shadow layers. Re-declares
   the non-orange layers byte-for-byte from siteflow-v3.css's .dmb-route-pet-sphere
   rule so nothing else about the sphere's look shifts, only the two orange
   layers grow brighter/wider. !important is required to win over that rule's
   own box-shadow declaration at equal specificity load-order would otherwise
   decide by source order alone. */
.dmb-route-pet-sphere.dmb-puck-glow{
  transition:box-shadow .4s ease, border-color .4s ease !important;
  border-color:rgba(255,177,129,.95) !important;
  box-shadow:
    inset -12px -14px 20px rgba(0,0,0,.72),
    inset 8px 7px 15px rgba(43,150,198,.18),
    0 0 0 4px rgba(3,20,31,.78),
    0 0 0 6px rgba(224,101,58,.88),
    0 0 30px rgba(224,101,58,.68),
    0 0 56px rgba(224,101,58,.42) !important;
}

/* One-shot pulse ring — a ::after on the button (overflow:visible in the
   owner rule, so the expanded ring is never clipped). The JS module removes
   and re-adds the class (forcing a reflow between) to retrigger it. */
.dmb-route-pet-button.dmb-puck-pulse{ position:absolute; }
.dmb-route-pet-button.dmb-puck-pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--dmb-pet-copper,#e0653a);
  opacity:.9;
  pointer-events:none;
  animation:dmb-puck-pulse-ring .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dmb-puck-pulse-ring{
  0%{transform:scale(1);opacity:.85}
  100%{transform:scale(1.8);opacity:0}
}

/* Safe-area probe (JS creates one hidden instance and reads its computed
   padding in px, which resolves calc()+env() for us instead of re-deriving
   env(safe-area-inset-*) by hand). Never shown, never hit-tested. */
.dmb-puck-safe-probe{
  position:fixed;
  inset:0;
  margin:0;
  border:0;
  visibility:hidden;
  pointer-events:none;
  padding-top:calc(24px + env(safe-area-inset-top,0px));
  padding-right:calc(24px + env(safe-area-inset-right,0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  padding-left:calc(24px + env(safe-area-inset-left,0px));
}

@media (prefers-reduced-motion:reduce){
  /* Match the site's own convention (#dmb-route-tunnel, #dmb-eyebrow::before,
     etc.): reduced motion kills animation + transition outright, it does not
     slow them down. The glow box-shadow still APPLIES on press (still useful
     feedback) — it just snaps instead of easing in, and the expanding ring is
     dropped entirely rather than shown at 1 frame. */
  .dmb-route-pet-sphere.dmb-puck-glow{ transition:none !important; }
  .dmb-route-pet-button.dmb-puck-pulse::after{ content:none; animation:none !important; }
  #dmb-route-pet{ transition:none; }
  #dmb-route-pet.dmb-puck-fade-hidden{ transition:none !important; }
}