/* FILE-SUMMARY: Styles of the scene runtime: letterboxed viewport, art layers, pinned text areas, particle canvases, lights, text areas, object highlight (lit art, halo, outline) and labels, shimmer, reveal, view arrows, lantern, animated elements and the layout of panels, normal, large and full (their look is in theme.css). */

:root {
    --scene-letterbox: #050403;
    --scene-light: #ffc46b;
    --scene-ink: #f3e6cf;
    --scene-panel-edge: #6b5235;
}

html, body.scene-page {
    margin: 0;
    height: 100%;
    background: var(--scene-letterbox);
    overflow: hidden;
}

.scene {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scene-letterbox);
    color: var(--scene-ink);
    font-family: Georgia, "Times New Roman", serif;
    user-select: none;
}

.scene-viewport {
    position: relative;
    overflow: hidden;
    overflow: clip;
}

.scene-world {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    /* View changes and parallax are moved by the script, frame by frame; only the panel blur is a transition. */
    transition: filter 300ms ease;
}

/*
  A layer holds its art and everything on it, and moves as one. Each layer blends its lights and halos with its own
  art only, so the result is the same whether the layer is moving or at rest.
*/
.scene-layer,
.scene-overlay,
.scene-overlay__layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.scene-layer {
    isolation: isolate;
}

.scene-art,
.scene-highlights,
.scene-animations,
.scene-lights,
.scene-texts,
.scene-objects {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.scene-art {
    display: block;
    object-fit: fill;
}

.scene-art[hidden] {
    display: none;
}

/* Only the objects' shapes and things placed in the scene take clicks, so objects on back layers stay clickable. */
.scene-layer,
.scene-art,
.scene-highlights,
.scene-animations,
.scene-lights,
.scene-texts,
.scene-objects,
.scene-particles,
.scene-overlay,
.scene-overlay__layer,
.scene-pinned {
    pointer-events: none;
}

/* Things placed in the scene (the sign-in form at the door) take clicks; the overlay itself doesn't. */
.scene-overlay__layer > * {
    pointer-events: auto;
}

/* Particles: one canvas per layer, placed over the shown view by the script. */
.scene-particles {
    position: absolute;
    display: block;
}

/* Pinned text areas keep their place on the screen: one view's size, scaled with the scene, above every layer. */
.scene-pinned {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    transition: filter 300ms ease;
}

/* Text areas are real text for screen readers but not selectable, like the rest of the scene. */
.scene-text {
    color: var(--scene-ink);
}

/* Lights: soft falloffs added to the light in the art. Their flicker changes only opacity and scale. */

.scene-light {
    position: absolute;
    mix-blend-mode: screen;
    will-change: opacity, transform;
}

/* Halos and outlines brighten what is under them, like the lights. */
.scene-objects {
    mix-blend-mode: screen;
}

@supports (mix-blend-mode: plus-lighter) {
    .scene-light,
    .scene-objects {
        mix-blend-mode: plus-lighter;
    }
}

/* Objects: the focusable shape is the clickable area and carries the thin outline. */

.scene-object {
    pointer-events: visiblePainted;
    fill: transparent;
    stroke: transparent;
    stroke-width: 1.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    outline: none;
    transition: stroke 150ms ease;
}

.scene-object.is-lit,
.scene--reveal .scene-object {
    stroke: rgba(255, 214, 150, 0.85);
}

/*
  Highlight: the art inside the shape, lit by a colour filter, and a wide blurred halo outside it. Hidden ones aren't
  painted at all; showing them changes only opacity.
*/
.scene-highlight,
.scene-halo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
}

.scene-highlight.is-lit,
.scene-halo.is-lit,
.scene--reveal .scene-highlight,
.scene--reveal .scene-halo {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms ease, visibility 0s;
}

.scene-halo__glow {
    stroke: #ffb35c;
    stroke-linejoin: round;
    opacity: 0.55;
}

/* Shimmer: a band of light across the art inside one shape. */
.scene-shimmer {
    visibility: hidden;
}

.scene-shimmer.is-shimmering {
    visibility: visible;
}

/* Label */

.scene-label {
    position: absolute;
    z-index: 2;
    padding: 0.3em 0.8em;
    border: 1px solid var(--scene-panel-edge);
    border-radius: 3px;
    background: rgba(20, 15, 10, 0.88);
    box-shadow: 0 0 12px rgba(255, 180, 90, 0.35);
    color: var(--scene-ink);
    font-size: clamp(14px, 1.1vw, 20px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 150ms ease;
}

.scene-label--below {
    transform: translate(-50%, 0);
}

.scene-label.is-visible {
    opacity: 1;
}

/* Controls */

.scene-arrow,
.scene-lantern {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--scene-panel-edge);
    background: rgba(20, 15, 10, 0.6);
    color: var(--scene-ink);
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.scene-arrow:hover,
.scene-arrow:focus-visible,
.scene-lantern:hover,
.scene-lantern:focus-visible {
    background: rgba(40, 28, 16, 0.85);
    box-shadow: 0 0 14px rgba(255, 180, 90, 0.5);
    outline: none;
}

.scene-arrow {
    top: 50%;
    width: 2.6rem;
    height: 5rem;
    margin-top: -2.5rem;
    border-radius: 4px;
    font-size: 2.4rem;
    line-height: 1;
}

.scene-arrow--previous {
    left: 0.8rem;
}

.scene-arrow--next {
    right: 0.8rem;
}

.scene-arrow[hidden] {
    display: none;
}

.scene-lantern {
    left: 1rem;
    bottom: 1rem;
    width: 3rem;
    height: 3rem;
    padding: 0.45rem;
    border-radius: 50%;
}

.scene-lantern svg {
    width: 100%;
    height: 100%;
}

.scene--reveal .scene-lantern {
    color: var(--scene-light);
    box-shadow: 0 0 18px rgba(255, 196, 107, 0.8);
}

/* Animated elements */

.scene-anim {
    position: absolute;
    display: block;
}

.scene-anim--once {
    background-repeat: no-repeat;
}

.scene-anim--once[hidden] {
    display: none;
}

/* Panels: the scene stays visible behind, still and blurred. */

.scene--panel-open .scene-world,
.scene--panel-open .scene-pinned {
    filter: blur(6px) brightness(0.7);
}

.scene--panel-open .scene-animations {
    visibility: hidden;
}

.scene--panel-open .scene-arrow,
.scene--panel-open .scene-lantern {
    visibility: hidden;
}

.scene-panel {
    width: min(42rem, 90vw);
    max-height: 85vh;
    padding: 0;
}

.scene-panel::backdrop {
    background: rgba(5, 4, 3, 0.35);
}

/* A large panel (the personal locker) takes most of the screen; the scene stays visible around it. */
.scene-panel--large {
    width: min(76rem, 94vw);
    height: 88vh;
    max-height: 88vh;
}

.scene-panel--large .scene-panel__inner {
    height: 100%;
    max-height: 88vh;
}

.scene-panel--large .scene-panel__body {
    flex: 1;
}

/* A full panel (the calculator) nearly fills the window; its contents lay themselves out and scroll in parts. */
.scene-panel--full {
    box-sizing: border-box;
    width: 98vw;
    max-width: 98vw;
    height: 96vh;
    max-height: 96vh;
}

.scene-panel--full .scene-panel__inner {
    max-height: none;
}

.scene-panel--full .scene-panel__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.6rem 0.9rem 0.8rem;
    overflow: hidden;
}

.scene-panel__inner {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.scene-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--scene-panel-edge);
}

.scene-panel__header h2 {
    margin: 0;
}

.scene-panel__close {
    width: 2rem;
    height: 2rem;
    flex: none;
    line-height: 1;
    cursor: pointer;
}

.scene-panel__body {
    padding: 1rem 1.2rem 1.4rem;
    overflow: auto;
}

@media (prefers-reduced-motion: reduce) {
    .scene-world,
    .scene-pinned,
    .scene-object,
    .scene-label {
        transition: none;
    }
}

/* Preview page (administrators only) */

.scene-preview-bar {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #ddd;
    font: 13px system-ui, sans-serif;
}

.scene-preview-bar a {
    color: #ffd38a;
}

.scene-preview-bar [hidden] {
    display: none;
}

.scene-test-panel {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.scene-test-panel dt {
    opacity: 0.7;
}

.scene-test-panel dd {
    margin: 0;
    font-family: Consolas, monospace;
}