/* Scene drawings (inc/scenes.php): the laptop that stays, the world around it.
   Used by the homepage hero, the homepage "Für wen" cards and /fuer-wen/.
   Each audience has a tint and an accent (--scene-tint / --scene-accent) for
   the page around its drawing. The accent is for graphics, never for text on
   a light surface. */

[data-scene="dachverband"] { --scene-tint: var(--lavender); --scene-accent: var(--blue); }
[data-scene="hilfswerk"]   { --scene-tint: var(--rose);     --scene-accent: #FF2A6F; }
:is([data-scene="verein"], [data-scene="intro"], [data-scene="hero"]) {
    --scene-tint: var(--blush);
    --scene-accent: var(--peach);
}

.sc-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Scene text takes the site font; its colour comes from the drawing's own
   fill attribute (inc/scenes/), navy only where a drawing sets none. The
   drawings carry all other colours themselves (palette:
   inc/wa-art/palette.php); the tints above still colour the pages around
   them (/fuer-wen/ backgrounds, dots, point borders). */
.sc-svg .sc-t {
    font-family: inherit;
}

.sc-svg .sc-t:not([fill]) {
    fill: var(--navy);
}

/* Extras for /fuer-wen/'s scroll focus (css/fuer-wen.css shows them); hidden
   everywhere else the scenes appear. */
.sc-svg .fw-extra {
    opacity: 0;
    pointer-events: none;
}

/* Product-page heroes (the capability pages and /products/goodnpo/): the
   text on the left, the page's own scene (inc/scenes/hero/) on the right.
   The CTA row belongs to the hero grid, between the text and the drawing:
   phones stack text, buttons, drawing, so the booking button is in the
   first screen; from 900 px it spans the row under both columns. */
.product-hero--scene {
    padding-bottom: var(--space-section);
}

.product-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.product-hero-art {
    max-width: 480px;
    overflow: clip; /* a drawing's soft backdrop may bleed a few units past the viewBox */
}

@media (min-width: 900px) {
    /* The title shares the row with the drawing, so it steps down a size. */
    .product-hero--scene h1 {
        font-size: clamp(2.25rem, 3.6vw, 3rem);
    }

    .product-hero-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 1.25rem clamp(2rem, 4vw, 4rem);
    }

    .product-hero-art {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
    }

    .product-hero-split > :not(.product-hero-text, .product-hero-art) {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------- entrance
   One short entrance per scene, under 0.8 s: the laptop stands, the world,
   the screen content and the props arrive around it. It plays under an
   .is-playing ancestor; .is-waiting holds the start state until then (set
   only by JS, so without JS nothing is hidden). The drawn position is the
   resting state, so with animation off the scene is simply complete. */

.sc-svg :is(.sc-in, .sc-pop, .sc-grow) {
    transform-box: fill-box;
    transform-origin: center;
}

.sc-svg .sc-grow {
    transform-origin: left center;
}

html.js .is-waiting .sc-svg :is(.sc-in, .sc-pop, .sc-grow) {
    opacity: 0;
}

html.js .is-playing .sc-svg .sc-in {
    animation: sc-in .42s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + var(--scene-delay, 0ms)) both;
}

html.js .is-playing .sc-svg .sc-pop {
    animation: sc-pop .36s cubic-bezier(.3, 1.4, .5, 1) calc(var(--d, 0ms) + var(--scene-delay, 0ms)) both;
}

html.js .is-playing .sc-svg .sc-grow {
    animation: sc-grow .4s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + var(--scene-delay, 0ms)) both;
}

@keyframes sc-in {
    from {
        opacity: 0;
        transform: translate(var(--dx, 0px), var(--dy, 6px));
    }
}

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

@keyframes sc-grow {
    from {
        transform: scaleX(0);
    }
}

/* Same specificity as the .is-waiting/.is-playing rules above plus source
   order, so this wins even when a script has set those classes. */
@media (prefers-reduced-motion: reduce) {
    html.js :is(.is-waiting, .is-playing) .sc-svg :is(.sc-in, .sc-pop, .sc-grow) {
        opacity: 1;
        animation: none;
    }
}