.puppet-host #puppet-svg { position: absolute; inset: 0; pointer-events: none; }
.puppet-host #puppet-svg .hit-envelope { pointer-events: auto; }
.puppet-host .kukla-svg, .puppet-host .osmanli-svg,
.ws-puppet .kukla-svg, .ws-puppet .osmanli-svg { position: absolute; right: 4%; bottom: -4%; height: 92%; width: auto; max-width: 46%; overflow: visible; filter: drop-shadow(0 16px 22px rgba(0,0,0,.28)); }
.kukla-svg .viseme { display: none; }
.kukla-svg .mouth-closed { display: inline; }
.puppet-host[data-phase="talk"] .mouth-closed { display: none; }
.puppet-host[data-phase="talk"] .mouth-talk { display: none; }
.puppet-host[data-phase="talk"][data-viseme="a"] .viseme-a,
.puppet-host[data-phase="talk"][data-viseme="e"] .viseme-e,
.puppet-host[data-phase="talk"][data-viseme="o"] .viseme-o,
.puppet-host[data-phase="talk"][data-viseme="mbp"] .viseme-mbp { display: inline; animation: kukla-talk .18s steps(2) infinite; }
.puppet-host[data-phase="happy"] .viseme { display: none; }
.puppet-host[data-phase="happy"] .mouth-smile,
.puppet-host[data-phase="happy"] .viseme-smile { display: inline; }
.kukla-svg .bone-head, .kukla-svg .bone-arm, .kukla-svg .bone-leg, .kukla-svg .bone-forearm, .kukla-svg .bone-shin, .kukla-svg .bone-satchel, .kukla-svg .tassel, .kukla-svg .prop-bell, .kukla-svg .prop-envelope, .kukla-svg .coat-tail { transform-box: fill-box; transform-origin: 50% 0%; }
.kukla-svg .bone-leg.left, .kukla-svg .bone-arm.left { transform-origin: 50% 8%; }
.kukla-svg .bone-leg.right, .kukla-svg .bone-arm.right { transform-origin: 50% 8%; }
.kukla-svg .bone-foot { transform-origin: 20% 40%; transform-box: fill-box; }
.kukla-svg .lid { transform-box: fill-box; transform-origin: 50% 0%; }
.kukla-svg .bone-arm.left { --arm-x: -58px; }
.kukla-svg .bone-arm.right { --arm-x: 58px; }

.puppet-host[data-phase="enter"] .kukla-svg { animation: kukla-enter 1.15s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-character="guvercin"][data-phase="enter"] .kukla-svg { animation: kukla-fly-in 1.15s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-phase="walk"] .bone-body { animation: kukla-bob .8s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .bone-leg.left { animation: kukla-leg-l .8s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .bone-leg.right { animation: kukla-leg-r .8s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .bone-arm.left { animation: kukla-arm .8s ease-in-out infinite reverse; }
.puppet-host[data-phase="walk"] .bone-arm.right { animation: kukla-arm .8s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .bone-satchel { animation: kukla-bag .9s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .tassel { animation: kukla-tassel .7s ease-in-out infinite; }
.puppet-host[data-character="guvercin"][data-phase="walk"] .bone-body { animation: kukla-bob .42s ease-in-out infinite; }
.puppet-host[data-character="guvercin"][data-phase="walk"] .bone-arm.left { animation: kukla-wing-l .32s ease-in-out infinite; }
.puppet-host[data-character="guvercin"][data-phase="walk"] .bone-arm.right { animation: kukla-wing-r .32s ease-in-out infinite; }
.puppet-host[data-character="robot"][data-phase="walk"] .bone-leg.left,
.puppet-host[data-character="robot"][data-phase="walk"] .bone-leg.right { animation-timing-function: steps(2, end); }

.puppet-host[data-phase="ring"] .bone-arm.left { animation: kukla-bell .22s ease-in-out 2; }
.puppet-host[data-phase="ring"] .prop-bell { animation: kukla-bell-prop .22s ease-in-out 2; }
.puppet-host[data-phase="talk"] .moustache { animation: kukla-mustache .4s ease-in-out infinite; }
.puppet-host[data-phase="talk"] .lid { animation: kukla-blink 3.2s ease-in-out infinite; }

.puppet-host[data-phase="present"] .bone-arm.right { animation: kukla-present .7s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-phase="present"] .prop-envelope { animation: kukla-letter .7s cubic-bezier(.16,1,.3,1) both; cursor: pointer; }
.puppet-host[data-phase="wait"] .prop-envelope { animation: kukla-letter-idle 1.4s ease-in-out infinite; cursor: pointer; }
.puppet-host[data-phase="wait"] .bone-body { animation: kukla-bob 2.2s ease-in-out infinite; }
.puppet-host[data-phase="wait"] .lid { animation: kukla-blink 2.8s ease-in-out infinite; }
.puppet-host[data-phase="happy"] .mouth-closed, .puppet-host[data-phase="happy"] .mouth-talk { display: none; }
.puppet-host[data-phase="happy"] .mouth-smile { display: inline; }
.puppet-host[data-phase="happy"] .bone-head { animation: kukla-nod .5s ease-in-out 2; }
.puppet-host[data-phase="exit"] .kukla-svg { animation: kukla-exit 1.2s ease-in both; }
.puppet-host[data-character="guvercin"][data-phase="exit"] .kukla-svg { animation: kukla-fly-out 1.1s ease-in both; }

.puppet-speech { position: absolute; left: 28px; top: 24px; max-width: 340px; margin: 0; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff; font-weight: 800; color: #243b63; box-shadow: var(--shadow); }
.ws-puppet { height: min(520px, 58vh); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 70% 80%, #ffe8b8 0%, #7eb6d9 42%, #1e3a5f 100%); position: relative; }
.ws-puppet .kukla-svg, .ws-puppet .osmanli-svg { right: 8%; height: 96%; max-width: 70%; }
.ws-puppet .ws-static { position: absolute; right: 8%; bottom: 0; height: 88%; max-width: 70%; object-fit: contain; }
.ws-puppet[data-phase="idle"] .bone-body { animation: kukla-bob 3s ease-in-out infinite; }
.ws-puppet[data-phase="idle"] .lid { animation: kukla-blink 3.4s ease-in-out infinite; }
.ws-puppet[data-phase="idle"] .tassel { animation: kukla-tassel 1.8s ease-in-out infinite; }
.ws-puppet[data-character="guvercin"][data-phase="idle"] .bone-arm.left { animation: kukla-wing-l 1.6s ease-in-out infinite; }
.ws-puppet[data-character="guvercin"][data-phase="idle"] .bone-arm.right { animation: kukla-wing-r 1.6s ease-in-out infinite; }

@keyframes kukla-enter { from { transform: translateX(46%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kukla-exit { to { transform: translateX(48%); opacity: 0; } }
@keyframes kukla-fly-in { from { transform: translate(28%, -38%) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kukla-fly-out { to { transform: translate(36%, -42%) rotate(12deg); opacity: 0; } }
@keyframes kukla-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kukla-leg-l { 0%,100% { transform: translate(-28px, 48px) rotate(-18deg); } 50% { transform: translate(-28px, 48px) rotate(18deg); } }
@keyframes kukla-leg-r { 0%,100% { transform: translate(28px, 48px) rotate(18deg); } 50% { transform: translate(28px, 48px) rotate(-18deg); } }
@keyframes kukla-arm { 0%,100% { transform: translate(var(--arm-x, -58px), -8px) rotate(14deg); } 50% { transform: translate(var(--arm-x, -58px), -8px) rotate(-16deg); } }
@keyframes kukla-wing-l { 0%,100% { transform: translate(-58px, -8px) rotate(16deg); } 50% { transform: translate(-58px, -8px) rotate(-58deg); } }
@keyframes kukla-wing-r { 0%,100% { transform: translate(58px, -8px) rotate(-16deg); } 50% { transform: translate(58px, -8px) rotate(58deg); } }
@keyframes kukla-bag { 0%,100% { transform: translate(-70px, 28px) rotate(-6deg); } 50% { transform: translate(-70px, 28px) rotate(8deg); } }
@keyframes kukla-tassel { 0%,100% { transform: translate(28px, -4px) rotate(-12deg); } 50% { transform: translate(28px, -4px) rotate(16deg); } }
@keyframes kukla-bell { 0%,100% { transform: translate(-58px, -8px) rotate(-8deg); } 50% { transform: translate(-58px, -8px) rotate(-48deg); } }
@keyframes kukla-bell-prop { 0%,100% { transform: translate(-2px, 10px) rotate(-10deg); } 50% { transform: translate(-2px, 10px) rotate(28deg); } }
@keyframes kukla-talk { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
@keyframes kukla-mustache { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(2deg); } }
@keyframes kukla-blink { 0%,88%,100% { transform: scaleY(.2); } 92% { transform: scaleY(1); } }
@keyframes kukla-present { to { transform: translate(58px, -8px) rotate(-38deg); } }
@keyframes kukla-letter { to { transform: translate(18px, -18px) scale(1.18); } }
@keyframes kukla-letter-idle { 0%,100% { transform: translate(8px, -6px) translateY(0); } 50% { transform: translate(8px, -6px) translateY(-6px); } }
@keyframes kukla-nod { 0%,100% { transform: translate(0, -78px) rotate(0); } 50% { transform: translate(0, -78px) rotate(8deg); } }
.motion-sakin .puppet-host [class*="bone-"] { animation-duration: 1.6s !important; }
.motion-canli .puppet-host .bone-leg, .motion-cok .puppet-host .bone-leg { animation-duration: .55s !important; }
.motion-canli .puppet-host[data-character="guvercin"] .bone-arm,
.motion-cok .puppet-host[data-character="guvercin"] .bone-arm { animation-duration: .22s !important; }

/* IncrediMail-style painted notifier (raster postman, not stick-figure bones) */
.im-cast { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.im-hero {
  position: absolute; right: 4%; bottom: -6%; height: 92%; width: auto; max-width: 58%;
  object-fit: contain; filter: drop-shadow(0 22px 28px rgba(12, 24, 58, .45));
  transform-origin: 70% 100%;
}
.im-letter {
  position: absolute; right: 38%; bottom: 42%; width: 54px; height: 38px;
  background: linear-gradient(#fff8e8, #f3e0b0); border: 3px solid #e8b923; border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto;
  transform: rotate(-12deg);
}
.im-letter::after {
  content: ""; position: absolute; inset: 4px 6px auto; height: 16px;
  border: 2px solid #d4a017; border-top: 0; transform: perspective(40px) rotateX(-20deg);
}
.im-dust, .im-spark { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.im-dust { width: 22px; height: 14px; background: rgba(232,185,35,.55); filter: blur(1px); bottom: 8%; }
.im-dust.d1 { right: 18%; } .im-dust.d2 { right: 26%; } .im-dust.d3 { right: 12%; }
.im-spark { width: 10px; height: 10px; background: #ffe566; box-shadow: 0 0 10px #e8b923; }
.im-spark.s1 { right: 30%; bottom: 55%; } .im-spark.s2 { right: 22%; bottom: 62%; }

.puppet-host[data-phase="enter"] .im-hero { animation: im-run-in 1.15s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-phase="enter"] .im-dust { animation: im-puff .7s ease-out both; }
.puppet-host[data-phase="walk"] .im-hero,
.puppet-host[data-phase="ring"] .im-hero { animation: im-gallop .55s ease-in-out infinite; }
.puppet-host[data-phase="walk"] .im-dust,
.puppet-host[data-phase="ring"] .im-dust { animation: im-puff .55s ease-out infinite; }
.puppet-host[data-phase="talk"] .im-hero { animation: im-bob 1s ease-in-out infinite; }
.puppet-host[data-phase="present"] .im-hero { animation: im-present .7s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-phase="present"] .im-letter,
.puppet-host[data-phase="wait"] .im-letter { animation: im-letter-fly .7s cubic-bezier(.16,1,.3,1) both; }
.puppet-host[data-phase="wait"] .im-hero { animation: im-bob 2.2s ease-in-out infinite; }
.puppet-host[data-phase="wait"] .im-letter { animation: im-letter-idle 1.2s ease-in-out infinite; cursor: pointer; }
.puppet-host[data-phase="happy"] .im-hero { animation: im-cheer .5s ease-in-out 2; }
.puppet-host[data-phase="happy"] .im-spark { animation: im-spark .8s ease-out both; }
.puppet-host[data-phase="exit"] .im-hero { animation: im-exit 1.1s ease-in both; }
.puppet-host[data-phase="idle"] .im-hero { animation: im-bob 3s ease-in-out infinite; }
.ws-puppet .im-hero { right: 6%; height: 96%; max-width: 78%; }

@keyframes im-run-in {
  from { transform: translateX(72%) translateY(8%) rotate(4deg) scale(.9); opacity: 0; }
  55% { transform: translateX(-4%) translateY(-2%) rotate(-2deg) scale(1.04); opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes im-gallop {
  0%,100% { transform: translateY(0) rotate(-1deg) scaleY(1); }
  50% { transform: translateY(-18px) rotate(2deg) scaleY(.96); }
}
@keyframes im-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes im-present { to { transform: translateX(-8%) scale(1.06); } }
@keyframes im-letter-fly {
  from { transform: translate(40px, 30px) rotate(-18deg) scale(.6); opacity: 0; }
  to { transform: translate(-90px, -70px) rotate(8deg) scale(1.15); opacity: 1; }
}
@keyframes im-letter-idle {
  0%,100% { transform: translate(-90px, -70px) translateY(0); }
  50% { transform: translate(-90px, -70px) translateY(-10px); }
}
@keyframes im-cheer { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08) translateY(-12px); } }
@keyframes im-exit { to { transform: translateX(55%) rotate(6deg); opacity: 0; } }
@keyframes im-puff {
  from { opacity: .8; transform: scale(.4); }
  to { opacity: 0; transform: translateX(-28px) scale(1.6); }
}
@keyframes im-spark {
  from { opacity: 1; transform: scale(.4); }
  to { opacity: 0; transform: translateY(-24px) scale(1.4); }
}

/* IncrediMail Flash trial (Ruffle + 12fps fallback) */
.flash-cast { position: absolute; inset: 0; overflow: hidden; }
.flash-ruffle { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; }
.flash-fallback { position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(circle at 70% 80%, #ffe8b8 0%, #7eb6d9 42%, #1e3a5f 100%);
}
.flash-ruffle.on { opacity: 1; pointer-events: auto; }
.flash-ruffle ruffle-player, .flash-ruffle object, .flash-ruffle embed { width: 100%; height: 100%; }
.flash-dust {
  position: absolute; right: 18%; bottom: 10%; width: 28px; height: 16px;
  background: rgba(255,214,90,.55); filter: blur(1px); border-radius: 50%;
}
.flash-boy {
  position: absolute; right: 8%; bottom: 4%; width: 140px; height: 150px;
  cursor: pointer; pointer-events: auto; transform-origin: 70% 100%;
}
.fl-body {
  position: absolute; left: 18px; top: 28px; width: 96px; height: 68px;
  background: #ffd65a; border: 3px solid #e0a020; border-radius: 10px;
}
.fl-flap {
  position: absolute; left: 6px; top: 4px; width: 84px; height: 22px;
  background: #fff4c8; clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.fl-eye { position: absolute; top: 32px; width: 10px; height: 10px; border-radius: 50%; background: #281c12; }
.fl-eye.a { left: 28px; } .fl-eye.b { right: 28px; }
.fl-smile {
  position: absolute; left: 34px; bottom: 12px; width: 28px; height: 8px;
  border-radius: 0 0 12px 12px; background: #e85a46;
}
.fl-note {
  position: absolute; right: 0; top: 8px; width: 32px; height: 22px;
  background: #fff8e4; border: 2px solid #e8b923; border-radius: 3px;
  transform: rotate(12deg);
}
.fl-leg {
  position: absolute; bottom: 8px; width: 12px; height: 32px; border-radius: 4px; background: #5a3c28;
}
.fl-leg.l { left: 36px; } .fl-leg.r { right: 36px; }

.puppet-host[data-character="flash"][data-phase="enter"] .flash-boy { animation: im-run-in .9s steps(8, end) both; }
.puppet-host[data-character="flash"][data-phase="walk"] .flash-boy,
.puppet-host[data-character="flash"][data-phase="ring"] .flash-boy,
.ws-puppet[data-character="flash"][data-phase="idle"] .flash-boy { animation: flash-walk .5s steps(2, end) infinite; }
.puppet-host[data-character="flash"][data-phase="walk"] .fl-leg.l,
.puppet-host[data-character="flash"][data-phase="ring"] .fl-leg.l,
.ws-puppet[data-character="flash"][data-phase="idle"] .fl-leg.l { animation: flash-leg .25s steps(2, end) infinite; }
.puppet-host[data-character="flash"][data-phase="walk"] .fl-leg.r,
.puppet-host[data-character="flash"][data-phase="ring"] .fl-leg.r,
.ws-puppet[data-character="flash"][data-phase="idle"] .fl-leg.r { animation: flash-leg .25s steps(2, end) infinite reverse; }
.puppet-host[data-character="flash"][data-phase="present"] .fl-note,
.puppet-host[data-character="flash"][data-phase="wait"] .fl-note { animation: im-letter-fly .7s steps(6, end) both; }
.puppet-host[data-character="flash"][data-phase="happy"] .flash-boy { animation: im-cheer .45s steps(4, end) 2; }
.puppet-host[data-character="flash"][data-phase="exit"] .flash-boy { animation: im-exit .8s steps(6, end) both; }
@keyframes flash-walk {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes flash-leg {
  0% { transform: rotate(-28deg); }
  100% { transform: rotate(28deg); }
}