/**
 * 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-glow:0 16px 40px color-mix(in srgb,var(--pg-style-accent,var(--pg-style-primary,Highlight)) 14%,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) and (pointer:fine){
  .wapu-pg-hover--lift:is(:hover,:focus-within){transform:translate3d(0,var(--wapu-pg-magic-hover-y),0)}
  .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 14px 38px color-mix(in srgb,var(--pg-sem-text,CanvasText) 8%,transparent)}
.wapu-pg-surface--glass{background-color:color-mix(in srgb,var(--pg-sem-surface,Canvas) 74%,transparent)!important;border-color:color-mix(in srgb,var(--pg-sem-border,currentColor) 72%,transparent)!important;backdrop-filter:blur(16px) saturate(1.08);-webkit-backdrop-filter:blur(16px) saturate(1.08);box-shadow:0 16px 44px color-mix(in srgb,var(--pg-sem-text,CanvasText) 9%,transparent)}
.wapu-pg-surface--glow{box-shadow:0 16px 46px color-mix(in srgb,var(--pg-style-accent,var(--pg-style-primary,Highlight)) 18%,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}}
@media (prefers-reduced-motion:reduce){.wapu-pg-magic,.wapu-pg-magic[data-wapu-pg-enter]{transition:none!important;animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;will-change:auto!important}}
