/* Dynamic lesson films and Ari's correct-answer battle sequence */
.bit-animated{display:block;background-image:url("assets/bit-animated-sprite.png");background-repeat:no-repeat;background-size:200% 200%;background-position:0 0;aspect-ratio:1;animation:bit-arm-poses 4.8s steps(1,end) infinite,bit-robot-hover 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 12px #00274a4d)}
.bit-welcome.bit-animated{height:auto;width:min(150px,29%);right:2%;bottom:8%;background-color:transparent;border-radius:0}
.bit-actor{width:110px;height:110px;margin:0 auto}
.bit-game{flex:0 0 72px;width:72px;height:72px}.bit-tip-robot{flex:0 0 76px;width:76px;height:76px}
@keyframes bit-arm-poses{0%,19%{background-position:0 0}20%,44%{background-position:100% 0}45%,69%{background-position:0 100%}70%,94%{background-position:100% 100%}95%,100%{background-position:0 0}}
@keyframes bit-robot-hover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.video-stage{position:relative;overflow:hidden;isolation:isolate;background:#071f35;aspect-ratio:16/9}
.video-stage video{width:100%;height:100%;object-fit:cover;transition:filter .5s ease}
.custom-video-badge{position:absolute;z-index:8;left:12px;top:12px;padding:7px 11px;border:1px solid #ffffffaa;border-radius:18px;background:#e21d48e8;color:#fff;font-size:10px;font-weight:900;letter-spacing:.7px;box-shadow:0 5px 16px #001b2f66;pointer-events:none}.video-stage.curated-media video{object-fit:contain}
.video-energy{position:absolute;inset:-35%;pointer-events:none;background:conic-gradient(from 0deg,transparent,#54e9d128,transparent 35%,#47a7ff25,transparent 70%);opacity:0}
.video-ari{position:absolute;z-index:3;left:-16%;bottom:3%;height:40%;filter:drop-shadow(0 8px 8px #001b2f88);opacity:0;pointer-events:none}
.video-bit{position:absolute;z-index:3;right:-15%;top:7%;width:18%;opacity:0;pointer-events:none}.video-bit img{display:none}
.video-cue{position:absolute;z-index:4;left:50%;bottom:11%;transform:translate(-50%,16px);min-width:220px;max-width:76%;padding:9px 16px;border:1px solid #ffffff88;border-radius:22px;background:#061d33d9;color:#fff;text-align:center;font-size:13px;font-weight:800;opacity:0;pointer-events:none;backdrop-filter:blur(6px)}
.video-stage.playing video{animation:film-camera 10s ease-in-out infinite alternate;filter:saturate(1.08) contrast(1.03)}
.video-stage.playing .video-energy{opacity:1;animation:energy-spin 9s linear infinite}
.video-stage.playing .video-ari{animation:ari-enter 9s ease-in-out infinite}
.video-stage.playing .video-bit{animation:bit-enter 8s ease-in-out 1s infinite,bit-arm-poses 4.8s steps(1,end) infinite}
.video-stage.playing .video-cue{animation:cue-pop 3.8s ease-in-out infinite}
.video-stage[data-scene="1"] .video-cue{background:#8a4a0be6}.video-stage[data-scene="2"] .video-cue{background:#7d234ce6}.video-stage[data-scene="3"] .video-cue,.video-stage.complete .video-cue{background:#087e72e8}
@keyframes film-camera{0%{transform:scale(1.01) translateX(-.3%)}50%{transform:scale(1.055) translateX(.5%)}100%{transform:scale(1.025) translateY(-.7%)}}
@keyframes energy-spin{to{transform:rotate(360deg)}}
@keyframes ari-enter{0%,100%{left:-18%;opacity:0;transform:translateY(12px)}12%,40%{left:3%;opacity:1;transform:translateY(0)}50%,90%{left:3%;opacity:1;transform:translateY(-7px)}}
@keyframes bit-enter{0%,100%{right:-18%;opacity:0;transform:rotate(-8deg)}14%,72%{right:4%;opacity:1;transform:rotate(4deg)}82%{right:4%;opacity:1;transform:translateY(-9px)}}
@keyframes cue-pop{0%,100%{opacity:0;transform:translate(-50%,14px)}14%,82%{opacity:1;transform:translate(-50%,0)}}
.battle-character{position:relative}.energy-blaster{position:absolute;z-index:5;left:70%;top:43%;width:76px;height:30px;border-radius:15px 7px 7px 15px;background:linear-gradient(90deg,#1687a1,#72ffe0);border:3px solid #d8fff8;box-shadow:0 0 18px #5affdf;opacity:0;transform:translate(-25px,18px) rotate(-12deg);transform-origin:left center}.energy-blaster:after{content:"";position:absolute;left:14px;top:22px;width:20px;height:27px;border-radius:4px 4px 9px 9px;background:#155b78;transform:rotate(18deg)}.energy-blaster i{position:absolute;right:-16px;top:6px;width:18px;height:12px;background:#fff8a5;clip-path:polygon(0 30%,100% 0,70% 50%,100% 100%,0 70%)}.energy-blaster span{position:absolute;left:26px;top:1px;font-size:16px}.battle-impact{position:absolute;z-index:6;right:20%;top:33%;font-size:20px;opacity:0}.attack .battle-character{animation:ari-charge .82s cubic-bezier(.2,.8,.2,1)}.attack .energy-blaster{animation:draw-blaster .85s ease-out forwards}.attack .battle-impact{animation:impact-burst .8s .42s ease-out forwards}.attack .battle-beam{height:12px;background:linear-gradient(90deg,#7effdf,#fff,#ffd447);box-shadow:0 0 18px #7effdf,0 0 45px #42d9ff;animation:studio-beam .72s .3s ease-out}.attack .battle-enemy{animation:enemy-blast .9s .38s forwards}
@keyframes ari-charge{0%{transform:translateX(0)}35%{transform:translateX(-14px) scale(.96)}60%{transform:translateX(30px) scale(1.05)}100%{transform:translateX(0)}}
@keyframes draw-blaster{0%{opacity:0;transform:translate(-35px,30px) rotate(-35deg)}28%,72%{opacity:1;transform:translate(0,0) rotate(-3deg)}88%{opacity:1;transform:translate(-7px,2px) rotate(-7deg)}100%{opacity:0;transform:translate(-20px,20px) rotate(-18deg)}}
@keyframes impact-burst{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(3.2) rotate(15deg)}100%{opacity:0;transform:scale(5) rotate(-20deg)}}
@keyframes enemy-blast{0%,30%{transform:translateX(0);filter:none}45%{transform:translateX(18px) scale(1.22);filter:brightness(2)}60%{transform:translateX(-13px) rotate(-8deg);filter:brightness(3)}100%{transform:translateX(80px) rotate(35deg) scale(.1);opacity:0;filter:blur(4px)}}
@media(max-width:650px){.video-ari{height:34%}.video-bit{width:22%}.video-cue{font-size:11px;bottom:16%;min-width:180px}.energy-blaster{transform:scale(.82);left:62%}.battle-impact{right:15%}}
@media(prefers-reduced-motion:reduce){.video-stage.playing video,.video-stage.playing .video-energy,.video-stage.playing .video-ari,.video-stage.playing .video-bit,.video-stage.playing .video-cue,.attack *{animation-duration:.01ms!important;animation-iteration-count:1!important}}