/*
 * scroll.css
 *
 * Ergänzung zu styles.css für die Bühne auf index.html: das Durchschalten der
 * Fragmente durch Scrollen (siehe scroll.js). Nur die Bühne steht hier; alles,
 * was auch die Textseiten brauchen - Schrift, Menü, Weichzeichner hinter dem
 * Menü, .missing, .figure, .figure-canvas und das Wesen - kommt aus
 * styles.css, das vorher geladen wird.
 *
 * Aufbau:
 *   #scroller   unsichtbarer Scrollbereich, fensterfüllend, rastet ein
 *     #track    die Strecke: --slots Plätze hoch (scroll.js setzt --slots)
 *       #layers klebt oben am Fenster (sticky), enthält die Ebenen
 *         .layer  eine je Fragment, fensterfüllend; .static steht,
 *                 .cover gleitet darüber (transform von scroll.js)
 *       .slot   leere Plätze, je genau eine Fensterhöhe, hier rastet der
 *               Browser ein (scroll-snap), einen je Scrollvorgang
 */

body.page-scroll {
    overflow: hidden;
    overscroll-behavior: none;
}

/* --- Scrollbereich und Strecke ------------------------------------------ */

#scroller {
    position: fixed;
    inset: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: none;
    touch-action: pan-y; /* der Finger scrollt senkrecht; auf der Figur zeichnet er (touch-action: none) */
    background-color: white;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: none; /* keine Bildlaufleiste */
}

#scroller::-webkit-scrollbar {
    display: none;
}

#track {
    position: relative;
    height: calc(var(--slots, 1) * 100%);
}

.slot {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--k, 0) * 100% / var(--slots, 1));
    height: calc(100% / var(--slots, 1));
    scroll-snap-align: start;
    scroll-snap-stop: always; /* nie über einen Platz hinweg: ein Fragment je Scrollvorgang */
}

/* --- Ebenen ------------------------------------------------------------- */

#layers {
    position: sticky;
    top: 0;
    height: calc(100% / var(--slots, 1)); /* eine Fensterhöhe */
    overflow: hidden;
    z-index: 1;
    background-color: white;
}

.layer {
    position: absolute;
    inset: 0;
    visibility: hidden; /* nur die beteiligten Ebenen sind sichtbar (scroll.js) */
    background-color: white;
    cursor: default;
}

.layer.static {
    visibility: visible;
    z-index: 1;
}

.layer.cover {
    visibility: visible;
    z-index: 2;
    will-change: transform;
}

#layers img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* größtmöglich, keine Freifläche, Ränder werden beschnitten */
    object-position: center;
    -webkit-user-drag: none;
}

/* --- Bildunterschrift je Ebene: wandert mit ihr ----------------------------
   Gleiche Schrift, gleicher Rand und gleiche Farbregel wie das Menü, aber
   nicht am Fenster befestigt, sondern in der Ebene: weiß und
   mit Weichzeichner über einem geladenen Foto (.layer.photo), sonst schwarz.
   Der Weichzeichner ist derselbe wie in styles.css (dort erklärt). */

.layer-caption {
    position: absolute;
    left: var(--gap);
    bottom: var(--gap);
    z-index: 1;
    margin: 0;
    max-width: calc(100% - 2 * var(--gap));
    color: black;
    pointer-events: none;
}

.layer-caption a {
    pointer-events: auto;
}

.layer.photo .layer-caption {
    color: white;
}

.layer.photo .layer-caption::before {
    --field-x: 2em;
    --field-y: 2em;
    content: "";
    position: absolute;
    inset: calc(-1 * var(--field-y)) calc(-1 * var(--field-x));
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px) brightness(var(--dim));
    backdrop-filter: blur(2px) brightness(var(--dim));
    -webkit-mask-image:
        linear-gradient(to right,
            transparent calc(var(--field-x) - var(--reach-x)),
            black calc(var(--field-x) - var(--reach-x) + var(--fade-x)),
            black calc(100% - var(--field-x) + var(--reach-x) - var(--fade-x)),
            transparent calc(100% - var(--field-x) + var(--reach-x))),
        linear-gradient(to bottom,
            transparent calc(var(--field-y) - var(--reach-y)),
            black calc(var(--field-y) - var(--reach-y) + var(--fade-y)),
            black calc(100% - var(--field-y) + var(--reach-y) - var(--fade-y)),
            transparent calc(100% - var(--field-y) + var(--reach-y)));
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right,
            transparent calc(var(--field-x) - var(--reach-x)),
            black calc(var(--field-x) - var(--reach-x) + var(--fade-x)),
            black calc(100% - var(--field-x) + var(--reach-x) - var(--fade-x)),
            transparent calc(100% - var(--field-x) + var(--reach-x))),
        linear-gradient(to bottom,
            transparent calc(var(--field-y) - var(--reach-y)),
            black calc(var(--field-y) - var(--reach-y) + var(--fade-y)),
            black calc(100% - var(--field-y) + var(--reach-y) - var(--fade-y)),
            transparent calc(100% - var(--field-y) + var(--reach-y)));
    mask-composite: intersect;
}