:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
    --motion-fast: 180ms;
    --motion-med: 320ms;
    --motion-slow: 520ms;
    --vt-duration: 380ms;
}

body.page-enter-ready .site-header {
    animation: header-in var(--motion-slow) var(--motion-ease) both;
}

body.page-enter-ready .hero-search {
    animation: hero-in 640ms var(--motion-ease-out) both;
}

body.page-enter-ready .page-shell {
    animation: shell-in 560ms var(--motion-ease) 60ms both;
}

body.page-enter-ready .site-footer__surface {
    animation: footer-in 500ms var(--motion-ease) 120ms both;
}

@keyframes header-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

@keyframes hero-in {
    from { opacity: 0.55; transform: scale(1.02); }
    to { opacity: 1; transform: none; }
}

@keyframes shell-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes footer-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

::view-transition-old(root) {
    animation: vt-page-out var(--vt-duration) var(--motion-ease) both;
}

::view-transition-new(root) {
    animation: vt-page-in var(--vt-duration) var(--motion-ease) both;
}

@keyframes vt-page-out {
    to {
        opacity: 0;
        transform: translateX(-18px) scale(0.985);
        filter: blur(2px);
    }
}

@keyframes vt-page-in {
    from {
        opacity: 0;
        transform: translateX(22px) scale(0.985);
        filter: blur(2px);
    }
}

.site-header {
    transition: box-shadow var(--motion-med) var(--motion-ease),
                background-color var(--motion-med) ease;
}

.site-header.is-compact {
    box-shadow:
        0 1px 0 rgba(255, 250, 243, 0.18) inset,
        0 12px 32px rgba(40, 28, 18, 0.28);
}

.site-header.is-compact .site-brand img {
    transition: height var(--motion-med) var(--motion-ease), max-width var(--motion-med) var(--motion-ease);
}

.swiper-shelf,
.swiper-coverflow {
    --swiper-wrapper-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.swiper-shelf .swiper-slide,
.swiper-coverflow .swiper-slide {
    transition:
        transform 480ms var(--motion-ease),
        opacity 420ms var(--motion-ease),
        filter 420ms var(--motion-ease);
}

.shelf-slide__cover {
    transition:
        transform 380ms var(--motion-spring),
        box-shadow 380ms var(--motion-ease),
        filter 380ms ease;
    will-change: transform;
}

.shelf-slide:hover .shelf-slide__cover {
    transform: translateY(-8px) scale(1.03);
    filter: saturate(1.05);
}

.shelf-slide__name {
    transition: color var(--motion-fast) ease, transform var(--motion-med) var(--motion-ease);
}

.shelf-slide:hover .shelf-slide__name {
    transform: translateY(-2px);
}

.coverflow-slide__frame {
    transition:
        transform 500ms var(--motion-ease),
        box-shadow 500ms var(--motion-ease),
        filter 500ms ease;
}

.swiper-coverflow .swiper-slide-active .coverflow-slide__frame {
    box-shadow:
        0 18px 40px rgba(70, 45, 25, 0.22),
        0 0 0 1px rgba(108, 73, 47, 0.28);
}

.coverflow-slide__caption {
    opacity: 0.72;
    transform: translateY(6px);
    transition:
        opacity 420ms var(--motion-ease),
        transform 420ms var(--motion-ease),
        color 280ms ease;
}

.swiper-coverflow .swiper-slide-active .coverflow-slide__caption {
    opacity: 1;
    transform: none;
    color: #6c492f;
}

.swiper-coverflow .swiper-slide:not(.swiper-slide-active) .coverflow-slide {
    filter: brightness(0.9) saturate(0.88);
    transition: filter 480ms var(--motion-ease);
}

.swiper-shelf .swiper-button-prev,
.swiper-shelf .swiper-button-next,
.swiper-coverflow .swiper-button-prev,
.swiper-coverflow .swiper-button-next {
    transition:
        background 220ms var(--motion-ease),
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms var(--motion-spring);
}

.swiper-shelf .swiper-button-prev:active,
.swiper-shelf .swiper-button-next:active,
.swiper-coverflow .swiper-button-prev:active,
.swiper-coverflow .swiper-button-next:active {
    transform: scale(0.92);
}

.swiper-pagination-bullet {
    transition:
        width 280ms var(--motion-ease),
        background 220ms ease,
        opacity 220ms ease,
        transform 220ms var(--motion-spring) !important;
}

.swiper-pagination-bullet-active {
    transform: scale(1.05);
}

.swiper-pagination-fraction {
    transition: opacity 280ms ease;
}

.book-item {
    transition:
        border-color 240ms var(--motion-ease),
        box-shadow 280ms var(--motion-ease),
        transform 280ms var(--motion-ease),
        background-color 240ms ease !important;
}

.book-item:active {
    transform: translateY(0) scale(0.992) !important;
}

.book-item img {
    transition: transform 420ms var(--motion-ease), filter 320ms ease;
}

.book-item:hover img {
    transform: scale(1.03);
    filter: contrast(1.03);
}

.book-item::after {
    transition: color 200ms ease, transform 240ms var(--motion-spring) !important;
}

.book-list.is-switching {
    animation: list-swap 360ms var(--motion-ease);
}

@keyframes list-swap {
    0% { opacity: 0.35; transform: translateY(8px); }
    100% { opacity: 1; transform: none; }
}

.surname-chip {
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 220ms var(--motion-ease),
        transform 220ms var(--motion-spring) !important;
}

.surname-chip:hover {
    transform: translateY(-2px) scale(1.03);
}

.surname-chip:active {
    transform: scale(0.96);
}

.surname-chip.is-dimmed {
    opacity: 0.22;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.surname-chip.is-match {
    animation: chip-pulse 520ms var(--motion-ease);
}

@keyframes chip-pulse {
    0% { box-shadow: 0 0 0 0 rgba(194, 53, 49, 0.28); }
    100% { box-shadow: 0 0 0 8px rgba(194, 53, 49, 0); }
}

.letter-link {
    transition:
        background-color 200ms var(--motion-ease),
        color 200ms ease,
        border-color 200ms ease,
        box-shadow 220ms ease,
        transform 220ms var(--motion-spring) !important;
}

.letter-link:hover {
    transform: translateY(-1px);
}

.letter-link.is-active {
    animation: letter-pop 360ms var(--motion-spring);
}

@keyframes letter-pop {
    0% { transform: scale(0.9); }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.family-member {
    transition:
        border-color 220ms ease,
        box-shadow 260ms var(--motion-ease),
        color 200ms ease,
        transform 260ms var(--motion-ease) !important;
}

.family-member:hover {
    transform: translateY(-3px);
}

.family-member img {
    transition: transform 360ms var(--motion-ease), border-color 220ms ease;
}

.family-member:hover img {
    transform: scale(1.06);
}

.volume-item .volume-number {
    transition:
        background 220ms var(--motion-ease),
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 260ms var(--motion-ease),
        transform 240ms var(--motion-spring) !important;
}

.volume-item .volume-number:hover {
    transform: translateY(-3px);
}

.volume-item .volume-number:active {
    transform: scale(0.97);
}

.volume-item .volume-number::after {
    transition: opacity 200ms ease, transform 220ms var(--motion-ease) !important;
}

.volume-item .volume-number:hover::after {
    transform: translateY(-1px);
}

.pagination ul li {
    transition:
        background-color 200ms var(--motion-ease),
        color 200ms ease,
        border-color 200ms ease,
        box-shadow 240ms var(--motion-ease),
        transform 220ms var(--motion-spring) !important;
}

.pagination ul li:hover:not(.active):not(.disabled) {
    transform: translateY(-2px);
}

.pagination ul li:active:not(.disabled) {
    transform: scale(0.94);
}

.pagination li.active {
    animation: page-active 380ms var(--motion-spring);
}

@keyframes page-active {
    0% { transform: scale(0.88); }
    70% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.pagination.is-paging {
    pointer-events: none;
    opacity: 0.72;
    transition: opacity 200ms ease;
}

.nice-select__menu {
    transform-origin: top center;
    animation: menu-in 220ms var(--motion-ease);
}

.nice-select:not(.is-open) .nice-select__menu[hidden] {
    animation: none;
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.search-bar {
    transition: box-shadow 280ms var(--motion-ease), transform 280ms ease;
}

.search-bar:focus-within {
    transform: translateY(-1px);
}

.search-bar__submit {
    transition:
        background 200ms ease,
        transform 200ms var(--motion-spring),
        box-shadow 220ms ease !important;
}

.search-bar__submit:hover {
    transform: translateY(-1px);
}

.search-bar__submit:active {
    transform: scale(0.96);
}

.search-bar__clear {
    transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.search-bar__clear:hover {
    transform: none;
}

.cmdk-backdrop:not([hidden]) {
    animation: cmdk-fade 200ms ease both;
}

.cmdk-backdrop:not([hidden]) .cmdk-panel {
    animation: cmdk-panel 280ms var(--motion-ease) both;
}

@keyframes cmdk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cmdk-panel {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.back-top {
    transition:
        opacity 280ms ease,
        transform 280ms var(--motion-spring),
        background 200ms ease,
        color 200ms ease !important;
    transform: translateY(10px) scale(0.92);
}

.back-top.is-visible {
    transform: none;
}

.back-top:hover {
    transform: translateY(-3px);
}

.back-top:active {
    transform: scale(0.94);
}

.product-nav__link {
    transition:
        background-color 200ms var(--motion-ease),
        color 200ms ease,
        transform 220ms var(--motion-spring) !important;
}

.product-nav__link:hover {
    transform: translateY(-2px);
}

.product-nav__icon {
    transition: transform 280ms var(--motion-spring);
}

.product-nav__link:hover .product-nav__icon {
    transform: scale(1.08);
}

.view-toggle button {
    transition: background 200ms ease, color 200ms ease, transform 180ms ease;
}

.view-toggle button:active {
    transform: scale(0.96);
}

.empty-state {
    animation: empty-in 480ms var(--motion-ease) both;
}

@keyframes empty-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.paper-frame {
    position: relative;
    z-index: 0;
    transition: box-shadow 320ms var(--motion-ease);
}

.paper-frame:hover {
    box-shadow:
        0 1px 0 rgba(255, 252, 247, 0.9) inset,
        0 14px 36px rgba(60, 40, 20, 0.1),
        0 2px 8px rgba(60, 40, 20, 0.05);
}

.family-list-container:not([hidden]) {
    animation: panel-rise 380ms var(--motion-ease) both;
}

@keyframes panel-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.reveal {
    transition:
        opacity 0.62s var(--motion-ease),
        transform 0.62s var(--motion-ease) !important;
}

.reveal-stagger > * {
    transition:
        opacity 0.5s var(--motion-ease),
        transform 0.5s var(--motion-ease) !important;
}

.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.11s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.15s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.19s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.23s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.27s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.31s; }
.reveal-stagger.is-in > *:nth-child(9) { transition-delay: 0.35s; }
.reveal-stagger.is-in > *:nth-child(10) { transition-delay: 0.39s; }
.reveal-stagger.is-in > *:nth-child(n+11) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    body.page-enter-ready .site-header,
    body.page-enter-ready .hero-search,
    body.page-enter-ready .page-shell,
    body.page-enter-ready .site-footer__surface,
    .book-list.is-switching,
    .nice-select__menu,
    .cmdk-backdrop:not([hidden]),
    .cmdk-backdrop:not([hidden]) .cmdk-panel,
    .empty-state,
    .family-list-container:not([hidden]),
    .letter-link.is-active,
    .pagination li.active,
    .surname-chip.is-match {
        animation: none !important;
    }

    .shelf-slide:hover .shelf-slide__cover,
    .book-item:hover img,
    .product-nav__link:hover,
    .volume-item .volume-number:hover,
    .pagination ul li:hover:not(.active) {
        transform: none !important;
    }

    .paper-frame:hover {
        box-shadow: inherit;
    }
}