/* Additional scene behavior; existing v01 remains unchanged at /. */
.forest-film,.clearing-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);opacity:0;pointer-events:none}
#world[data-renderer=static][data-world=forest] .forest-film[data-ready=true]{opacity:1}
#world[data-renderer=static][data-world=clearing] .clearing-film[data-ready=true]{opacity:1}
@media(max-width:700px){.forest-film,.clearing-film{object-position:75% center}}
.clearing-fallback{background-image:url('../assets/open-plek-kleur-warm-poster-v01.jpg');opacity:0;transition:opacity .65s ease}
#world[data-world=clearing] .clearing-fallback{opacity:1}
#world[data-world=clearing] .light{background:linear-gradient(180deg,#fff1db66,transparent);opacity:.035}
#world[data-world=clearing] .intro{top:26%;max-width:35%}
#world[data-world=clearing] h1{font-size:clamp(43px,4.7vw,73px)}
#world[data-world=forest]{--portal-x:65%;--portal-y:55%}
#world[data-world=forest] .portal-orbit{width:65px;height:65px;background:#ffe6aa22;box-shadow:0 0 48px #ffe2a759}
#world[data-world=forest] .intro{max-width:39%}
#world[data-world=forest] .return-button{bottom:100px}
#world[data-transitioning=true] .seed,#world[data-transitioning=true] .return-button{opacity:0;pointer-events:none}
.portal{transition:opacity .5s,filter .4s}
.seed{position:absolute;left:58%;top:55%;transform:translate(-50%,-50%);width:190px;min-height:170px;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;z-index:3;transition:opacity .4s}
.seed-sphere{display:block;width:102px;height:102px;border-radius:50%;flex:none;margin-top:0}
.seed-copy{font:italic 21px/1.2 Georgia,serif;text-shadow:0 1px 13px #183214;margin-top:10px}
.seed small{font-size:10px;line-height:1.5;letter-spacing:.03em;margin-top:7px;text-shadow:0 1px 12px #001d13}
#world[data-renderer=static] .seed-sphere{background:radial-gradient(circle at 30% 25%,#fff4c4 0,#e8c96c 20%,#946222 53%,#422a12 74%,#e3b65d 97%);box-shadow:0 0 38px #ffdc6040}
.seed:focus-visible{outline-offset:8px;border-radius:40px}
#seed:focus-visible,.portal:focus-visible{outline:0}
.seed:focus-visible .seed-sphere{outline:2px solid #fff0c8;outline-offset:9px}
.portal:focus-visible .portal-orbit{outline:2px solid #fff0c8;outline-offset:7px}
.seed{transform:translate(-50%,-51px)}
.journey-marks{position:absolute;left:5.2%;bottom:91px;display:flex;gap:8px;z-index:3;pointer-events:none}
.journey-marks i{display:block;width:23px;height:2px;background:#e8d6aa40;transition:background .6s,width .6s}
.journey-marks i.visited{background:#f4deb1bb}
.journey-marks i.current{width:35px;background:#fff0c8}
#world[data-world=forest] .journey-marks,#world[data-world=clearing] .journey-marks{bottom:162px}
#world[data-world=clearing] .vignette{background:linear-gradient(180deg,#12141355,transparent 38%,transparent 65%,#12141388),linear-gradient(90deg,#12141338,transparent 58%)}
.eyebrow,h1{transition:opacity .35s}
.credit .nature-credit{margin-top:14px}
.nature-credit span{font-size:10px;line-height:1.8}
@media(max-width:700px){
 #world[data-world=forest]{--portal-x:54%;--portal-y:56%}
 #world[data-world=forest] .intro,#world[data-world=clearing] .intro{top:17%;max-width:88%}
 #world[data-world=clearing] h1{font-size:clamp(39px,11.1vw,53px)}
 .seed{left:50%;top:56%;width:185px;min-height:154px;transform:translate(-50%,-45.5px)}
 .seed-sphere{width:91px;height:91px}
 .seed-copy{font-size:20px}
 .seed small{font-size:9px}
 .journey-marks{left:50%;transform:translateX(-50%);bottom:130px}
 #world[data-world=forest] .journey-marks,#world[data-world=clearing] .journey-marks{bottom:205px}
 #world[data-world=forest] .return-button,#world[data-world=clearing] .return-button{bottom:max(143px,calc(env(safe-area-inset-bottom) + 132px))}
 #world[data-world=forest] .portal-copy small{max-width:190px;text-align:center}
}
@media(prefers-reduced-motion:reduce){.journey-marks i,.clearing-fallback{transition:none}}
.experiment-status{position:fixed;left:5.2%;top:78px;margin:0;font:10px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dec188;pointer-events:none}
.site-return{display:inline-block;margin-top:18px;color:#dec188;font-size:14px;min-height:44px;line-height:44px}
.scene-description{font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e6e5d7;max-width:39ch;margin:20px 0 0;text-shadow:0 1px 12px #00190e}
@media(max-width:700px){.scene-description{font-size:13px;line-height:1.5;max-width:34ch;margin-top:14px}}
@media(max-width:700px) and (max-height:720px){
 #world[data-world=clearing] .intro{top:16%}
 #world[data-world=clearing] h1{font-size:30px}
 #world[data-world=clearing] .scene-description{font-size:11px;line-height:1.45;max-width:36ch}
 .seed{top:52%;width:170px;min-height:138px;transform:translate(-50%,-36px)}
 .seed-sphere{width:72px;height:72px}
 .seed-copy{font-size:17px;margin-top:10px}
 .seed small{font-size:8.5px;margin-top:4px}
}
@media(max-width:700px){.experiment-status{left:24px;top:78px;font-size:9px;letter-spacing:.08em}}


/* Match the restrained saturation when WebGL is unavailable. */
.forest-fallback,.clearing-fallback,.forest-film,.clearing-film{filter:url("bos-kleurreferentie.svg#daylight")}
#world[data-world=forest] .vignette{background:linear-gradient(180deg,#12141366,transparent 45%,transparent 65%,#12141388)}

/* The warm proposal is graded in the media; do not apply the old shader/CSS grade twice. */
#world[data-colour=warm-v07] .forest-fallback,#world[data-colour=warm-v07] .clearing-fallback,#world[data-colour=warm-v07] .forest-film,#world[data-colour=warm-v07] .clearing-film{filter:none}
#world[data-colour-review=true] .controls .control{min-width:0;flex:1;text-decoration:none;white-space:nowrap}
@media(max-width:700px){#world[data-colour-review=true] .controls .control{font-size:10px;padding:10px 11px}#world[data-colour-review=true] .controls{gap:8px}}

/* Silvia kiest hetzelfde brede 16:9-kader als de volledige film; mobiel blijft aangepast. */
@media(min-width:701px){html,body{background:#101a16}body{display:grid;place-items:center;height:100svh;overflow:hidden}#world{width:min(100vw,177.777778svh);height:min(56.25vw,100svh);min-height:0}.experiment-status{position:absolute;left:0;top:54px}}