/* Desktop: mock and chapter copy swap sides with the spotlight. */

@media (min-width: 960px) {
    .stage-mock {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .chapters {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .stage[data-copy="left"] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .stage[data-copy="left"] .stage-mock {
        grid-column: 2;
    }

    .stage[data-copy="left"] .chapters {
        grid-column: 1;
    }

    .stage[data-copy="left"] .chapter {
        align-items: flex-end;
        text-align: right;
    }

    .stage[data-copy="left"] .cta-actions {
        justify-content: flex-end;
    }
}

@media (min-width: 1280px) {
    .stage[data-copy="left"] {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }
}

.stage.is-flipping .stage-mock,
.stage.is-flipping .chapters {
    will-change: transform;
}

.stage.is-flipping .stage-mock {
    z-index: 14;
}

.stage.is-flipping .chapters {
    z-index: 9;
}

@media (prefers-reduced-motion: reduce) {
    .stage-mock,
    .chapters {
        transition: none !important;
    }
}