/* Safar motion system v2 — anticipation, action, overlap, settle.
   Every scene plays once; idle motion never repeats a reminder. */
.safar-theatre{margin:0 0 28px;padding:28px;border:1px solid #a3b99636;border-radius:30px;background:linear-gradient(135deg,#18332e,#152824 60%,#26392d)}
.theatre-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.theatre-heading h2{font:30px/1.2 Georgia,serif;margin:7px 0}.theatre-heading>span{font-size:12px;color:#afc59c;white-space:nowrap}
.theatre-layout{display:grid;grid-template-columns:minmax(230px,1fr) minmax(220px,1fr);gap:28px}.theatre-widget{border:1px solid #9eb39950;border-radius:30px;overflow:hidden;background:#102b2a;box-shadow:0 18px 44px #0002,inset 0 1px #e5f1cb12;align-self:start}
.safar-stage{--scene-length:4.8s;position:relative;height:290px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 76% 16%,#56776a60,transparent 44%),linear-gradient(165deg,#132d38,#22433e 72%,#39584a);border-radius:28px 28px 0 0}
.scene-night{position:absolute;inset:0;background:radial-gradient(ellipse at 51% 90%,#b1c28f12,transparent 52%);pointer-events:none}.scene-night:after{content:'';position:absolute;right:20%;top:35px;width:24px;height:24px;border-radius:50%;box-shadow:6px 3px #d9e6b1;transform:rotate(-20deg);opacity:.75}
.scene-night:before{content:'';position:absolute;left:15%;top:37px;width:2px;height:2px;border-radius:50%;background:#f4e3b8;opacity:.35;box-shadow:48px -9px #f4e3b8,105px 12px #f4e3b8,164px -14px #f4e3b8,25px 47px #f4e3b8,208px 45px #f4e3b8,135px 67px #f4e3b8}
.scene-spark{position:absolute;color:#e6d5a477;font-size:10px;pointer-events:none}.scene-spark.s1{left:21%;top:54px}.scene-spark.s2{right:15%;top:110px}
.scene-floor{position:absolute;bottom:-47px;left:-20%;width:140%;height:122px;border-radius:50%;background:linear-gradient(170deg,#a2af7b20,#24483e08);transform:rotate(-7deg);border-top:1px solid #bac99512;pointer-events:none}.scene-floor:after{content:'';position:absolute;width:125px;height:13px;left:calc(50% - 63px);top:48px;border-radius:50%;background:#092a2945;filter:blur(3px);transform:rotate(7deg)}
.scene-actor{position:absolute;width:220px;height:220px;left:calc(50% - 110px);bottom:11px;transform-origin:50% 90%;animation:actor-arrive 1.6s cubic-bezier(.2,.65,.25,1) both}
.safar-stage .safar-character{width:100%;height:100%;animation:none}.safar-stage .safar-shadow{opacity:0}.safar-stage .safar-character *{animation-iteration-count:1!important}
.scene-hit{position:absolute;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:8;min-width:44px;min-height:44px;padding:0}.scene-hit:focus-visible{outline:2px dashed #f8da92;background:#fff1}.hit-nose{left:40%;top:48%;width:22%;height:22%}.hit-ear{left:13%;top:2%;width:25%;height:35%}.hit-lantern{left:62%;top:74%;width:27%;height:25%}
.scene-caption{padding:0 22px 22px;text-align:center;background:linear-gradient(#294b3d00,#132b2e);position:relative}.scene-caption p{padding:19px 0 15px;margin:0;font:21px/1.4 Georgia,serif;min-height:95px;color:#eaf2df}.scene-caption .primary{font-size:13px;justify-content:center}
.scene-list{display:grid;gap:7px}.scene-list button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #87a88e28;background:#142d2677;border-radius:13px;padding:13px 12px;font-size:12px;color:#cedbc7;min-height:46px;transition:border-color .18s,background .18s}.scene-list button[aria-pressed=true]{border-color:#cce4a4;background:#a3c98a1a;color:#e2f2ce}.scene-list button span{font-size:10px;color:#90a788;letter-spacing:1px}.scene-list button b{margin-left:auto;color:#d8eab6}.scene-tools{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.scene-tools button{font-size:11px;padding:10px 12px}.theatre-note{font-size:11px;line-height:1.7;color:#93aa9c;margin:22px 0 0}
.scene-fog,.scene-zip,.scene-rope,.prop-scroll,.scene-clapper,.prop-loading,.scene-confetti{display:none}
/* Curiosity → small squash against glass → embarrassed recovery. */
.scene-glass:after{content:'';position:absolute;inset:12px;border-radius:22px;border-top:1px solid #f6ffe514;border-left:1px solid #f6ffe509;pointer-events:none}
.scene-glass .scene-actor{animation:glass-press var(--scene-length) cubic-bezier(.4,0,.25,1) both}.scene-glass .safar-head{transform-origin:130px 150px;animation:nose-squash var(--scene-length) ease-in-out both}.scene-glass .safar-ear-right{animation:glass-ear var(--scene-length) ease-in-out both}.scene-glass .scene-fog{display:block;position:absolute;width:57px;height:23px;border-radius:50%;background:#d9f3e326;left:82px;top:137px;filter:blur(6px);animation:fog-wipe var(--scene-length) both;pointer-events:none}
/* The scroll is the gag; the character reacts without a violent full-body spin. */
.scene-scroll .prop-scroll{display:grid;gap:8px;position:absolute;left:calc(50% - 65px);top:149px;width:130px;padding:16px;background:linear-gradient(90deg,#d3c28f,#f2e5bf 15%,#e7d8aa 85%,#c7b47f);color:#314437;border-radius:4px;box-shadow:0 5px 10px #092a2926,inset 0 1px #fff8;transform-origin:top;animation:scroll-unroll 5.2s cubic-bezier(.3,0,.3,1) both;pointer-events:none}.prop-scroll:before,.prop-scroll:after{content:'';position:absolute;left:-5px;right:-5px;height:7px;background:linear-gradient(#f5e7bd,#c8b77f);border-radius:8px;top:-3px}.prop-scroll:after{top:auto;bottom:-3px}.prop-scroll i{height:2px;background:#84916b55;border-radius:2px}.prop-scroll i:nth-child(2){width:87%}.prop-scroll i:nth-child(3){width:93%}.prop-scroll b{font:16px Georgia,serif;text-align:center}.scene-scroll .scene-actor{animation:scroll-stumble 5.2s cubic-bezier(.35,0,.25,1) both}.scene-scroll .safar-head{animation:scroll-read 5.2s ease-in-out both;transform-origin:130px 180px}
.scene-spy .scene-rope{display:block;position:absolute;top:-5px;left:50%;height:140px;width:2px;background:repeating-linear-gradient(15deg,#b5a479 0 3px,#e2cea1 3px 6px);animation:rope-exit 5.2s both;transform-origin:top}.scene-spy .scene-actor{animation:spy-drop 5.2s cubic-bezier(.35,0,.3,1) both;transform-origin:50% 23%}.scene-spy .safar-scarf-tail{animation:spy-scarf 5.2s ease both}
.scene-peek .scene-actor{animation:peek-up 5s cubic-bezier(.35,0,.25,1) both}.scene-peek .safar-ear-left{animation:peek-ear 5s ease both}.scene-peek .safar-head{animation:peek-look 5s ease both;transform-origin:130px 180px}.scene-peek .scene-zip{display:block;position:absolute;left:13%;right:13%;height:5px;border-top:2px dashed #b6b08266;bottom:35px;animation:zip-open 5s ease both;z-index:3;pointer-events:none}
/* A drowsy stretch replaces the old stepped clip-path reveal. */
.scene-loading .scene-actor{animation:load-pieces 5.2s cubic-bezier(.4,0,.25,1) both}.scene-loading .safar-head{animation:sleepy-stretch 5.2s ease both;transform-origin:130px 180px}.scene-loading .safar-ear-left{animation:sleepy-ear 5.2s ease both}.scene-loading .safar-ear-right{animation:sleepy-ear 5.2s .09s ease both}.scene-loading .prop-loading{display:block;position:absolute;left:32px;right:32px;top:25px;text-align:center;font-size:10px;letter-spacing:.03em;color:#d3dfbd;animation:loading-hide 5.2s both}.prop-loading i{display:block;margin:9px auto 0;width:100%;height:2px;border-radius:3px;background:#c4dca0;transform-origin:left;animation:load-bar 4.2s cubic-bezier(.4,0,.2,1) both}
.scene-director .scene-clapper{display:flex;position:absolute;left:calc(50% - 66px);bottom:30px;width:132px;height:69px;padding:17px 9px 9px;flex-direction:column;gap:7px;background:linear-gradient(145deg,#34413d,#172824);border:1px solid #aeb9a4;border-radius:5px;text-align:center;box-shadow:0 7px 15px #092a2933;animation:clapper-enter 4.6s cubic-bezier(.3,0,.25,1) both;pointer-events:none}.scene-clapper span{position:absolute;height:14px;left:0;right:0;top:-7px;background:repeating-linear-gradient(135deg,#dce1cf 0 14px,#293a32 14px 28px);border-radius:2px;transform-origin:5px 10px;animation:clapper-snap 4.6s both}.scene-clapper small{font-size:7px;letter-spacing:1.5px;color:#a8baa3}.scene-clapper b{font-size:11px;color:#e4e7da}.scene-director .safar-head{animation:director-nod 4.6s ease both;transform-origin:130px 180px}
.scene-joy .scene-actor{animation:joy-leap 4.8s cubic-bezier(.3,0,.3,1) both}.scene-joy .safar-tail{animation:joy-tail 4.8s ease both!important}.scene-joy .safar-ear-left,.scene-joy .safar-ear-right{animation:joy-ears 4.8s ease both}.scene-joy .safar-scarf-tail{animation:joy-scarf 4.8s ease both}.scene-joy .scene-confetti{display:block;position:absolute;top:29%;left:15%;right:15%;color:#f1dca3;font-size:23px;text-align:center;letter-spacing:7px;animation:joy-stars 4.8s both;pointer-events:none}.scene-confetti i{color:#8ac7b8;font-style:normal}
.scene-light{position:absolute;inset:0;background:radial-gradient(circle at 65% 75%,#fff1ba75,transparent 65%);opacity:0;pointer-events:none}.reaction-nose .scene-actor{animation:touch-bounce .9s both!important}.reaction-nose .safar-head{animation:touch-nose .9s both!important;transform-origin:130px 150px}.reaction-ear .scene-actor{animation:ear-wobble 1.1s both!important;transform-origin:50% 80%}.reaction-ear .safar-ear-left{animation:ear-fold 1.1s both!important}.reaction-lantern .scene-light{animation:lantern-open .65s both}
@keyframes actor-arrive{0%{transform:translateY(48px);opacity:0}70%{transform:translateY(-3px);opacity:1}100%{transform:none;opacity:1}}
@keyframes glass-press{0%{transform:translateY(23px) scale(.9)}18%{transform:translateY(0) scale(1)}32%{transform:translateY(1px) scale(.99)}48%,63%{transform:translateY(7px) scale(1.12)}77%{transform:translateY(-2px) scale(.98)}90%,100%{transform:none}}
@keyframes nose-squash{0%,34%,100%{transform:none}49%,62%{transform:scale(1.045,.96)}77%{transform:rotate(-3deg)}90%{transform:rotate(.5deg)}}
@keyframes glass-ear{0%,64%,100%{transform:none}76%{transform:rotate(7deg)}84%{transform:rotate(-3deg)}92%{transform:rotate(1deg)}}
@keyframes fog-wipe{0%,39%,100%{opacity:0;transform:scale(.7)}50%,62%{opacity:1;transform:scale(1)}80%{transform:translateY(-8px) scale(1.3);opacity:0}}
@keyframes scroll-unroll{0%,18%{transform:scaleY(.03);opacity:0}22%{opacity:1}45%{transform:scaleY(1.42)}55%{transform:scaleY(1.32)}66%{transform:scaleY(1.36)}82%{transform:scaleY(.69)}91%,100%{transform:scaleY(.72)}}
@keyframes scroll-stumble{0%,20%,100%{transform:none}43%{transform:translateX(-8px) rotate(-4deg)}57%{transform:translateX(5px) rotate(2deg)}73%{transform:translateX(-2px) rotate(-.6deg)}88%{transform:none}}
@keyframes scroll-read{0%,22%,100%{transform:none}42%{transform:rotate(4deg) translateY(3px)}65%{transform:rotate(-4deg)}86%{transform:none}}
@keyframes spy-drop{0%{transform:translateY(-245px) rotate(180deg)}30%{transform:translateY(110px) rotate(177deg)}41%{transform:translateY(101px) rotate(183deg)}53%{transform:translateY(105px) rotate(180deg)}68%{transform:translateY(-26px) rotate(9deg)}78%{transform:translateY(4px) rotate(-2deg) scaleY(.97)}88%,100%{transform:none}}
@keyframes rope-exit{0%{transform:scaleY(0);opacity:1}30%,53%{transform:scaleY(1);opacity:1}68%,100%{transform:scaleY(0);opacity:0}}
@keyframes spy-scarf{0%,55%{transform:rotate(17deg)}72%{transform:rotate(-17deg)}85%{transform:rotate(5deg)}100%{transform:none}}
@keyframes peek-up{0%,10%{transform:translateY(210px)}26%{transform:translateY(142px)}40%{transform:translateY(146px)}57%{transform:translateY(142px)}77%{transform:translateY(-5px)}87%{transform:translateY(2px)}100%{transform:none}}
@keyframes peek-ear{0%,26%,100%{transform:none}38%{transform:rotate(-9deg)}48%{transform:rotate(3deg)}57%{transform:none}80%{transform:rotate(4deg)}90%{transform:rotate(-1deg)}}
@keyframes peek-look{0%,27%,100%{transform:none}39%{transform:rotate(-4deg)}55%{transform:rotate(4deg)}71%{transform:none}}
@keyframes zip-open{0%,14%{transform:scaleX(.05);opacity:0}20%{opacity:1}55%{transform:scaleX(.9);opacity:.7}78%,100%{transform:scaleX(1);opacity:0}}
@keyframes load-pieces{0%{transform:translateY(16px) scale(.98);opacity:.65}24%{transform:translateY(8px);opacity:1}48%{transform:translateY(-7px) scale(.98,1.025)}66%{transform:translateY(3px) scale(1.015,.985)}82%,100%{transform:none;opacity:1}}
@keyframes sleepy-stretch{0%,20%{transform:rotate(-6deg) translateY(4px)}46%{transform:rotate(2deg) translateY(-5px)}65%{transform:rotate(-1deg)}85%,100%{transform:none}}
@keyframes sleepy-ear{0%,20%{transform:rotate(-8deg)}50%{transform:rotate(5deg)}66%{transform:rotate(-2deg)}85%,100%{transform:none}}
@keyframes load-bar{0%{transform:scaleX(0)}35%{transform:scaleX(.32)}58%{transform:scaleX(.48)}100%{transform:scaleX(1)}}
@keyframes loading-hide{0%,72%{opacity:1}88%,100%{opacity:0}}
@keyframes clapper-enter{0%,12%{transform:translateY(110px) rotate(4deg);opacity:0}33%{transform:translateY(-3px) rotate(-1deg);opacity:1}43%,100%{transform:none;opacity:1}}
@keyframes clapper-snap{0%,48%{transform:rotate(-22deg)}55%{transform:rotate(1deg)}59%{transform:rotate(-4deg)}65%,100%{transform:none}}
@keyframes director-nod{0%,52%,100%{transform:none}61%{transform:translateY(3px) rotate(-2deg)}74%{transform:translateY(-1px) rotate(1deg)}86%{transform:none}}
@keyframes joy-leap{0%,18%,100%{transform:none}29%{transform:translateY(7px) scale(1.035,.95)}44%{transform:translateY(-54px) rotate(-3deg) scale(.99,1.02)}52%{transform:translateY(-58px) rotate(-2deg)}64%{transform:translateY(4px) scale(1.035,.95)}73%{transform:translateY(-7px) scale(.995,1.005)}83%{transform:translateY(1px)}93%{transform:none}}
@keyframes joy-tail{0%,16%,100%{transform:none}24%{transform:rotate(12deg)}31%{transform:rotate(-10deg)}39%{transform:rotate(11deg)}47%{transform:rotate(-9deg)}58%{transform:rotate(6deg)}71%{transform:rotate(-4deg)}86%{transform:rotate(1deg)}}
@keyframes joy-ears{0%,20%,100%{transform:none}34%{transform:rotate(-5deg)}51%{transform:rotate(5deg)}67%{transform:rotate(-4deg)}79%{transform:rotate(2deg)}89%{transform:none}}
@keyframes joy-scarf{0%,28%,100%{transform:none}48%{transform:rotate(13deg)}65%{transform:rotate(-8deg)}80%{transform:rotate(3deg)}}
@keyframes joy-stars{0%,34%,100%{opacity:0;transform:scale(.7)}47%{opacity:.9;transform:translateY(-13px) scale(1)}76%{opacity:0;transform:translateY(18px) scale(1.2)}}
@keyframes touch-bounce{0%,100%{transform:none}26%{transform:translateY(1px) scale(1.02,.99)}56%{transform:translateY(-2px) scale(.995,1.01)}78%{transform:translateY(.5px)}}
@keyframes touch-nose{0%,100%{transform:none}24%{transform:scale(1.055,.96)}53%{transform:scale(.985,1.01)}78%{transform:scale(1.005,.997)}}
@keyframes ear-wobble{0%,100%{transform:none}28%{transform:rotate(-2deg)}55%{transform:rotate(1deg)}78%{transform:rotate(-.3deg)}}
@keyframes ear-fold{0%,100%{transform:none}28%{transform:rotate(-16deg) scaleY(.94)}50%{transform:rotate(5deg)}69%{transform:rotate(-2deg)}86%{transform:rotate(.5deg)}}
@keyframes lantern-open{0%{opacity:0}100%{opacity:1;transform:scale(1.05)}}
.scene-still *{animation:none!important}.scene-still .scene-actor{transform:none;opacity:1;clip-path:none}.scene-still .scene-fog,.scene-still .scene-zip,.scene-still .scene-rope,.scene-still .prop-loading,.scene-still .scene-confetti{display:none}.scene-still .prop-scroll{transform:scaleY(.72)}
.home-avatar{overflow:hidden;padding:0!important}.home-avatar .safar-stage{height:70px;width:70px;border-radius:18px}.home-avatar .scene-actor{width:70px;height:70px;left:0;bottom:0;animation:none!important}.home-avatar .scene-spark,.home-avatar .scene-night:after,.home-avatar .scene-floor,.home-avatar .prop-scroll,.home-avatar .scene-clapper,.home-avatar .prop-loading,.home-avatar .scene-zip,.home-avatar .scene-rope,.home-avatar .scene-fog{display:none!important}.home-avatar .safar-character *{animation:none!important}
.e-widget-example .safar-stage{height:150px}.e-widget-example .scene-actor{width:145px;height:145px;left:calc(50% - 72px)}
@media(max-width:650px){.safar-theatre{padding:18px;border-radius:24px}.theatre-layout{grid-template-columns:1fr;gap:18px}.theatre-heading h2{font-size:25px}.theatre-widget{max-width:390px;width:100%;margin:auto}.safar-stage{height:280px}.scene-list{grid-template-columns:1fr 1fr;gap:6px}.scene-list button{font-size:11px;padding:10px;gap:6px}.scene-list button span{display:none}.scene-caption p{font-size:20px}}
@media(prefers-reduced-motion:reduce){.safar-stage *{animation:none!important;transition:none!important}.scene-actor{transform:none!important;clip-path:none!important;opacity:1!important}.scene-rope,.scene-zip,.prop-loading,.scene-fog,.scene-confetti{display:none!important}.prop-scroll{transform:scaleY(.72)}}