/* /fuer-wen/: the copy scrolls, the scene is pinned beside it (below 900 px
   each drawing opens its own section instead), and the section takes the
   active world's tint. The drawings' palette and entrance live in
   scenes.css. */

.fw-page {
    --fw-bg: var(--white);
    --fw-step-h: calc(100svh - var(--header-h));
    padding-top: var(--header-h);
    background: var(--fw-bg);
    transition: background-color .6s ease;
}

.fw-page[data-fw-active="dachverband"] { --fw-bg: var(--lavender); }
.fw-page[data-fw-active="hilfswerk"]   { --fw-bg: var(--rose); }
.fw-page[data-fw-active="verein"]      { --fw-bg: var(--blush); }

.fw-grid {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.fw-copy {
    flex: 5 1 0;
    min-width: 0;
}

.fw-art-col {
    flex: 7 1 0;
    min-width: 0;
}

.fw-sticky {
    position: sticky;
    top: var(--header-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    height: var(--fw-step-h);
}

/* On short desktop windows the drawing must still fit its pinned band. */
.fw-stage {
    width: 100%;
    max-width: calc((var(--fw-step-h) - 5rem) * 480 / 340);
}

.fw-scene {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: var(--shadow-1);
}

/* Switching worlds: the panels share one grid cell and stay opaque; the
   active one is lifted on top and only its world and screen content fade.
   The laptop is identical in every panel, so it never blinks. */
html.js .fw-stage {
    display: grid;
}

html.js .fw-panel {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .4s;
}

html.js .fw-panel.is-active {
    z-index: 1;
    visibility: visible;
    transition: none;
}

html.js .fw-panel :is(.sc-world, .sc-screen) {
    opacity: 0;
    transition: opacity .3s ease;
}

html.js .fw-panel.is-active :is(.sc-world, .sc-screen) {
    opacity: 1;
    transition: none;
}

/* Without JS only the intro scene shows; the copy carries everything. */
html:not(.js) .fw-panel:not(:first-child) {
    display: none;
}

/* Pause for the looping extras (js/fuer-wen.js, styled by .pause-toggle in
   styles.css): bottom right on the scene, like the clips' toggle. */
.fw-pause {
    z-index: 2;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    margin: .75rem;
}

.fw-pause[hidden] {
    display: none;
}

/* Scroll focus: the point on the reading line (js/fuer-wen.js sets
   data-fw-point on the active panel) lights up its parts of the drawing
   (data-focus), dims the parts of the other points and shows its extras
   (.fw-extra). Untagged parts (walls, ground) stay as they are. */
.fw-panel [data-focus] {
    transition: opacity .35s ease;
}

.fw-panel[data-fw-point="1"] [data-focus]:not([data-focus~="1"]):not(.fw-extra),
.fw-panel[data-fw-point="2"] [data-focus]:not([data-focus~="2"]):not(.fw-extra),
.fw-panel[data-fw-point="3"] [data-focus]:not([data-focus~="3"]):not(.fw-extra),
.fw-panel[data-fw-point="4"] [data-focus]:not([data-focus~="4"]):not(.fw-extra) {
    opacity: .32;
}

.fw-panel .fw-extra {
    transition: opacity .3s ease;
}

.fw-panel[data-fw-point="1"] .fw-extra[data-focus~="1"],
.fw-panel[data-fw-point="2"] .fw-extra[data-focus~="2"],
.fw-panel[data-fw-point="3"] .fw-extra[data-focus~="3"],
.fw-panel[data-fw-point="4"] .fw-extra[data-focus~="4"] {
    opacity: 1;
}

.fw-panel[data-fw-point="1"] [data-focus~="1"]:not(.fw-extra),
.fw-panel[data-fw-point="2"] [data-focus~="2"]:not(.fw-extra),
.fw-panel[data-fw-point="3"] [data-focus~="3"]:not(.fw-extra),
.fw-panel[data-fw-point="4"] [data-focus~="4"]:not(.fw-extra) {
    animation: fw-lift .5s cubic-bezier(.3, 1.4, .5, 1);
}

/* Motion inside the extras (inc/scenes/<world>.php). */
.fw-panel :is(.fw-fly, .fw-float, .fw-pulse, .fw-pop) {
    transform-box: fill-box;
    transform-origin: center;
}

.fw-panel[data-fw-point] .fw-fly {
    animation: fw-fly 2.4s ease-in-out var(--delay, 0s) infinite;
}

.fw-panel[data-fw-point] .fw-float {
    animation: fw-float 2.6s ease-in-out var(--delay, 0s) infinite alternate;
}

.fw-panel[data-fw-point] .fw-pulse {
    animation: fw-pulse 1.6s ease-in-out var(--delay, 0s) infinite;
}

/* Paused by the visitor: the loops stop and the extras rest where they are
   drawn, as under reduced motion (below). */
.fw-page.is-paused .fw-panel :is(.fw-fly, .fw-float, .fw-pulse) {
    animation: none;
}

.fw-panel[data-fw-point="1"] .fw-extra[data-focus~="1"] .fw-pop,
.fw-panel[data-fw-point="2"] .fw-extra[data-focus~="2"] .fw-pop,
.fw-panel[data-fw-point="3"] .fw-extra[data-focus~="3"] .fw-pop,
.fw-panel[data-fw-point="4"] .fw-extra[data-focus~="4"] .fw-pop {
    animation: fw-pop .45s cubic-bezier(.3, 1.4, .5, 1) var(--delay, 0s) both;
}

@keyframes fw-lift {
    40% { transform: translateY(-3px); }
}

@keyframes fw-fly {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--fx, 0px), var(--fy, 0px)); opacity: 0; }
}

@keyframes fw-float {
    to { transform: translateY(-3px); }
}

@keyframes fw-pulse {
    50% { transform: scale(1.12); }
}

@keyframes fw-pop {
    from { transform: scale(.6); opacity: 0; }
}

/* Rail: one dot per world, the active one ringed, its name beside it. */
.fw-rail {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.fw-rail a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}

.fw-rail a:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: -2px;
}

.fw-dot {
    width: .9rem;
    height: .9rem;
    border: 2px solid var(--white);
    border-radius: 50%;
    background: var(--scene-accent);
    box-shadow: 0 0 0 1px var(--line);
    transition: transform .2s ease, box-shadow .2s ease;
}

.fw-rail a[aria-current="true"] .fw-dot {
    transform: scale(1.25);
    box-shadow: 0 0 0 2px var(--navy);
}

.fw-rail-name {
    margin-left: .35rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
}

/* One screen per world; longer copy simply makes the step taller. */
.fw-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--fw-step-h);
    padding-block: 3rem;
}

.fw-step h1 {
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

/* Beside the pinned scene the copy column is narrow: "Dachverbände," must
   still fit on one line without hyphenation. */
@media (min-width: 900px) {
    .fw-step h1 {
        font-size: clamp(2.25rem, 3.8vw, 3.75rem);
    }
}

.fw-step h2 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.fw-lead {
    max-width: 44ch;
    margin: 0 0 1rem;
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    text-wrap: pretty;
}

/* What the modules do for this kind of organisation. */
.fw-points {
    display: grid;
    gap: 1rem;
    margin: .75rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.fw-points li {
    padding: .35rem .6rem .35rem .9rem;
    border-left: 3px solid var(--scene-accent);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    transition: background-color .3s ease;
}

/* The point the scene is showing (js/fuer-wen.js). */
.fw-points li.is-current {
    background: rgba(255, 255, 255, .7);
}

.fw-points h3 {
    margin: 0 0 .2rem;
    font-size: 1.0625rem;
    line-height: 1.3;
}

.fw-points p {
    max-width: 60ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-2);
}

.fw-ref {
    max-width: 60ch;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: rgba(255, 255, 255, .7);
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.fw-ref a,
.fw-link {
    font-weight: 600;
    color: var(--blue);
}

.fw-link {
    align-self: flex-start;
}

/* Phones and small tablets: nothing is pinned. Each world's drawing sits at
   the top of its own section and scrolls away with it, so the copy gets the
   whole screen. One DOM serves both layouts: the art column dissolves
   (display: contents) and the panels are ordered between the steps, so the
   drawings are not duplicated. The panels are aria-hidden, so the changed
   visual order does not change what a screen reader reads. */
@media (max-width: 899px) {
    .fw-grid {
        /* The drawing's widest: 34rem on tablets, and never taller than 60 %
           of the screen (landscape phones). The jump margin below uses it. */
        --fw-drawing-w: min(34rem, 60svh * 480 / 340);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fw-art-col,
    .fw-sticky,
    html.js .fw-stage,
    .fw-stage,
    .fw-copy {
        display: contents;
    }

    .fw-rail,
    .fw-page .fw-pause,
    .fw-panel[data-fw-panel="intro"] {
        display: none;
    }

    .fw-panel[data-fw-panel="dachverband"] { order: 1; }
    .fw-step[data-fw-step="dachverband"]   { order: 2; }
    .fw-panel[data-fw-panel="hilfswerk"]   { order: 3; }
    .fw-step[data-fw-step="hilfswerk"]     { order: 4; }
    .fw-panel[data-fw-panel="verein"]      { order: 5; }
    .fw-step[data-fw-step="verein"]        { order: 6; }

    .fw-panel,
    html:not(.js) .fw-panel:not(:first-child) {
        display: block;
        width: min(100%, var(--fw-drawing-w));
        margin: 1.5rem auto 0;
    }

    html.js .fw-panel,
    html.js .fw-panel :is(.sc-world, .sc-screen) {
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    /* A jump to a section (homepage cards) lands on its drawing:
       html's scroll-padding covers the header, this adds the drawing. */
    .fw-step {
        justify-content: flex-start;
        min-height: 0;
        padding-block: 1.5rem 3rem;
        scroll-margin-top: calc(min(100vw - 2 * var(--gutter), var(--fw-drawing-w)) * 340 / 480 + 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fw-panel [data-focus],
    .fw-panel :is(.fw-fly, .fw-float, .fw-pulse, .fw-pop) {
        animation: none !important;
    }

    .fw-page,
    .fw-art-col,
    .fw-dot,
    html.js .fw-panel :is(.sc-world, .sc-screen) {
        transition: none;
    }
}