/* scene.css: the frame for the living night scene at the top of Morel's front page.
 *
 *   <div class="scene" data-scene>
 *     <a href="morel-at-night.png"><img src="preview.png" width="300" height="400" alt="..."></a>
 *   </div>
 *
 * Without JavaScript, or with "reduce motion" set, this is just the still picture in a
 * thin border, 300 pixels wide, exactly as before. Otherwise scene.js lays a canvas over
 * the picture and fades it in. The picture stays underneath, unseen but still there for
 * screen readers and still a link to the full-size drawing.
 *
 * To change how wide the living scene may grow, set --scene-max on .scene (default 24rem).
 */
.scene {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 302px;                 /* the 300px picture plus its border */
    margin: 1.5rem auto;
    border: 1px solid #2b4656;
    background: #0b1224;
    line-height: 0;                   /* no stray gap under the picture */
}
.scene > a { display: block; }
.scene img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;                     /* keeps 3:4 from the width and height attributes */
    margin: 0;
    border: 0;
}
.scene:focus-within {                 /* the link is under the canvas, so the ring goes on the frame */
    outline: 2px solid #e6c27a;
    outline-offset: 3px;
}
.scene a:focus { outline: none; }

.scene__canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;             /* clicks fall through to the link; scene.js listens on the frame */
    opacity: 0;
    transition: opacity 1.2s ease;
}
.scene--live .scene__canvas { opacity: 1; }

/* Room to grow, but only when the scene is really going to be drawn: an enlarged 300px
 * picture would be blurry. Browsers that know the "scripting" query make room before
 * the script runs, so nothing jumps; older ones grow when scene.js adds .scene--live. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .scene { max-width: var(--scene-max, 24rem); }
}
.scene.scene--live { max-width: var(--scene-max, 24rem); }
.scene.scene--static { max-width: 302px; }   /* scene.js gave up (very old browser): stay small and sharp */

@media (prefers-reduced-motion: reduce) {
    .scene__canvas { transition: none; }
}
@media print {
    .scene__canvas { display: none; }
    .scene, .scene.scene--live { max-width: 302px; }
}