/* Lesson 3 · Narnia ↔ gospel interactive story */
.ns-path{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.ns-path button{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px 5px 5px;font:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer}
.ns-path button b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink)}
.ns-path button.on{border-color:var(--gold-2);background:#FFF6DD;color:#5a3c00}
.ns-path button.on b{background:var(--gold);color:#2a1e00}
.ns-path button.done b{background:var(--teal);color:#fff}
.ns-stage{--rev:0%;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0e1b2e;box-shadow:0 10px 30px rgba(14,27,46,.25);user-select:none;outline:none}
.ns-layer{position:absolute;inset:0}
.ns-layer svg{width:100%;height:100%;display:block}
.ns-g{clip-path:inset(0 0 0 calc(100% - var(--rev)))}
.ns-anim .ns-g{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.ns-anim .ns-handle{transition:left .9s cubic-bezier(.65,0,.35,1)}
.ns-handle{position:absolute;top:0;bottom:0;left:calc(100% - var(--rev));width:4px;margin-left:-2px;background:linear-gradient(#ffe9a8,#e6b450);box-shadow:0 0 14px rgba(255,214,120,.9);cursor:ew-resize;z-index:4;touch-action:none}
.ns-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--gold-2);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ns-tag{position:absolute;top:10px;z-index:3;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.85);color:var(--ink)}
.ns-tag-n{left:10px}.ns-tag-g{right:10px;background:rgba(246,208,122,.92)}
.ns-title{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;background:rgba(14,27,46,.78);color:#fff;font-size:12.5px;padding:5px 14px;border-radius:99px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.ns-title b{color:var(--sun)}.ns-arrow{color:var(--sun)}
.ns-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(0 var(--rev) 0 0)}
.ns-anim .ns-bubbles{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.ns-bub{position:absolute;transform:translate(-50%,-100%) scale(.6);opacity:0;max-width:34%;background:#fff;border:3px solid var(--c);border-radius:16px;padding:7px 11px;font-size:clamp(11px,1.6vw,15px);font-weight:700;line-height:1.4;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.25);transition:all .35s cubic-bezier(.34,1.56,.64,1)}
.ns-bub b{display:block;font-size:.78em;color:var(--c)}
.ns-bub:after{content:'';position:absolute;left:50%;bottom:-12px;margin-left:-9px;border:9px solid transparent;border-top-color:var(--c);border-bottom:0}
.ns-bub.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
.ns-ctrl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.ns-reveal.pulse{animation:nsPulseBtn 1.2s infinite}
@keyframes nsPulseBtn{50%{box-shadow:0 0 0 8px rgba(230,180,80,.35)}}
.ns-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;opacity:.25;filter:grayscale(1);transition:all .5s}
.ns-map.on{opacity:1;filter:none}
.ns-pair{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:8px 10px;font-size:13px;font-weight:700}
.ns-pair .a{flex:1;color:#2f5d8a}.ns-pair .b{flex:1.3;color:#8a5a14}.ns-pair .eq{color:var(--gold-2);font-size:18px}
.ns-verse{margin-top:8px}
/* scene animation */
.ns-snow circle{animation:nsFall linear infinite}
@keyframes nsFall{to{transform:translateY(1000px)}}
.ns-pulse{animation:nsGlow 2.4s ease-in-out infinite}
@keyframes nsGlow{50%{opacity:.55}}
.ns-breathe{animation:nsBreathe 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes nsBreathe{50%{transform:scale(1.025)}}
.ns-bow{transform-box:fill-box;transform-origin:50% 100%;animation:nsBow 3.5s ease-in-out infinite}
@keyframes nsBow{50%{transform:rotate(-3deg) translateY(4px)}}
.ns-rise-up{animation:nsRiseUp 1.6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes nsRiseUp{from{transform:translateY(80px) scale(.8);opacity:0}}
.ns-rays{animation:nsSpin 18s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes nsSpin{to{transform:rotate(360deg)}}
.ns-crack{stroke-dasharray:80;stroke-dashoffset:80;animation:nsDraw 1.2s .4s forwards}
@keyframes nsDraw{to{stroke-dashoffset:0}}
.ns-bloom{animation:nsBloom .8s cubic-bezier(.34,1.56,.64,1) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes nsBloom{from{transform:scale(0)}}
.ns-rise{animation:nsSun 2.4s ease-out both}
@keyframes nsSun{from{transform:translateY(60px);opacity:.3}}
.ns-grow{animation:nsBloom 1.4s .3s cubic-bezier(.34,1.56,.64,1) both;transform-box:fill-box;transform-origin:50% 100%}
.ns-wake{animation:nsWake 2s ease both}
@keyframes nsWake{from{filter:grayscale(1) brightness(.85)}}
.ns-mane{animation:nsMane 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes nsMane{50%{transform:scale(1.03) rotate(2deg)}}
@media (max-width:640px){.ns-stage{aspect-ratio:4/3}.ns-bub{max-width:46%;padding:5px 8px}.ns-handle span{width:36px;height:36px}.ns-title{font-size:11px}}

/* chapter rail wraps instead of running off the edge; bubbles grow on wide screens / projectors */
@media (min-width:641px){ .ns-path{flex-wrap:wrap;overflow-x:visible} }
.ns-bub{font-size:clamp(11px,1.25vw,24px)}
.ns-title{font-size:clamp(11px,1vw,18px)}
.ns-auto.on{background:var(--gold);color:#2a1e00}