@view-transition {
    navigation: auto;
}

html {
    view-transition-name: root;
}

.drawer-motion-toggle[aria-pressed="false"] .drawer-theme-switch {
    background: var(--line);
    border-color: var(--card-border);
}

.drawer-motion-toggle[aria-pressed="false"] .drawer-theme-knob {
    transform: none;
}

.drawer-motion-toggle[aria-pressed="true"] .drawer-theme-switch {
    background: var(--accent);
    border-color: var(--accent);
}

.drawer-motion-toggle[aria-pressed="true"] .drawer-theme-knob {
    transform: translateX(18px);
}

::view-transition-old(root) {
    animation: lumora-page-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: lumora-page-in 360ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

::view-transition-group(lumora-story-cover),
::view-transition-group(lumora-story-title),
::view-transition-group(lumora-story-author) {
    animation-duration: 560ms;
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
}

.lumora-story-transition .single-story-article[data-blog-id] {
    view-transition-name: lumora-story-card;
}

html.lumora-story-transition::view-transition-old(root),
html.lumora-story-transition::view-transition-new(root) {
    animation: none;
}

::view-transition-group(lumora-story-card) {
    animation-duration: 680ms;
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
}

.single-story-article[data-blog-id] .story-cover-container {
    view-transition-name: lumora-story-cover;
}

.single-story-article[data-blog-id] #title {
    view-transition-name: lumora-story-title;
}

.single-story-article[data-blog-id] .author-info-group {
    view-transition-name: lumora-story-author;
}

.blog-card,
.top-story-card,
.related-story-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform-style: preserve-3d;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.blog-card:hover,
.top-story-card:hover,
.related-story-card:hover {
    transform:
        perspective(900px)
        rotateX(var(--card-tilt-x, 0deg))
        rotateY(var(--card-tilt-y, 0deg))
        translateY(-3px);
}

.lumora-story-transition .single-story-content {
    animation: lumora-story-body-in 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.lumora-story-transition .single-story-content > * {
    animation: lumora-story-body-in 420ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.lumora-story-transition .single-story-content > *:nth-child(2) {
    animation-delay: 70ms;
}

.lumora-story-transition .single-story-content > *:nth-child(3) {
    animation-delay: 130ms;
}

.lumora-story-transition .single-story-content > *:nth-child(4) {
    animation-delay: 190ms;
}

@keyframes lumora-page-out {
    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.99);
    }
}

@keyframes lumora-page-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lumora-story-body-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(lumora-story-cover),
    ::view-transition-group(lumora-story-title),
    ::view-transition-group(lumora-story-author),
    ::view-transition-group(lumora-story-card) {
        animation: none;
    }

    .lumora-story-transition .single-story-content,
    .lumora-story-transition .single-story-content > * {
        animation: none;
    }

    .blog-card,
    .top-story-card,
    .related-story-card {
        transform: none !important;
        transition: none !important;
    }

    html.lumora-motion-enabled ::view-transition-old(root) {
        animation: lumora-page-out 180ms cubic-bezier(0.4, 0, 1, 1) both !important;
    }

    html.lumora-motion-enabled ::view-transition-new(root) {
        animation: lumora-page-in 360ms cubic-bezier(0.2, 0.75, 0.25, 1) both !important;
    }

    html.lumora-motion-enabled ::view-transition-group(lumora-story-cover),
    html.lumora-motion-enabled ::view-transition-group(lumora-story-title),
    html.lumora-motion-enabled ::view-transition-group(lumora-story-author),
    html.lumora-motion-enabled ::view-transition-group(lumora-story-card) {
        animation: -ua-view-transition-group-anim 560ms cubic-bezier(0.2, 0.75, 0.25, 1) both !important;
    }

    html.lumora-motion-enabled .lumora-story-transition .single-story-content,
    html.lumora-motion-enabled .lumora-story-transition .single-story-content > * {
        animation: lumora-story-body-in 420ms cubic-bezier(0.2, 0.75, 0.25, 1) both !important;
    }

    html.lumora-motion-enabled .blog-card,
    html.lumora-motion-enabled .top-story-card,
    html.lumora-motion-enabled .related-story-card {
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
    }

    html.lumora-motion-enabled .blog-card:hover,
    html.lumora-motion-enabled .top-story-card:hover,
    html.lumora-motion-enabled .related-story-card:hover {
        transform:
            perspective(900px)
            rotateX(var(--card-tilt-x, 0deg))
            rotateY(var(--card-tilt-y, 0deg))
            translateY(-3px) !important;
    }

}