/* de-Frog's level scenes (scenes.js; Andrew, 11-07): the swamp, 9:16, scaled to fit. The speech bubble, the old
   man's rocking and the frog eyes use the opening's styles (intro.css). Reduced motion (.calm): nothing moves. */
body.scene-on{overflow:hidden}
.lscene{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#05070a;color:#eee4cf;
 -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.lscene-frame{position:relative;width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;overflow:hidden;container-type:inline-size}
.lscene-svg{display:block;width:100%;height:100%}
#lscene-skip{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;min-width:64px;min-height:44px;padding:6px 14px;
 font:700 14px/1 system-ui,sans-serif;color:#eee4cf;background:#211b13cc;border:1px solid #79745b;border-radius:12px;cursor:pointer;z-index:2}
#lscene-skip:focus-visible{outline:3px solid #c5aa70;outline-offset:2px}

/* His longer lines: a slightly smaller bubble font, so it stays clear of his head. */
.lscene .intro-bubble{font-size:clamp(13px,6.2cqw,26px)}

/* From level 30 the old man is gone (Andrew, 11-07): the chair rocks on, empty. */
.lscene.gone .intro-man{display:none}

/* He is awake and talking: eyes open. */
.lscene .intro-awake{opacity:1}
.lscene .intro-sleepy{opacity:0}

/* The camera drifts in slowly for the whole scene, toward him. */
.lscene-cam{transform-box:view-box;transform-origin:170px 380px;animation:lscene-cam var(--secs,10s) ease-in-out forwards}
@keyframes lscene-cam{from{transform:scale(1)}to{transform:scale(1.07)}}

/* Fog drifts, the candle flickers, fireflies blink and wander, the Net from the gods glows. */
.lscene-fog{animation:lscene-fog 9s ease-in-out infinite alternate}
.lscene-fog.f2{animation-duration:11s;animation-direction:alternate-reverse}
@keyframes lscene-fog{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.lscene-flame{transform-box:fill-box;transform-origin:50% 100%;animation:lscene-flicker .45s ease-in-out infinite alternate}
@keyframes lscene-flicker{from{transform:scale(1,1)}to{transform:scale(.85,1.12)}}
.lscene .fl{animation:lscene-firefly 3.4s ease-in-out infinite}
.lscene .fl.b{animation-delay:-1.1s}.lscene .fl.c{animation-delay:-2s}.lscene .fl.d{animation-delay:-.6s}.lscene .fl.e{animation-delay:-2.7s}
@keyframes lscene-firefly{0%,100%{opacity:.15;transform:translate(0,0)}50%{opacity:1;transform:translate(6px,-8px)}}
.lscene-net{transform-box:fill-box;transform-origin:50% 60%;animation:lscene-net 1.6s ease-in-out infinite alternate}
@keyframes lscene-net{from{opacity:.75}to{opacity:1}}

.lscene.calm *,.lscene.calm{animation:none!important;transition:none!important}