/* Shared by Studio and the guest card. Transform animations live inside the
   positioned layer so that rotation, resizing and placement remain intact. */
.pgs-layer-content{animation-duration:var(--pgs-duration,4s);animation-delay:var(--pgs-delay,0s);animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite}
.pgs-anim-none{animation:none}
.pgs-anim-fade{animation-name:pgs-fade;animation-iteration-count:1}
.pgs-anim-float{animation-name:pgs-float}
.pgs-anim-sway{animation-name:pgs-sway}
.pgs-anim-pulse{animation-name:pgs-pulse}
.pgs-anim-bounce{animation-name:pgs-bounce}
.pgs-anim-spin{animation-name:pgs-spin;animation-timing-function:linear}
.pgs-anim-flutter{animation-name:pgs-flutter}
.pgs-anim-swing{animation-name:pgs-swing;transform-origin:50% 0}
.pgs-anim-zoom{animation-name:pgs-zoom;animation-iteration-count:1}
.pgs-anim-slide{animation-name:pgs-slide;animation-iteration-count:1}
.pgs-anim-glow{animation-name:pgs-glow}
@keyframes pgs-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pgs-float{50%{transform:translateY(-12px)}}
@keyframes pgs-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pgs-pulse{50%{transform:scale(1.07)}}
@keyframes pgs-bounce{0%,45%,75%,100%{transform:translateY(0)}25%{transform:translateY(-22px)}60%{transform:translateY(-9px)}}
@keyframes pgs-spin{to{transform:rotate(360deg)}}
@keyframes pgs-flutter{0%,100%{transform:translate(0,0) rotate(-4deg)}25%{transform:translate(7px,-9px) rotate(5deg)}60%{transform:translate(-5px,-16px) rotate(-6deg)}}
@keyframes pgs-swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes pgs-zoom{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes pgs-slide{from{opacity:0;transform:translateX(-55px)}to{opacity:1;transform:translateX(0)}}
@keyframes pgs-glow{0%,100%{filter:drop-shadow(0 0 1px #d4ae5a44)}50%{filter:drop-shadow(0 0 12px #f2c968bb)}}

.pgs-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:40;container-type:size}
.pgs-particle{position:absolute;font-style:normal;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both;color:var(--pgs-effect-color,#d997ab)}
.pgs-particle-shape{display:block;width:var(--pgs-size);height:var(--pgs-size);font-size:calc(var(--pgs-size)*2);line-height:1}
.pgs-effect-petals .pgs-particle{top:-8%!important;animation-name:pgs-petal-fall}
.pgs-effect-petals .pgs-particle-shape{height:calc(var(--pgs-size)*1.4);border-radius:90% 0 90% 10%;background:currentColor;opacity:.6}
.pgs-effect-hearts .pgs-particle{top:105%!important;animation-name:pgs-heart-rise}
.pgs-effect-hearts .pgs-particle-shape{opacity:.6}
.pgs-effect-sparkles .pgs-particle{animation-name:pgs-twinkle;animation-timing-function:ease-in-out}
.pgs-effect-fireflies .pgs-particle{animation-name:pgs-firefly;animation-timing-function:ease-in-out}
.pgs-effect-fireflies .pgs-particle-shape{width:calc(var(--pgs-size)*.45);height:calc(var(--pgs-size)*.45);border-radius:50%;background:currentColor;box-shadow:0 0 10px 3px currentColor}
.pgs-effect-bubbles .pgs-particle{top:105%!important;animation-name:pgs-bubble-rise}
.pgs-effect-bubbles .pgs-particle-shape{width:calc(var(--pgs-size)*2.2);height:calc(var(--pgs-size)*2.2);border:1px solid currentColor;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9 0 6%,transparent 22%);opacity:.55;box-shadow:inset -2px -3px 6px #ffffff50}
.pgs-effect-confetti .pgs-particle{top:-8%!important;animation-name:pgs-confetti-fall}
.pgs-effect-confetti .pgs-particle-shape{width:calc(var(--pgs-size)*.55);height:calc(var(--pgs-size)*1.3);background:currentColor;opacity:.8;animation:pgs-confetti-flip 1.4s linear infinite}
.pgs-effect-butterflies .pgs-particle{left:-12%!important;animation-name:pgs-butterfly-flight;animation-timing-function:ease-in-out}
.pgs-effect-butterflies .pgs-particle-shape{position:relative;width:8cqw;height:6cqw;min-width:20px;min-height:16px;filter:drop-shadow(0 2px 2px #0002)}
.pgs-particle-shape svg{display:block;width:100%;height:100%;overflow:visible;animation-duration:inherit}
.pgs-wing{fill:currentColor;stroke:#fff5;stroke-width:.5;transform-box:view-box;transform-origin:50% 50%;animation:pgs-wing-flap .65s ease-in-out infinite;animation-duration:inherit}
.pgs-wing-right{animation-delay:-.12s}
.pgs-butterfly-body{fill:none;stroke:#553649;stroke-width:1.5;stroke-linecap:round}
.pgs-effect-lanterns .pgs-particle{top:0!important;animation-name:pgs-lantern-swing;animation-timing-function:ease-in-out;transform-origin:50% 0}
.pgs-effect-lanterns .pgs-particle-shape{width:5cqw;height:auto;min-width:13px;position:relative;margin-top:var(--pgs-cord)}
.pgs-effect-lanterns .pgs-particle-shape:before{content:'';position:absolute;bottom:100%;left:50%;width:1px;height:var(--pgs-cord);background:currentColor}
.pgs-lantern-glass{display:block;height:8cqw;min-height:24px;border:1px solid currentColor;border-radius:40% 40% 28% 28%;background:radial-gradient(ellipse at 50% 60%,#fffbe9 0 12%,#eec65788 40%,transparent 70%);box-shadow:0 0 12px #f3c85c44;position:relative}
.pgs-lantern-glass:after{content:'';position:absolute;top:100%;left:42%;height:2cqw;width:16%;background:currentColor;border-radius:0 0 40% 40%}
.pgs-effect-shooting-stars .pgs-particle{animation-name:pgs-shooting-star}
.pgs-effect-shooting-stars .pgs-particle-shape{width:18cqw;height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,currentColor);box-shadow:2px 0 5px currentColor;transform:rotate(45deg)}
@keyframes pgs-petal-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%,80%{opacity:1}100%{opacity:0;transform:translate(var(--pgs-drift),115cqh) rotate(300deg)}}
@keyframes pgs-heart-rise{0%{opacity:0;transform:translate(0,0) scale(.7)}20%,70%{opacity:1}50%{transform:translate(8cqw,-55cqh) scale(1)}100%{opacity:0;transform:translate(var(--pgs-drift),-118cqh) scale(.8)}}
@keyframes pgs-twinkle{0%,100%{opacity:.05;transform:scale(.35) rotate(0)}50%{opacity:.9;transform:scale(1.2) rotate(30deg)}}
@keyframes pgs-firefly{0%,100%{opacity:.1;transform:translate(0,0)}35%{opacity:.8;transform:translate(5cqw,-7cqh)}65%{opacity:.4;transform:translate(-4cqw,-3cqh)}}
@keyframes pgs-bubble-rise{0%{opacity:0;transform:translate(0,0) scale(.65)}15%,75%{opacity:1}100%{opacity:0;transform:translate(var(--pgs-drift),-120cqh) scale(1.25)}}
@keyframes pgs-confetti-fall{0%{opacity:0;transform:translate(0,0) rotate(0)}8%,90%{opacity:1}100%{opacity:0;transform:translate(var(--pgs-drift),115cqh) rotate(480deg)}}
@keyframes pgs-confetti-flip{to{transform:rotateY(360deg) rotateZ(90deg)}}
@keyframes pgs-butterfly-flight{0%{opacity:0;transform:translate(0,5cqh) rotate(-20deg)}12%,80%{opacity:.85}35%{transform:translate(40cqw,-6cqh) rotate(15deg)}65%{transform:translate(75cqw,4cqh) rotate(-10deg)}100%{opacity:0;transform:translate(125cqw,-8cqh) rotate(10deg)}}
@keyframes pgs-wing-flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.2)}}
@keyframes pgs-lantern-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes pgs-shooting-star{0%,55%{opacity:0;transform:translate(-30cqw,-25cqh)}60%{opacity:.95}80%,100%{opacity:0;transform:translate(60cqw,40cqh)}}

/* Live previews are silent; selecting and dragging remains possible. */
.pgs-editing:not(.pgs-playing) .pgs-layer-content,.pgs-editing.pgs-dragging .pgs-layer-content{animation:none!important}
.pgs-editing:not(.pgs-playing) .pgs-effects,.pgs-editing.pgs-dragging .pgs-effects{display:none}
.pgs-motion-paused .pgs-layer-content,.pgs-motion-paused .pgs-effects *{animation-play-state:paused!important}
.pgs-tabs{grid-template-columns:repeat(4,1fr)}
.pgs-motion-gallery{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 16px}
.pgs-motion-tile{padding:0 0 9px;overflow:hidden;font-size:10px;line-height:1.3;min-width:0;font-weight:600}
.pgs-motion-tile[aria-pressed=true]{border-color:#ad4c74;box-shadow:0 0 0 1px #ad4c74;background:#fbf0f5}
.pgs-motion-sample{display:block;position:relative;height:65px;width:100%;container-type:inline-size;overflow:hidden;background:linear-gradient(140deg,#342b48,#68516b);margin-bottom:8px}
.pgs-motion-tile .pgs-motion-sample:after{content:'A & A';font:25px PGCookie,cursive;color:#fff7;position:absolute;inset:20px 0 0;pointer-events:none}
.pgs-element-sample{background:#f5ebf0;display:grid;place-items:center}
.pgs-motion-tile .pgs-element-sample:after{display:none}
.pgs-element-sample .pgs-layer-content{width:36px;height:36px;object-fit:contain;color:#ae6483;font:32px Georgia,serif}
.pgs-motion-tile .pgs-layer-content{animation-iteration-count:infinite}
.pgs-element-sample img{width:100%;height:100%;object-fit:contain}
.pgs-motion-controls{padding:12px;margin:0 0 18px;border:1px solid #e9ccda;background:#fdf6f9;border-radius:10px;grid-column:1/-1}
.pgs-inspector .pgs-layer-actions{margin-bottom:15px;grid-column:1/-1}
.pgs-motion-controls label{font-size:11px}
.pgs-motion-controls .pgs-subtle{font-size:10px;margin-bottom:0}
.pgs-animation-shortcut{display:block;max-width:390px;width:100%;margin:18px auto 0;color:#944465;background:#fff8fc;border:1px solid #dec3d0;font-size:11px}
.pgs-canvas-actions{display:flex;align-items:center;gap:6px;max-width:390px;margin:0 auto 12px;padding:7px 9px;background:#fff;border:1px solid #e1c4d1;border-radius:8px}
.pgs-canvas-actions span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#8a5c70}
.pgs-canvas-actions button{font-size:10px;padding:5px 9px;min-height:30px}
.pgs-canvas-actions [data-layer=delete]{color:#a5354b;background:#fff0f2;border-color:#ecc3cc}
@media(max-width:600px){.pgs-tabs{grid-template-columns:repeat(4,1fr)}.pgs-motion-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.pgs-motion-tile{font-size:9px}.pgs-canvas-actions{max-width:340px}.pgs-animation-shortcut{max-width:340px}.pgs-motion-controls .pgs-field-pair{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.pgs-layer-content,.pgs-effects *{animation:none!important}.pgs-effects{display:none!important}}