:root {
    color-scheme: light;
    font-family: "Inter", sans-serif;
    background: #f7f6ff;
    color: #242147;
}

body {
    font-family: "Inter", sans-serif;
}

html {
    scroll-behavior: smooth;
}

.hero-panel {
    isolation: isolate;
}

.hero-orb {
    position: absolute;
    z-index: -1;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 9999px;
}

.hero-orb-one {
    top: -12rem;
    right: 2rem;
    width: 35rem;
    height: 35rem;
    box-shadow: 0 0 0 3.5rem rgb(255 255 255 / 3%), 0 0 0 7rem rgb(255 255 255 / 2%);
}

.hero-orb-two {
    right: 34%;
    bottom: -19rem;
    width: 30rem;
    height: 30rem;
    background: rgb(255 255 255 / 2%);
}

.hero-books {
    perspective: 700px;
    transform: rotate(-3deg);
}

.hero-book {
    position: absolute;
    bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 8px 11px 11px 8px;
    box-shadow: 16px 16px 28px rgb(16 34 25 / 25%), inset 5px 0 rgb(0 0 0 / 8%);
    color: rgb(255 255 255 / 82%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 1rem 0.8rem;
    transform: rotateY(-12deg);
}

.hero-book-back {
    right: 0.5rem;
    width: 8.5rem;
    height: 12rem;
    background: #fb7185;
    transform: rotateY(-19deg) rotateZ(5deg);
}

.hero-book-middle {
    right: 4.75rem;
    width: 8.75rem;
    height: 13.25rem;
    background: #facc15;
    color: #4c1d95;
    transform: rotateY(-14deg) rotateZ(-4deg);
}

.hero-book-front {
    right: 8.5rem;
    width: 9rem;
    height: 12.75rem;
    background: #22d3ee;
    color: #26315f;
    font-family: "Inter", sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    transform: rotateY(-9deg) rotateZ(2deg);
}

.hero-book-front i {
    align-self: flex-end;
}

.book-cover {
    box-shadow: inset 4px 0 rgb(0 0 0 / 7%), 2px 3px 6px rgb(23 35 26 / 10%);
}

.cover-art {
    background-image: linear-gradient(145deg, transparent 48%, rgb(255 255 255 / 25%) 49%, transparent 50%);
}

.htmx-request #catalog-results {
    opacity: 0.58;
    transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}