/*
    Content images that break out of the text column.

    The column is capped at 970px (style.min.css: .contentpage
    .content-column-width-limiter > .container). That is a good measure for prose - 65 to 75
    characters - and should not change. It is a bad width for a screenshot. So the two are
    separated: text keeps its measure, images get more room.

    Two classes, both opt-in. Without one of them nothing changes, so every image already on
    the site is untouched.

      img-wide   always wide. Static breakout, geometry lifted from KnowledgeBase.css so the
                 site has one breakout convention rather than two that drift.
      img-zoom   column width normally, growing to the wide size as it passes the middle of
                 the viewport and shrinking again on the way out.

    Pair either with a larger ?mw= on the media URL: the class sets display width, ?mw= sets
    how many pixels C1 serves, and a 1400px slot fed by mw=1200 is upscaled.
*/

@media (min-width: 1200px) {

    .contentpage .content-column-width-limiter img.img-wide {
        display: block;
        max-width: none;
        width: min(1400px, calc(100vw - 64px));
        height: auto;
        /*
            The image sits in a paragraph the width of the column, so 100% here is the column.
            Half the difference pulls the wider image back to centre; it is negative, which is
            what puts the overflow on both sides instead of only the right.
        */
        margin-left: calc((100% - min(1400px, calc(100vw - 64px))) / 2);
    }

    /*
        WHY THIS SCALES INSTEAD OF RESIZING.

        The first version of img-zoom animated width. It was unusable: you could not scroll to
        a half-way state, only to fully small or fully large. Animating width also changes the
        image's height, which moves everything below it, which changes how far the image has
        travelled through the viewport, which is what drives the animation. The animation fed
        its own input, so the loop had no stable middle and ran to one end or the other.

        transform does not participate in layout, so there is no feedback and every
        intermediate position is reachable.

        The layout box stays at COLUMN width and the image scales UP from it, rather than
        reserving the wide box and scaling down. Scaling down would be the more usual way round
        and gives a sharper peak, but it leaves the image sitting in a permanently wide box
        with empty space above and below it at every other scroll position.

        The vertical margin is sized to hold the enlarged image, so growing never overlaps the
        text. It is constant, so it costs spacing rather than stability.
    */
    .contentpage .content-column-width-limiter img.img-zoom {
        display: block;
        width: 100%;
        height: auto;
        transform-origin: center center;
    }

    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {

            .contentpage .content-column-width-limiter img.img-zoom {
                /*
                    MARGIN AND SCALE ARE LOCKED TOGETHER. Growing from the centre adds height
                    above and below, so the margin has to clear the largest state - but it is
                    fixed, so it shows as a gap in the smallest state, which is where the image
                    spends most of its travel.

                    The rule: at column width these images are about 520px tall, so each side
                    needs (scale - 1) x 520 / 2. At 1.44 that was 120px each, which read as a
                    white band. 1.25 needs 65px, which is close to ordinary section spacing and
                    stops looking like a border.

                    Raising the peak means raising the margin in step, or the image will cover
                    the text next to it at full size.
                */
                margin-top: 68px;
                margin-bottom: 68px;
                animation: img-centre-zoom linear both;
                animation-timeline: view();
                /* Keeps the layer composited, so the scale stays smooth while scrolling. */
                will-change: transform;
            }

            /*
                The timeline runs 0% as the image enters the viewport to 100% as it leaves, so
                50% is dead centre.

                Interpolating straight from 0 to 50 to 100 was wrong in both directions: the
                image started growing the moment it appeared, and spent most of its travel
                near full size because the curve is flattest around its peak. So the ends are
                pinned flat and the movement is packed into the middle - nothing happens for
                the first third, it grows through 33-50%, peaks for an instant at centre, and
                is back to column width by 67%.

                Every scroll position still maps to its own size, so it tracks the scrollbar
                rather than triggering. Move 33/67 together: closer to 50 makes it later and
                sharper, further away makes it earlier and gentler.

                linear is deliberate: easing would decouple size from scroll position, which is
                what makes it feel driven rather than fired.
            */
            @keyframes img-centre-zoom {
                0%, 33%   { transform: scale(1); }
                50%       { transform: scale(1.25); }
                67%, 100% { transform: scale(1); }
            }
        }
    }
}