/*
 * The View Transitions plugin owns the document opt-in and the default
 * transition. This file only styles the named editorial elements.
 */
html,
body {
    background-color: var(--background, #f5f5f5);
}

/* Keep the transition surface on the active theme instead of the UA white canvas. */
::view-transition {
    background-color: var(--kol-transition-background, var(--background, #f5f5f5));
}

@keyframes kol-series-element-out {
    to {
        opacity: 0;
    }
}

@keyframes kol-series-element-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(kol-series-cover),
    ::view-transition-group(kol-series-title),
    ::view-transition-group(kol-chapter-title),
    ::view-transition-group(kol-chapter-number) {
        animation-duration: 420ms;
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    ::view-transition-old(kol-series-cover),
    ::view-transition-old(kol-series-title),
    ::view-transition-old(kol-chapter-title),
    ::view-transition-old(kol-chapter-number) {
        animation: kol-series-element-out 180ms ease-out both;
    }

    ::view-transition-new(kol-series-cover),
    ::view-transition-new(kol-series-title),
    ::view-transition-new(kol-chapter-title),
    ::view-transition-new(kol-chapter-number) {
        animation: kol-series-element-in 420ms ease-out both;
    }
}

/* The default plus-lighter blend can briefly turn two page backgrounds white. */
::view-transition-image-pair(root) {
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    .kol-series-editorial__cover,
    .kol-series-editorial__title,
    .kol-chapter-context__title,
    .kol-chapter-context__number {
        view-transition-name: none !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

html[data-starless-reduced-motion="true"] .kol-series-editorial__cover,
html[data-starless-reduced-motion="true"] .kol-series-editorial__title,
html[data-starless-reduced-motion="true"] .kol-chapter-context__title,
html[data-starless-reduced-motion="true"] .kol-chapter-context__number {
    view-transition-name: none !important;
}

html[data-starless-reduced-motion="true"] ::view-transition-group(*),
html[data-starless-reduced-motion="true"] ::view-transition-old(*),
html[data-starless-reduced-motion="true"] ::view-transition-new(*) {
    animation: none !important;
}