/* The generated clips use a white studio background, matching the page canvas. */
.tadzik-figure { position:absolute; inset:0; }
.tadzik-reference { position:absolute; inset:4% 29%; width:42%!important; height:92%!important; border-radius:90px; opacity:1; }
.tadzik-poster,.tadzik-video-slot,.tadzik-video-slot video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.tadzik-poster { opacity:0; transition:opacity .2s; }
.mascot[data-poster=ready] .tadzik-poster { opacity:1; }
.mascot[data-poster=ready] .tadzik-reference { opacity:0; }
.tadzik-video-slot video { opacity:0; transition:opacity .2s; pointer-events:none; }
.tadzik-video-slot video.is-active { opacity:1; }
.tadzik-reaction { position:absolute; top:18%; right:13%; display:grid; place-items:center; min-width:35px; height:35px; padding:0 9px; border-radius:13px 13px 13px 2px; background:#fff; box-shadow:0 3px 20px #39305510; border:1px solid #efe2c8; color:var(--brand); font-size:20px; font-weight:bold; transform:rotate(8deg); animation:float 3s ease-in-out infinite; z-index:2; }
.mascot[data-state=idle] .tadzik-reaction { opacity:0; }
.mascot[data-state=waving] .tadzik-reaction { font-size:13px; }
.mascot[data-state=happy] .tadzik-reaction { background:#fff0f3; color:#d75574; }
.mascot[data-state=sleeping] .tadzik-reaction { background:var(--blue); color:#fff3c4; }
.mascot[data-state=celebrating] .tadzik-reaction { background:var(--gold); }
/* Only the still fallback breathes. Video is never distorted with CSS. */
.mascot[data-media=reference]:not(.paused) .tadzik-figure { animation:poster-breathe 4s ease-in-out infinite; transform-origin:50% 94%; }
@keyframes poster-breathe { 50% { transform:translateY(-3px); } }
@media(min-width:720px) { .tadzik-reaction { min-width:43px; height:43px; font-size:25px; right:15%; top:22%; } }
@media(prefers-reduced-motion:reduce) { .mascot * { animation:none!important; transition:none!important; } }

/* A small paper assembly above Tadzik's palms accompanies the final 3D gesture. */
.invitation-magic { display:none; position:absolute; left:50%; top:55%; width:1px; height:1px; z-index:3; pointer-events:none; }
.assembling .invitation-magic { display:block; }
.invitation-magic i { position:absolute; left:-22px; top:-30px; width:44px; height:60px; display:grid; place-items:center; border:3px solid #fff; border-radius:6px; background:var(--cream); box-shadow:0 3px 13px #3d285e22; color:var(--brand); font-size:24px; font-style:normal; animation:magic-card 2.1s ease-in-out infinite; --spread:0px; --tilt:0deg; }
.invitation-magic i:first-child { --spread:-37px; --tilt:-16deg; animation-delay:-.15s; background:var(--gold); }
.invitation-magic i:last-child { --spread:37px; --tilt:16deg; animation-delay:-.3s; background:#ffe3d0; }
@keyframes magic-card { 0%,100% { opacity:0; transform:translate(0,25px) rotate(0) scale(.5); } 25%,75% { opacity:1; transform:translate(var(--spread),-13px) rotate(var(--tilt)) scale(1); } }
@media(prefers-reduced-motion:reduce) { .invitation-magic { display:none!important; } }