/* scene.css — the box, the bleeding canvas and the labels of scene.js */
.scene { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / .92; margin-inline: auto; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.scene > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; }
html.js .scene { opacity: 0; transition: opacity 1.2s var(--ease-out, ease) .1s; }
html.js .scene.is-ready { opacity: 1; }
/* the still image (qa.py stills) includes the faded bleed: these numbers are the ones qa.py prints for a 1 / .92 box */
.scene__still { position: absolute; left: -16.5%; top: -18%; width: 133%; height: 136%; max-width: none; display: none; pointer-events: none; }
html:not(.js) .scene__still { display: block; }   /* no JavaScript: a still image of the scene */
/* the column beside / above keeps over the scene's soft overflow */
.hero__copy { position: relative; z-index: 1; }

/* labels: the outer span is a point moved by the runtime; the inner box sits beside it (side class) */
.scene__label { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; will-change: transform; }
.scene__in { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; width: max-content; white-space: nowrap;
  opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .55s var(--ease-out, ease); transform: translate(14px, -50%); }
.scene__label.is-on .scene__in { opacity: 1; pointer-events: auto; }
.scene__label.is-flip .scene__in { opacity: 0; transition: none; }   /* changing side: gone two frames, then fades in */
.scene__label.is-yield .scene__in { opacity: 0; pointer-events: none; }  /* no free room: steps back until there is */
.scene__label--l .scene__in { flex-direction: row-reverse; transform: translate(calc(-100% - 14px), -50%); }
.scene__label--t .scene__in { transform: translate(-50%, calc(-100% - 12px)); }   /* same row layout on every side: */
.scene__label--b .scene__in { transform: translate(-50%, 12px); }                    /* its size never changes when it moves */
.scene__in b { font: italic 400 22px/1 var(--font-serif, Georgia, serif); color: #fff; }
.scene__in i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(235, 244, 255, .7);
  text-shadow: 0 0 10px rgba(2, 8, 20, .95), 0 0 3px rgba(2, 8, 20, .9); transition: color .3s; }
.scene__label.is-active i { color: var(--accent, #39c6ff); }
@media (prefers-reduced-motion: reduce) { .scene__in { transition: none; } }