@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

.student-feedback,
.accordion-item {
    transform: translateZ(0);
    backface-visibility: hidden;
}

header {
    backface-visibility: hidden;
}

.student-feedback,
.accordion-item,
.card,
.advantage {
    contain: layout style paint;
}

@media (max-width: 1024px) {
    #community .collapsed-content {
        background: var(--background-surface-95);
        backdrop-filter: none;
    }

    #community .review-text {
        background: var(--background-surface-95);
        backdrop-filter: none;
    }

    #community .class {
        backdrop-filter: none;
    }

    .pop-up-content,
    footer .bg-social,
    .map-node {
        box-shadow: 0 2px 8px var(--black-10);
    }

    @media (hover: hover) {
        button:hover,
        a:hover {
            box-shadow: none;
            transform: translateY(0) scale(1);
        }

        .accordion-item:hover,
        .advantage:hover,
        .card:hover {
            transform: translateY(0) scale(1);
        }
    }
}

@media (max-width: 480px) {
    #cheatcode img,
    #practice img,
    #progress img,
    #faq img,
    #map-mascot-img {
        animation: none;
    }

    #cheatcode {
        background-image: none;
    }

    button,
    a,
    .accordion-item,
    .student-feedback,
    .card,
    .advantage {
        transition-duration: 0.15s;
    }

    #community .student-feedback,
    #community .student-feedback::before,
    #community .collapsed-content,
    #community .review-text {
        transition: none;
    }

    #community .collapsed-content,
    #community .review-text,
    #community .class,
    .pop-up {
        backdrop-filter: none;
    }

    @media (hover: hover) {
        #cheatcode:hover img,
        #faq:hover img,
        #progress .info:hover img {
            filter: none;
        }
    }
}

@media (max-width: 480px) and (max-height: 700px) {
    .pop-up-content,
    footer .bg-social,
    .map-node,
    #hero .window-mockup,
    #cheatcode .wet,
    .student-feedback,
    #practice .exercise,
    #progress .advantage {
        box-shadow: none;
    }

    .bg-dark,
    section {
        border-radius: var(--radius-m);
    }

    button,
    .answer,
    .card {
        border-radius: var(--radius-s);
    }
}

img {
    image-rendering: -webkit-optimize-contrast;
}

.diagnostic-mascot-img {
    pointer-events: none;
    user-select: none;
}