/* ===================================================================
 * Roomview Stylesheet – Zoomfahrt in den Raum
 * ------------------------------------------------------------------
 * Eine Variable steuert alles: --room-p (0 = Raum, 1 = Nahansicht).
 * - moderne Browser: CSS scroll-driven animation (view-timeline)
 * - sonst: js/roomview.js setzt --room-p beim Scrollen
 * - prefers-reduced-motion: keine Fahrt, Umschalter "Näher heran"
 *
 * Geometrie (pixelgenau gemessen, in % der Raumansicht room-xl_1,
 * 3200 × 1800):
 *   Werk x 1275–1771, y 406–1150 → links 39.844 · oben 22.556 ·
 *   Breite 15.5 · Höhe 41.333 (Seitenverhältnis 1.5 = 80 × 120 cm)
 *   Werkmitte 47.594 / 43.222 → Zoom-Ursprung
 *   Nahansicht room-xl-2 (3200 × 1800, Werk x 1116–1985, y 128–1431)
 *   skaliert auf 57.077 % und deckungsgleich gelegt:
 *   links 19.938 · oben 18.497 · Breite/Höhe 57.077
 *   → bei Zoom 1.752 zeigt die Nahansicht ihre native Auflösung
 *
 * # SETUP
 * # STAGE (Bühne, Zoom)
 * # MEASURE (Maßangabe)
 * # CARDS (Texte)
 * # CONTROLS + PROGRESS
 * # LENS (Lupe)
 * # REDUCED MOTION
 * ------------------------------------------------------------------ */


/* ===================================================================
 * # SETUP
 * ------------------------------------------------------------------- */
@property --room-p {
    syntax        : '<number>';
    inherits      : true;
    initial-value : 0;
}

.s-room {
    --room-wall : #d8d4ce;
    background-color : var(--room-wall);
    color            : white;
}

.s-room__track {
    height        : 340vh;                    /* Scrollweg der Fahrt */
    view-timeline : --room block;
}

.s-room__sticky {
    /* Phasen, abgeleitet aus dem Fortschritt */
    --p     : var(--room-p);
    --z     : clamp(0, (var(--p) - .12) / .6, 1);
    --e     : calc(var(--z) * var(--z) * (3 - 2 * var(--z)));   /* smoothstep */
    --S       : 1.15;                                            /* Endzoom */
    --shift   : 0vw;                                             /* Werk am Ende seitlich */
    --shift-y : -5svh;                                           /* … und vertikal */
    --stage-y : 34%;                                             /* Werk-Mitte im Viewport */

    position : sticky;
    top      : 0;
    height   : 100vh;
    height   : 100svh;
    overflow : hidden;
    isolation: isolate;
}

@supports (animation-timeline: view()) {
    .s-room__sticky {
        animation       : room-progress linear both;
        animation-timeline : --room;
        animation-range : contain 0% contain 100%;
    }
}

@keyframes room-progress {
    from { --room-p : 0; }
    to   { --room-p : 1; }
}

@media screen and (min-width: 1000px) {
    .s-room__sticky {
        --S       : 1.75;                        /* Werk ≈ 85 % der Bildschirmhöhe */
        --shift   : -14vw;                       /* Platz für den Text rechts */
        --shift-y : 0svh;
        --stage-y : 50%;
    }
}


/* ===================================================================
 * # STAGE
 * Bühne wie object-fit:cover, aber mit der Werkmitte im Bildschirm-
 * zentrum – so bleibt das Werk auf jedem Format sichtbar.
 * ------------------------------------------------------------------- */
.s-room__stage {
    position         : absolute;
    left             : 50%;
    top              : var(--stage-y);
    width            : max(106vw, calc(118vh * 1.7778));
    width            : max(106vw, calc(118svh * 1.7778));
    aspect-ratio     : 3200 / 1800;
    translate        : -47.594% -43.222%;
    transform-origin : 47.594% 43.222%;
    transform        : translate(calc(var(--e) * var(--shift)), calc(var(--e) * var(--shift-y)))
                       scale(calc(1 + var(--e) * (var(--S) - 1)));
    will-change      : transform;
}

.s-room__stage img {
    position  : absolute;
    display   : block;
    max-width : none;
    margin    : 0;
}

.s-room__wide {
    inset  : 0;
    width  : 100%;
    height : 100%;
}

/* Nahansicht deckungsgleich über dem Werk, Ränder weich ausgeblendet */
.s-room__close {
    left    : 19.938%;
    top     : 18.497%;
    width   : 57.077%;
    height  : 57.077%;
    opacity : clamp(0, (var(--p) - .5) / .22, 1);
    -webkit-mask-image :
        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
        linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite : source-in;
    mask-image :
        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
        linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-composite : intersect;
}


/* ===================================================================
 * # MEASURE – Maßlinien auf dem Werk
 * ------------------------------------------------------------------- */
.s-room__measure {
    --ink   : rgba(255, 255, 255, .95);
    position : absolute;
    left     : 39.844%;
    top      : 22.556%;
    width    : 15.5%;
    height   : 41.333%;
    opacity  : min(clamp(0, (var(--p) - .22) / .1, 1), clamp(0, (.64 - var(--p)) / .1, 1));
    pointer-events : none;
    /* Schrift gegen den Zoom ausgleichen */
    font-size : calc(1.4rem / (1 + var(--e) * (var(--S) - 1)));
}

.s-room__measure::before {                       /* Rahmen ums Werk */
    content  : "";
    position : absolute;
    inset    : 0;
    outline  : 1px dashed var(--color-1-darker);
    outline-offset : .4em;
}

.s-room__dim {
    position : absolute;
    display  : flex;
    align-items     : center;
    justify-content : center;
    color    : var(--ink);
}

.s-room__dim > span {
    padding          : .3em .8em;
    background-color : rgba(8, 12, 14, .72);
    border-radius    : 999px;
    font-family      : var(--font-1);
    font-weight      : 700;
    letter-spacing   : .08em;
    white-space      : nowrap;
}

.s-room__dim--w {                                /* Breite: Linie oberhalb */
    left          : 0;
    right         : 0;
    bottom        : calc(100% + 1.6em);
    height        : 1px;
    background    : var(--color-1-darker);
}

.s-room__dim--h {                                /* Höhe: Linie rechts */
    top           : 0;
    bottom        : 0;
    left          : calc(100% + 1.6em);
    width         : 1px;
    background    : var(--color-1-darker);
}

/* Endmarken der Linien */
.s-room__dim--w::before,
.s-room__dim--w::after,
.s-room__dim--h::before,
.s-room__dim--h::after {
    content    : "";
    position   : absolute;
    background : var(--color-1-darker);
}

.s-room__dim--w::before,
.s-room__dim--w::after { top: -.5em; width: 1px; height: 1em; }
.s-room__dim--w::before { left: 0; }
.s-room__dim--w::after  { right: 0; }

.s-room__dim--h::before,
.s-room__dim--h::after { left: -.5em; width: 1em; height: 1px; }
.s-room__dim--h::before { top: 0; }
.s-room__dim--h::after  { bottom: 0; }


/* ===================================================================
 * # CARDS – Texte auf Glas
 * ------------------------------------------------------------------- */
.s-room__card {
    position         : absolute;
    left             : var(--lp-gutter, 2rem);
    right            : var(--lp-gutter, 2rem);
    bottom           : 2.4rem;
    max-width        : 52rem;
    padding          : 1.8rem 2rem;
    background-color : rgba(10, 12, 14, .66);
    -webkit-backdrop-filter : blur(18px) saturate(1.3);
    backdrop-filter  : blur(18px) saturate(1.3);
    border           : 1px solid rgba(255, 255, 255, .16);
    border-radius    : 4px;
    box-shadow       : 0 2.4rem 6rem rgba(0, 0, 0, .25);
}

/* bei reduzierter Bewegung liegt unten der Umschalter "Näher heran":
 * Einstiegskarte immer, Endkarte nur mobil darüber setzen
 * (am Desktop steht die Endkarte vertikal zentriert rechts) */
.s-room__sticky:has(.s-room__controls:not([hidden])) .s-room__card--intro {
    bottom : 8.4rem;
}

@media screen and (max-width: 999px) {
    .s-room__sticky:has(.s-room__controls:not([hidden])) .s-room__card--end {
        bottom : 8.4rem;
    }
}

.s-room__card--intro {
    --k     : clamp(0, (var(--p) - .05) / .13, 1);
    opacity : calc(1 - var(--k));
    translate : 0 calc(var(--k) * -3rem);
}

.s-room__card--end {
    --k     : clamp(0, (var(--p) - .78) / .12, 1);
    opacity : var(--k);
    translate : 0 calc((1 - var(--k)) * 3rem);
    pointer-events : none;
}

/* sichtbar, sobald erreicht – oder wenn ein Link darin den Fokus hat */
.s-room__card--end:focus-within {
    opacity   : 1;
    translate : none;
}

.s-room__sticky.is-end .s-room__card--end {
    pointer-events : auto;
}

.s-room__title {
    font-family    : var(--font-3);
    font-weight    : 400;
    font-size      : clamp(3rem, 4.4vw, 5.6rem);
    line-height    : 1;
    letter-spacing : -.03em;
    color          : white;
    margin         : 0 0 var(--vspace-0_75);
}

.s-room__big {
    font-family    : var(--font-3);
    font-size      : clamp(3rem, 4.6vw, 6.4rem);
    line-height    : 1;
    letter-spacing : -.03em;
    margin         : 0 0 var(--vspace-0_75);
}

.s-room__text {
    font-size   : var(--text-size);
    line-height : 1.5;
    color       : rgba(255, 255, 255, .9);
    margin      : 0;
}

.s-room__hover-hint {
    display : none;
}

/* Mobil: Endkarte kompakt, damit das Werk sichtbar bleibt */
@media screen and (max-width: 999px) {
    .s-room__card--end .s-room__big {
        font-size : 2.8rem;
        margin    : 0 0 var(--vspace-0_5);
    }

    .s-room__card--end .s-room__text {
        font-size : var(--text-sm);
    }

    .s-room__card--end .s-room__actions {
        margin-top : var(--vspace-0_5);
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
    .s-room__hover-hint {
        display    : block;
        margin-top : .8rem;
        color      : rgba(255, 255, 255, .75);
        font-size  : var(--text-sm);
    }
}

.s-room__actions .lp-cta {
    min-height  : 4.8rem;
    padding     : 1rem 2.2rem;
    font-size   : var(--text-size);
    white-space : nowrap;
}

.s-room__actions {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : 1.2rem 2.4rem;
    margin-top  : var(--vspace-1);
}

.s-room__link,
.s-room__link:focus {
    color                     : white;
    font-weight               : 700;
    text-decoration           : underline;
    text-decoration-thickness : 2px;
    text-underline-offset     : .25em;
}

.s-room__link:hover {
    color : white;
    text-decoration-color : var(--color-1-dark);
}

.s-room a:focus-visible,
.s-room button:focus-visible {
    outline        : 3px solid var(--color-1-dark);
    outline-offset : 3px;
}

@media screen and (min-width: 1000px) {
    .s-room__card {
        right   : auto;
        width   : 40rem;
        bottom  : 4rem;
        padding : 2.4rem 2.8rem;
    }

    .s-room__card--end {
        left   : auto;
        right  : 13rem;
        bottom : auto;
        top    : 50%;
        translate : 0 calc(-50% + (1 - var(--k)) * 3rem);
    }

    .s-room__card--end:focus-within {
        translate : 0 -50%;
    }
}


/* ===================================================================
 * # CONTROLS + PROGRESS
 * ------------------------------------------------------------------- */
.s-room__controls {
    position  : absolute;
    left      : var(--lp-gutter, 2rem);
    bottom    : 2.4rem;
    display   : flex;
    flex-wrap : wrap;
    justify-content : center;
    gap       : .8rem;
    z-index   : 3;
}

.s-room__controls[hidden],
.s-room__btn[hidden] {
    display : none;
}

/* überschreibt die globalen Button-Styles aus styles.css */
.s-room .s-room__btn {
    height           : auto;
    min-height       : 4.4rem;
    margin           : 0;
    padding          : 0 2rem;
    font-family      : var(--font-1);
    font-size        : var(--text-sm);
    font-weight      : 700;
    line-height      : 1;
    letter-spacing   : .04em;
    text-transform   : none;
    color            : white;
    background-color : transparent;
    border           : 0;
    border-radius    : 999px;
    transition       : background-color .3s, color .3s;
}

.s-room .s-room__btn:hover {
    background-color : rgba(255, 255, 255, .14);
    color            : white;
}

.s-room .s-room__btn[aria-pressed="true"] {
    background-color : white;
    color            : #0d0d0d;
}

.s-room .s-room__btn--zoom {
    background-color : rgba(8, 12, 14, .58);
    border           : 1px solid rgba(255, 255, 255, .16);
}

/* Fortschritt: drei Stationen, Linie füllt sich mit der Fahrt */
.s-room__progress {
    display : none;
}

@media screen and (min-width: 1000px) {

    .s-room__controls {
        left      : 50%;
        translate : -50% 0;
    }

    .s-room__actions .lp-cta {
        min-height : 5.6rem;
        padding    : 1.4rem 2.8rem;
        font-size  : var(--text-md);
    }

    .s-room__progress {
        --fill     : var(--p);
        position   : absolute;
        right      : 3.2rem;
        top        : 50%;
        translate  : 0 -50%;
        display    : flex;
        flex-direction : column;
        justify-content: space-between;
        height     : 24rem;
        margin     : 0;
        padding    : 0 2rem 0 0;
        list-style : none;
        font-size  : var(--text-xs);
        font-weight: 700;
        letter-spacing : .18em;
        text-transform : uppercase;
        text-align : right;
        color      : white;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
        z-index    : 2;
    }

    .s-room__progress::before,
    .s-room__progress::after {
        content    : "";
        position   : absolute;
        right      : 0;
        top        : 0;
        width      : 2px;
        height     : 100%;
        background : rgba(255, 255, 255, .35);
    }

    .s-room__progress::after {
        background       : white;
        transform        : scaleY(var(--fill));
        transform-origin : top;
    }

    .s-room__progress li {
        padding : 0;
    }

    /* bei Endposition rechts den Text nicht überdecken */
    .s-room__sticky.is-end .s-room__progress {
        opacity    : 0;
        transition : opacity .4s;
    }
}


/* ===================================================================
 * # LENS – Lupe über dem Werk (nur Maus, ab 1000px)
 * ------------------------------------------------------------------- */
.s-room__lens {
    --size   : 24rem;
    position : absolute;
    left     : 0;
    top      : 0;
    width    : var(--size);
    height   : var(--size);
    margin   : calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    border   : 2px solid rgba(255, 255, 255, .9);
    border-radius : 50%;
    box-shadow    : 0 1.6rem 4.8rem rgba(0, 0, 0, .45), inset 0 0 2.4rem rgba(0, 0, 0, .25);
    background-repeat : no-repeat;
    background-color  : var(--room-wall);
    pointer-events : none;
    opacity    : 0;
    scale      : .6;
    transition : opacity .25s, scale .35s cubic-bezier(.2, .7, .2, 1);
    z-index    : 4;
}

.s-room__lens.is-on {
    opacity : 1;
    scale   : 1;
}

.s-room__sticky.has-lens {
    cursor : none;
}


/* ===================================================================
 * # REDUCED MOTION – keine Fahrt, sondern Umschalter
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .s-room__track {
        height : auto;
    }

    .s-room__sticky {
        position  : relative;
        animation : none;
    }

    .s-room__lens,
    .s-room__btn {
        transition : none;
    }
}