/* CyberBeagles C007: responsive scene-theater animation applied to approved C003 art.
   Motion is decoration layered behind the unchanged character web illustrations. */
.story-stage{background-color:#1c698b;contain:paint}
.story-stage .stage-landscape,.story-stage .stage-symbol{display:none}
.story-set{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene-set-svg{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.03);transform:scale(1.02);transform-origin:center 45%;animation:cbkScenicDrift 22s ease-in-out infinite alternate}
.scene-set-svg .scene-hover{transform-box:fill-box;transform-origin:center center;animation:cbkSceneryHover 6s ease-in-out infinite alternate}
.scene-spark{transform-box:fill-box;transform-origin:center center;animation:cbkSpark 5.3s ease-in-out infinite alternate}
.scene-spark-1{animation-delay:-1.8s}.scene-spark-2{animation-delay:-3.4s}.scene-spark-3{animation-delay:-4.1s}
.story-stage.scene-entry .scene-set-svg{animation:cbkSceneReveal .7s ease-out both,cbkScenicDrift 22s .7s ease-in-out infinite alternate}
.story-stage.scene-entry .stage-actor:not([hidden]){animation:cbkActorEntrance .45s ease-out both,characterBob 3.8s .45s ease-in-out infinite alternate}
.story-stage .stage-actor{transform-origin:center 88%;will-change:transform;transition:filter .22s ease}
.story-stage .stage-actor.is-current-speaker{filter:drop-shadow(0 9px 7px #082e3b55) drop-shadow(0 0 14px #fff5aa7a)}
.story-stage .stage-actor.is-voicing{animation:cbkActorSpeak .43s ease-in-out infinite alternate!important;filter:drop-shadow(0 10px 6px #173e5360) drop-shadow(0 0 18px #fff2a4b8)}
.story-stage .actor-bit.is-voicing{animation:cbkBitSpeak .72s ease-in-out infinite alternate!important}
.story-stage[data-speaker="narrator"].is-voicing:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 44px 3px #faf5ba34;animation:cbkNarratorGlow 4s ease-in-out infinite alternate}
.stage-speaker-marker{position:absolute;z-index:7;width:40px;height:40px;display:grid;place-items:center;background:#fff3bd;border:3px solid #fffef1;box-shadow:0 5px 14px #16465f66;color:#047d91;font-size:26px;font-weight:900;line-height:1;border-radius:50%;pointer-events:none;animation:cbkSpeakerSpark .65s ease-in-out infinite alternate}
.stage-speaker-marker[data-speaker="darwin"]{left:48%;top:34%}.stage-speaker-marker[data-speaker="bit"]{right:13%;top:5%}.stage-speaker-marker[data-speaker="rosie"]{left:8%;top:46%}.stage-speaker-marker[data-speaker="snowie"]{right:5%;top:45%}.stage-speaker-marker[data-speaker="watson"]{right:6%;top:27%}
.stage-choice-signal{position:absolute;z-index:8;right:12px;top:11px;border-radius:17px;padding:10px 14px;background:#fff3d7;color:#124e68;font-size:15px;font-weight:900;box-shadow:0 7px 19px #104a5a43;animation:cbkSpeakerSpark .75s ease-in-out infinite alternate}
.story-stage.awaiting-choice{border-color:#ffe4a1}
.story-stage.mission-finished{border-color:#ffe5a7}
.story-stage.mission-finished .scene-set-svg{filter:saturate(1.18) brightness(1.07)}
.story-line-meter{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:12px;font-weight:850;color:#476e80}
.story-line-meter-track{height:7px;flex:1;min-width:20px;background:#e3f1f0;border-radius:100px;overflow:hidden}
.story-line-meter-fill{height:100%;width:0;background:linear-gradient(90deg,#23aaa9,#f2c56b);border-radius:inherit;transition:width .14s linear}
.story-transcript{position:relative;flex-wrap:wrap}
.story-line-meter{flex:0 0 100%}
.story-controls .story-replay-button{border-color:#dddfb9}
.story-audio-guide{font-size:13px;line-height:1.5;color:#315b70;padding:11px 14px;background:#f0faf2;border-radius:14px;margin:12px 0}
.story-stage .stage-actor.is-current-speaker:not(.is-voicing){filter:drop-shadow(0 10px 6px #154c5366) drop-shadow(0 0 7px #fff3ac77)}
@keyframes cbkScenicDrift{from{transform:scale(1.02) translateX(-1%)}to{transform:scale(1.07) translateX(1%)}}
@keyframes cbkSceneryHover{from{transform:translateY(-5px)}to{transform:translateY(8px)}}
@keyframes cbkSpark{from{opacity:.25;transform:scale(.85)}to{opacity:1;transform:scale(1.25)}}
@keyframes cbkSceneReveal{from{opacity:.5;transform:scale(1.11)}to{opacity:1;transform:scale(1.02)}}
@keyframes cbkActorEntrance{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cbkActorSpeak{from{transform:translateY(1px) rotate(-.6deg) scale(1)}to{transform:translateY(-6px) rotate(.7deg) scale(1.045)}}
@keyframes cbkBitSpeak{from{transform:translateY(2px) rotate(-2deg)}to{transform:translateY(-7px) rotate(2deg)}}
@keyframes cbkNarratorGlow{from{opacity:.35}to{opacity:1}}
@keyframes cbkSpeakerSpark{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.09)}}
@media(max-width:700px){
 .story-stage{height:clamp(235px,68vw,320px)}
 .stage-speaker-marker{width:30px;height:30px;border-width:2px;font-size:19px}
 .stage-choice-signal{font-size:13px;top:9px;right:9px;padding:8px 10px}
 .story-transcript{min-height:0;padding:14px 15px;margin:11px 0;gap:11px}
 .spoken-text p{line-height:1.5;margin-top:6px}
 .story-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .story-controls [data-story-action]{min-height:47px;min-width:0;width:100%;padding:10px 8px;white-space:normal;overflow-wrap:anywhere}
 .story-controls [data-story-action="auto"],.story-controls .story-next-button{grid-column:1/-1;font-size:16px;margin:0;max-width:none}
 .story-controls .story-next-button{min-height:53px}
 .story-line-meter{font-size:11px;margin-top:9px}
 .story-player-note{margin:12px 2px}
}
@media(max-width:375px){
 .story-stage{height:236px}
 .stage-visual-label{max-width:58%}
 .stage-speaker-marker[data-speaker="darwin"]{left:49%;top:42%}
 .stage-speaker-marker[data-speaker="rosie"]{left:5%;top:52%}
 .stage-speaker-marker[data-speaker="snowie"]{right:3%;top:52%}
 .spoken-text p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .scene-set-svg,.scene-set-svg .scene-hover,.scene-spark,.story-stage.scene-entry .scene-set-svg,.story-stage.scene-entry .stage-actor:not([hidden]),.story-stage .stage-actor.is-voicing,.story-stage .actor-bit.is-voicing,.stage-speaker-marker,.stage-choice-signal,.story-stage[data-speaker="narrator"].is-voicing:before{animation:none!important;transition:none!important;transform:none!important}
 .story-line-meter-fill{transition:none!important}
}
/* Keep the episode itself, not a giant masthead, above the fold on phones. */
@media(max-width:700px){
 #view-story .inner-hero{padding:17px 0 23px}
 #view-story .inner-hero .crumb{margin-bottom:11px;font-size:13px}
 #view-story .inner-hero h1{font-size:clamp(29px,7.8vw,41px);line-height:1.08;margin:7px 0}
 #view-story .inner-hero p{font-size:14px;line-height:1.35}
 #view-story .inner-hero .overline{font-size:10px}
 #view-story .story-info-bar{padding:9px 11px;margin-bottom:10px}
}