/* Light and interaction layer. No calculation, submission or network logic. */
.scene-selector { padding: 48px 0 20px; }
.scene-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.scene-heading h2 { margin:0; font-size:clamp(30px,3.4vw,48px); color:var(--forest); font-weight:600; letter-spacing:-.03em; }
.scene-heading p { margin:0; color:var(--muted); font-size:16px; }
.scene-choices { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.scene-choices[hidden] { display:none; }
.scene-choice { display:flex; align-items:center; gap:32px; min-height:52px; padding:14px 22px; border:0; border-radius:999px; background:var(--sage); color:var(--forest); font:inherit; font-weight:550; cursor:pointer; }
.scene-choice[aria-pressed="true"] { background:var(--forest); color:var(--paper); }
.scene-choice svg { flex-shrink:0; }
.scene-choice:focus-visible { outline:3px solid var(--forest); outline-offset:4px; }
.scene-panel { display:grid; grid-template-columns: .92fr 1.08fr; min-height:410px; background:var(--forest); color:var(--paper); border-radius:16px; overflow:hidden; isolation:isolate; }
.scene-panel[hidden] { display:none; }
.scene-panel + .scene-panel { margin-top:24px; }
.scene-ready .scene-panel { margin-top:0; }
.scene-copy { padding:44px; display:flex; flex-direction:column; align-items:start; justify-content:center; position:relative; z-index:1; }
.scene-copy h3 { font-size:clamp(30px,3.4vw,48px); line-height:1.12; letter-spacing:-.03em; margin:0 0 22px; color:var(--paper); max-width:18ch; }
.scene-copy p { font-size:18px; line-height:1.65; color:#e1eadc; max-width:40ch; margin:0 0 32px; }
.scene-link { background:var(--lime); color:var(--deep); gap:20px; }
.scene-link:hover { background:var(--paper); color:var(--deep); }
.scene-link:focus-visible { outline:3px solid var(--lime); outline-offset:5px; }
.scene-picture { position:relative; overflow:hidden; min-height:350px; }
.scene-picture img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.scene-picture::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgb(20 56 46 / .3), transparent 30%); }
.scene-picture::before { content:''; position:absolute; left:0; top:10%; bottom:10%; width:2px; background:var(--lime); opacity:.7; z-index:1; box-shadow:0 0 24px rgb(219 237 167 / .7); }
/* Light beams sit behind text; the foreground remains a solid accessible colour. */
.expressive-beams { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.expressive-beams span { position:absolute; left:7%; top:-45%; width:80px; height:200%; background:linear-gradient(90deg,transparent,rgb(219 237 167 / .1),transparent); transform:rotate(25deg); opacity:.7; }
.expressive-beams span:nth-child(2) { left:32%; width:150px; }
.expressive-image { position:relative; overflow:hidden; }
.expressive-image > .image-sheen { position:absolute; inset:-25%; pointer-events:none; z-index:2; background:linear-gradient(115deg,transparent 30%,rgb(219 237 167 / .28) 49%,transparent 65%); transform:translateX(-100%); opacity:0; }
.image-sheen.is-running { animation:expressive-sheen 1600ms var(--ease) both; }
.reading-light { position:absolute; height:2px; left:0; right:0; bottom:0; transform:scaleX(0); transform-origin:left; background:var(--forest); pointer-events:none; opacity:.55; }
.footer-effects { display:inline-flex; align-items:center; gap:8px; border:1px solid currentColor; border-radius:999px; min-height:44px; padding:9px 16px; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.footer-effects:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.light-response { position:relative; isolation:isolate; overflow:hidden; }
.light-response > .press-light { position:absolute; width:100%; aspect-ratio:1; border-radius:50%; background:rgb(219 237 167 / .28); pointer-events:none; opacity:0; transform:scale(.2); z-index:-1; }
.press-light.is-running { animation:expressive-press 500ms var(--ease); }
@media(prefers-reduced-motion:no-preference) {
 .glow-ambient-running .expressive-beams span { animation:expressive-beam 10000ms ease-in-out infinite alternate; }
 .glow-ambient-running .expressive-beams span:nth-child(2) { animation-delay:-5000ms; }
 .scene-choice svg { transition:transform var(--motion-feedback) var(--ease); }
 .scene-choice[aria-pressed="true"] svg { transform:rotate(-35deg); }
 @keyframes expressive-beam { from { transform:translateX(-80px) rotate(25deg); opacity:.3; } to { transform:translateX(180px) rotate(25deg); opacity:1; } }
 @keyframes expressive-sheen { 0% { opacity:0;transform:translateX(-80%); } 20% { opacity:1; } 100% { opacity:0;transform:translateX(80%); } }
 @keyframes expressive-press { from { opacity:.9;transform:scale(.2); } to { opacity:0;transform:scale(2); } }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .scene-choice { transition:background-color var(--motion-feedback) var(--ease),color var(--motion-feedback) var(--ease); }
 .scene-choice:hover:not([aria-pressed="true"]) { background:var(--lime); }
 .scene-link svg { transition:transform var(--motion-feedback) var(--ease); }
 .scene-link:hover svg { transform:translateX(5px); }
}
.motion-effects-off .expressive-beams,.motion-effects-off .image-sheen,.motion-effects-off .press-light,.motion-effects-off .reading-light,
.motion-keyboard .expressive-beams,.motion-keyboard .image-sheen,.motion-keyboard .press-light { display:none; }
.motion-effects-off .scene-choice svg,.motion-keyboard .scene-choice svg,.motion-effects-off .scene-link svg,.motion-keyboard .scene-link svg { transition:none; transform:none; }
@media(max-width:900px) {
 .scene-copy { padding:32px; }
 .scene-copy h3 { font-size:36px; }
 .scene-choice { gap:16px; padding:13px 18px; }
 .scene-panel { min-height:400px; }
}
@media(max-width:650px) {
 .scene-selector { padding-top:32px; }
 .scene-heading { display:block; margin-bottom:20px; }
 .scene-heading p { margin-top:8px; font-size:14px; }
 .scene-choices { gap:6px; }
 .scene-choice { font-size:14px; padding:12px 14px; gap:6px; min-height:48px; }
 .scene-choice svg { display:none; }
 .scene-panel { display:flex; flex-direction:column; }
 .scene-copy { padding:28px 24px; }
 .scene-copy h3 { font-size:32px; max-width:19ch; margin-bottom:16px; }
 .scene-copy p { font-size:16px; margin-bottom:24px; }
 .scene-link { font-size:14px; padding-inline:20px; gap:12px; max-width:100%; }
 .scene-picture { min-height:240px; aspect-ratio:1.5; }
 .scene-picture::before { left:6%; right:6%; top:0; bottom:auto; width:auto; height:2px; }
 .scene-picture::after { background:linear-gradient(180deg,rgb(20 56 46 / .18),transparent 30%); }
 .expressive-beams span:nth-child(2) { display:none; }
}
@media(max-width:360px) {
 .scene-choice { padding-inline:12px; font-size:14px; }
 .scene-copy { padding:25px 20px; }
 .scene-copy h3 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) {
 .expressive-beams,.image-sheen,.press-light,.reading-light { display:none; }
 .scene-choice,.scene-choice svg,.scene-link svg { transition:none; transform:none; }
}
@media print {
 .scene-choices,.expressive-beams,.image-sheen,.press-light,.reading-light,.footer-effects { display:none; }
 .scene-panel[hidden] { display:grid; }
}

.motion-effects-off .scene-choice,.motion-keyboard .scene-choice { transition:none; }

.motion-keyboard .reading-light { display:none; }