:root{color-scheme:dark;font-family:Arial,sans-serif;color:#eee8db;background:#10251e}*{box-sizing:border-box}body{margin:0;overflow:hidden}.woodland,.veil,#scene{position:fixed;inset:0}.woodland{background:linear-gradient(90deg,#081b1680,#0b211940),url('./assets/foret-site-actuel-v84.jpg') center/cover}.veil{background:radial-gradient(ellipse at 50% 43%,#0c241a60,#071911eb 85%)}#scene{z-index:2}canvas{display:block;width:100%;height:100%}.intro{position:fixed;top:6%;left:6%;z-index:3;pointer-events:none}.intro p,.eyebrow{font-size:10px;letter-spacing:.23em;color:#c2a06a}.intro h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(26px,3vw,42px);margin:14px 0 10px}.intro span{font-size:12px;color:#a8b6a8}.welcome{position:fixed;left:8%;top:34%;opacity:0;pointer-events:none}.welcome p{font-size:10px;letter-spacing:.18em}.welcome h2{font-weight:300;font-size:clamp(46px,7vw,108px);letter-spacing:-.055em;line-height:1.05;margin:24px 0}.welcome em{font-family:Georgia,serif;font-weight:400}#logo{position:fixed;z-index:4;opacity:0;border-radius:5%;will-change:transform,opacity;transform-origin:top left;box-shadow:0 12px 42px #06181040}.controls{position:fixed;z-index:6;left:28px;right:28px;bottom:22px;padding:15px 20px;display:flex;gap:25px;align-items:center;justify-content:space-between;border:1px solid #b99a6250;border-radius:18px;background:#0c231fea;backdrop-filter:blur(16px)}.caption{display:flex;flex-direction:column;gap:8px;min-width:225px}#status{font-size:13px}.timeline{max-width:350px;flex:1;display:flex;flex-direction:column;gap:8px}.timeline label{font-size:10px;color:#b7c0b4}.timeline input{width:100%;accent-color:#c2a06a;cursor:pointer}.buttons{display:flex;gap:8px}button,select{font:inherit;font-size:12px;border:1px solid #b89c6b70;border-radius:10px;background:#ffffff08;color:#eee8db;min-height:42px;padding:10px 14px;cursor:pointer}#replay{background:#c2a06a;color:#152c23}button:disabled{opacity:.5;cursor:default}select option{background:#122e24}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #e4c899;outline-offset:4px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.controls{left:12px;right:12px;bottom:12px;flex-wrap:wrap;gap:12px;padding:13px}.caption{min-width:0;flex:1}.timeline{max-width:none;min-width:100%;order:3}.buttons{margin-left:auto}button,select{padding:9px;font-size:11px}.intro{top:5%;left:7%}.intro span{font-size:10px}.intro h1{font-size:27px}#status{font-size:11px}.eyebrow{font-size:8px}.welcome{top:35%}}

/* Motion study: no raster forest, textures, WebGL or volumetric rendering. */
:root{color-scheme:light;color:#283c32;background:#f4f1e9}.woodland{background:#f4f1e9}.veil{display:none}#scene svg{display:block;width:100%;height:100%}.intro p,.eyebrow{color:#8b683b}.intro span{color:#748274}.controls{background:#f8f6eff2;border-color:#c8bba4;color:#283c32}.timeline label{color:#6c796f}button,select{color:#283c32;background:#ffffff80;border-color:#b3b9ae}select option{background:#f4f1e9}#logo{box-shadow:none}.welcome{color:#283c32}

#scene .cylinder-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}#scene svg{position:absolute;inset:0;z-index:2;pointer-events:none}

/* Supplied photograph, displayed 15% shorter relative to its width. */
:root{color-scheme:dark;color:#f6f1e5;background:#14291e}
.woodland{background:linear-gradient(#11241d55,#11241d88),url('./assets/foret-verte-nette-v18.png') center/cover;filter:blur(18px);transform:scale(1.08)}
.intro{padding:18px 22px;border-radius:18px;background:#10251ed9;max-width:330px}
.intro p,.intro span{color:#ddcdaa}.intro h1{font-size:28px}.welcome{color:#fff8e8;z-index:3;text-shadow:0 2px 15px #10251e}

/* Keep the roots visible while operating the animation. */
.controls{top:12px;bottom:auto;left:112px;right:20px}
.intro{top:112px}
@media(max-width:700px){.controls{top:10px;bottom:auto;left:12px;right:12px}.intro{top:170px}}

/* Clean, geometrically even frame for the final white logo. */
#logo{overflow:hidden;background:#fff;border-radius:9%/7%}
#logoImage,#logoReveal{position:absolute;inset:0;width:100%;height:100%;display:block;clip-path:inset(2.7% 3.1% round 7% 5.5%)}
#logoReveal{display:none}
#logo.pixel-reveal{background:transparent}
#logo.pixel-reveal #logoImage{opacity:0}
#logo.pixel-reveal #logoReveal{display:block}
#logo.pixel-reveal::after{opacity:0}
#logo::after{content:"";position:absolute;inset:1.45%;pointer-events:none;border:.55em solid #92702f;border-radius:8%/6.5%;box-sizing:border-box}

/* The closing message remains legible as it crosses the pale forest mist. */
.welcome{padding:27px 66px 31px 32px;border-radius:22px;background:linear-gradient(100deg,rgba(8,29,22,.88) 0%,rgba(8,29,22,.74) 72%,rgba(8,29,22,.28) 100%);box-shadow:0 18px 50px rgba(4,18,13,.24);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
@media(max-width:700px){.welcome{left:5%;right:5%;padding:22px 26px 25px}.welcome h2{font-size:clamp(42px,14vw,72px)}}

/* Interface tone aligned with the darker emerald and bronze live homepage. */
.controls{background:rgba(7,27,21,.86);border-color:rgba(183,145,83,.46);color:#f5f0e5;box-shadow:0 18px 48px rgba(2,13,9,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.controls .eyebrow{color:#c9a66f}.timeline label,#status{color:#e7dfcf}button,select{color:#f5f0e5;background:rgba(255,255,255,.07);border-color:rgba(201,166,111,.45)}select option{background:#10271e;color:#f5f0e5}#replay{background:#b98f55;color:#10251e}

/* Editorial text sits freely over the forest, as on the live homepage. */
.intro,.welcome{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.intro{padding:0;max-width:370px;text-shadow:0 3px 22px rgba(2,14,10,.92),0 1px 3px rgba(2,14,10,.95)}
.welcome{padding:0;max-width:none;text-shadow:0 4px 28px rgba(2,14,10,.96),0 2px 5px rgba(2,14,10,.96)}
@media(max-width:700px){.welcome{left:7%;right:7%;padding:0}.intro{padding:0}}

/* Complete live-site closing composition. */
.welcome{left:5%;top:27%}
.welcome .welcome-kicker{margin:0 0 18px;font-size:10px;letter-spacing:.20em;color:#efe7d5}
.welcome h2{margin:0 0 24px}
.welcome .welcome-copy{margin:0;color:#f1ecdf;font-size:17px;line-height:1.55;letter-spacing:0;text-shadow:0 2px 15px rgba(2,14,10,.95)}
.welcome .welcome-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-width:248px;margin-top:28px;padding:17px 21px;border:1px solid rgba(193,151,86,.72);border-radius:19px;color:#fff8e8;background:#234c3b;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(2,14,10,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:background .25s ease,transform .25s ease}
.welcome .welcome-cta:hover{background:#2d5d49;transform:translateY(-1px)}
.welcome .welcome-cta span{font-size:25px;line-height:.7;font-weight:300}
@media(max-width:700px){.welcome{left:6%;right:6%;top:30%}.welcome .welcome-copy{font-size:15px}.welcome .welcome-cta{min-width:220px}}

/* Public-site integration: the study controls stay out of the final homepage. */
.public-opening .controls,.public-opening .intro{display:none}
.public-opening .welcome{pointer-events:auto}
.public-opening .welcome-cta{pointer-events:auto}
.public-opening .welcome-copy{white-space:pre-line}
.public-opening #openingButton{font-size:14px;line-height:1.2;font-weight:600}
@media(max-width:760px){
 .public-opening .welcome{left:7%;right:7%;top:31%}
 .public-opening .welcome h2{font-size:clamp(48px,15vw,72px)}
 .public-opening #logo{max-width:none}
 .public-opening .welcome-cta{min-width:min(270px,100%);gap:24px}
}

.scroll-hint{position:fixed;z-index:6;bottom:20px;left:50%;transform:translateX(-50%);margin:0;padding:10px 18px;border-radius:30px;background:#10251ed9;color:#e0bd83;font:13px Arial,sans-serif;white-space:nowrap;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scroll-hint{display:none}}

.embedded-opening .welcome-cta{display:none}
.embedded-opening .scroll-hint{bottom:85px}