/**
 * Playground Effects / Entrance Engine V2.
 * Public motion is preset-based: Fade, Zoom and Slide only.
 */
.wapu-pg-magic{
  --wapu-pg-magic-distance:10px;
  --wapu-pg-magic-scale:.985;
  --wapu-pg-magic-duration:420ms;
  --wapu-pg-slide-x:0px;
  --wapu-pg-slide-y:var(--wapu-pg-magic-distance);
  --wapu-pg-magic-hover-y:-4px;
  --wapu-pg-magic-hover-scale:1.012;
  --wapu-pg-magic-elevation:0 .75rem 2rem color-mix(in srgb,var(--pg-sem-text,CanvasText) 7%,transparent),0 .125rem .5rem color-mix(in srgb,var(--pg-sem-text,CanvasText) 5%,transparent);
  --wapu-pg-magic-glow:0 .875rem 2.25rem color-mix(in srgb,var(--pg-style-accent,var(--pg-style-primary,Highlight)) 9%,transparent);
  transition-property:transform,box-shadow,filter,opacity,background-color,border-color;
  transition-duration:var(--wapu-pg-magic-duration);
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.wapu-pg-intensity--soft{--wapu-pg-magic-distance:8px;--wapu-pg-magic-scale:.99;--wapu-pg-magic-hover-y:-3px;--wapu-pg-magic-hover-scale:1.008}
.wapu-pg-intensity--normal{--wapu-pg-magic-distance:14px;--wapu-pg-magic-scale:.975;--wapu-pg-magic-hover-y:-5px;--wapu-pg-magic-hover-scale:1.015}
.wapu-pg-intensity--dynamic{--wapu-pg-magic-distance:20px;--wapu-pg-magic-scale:.96;--wapu-pg-magic-hover-y:-8px;--wapu-pg-magic-hover-scale:1.025}
.wapu-pg-speed--slow{--wapu-pg-magic-duration:680ms}
.wapu-pg-speed--normal{--wapu-pg-magic-duration:460ms}
.wapu-pg-speed--fast{--wapu-pg-magic-duration:280ms}

/* Entrance: one observer toggles is-wapu-pg-visible. */
.wapu-pg-magic[data-wapu-pg-enter]{opacity:0;will-change:transform,opacity}
.wapu-pg-enter--fade{transform:none}
.wapu-pg-enter--zoom{transform:scale(var(--wapu-pg-magic-scale))}
.wapu-pg-enter--slide{transform:translate3d(var(--wapu-pg-slide-x),var(--wapu-pg-slide-y),0)}
.wapu-pg-direction--up{--wapu-pg-slide-x:0px;--wapu-pg-slide-y:var(--wapu-pg-magic-distance)}
.wapu-pg-direction--down{--wapu-pg-slide-x:0px;--wapu-pg-slide-y:calc(var(--wapu-pg-magic-distance) * -1)}
.wapu-pg-direction--left{--wapu-pg-slide-x:var(--wapu-pg-magic-distance);--wapu-pg-slide-y:0px}
.wapu-pg-direction--right{--wapu-pg-slide-x:calc(var(--wapu-pg-magic-distance) * -1);--wapu-pg-slide-y:0px}
.wapu-pg-magic[data-wapu-pg-enter].is-wapu-pg-visible{opacity:1;transform:none}

/* Finite markup compatibility; these presets are no longer exposed in authoring. */
.wapu-pg-enter--fade-up,.wapu-pg-enter--reveal{transform:translate3d(0,var(--wapu-pg-magic-distance),0)}
.wapu-pg-enter--blur{filter:blur(9px);transform:none}
.wapu-pg-magic[data-wapu-pg-enter].is-wapu-pg-visible{filter:none;clip-path:none}

/* Hover stays deliberately small. */
@media (hover:hover){
  .wapu-pg-hover--lift:is(:hover,:focus-within){transform:translate3d(0,var(--wapu-pg-magic-hover-y),0);box-shadow:var(--wapu-pg-magic-elevation)}
  .wapu-pg-hover--scale:is(:hover,:focus-within){transform:scale(var(--wapu-pg-magic-hover-scale))}
  .wapu-pg-hover--glow:is(:hover,:focus-within){box-shadow:var(--wapu-pg-magic-glow)}
  .wapu-pg-hover--tilt:is(:hover,:focus-within){transform:perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translate3d(0,var(--wapu-pg-magic-hover-y),0)}
}

.wapu-pg-surface--soft{box-shadow:0 .75rem 2rem color-mix(in srgb,var(--pg-sem-text,CanvasText) 6%,transparent),0 .125rem .5rem color-mix(in srgb,var(--pg-sem-text,CanvasText) 4%,transparent)}
.wapu-pg-surface--glass{background-color:color-mix(in srgb,var(--pg-sem-surface,Canvas) 78%,transparent)!important;border-color:color-mix(in srgb,var(--pg-sem-border,currentColor) 72%,transparent)!important;backdrop-filter:blur(16px) saturate(1.06);-webkit-backdrop-filter:blur(16px) saturate(1.06);box-shadow:0 .875rem 2.375rem color-mix(in srgb,var(--pg-sem-text,CanvasText) 7%,transparent)}
.wapu-pg-surface--glow{box-shadow:0 .875rem 2.5rem color-mix(in srgb,var(--pg-style-accent,var(--pg-style-primary,Highlight)) 11%,transparent)}

@media (max-width:1024px){.wapu-pg-magic{--wapu-pg-magic-distance:7px;--wapu-pg-magic-hover-y:-2px;--wapu-pg-magic-hover-scale:1.006}.wapu-pg-hover--tilt:is(:hover,:focus-within){transform:none}}
@media (max-width:767px){.wapu-pg-magic{--wapu-pg-magic-distance:5px}.wapu-pg-speed--slow{--wapu-pg-magic-duration:480ms}.wapu-pg-speed--normal{--wapu-pg-magic-duration:320ms}.wapu-pg-speed--fast{--wapu-pg-magic-duration:220ms}}
/* Reduced motion removes interpolation and entrance travel, but an explicitly
   selected hover still produces an immediate state change. This keeps the
   reusable control truthful without forcing animated movement. */
@media (prefers-reduced-motion:reduce){
  .wapu-pg-magic{transition:none!important;animation:none!important;will-change:auto!important}
  .wapu-pg-magic[data-wapu-pg-enter]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .wapu-pg-magic[data-wapu-pg-hover="lift"]:is(:hover,:focus-within){transform:translate3d(0,var(--wapu-pg-magic-hover-y),0)!important;box-shadow:var(--wapu-pg-magic-elevation)!important}
  .wapu-pg-magic[data-wapu-pg-hover="scale"]:is(:hover,:focus-within){transform:scale(var(--wapu-pg-magic-hover-scale))!important}
  .wapu-pg-magic[data-wapu-pg-hover="glow"]:is(:hover,:focus-within){box-shadow:var(--wapu-pg-magic-glow)!important}
  .wapu-pg-magic[data-wapu-pg-hover="tilt"]:is(:hover,:focus-within){transform:perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translate3d(0,var(--wapu-pg-magic-hover-y),0)!important}
}