/* ============================================================================
   WRITERS HUB — 3D DESIGN SYSTEM  (three-d.css)
   Loaded on every front-end page. Everything here is additive: it layers depth,
   motion and shelf geometry on top of the existing component classes, so pages
   that already work keep working and pages that don't opt in are untouched.

   Sections
     0. Tokens
     1. Reveal-on-scroll
     2. Book cards — real book geometry (spine, page block, cover lift)
     3. Bookshelf
     4. Category cards + custom icon medallions
     5. Profile / author cards
     6. Post cards
     7. Panels, widgets and page heroes
     8. The 3D homepage hero scene
     9. Buttons
    10. Responsive + reduced motion
   ========================================================================== */

/* ── 0. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --td-ease: cubic-bezier(.2, .75, .3, 1);
    --td-ease-out: cubic-bezier(.16, .84, .44, 1);
    --td-tilt: 12deg;          /* max pointer tilt for cards */
    --td-duration: .34s;
    --td-reveal: .72s;

    --td-sheen: rgba(255, 255, 255, .55);
    --td-edge: rgba(120, 116, 160, .30);
    --td-paper-a: #ffffff;
    --td-paper-b: #e7e5f2;

    /* shelf — a walnut plank: warm enough to read as furniture, muted enough
       to sit calmly next to the indigo covers */
    --shelf-top: #cba67b;
    --shelf-mid: #a57c4f;
    --shelf-low: #6f5133;
    --shelf-lip: rgba(255, 246, 234, .80);
    --shelf-shadow: rgba(60, 42, 92, .50);
}

/* ── 1. Reveal-on-scroll ───────────────────────────────────────────────── */
.td-js .td-rise:not(.is-in) {
    opacity: 0;
    transform: translateY(26px) scale(.985);
}
.td-rise.is-in {
    transition: opacity var(--td-reveal) var(--td-ease-out) var(--td-d, 0ms),
                transform var(--td-reveal) var(--td-ease-out) var(--td-d, 0ms);
}

/* ── 2. Book cards — book geometry ─────────────────────────────────────── */
/* Both the base and the hover selector carry the same transform so the base
   rule in app.css (translateY only) can never win on hover. Pointer tilt is
   written straight into --td-rx / --td-ry by three-d.js. */
.book-card,
.book-card:hover {
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1100px)
               rotateX(var(--td-rx, 0deg))
               rotateY(var(--td-ry, 0deg))
               translate3d(0, var(--td-lift, 0px), 0);
    transition: transform var(--td-duration) var(--td-ease-out),
                box-shadow var(--td-duration) var(--td-ease),
                border-color var(--td-duration) var(--td-ease);
}
.book-card {
    --td-lift: 0px;
    overflow: visible;
    border-radius: var(--radius-md);
    will-change: auto;
    border: 1px solid var(--glass-brd);
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.book-card:hover {
    --td-lift: -10px;
    z-index: 3;
    box-shadow: 0 34px 54px -26px rgba(45, 17, 0, .55),
                0 10px 22px -14px rgba(45, 17, 0, .40);
    border-color: rgba(196, 166, 83, .42);
    /* optical reset — app.css sets translateY(-5px), we express it through the
       shared transform above instead */
}
/* the cover panel floats above the info block so a tilt shows real depth */
.book-cover-wrap {
    position: relative;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transform: translateZ(0) scale(1);
    transform-origin: 50% 60%;
    transition: transform .5s var(--td-ease-out), filter .5s var(--td-ease);
    z-index: 2;
    isolation: isolate;
}
.book-card:hover .book-cover-wrap {
    transform: translateZ(30px) scale(1.012);
}
/* rounded top corners survive the card now being overflow:visible */
.book-card .book-cover-placeholder { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* Spine — a soft cylindrical roll down the left edge of the cover */
.book-cover-wrap::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 26px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .46) 0%,
        rgba(0, 0, 0, .24) 26%,
        rgba(0, 0, 0, .07) 52%,
        rgba(255, 255, 255, .17) 74%,
        rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: normal;
}
/* Highlight sweep across the cover on hover */
.book-cover-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 34%,
        rgba(255, 255, 255, .34) 50%,
        rgba(255, 255, 255, 0) 66%);
    transform: translateX(-40%);
    transition: opacity .3s ease, transform .85s var(--td-ease-out);
}
.book-card:hover .book-cover-wrap::after {
    opacity: 1;
    transform: translateX(40%);
}

/* Fore-edge — the block of pages showing past the cover's right side */
.book-card::after {
    content: '';
    position: absolute;
    top: 6px; right: -6px;
    width: 7px; bottom: 12px;
    z-index: 1;
    pointer-events: none;
    border-radius: 0 4px 4px 0;
    background:
        repeating-linear-gradient(180deg,
            var(--td-paper-a) 0 2px,
            var(--td-paper-b) 2px 4px);
    box-shadow: 3px 0 8px -3px rgba(40, 36, 90, .45);
    opacity: .95;
    transition: transform .4s var(--td-ease-out), right .4s var(--td-ease-out);
}
.book-card:hover::after { right: -9px; }

/* Bottom edge (visible when the book is tilted down) */
.book-card .book-info { position: relative; z-index: 2; }

/* Sidebar / list widgets keep their compact silhouette */
.hb-list-widget .book-card::after,
.hb-list-widget .book-card::before { display: none; }
.hb-list-widget .book-cover-wrap::before { width: 16px; }

/* homepage block grids behave like .books-grid for depth purposes */
.hb-books:not(.hb-list-widget) {
    perspective: 1400px;
    perspective-origin: 50% 45%;
}
.hb-books:not(.hb-list-widget) > .book-card { transform-style: preserve-3d; }

/* ── 3. Bookshelf ──────────────────────────────────────────────────────── */
.books-grid--shelf,
.hb-books--shelf {
    --shelf-gap: 30px;
    row-gap: calc(var(--shelf-gap) + 40px) !important;
    align-items: end;
}
.books-grid--shelf > .book-card,
.hb-books--shelf > .book-card { margin-bottom: 0; }

/* the plank: it spans the card plus the grid gutter, so neighbouring planks
   in the same row fuse into one continuous shelf */
.books-grid--shelf > .book-card::before,
.hb-books--shelf > .book-card::before {
    content: '';
    position: absolute;
    left: calc(var(--shelf-gap) / -2);
    right: calc(var(--shelf-gap) / -2);
    top: 100%;
    height: 26px;
    z-index: 0;
    pointer-events: none;
    border-radius: 2px 2px 5px 5px;
    background: linear-gradient(180deg,
        var(--shelf-top) 0 4px,
        #b98f60 4px 6px,
        var(--shelf-mid) 6px 17px,
        var(--shelf-low) 17px 100%);
    box-shadow: inset 0 2px 0 var(--shelf-lip),
                inset 5px 0 6px -4px rgba(0, 0, 0, .45),
                inset -5px 0 6px -4px rgba(0, 0, 0, .45),
                0 26px 30px -18px var(--shelf-shadow);
    transform: translateZ(-2px);
    transition: box-shadow .4s var(--td-ease);
}
/* back panel behind the row — reads as the inside of a bookcase */
.books-grid--shelf > .book-card .book-info::after,
.hb-books--shelf > .book-card .book-info::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(26,15,5,.9) 0%, transparent 70%),
        repeating-linear-gradient(
            180deg,
            rgba(60,42,92,.3) 0 2px,
            transparent 2px 4px
        );
    border-radius: 0 0 20px 20px;
    transform: translateZ(-4px);
    transition: background .4s var(--td-ease);
}
.books-grid--shelf > .book-card:hover .book-info::after,
.hb-books--shelf > .book-card:hover .book-info::after {
    background:
        linear-gradient(0deg, rgba(26,15,5,.7) 0%, transparent 70%),
        repeating-linear-gradient(
            180deg,
            rgba(60,42,92,.25) 0 2px,
            transparent 2px 4px
        );
}

.the-plank {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26px;
    z-index: 0;
    pointer-events: none;
    border-radius: 2px 2px 5px 5px;
    background: linear-gradient(180deg,
        var(--shelf-top) 0 4px,
        #b98f60 4px 6px,
        var(--shelf-mid) 6px 17px,
        var(--shelf-low) 17px 100%);
    box-shadow: inset 0 2px 0 var(--shelf-lip),
                inset 5px 0 6px -4px rgba(0, 0, 0, .45),
                inset -5px 0 6px -4px rgba(0, 0, 0, .45),
                0 26px 30px -18px var(--shelf-shadow);
    transform: translateZ(-2px);
}

.books-grid--shelf > .book-card::before,
.hb-books--shelf > .book-card::before { content: ''; position: absolute; left: calc(var(--shelf-gap) / -2); right: calc(var(--shelf-gap) / -2); top: 100%; height: 26px; z-index: 0; pointer-events: none; border-radius: 2px 2px 5px 5px; background: linear-gradient(180deg, var(--shelf-top) 0 4px, #b98f60 4px 6px, var(--shelf-mid) 6px 17px, var(--shelf-low) 17px 100%); box-shadow: inset 0 2px 0 var(--shelf-lip), inset 5px 0 6px -4px rgba(0, 0, 0, .45), inset -5px 0 6px -4px rgba(0, 0, 0, .45), 0 26px 30px -18px var(--shelf-shadow); transform: translateZ(-2px); transition: box-shadow .4s var(--td-ease); }
.books-grid--shelf > .book-card:hover::before,
.hb-books--shelf > .book-card:hover::before { box-shadow: inset 0 2px 0 var(--shelf-lip), inset 5px 0 6px -4px rgba(0, 0, 0, .55), inset -5px 0 6px -4px rgba(0, 0, 0, .55), 0 40px 50px -30px rgba(26,15,5, .9); }
.books-grid--shelf > .book-card,
.hb-books--shelf > .book-card { box-shadow: 0 18px 22px -18px rgba(26,15,5, .85); }
.books-grid--shelf > .book-card:hover,
.hb-books--shelf > .book-card:hover { box-shadow: 0 40px 50px -30px rgba(26,15,5, .9), 0 10px 22px -14px rgba(26,15,5, .5) !important; }
.books-grid--shelf > .book-card:hover,
.hb-books--shelf > .book-card:hover { --td-lift: -22px; }

/* whole-shelf back panel — dark library back */
.books-grid--shelf,
.hb-books--shelf {
    position: relative;
    background:
        linear-gradient(180deg, #1a0f05 0%, #0d0703 100%);
}
.books-grid--shelf::after,
.hb-books--shelf::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0; top: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50% 30% at 50% 0%, rgba(139, 92, 31, .3), transparent 50%),
        radial-gradient(50% 40% at 50% 60%, rgba(80, 50, 15, .25), transparent 50%);
}

/* ── 4. Category cards + icon medallions ───────────────────────────────── */
.category-card,
.category-card:hover {
    transform: perspective(1000px)
               rotateX(var(--td-rx, 0deg))
               rotateY(var(--td-ry, 0deg))
               translate3d(0, var(--td-lift, 0px), 0);
    transition: transform var(--td-duration) var(--td-ease-out),
                box-shadow var(--td-duration) var(--td-ease),
                border-color var(--td-duration) var(--td-ease);
}
.category-card { --td-lift: 0px; transform-style: preserve-3d; }
.category-card:hover {
    --td-lift: -8px;
    z-index: 2;
    border-color: color-mix(in srgb, var(--cat-color, #8b5a3c) 55%, transparent);
    box-shadow: 0 28px 44px -26px color-mix(in srgb, var(--cat-color, #8b5a3c) 80%, #000);
}

.cat-ico { display: block; flex: none; }

/* the medallion */
.cat-icon,
.cat-icon-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--cat-color, #8b5a3c) 26%, #ffffff) 0%,
            color-mix(in srgb, var(--cat-color, #8b5a3c) 10%, #ffffff) 100%);
    color: var(--cat-color, #8b5a3c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
                0 12px 22px -14px color-mix(in srgb, var(--cat-color, #8b5a3c) 90%, #000);
    border: 1px solid color-mix(in srgb, var(--cat-color, #8b5a3c) 24%, transparent);
    transform: translateZ(34px);
    transition: transform .45s var(--td-ease-out), box-shadow .45s var(--td-ease);
}
.cat-icon  { width: 66px; height: 66px; margin-bottom: 14px; }
.cat-icon  .cat-ico  { width: 32px; height: 32px; }
.cat-icon-lg { width: 92px; height: 92px; border-radius: 28px; }
.cat-icon-lg .cat-ico { width: 46px; height: 46px; }

.category-card:hover .cat-icon,
.category-card:hover .cat-icon-lg { transform: translateZ(66px) rotateY(-8deg); }

/* hero-embedded icon (category show page) — keep the tint over gradients */
.page-hero .cat-icon-lg {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7);
}

/* sidebar tag chips keep an inline icon */
.hb-sb-tags .cat-ico {
    width: 15px; height: 15px;
    display: inline-block;
    vertical-align: -3px;
    opacity: .85;
}

/* ── 5. Profile / author cards ─────────────────────────────────────────── */
.author-card,
.author-card:hover,
.p2-author-card,
.p2-author-card:hover {
    transform: perspective(1000px)
               rotateX(var(--td-rx, 0deg))
               rotateY(var(--td-ry, 0deg))
               translate3d(0, var(--td-lift, 0px), 0);
    transition: transform var(--td-duration) var(--td-ease-out),
                box-shadow var(--td-duration) var(--td-ease),
                border-color var(--td-duration) var(--td-ease);
}
.author-card, .p2-author-card { --td-lift: 0px; transform-style: preserve-3d; }
.author-card:hover, .p2-author-card:hover {
    --td-lift: -9px;
    z-index: 2;
    border-color: rgba(196, 166, 83, .42);
    box-shadow: 0 32px 48px -28px rgba(45, 17, 0, .55);
}
.author-card .author-avatar,
.p2-author-card .author-avatar {
    transform: translateZ(30px);
    transition: transform .45s var(--td-ease-out), box-shadow .45s var(--td-ease);
    box-shadow: 0 10px 22px -12px rgba(45, 17, 0, .65);
}
.author-card:hover .author-avatar,
.p2-author-card:hover .author-avatar {
    transform: translateZ(56px) scale(1.05);
    box-shadow: 0 20px 34px -14px rgba(45, 17, 0, .7);
}
.author-card .author-name,
.author-card .author-role { transform: translateZ(14px); }
.author-card .author-bio  { transform: translateZ(6px); }

/* avatar ring */
.author-avatar { position: relative; }
.author-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(196, 166, 83, .35);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .35s var(--td-ease), transform .35s var(--td-ease);
    pointer-events: none;
}
.author-card:hover .author-avatar::after,
.p2-author-card:hover .author-avatar::after { opacity: 1; transform: scale(1); }

/* dashboard / profile panels — the same pointer tilt as the front cards, so
   the reader / writer / author dashboards carry the v17 3D feel too */
.dash-card, .panel, .hb-card, .stat-card, .upgrade-card,
.dash-card:hover, .panel:hover, .hb-card:hover, .stat-card:hover, .upgrade-card:hover {
    transform: perspective(1100px)
               rotateX(var(--td-rx, 0deg))
               rotateY(var(--td-ry, 0deg))
               translate3d(0, var(--td-lift, 0px), 0);
    transition: transform var(--td-duration) var(--td-ease-out),
                box-shadow var(--td-duration) var(--td-ease),
                border-color var(--td-duration) var(--td-ease);
}
.dash-card, .panel, .hb-card, .stat-card, .upgrade-card {
    --td-lift: 0px;
    transform-style: preserve-3d;
}
.dash-card:hover, .panel:hover, .hb-card:hover, .stat-card:hover, .upgrade-card:hover {
    --td-lift: -6px;
    z-index: 2;
    box-shadow: 0 26px 44px -28px rgba(45, 17, 0, .55);
}

/* ── 6. Post cards ─────────────────────────────────────────────────────── */
.blog-card, .blog-card:hover, .hb-post, .hb-post:hover {
    transform: perspective(1000px)
               rotateX(var(--td-rx, 0deg))
               rotateY(var(--td-ry, 0deg))
               translate3d(0, var(--td-lift, 0px), 0);
    transition: transform var(--td-duration) var(--td-ease-out),
                box-shadow var(--td-duration) var(--td-ease),
                border-color var(--td-duration) var(--td-ease);
}
.blog-card, .hb-post { --td-lift: 0px; transform-style: preserve-3d; }
.blog-card:hover, .hb-post:hover {
    --td-lift: -8px;
    z-index: 2;
    border-color: rgba(196, 166, 83, .4);
    box-shadow: 0 30px 46px -28px rgba(45, 17, 0, .55);
}
.blog-card-media, .hb-post-img {
    overflow: hidden;
    transform: translateZ(20px);
    transition: transform .45s var(--td-ease-out);
}
.blog-card:hover .blog-card-media,
.hb-post:hover .hb-post-img { transform: translateZ(40px); }
.blog-card-media img, .hb-post-img img { transition: transform .7s var(--td-ease-out); }
.blog-card:hover .blog-card-media img,
.hb-post:hover .hb-post-img img { transform: scale(1.07); }

/* ── 7. Panels, widgets, page heroes ───────────────────────────────────── */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: -40% -10% auto;
    height: 150%;
    z-index: -1;
    background:
        radial-gradient(46% 60% at 18% 30%, rgba(196, 166, 83, .30), transparent 70%),
        radial-gradient(40% 55% at 82% 70%, rgba(178,60,40, .22), transparent 70%);
    pointer-events: none;
}
.page-hero .page-title {
    transform: translateZ(0);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .35);
}
.section-header .section-title {
    position: relative;
    display: inline-block;
}
.section-header .section-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -10px;
    width: 54px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #8b5a3c, #8f3a24);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform .6s var(--td-ease-out);
}
.td-js .section-header:not(.is-in) .section-title::after { transform: scaleX(0); }

/* generic raised widget */
.hb-widget, .hb-sb {
    transition: transform .4s var(--td-ease-out), box-shadow .4s var(--td-ease);
}
.hb-widget:hover { transform: translateY(-3px); }

/* ── 8. The 3D homepage hero scene ─────────────────────────────────────── */
.hb-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hb-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 48px;
    align-items: center;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}
.hb-hero-body.hb-hero--custom { display: block; text-align: left; padding: 0; }
.hb-hero-copy { min-width: 0; }
.hb-hero--right .hb-hero-copy { order: 2; }
.hb-hero--right .hb-hero-stage { order: 1; }
.hb-hero--center .hb-hero-stats { justify-content: center; }
.hb-hero--center .hb-hero-desc { margin-left: auto; margin-right: auto; }
.hb-hero--center .hb-hero-layout { grid-template-columns: minmax(0, 1fr); text-align: center; }
.hb-hero--center .hb-hero-stage { display: none; }

/* floating cover fan */
.hb-hero-stage {
    position: relative;
    height: clamp(300px, 42vw, 460px);
    perspective: 1500px;
    perspective-origin: 50% 50%;
    transform: rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg));
    transform-style: preserve-3d;
    transition: transform .55s var(--td-ease-out);
}
.hb-hero-book {
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(132px, 15vw, 196px);
    aspect-ratio: 2 / 3;
    margin: 0;
    border-radius: 8px 12px 12px 8px;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .85),
                0 14px 30px -18px rgba(0, 0, 0, .6);
    border: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(140deg, #3b3566, #211f3c);
    transform:
        translate(-50%, -50%)
        translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px))
        rotateY(var(--ry, 0deg))
        rotateX(var(--rx, 0deg))
        rotateZ(var(--rz, 0deg));
    animation: hb-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
    will-change: transform;
}
.hb-hero-book img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* spine roll on every floating cover */
.hb-hero-book::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 22px; z-index: 2;
    background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.22) 55%, rgba(255,255,255,.14) 78%, transparent);
    pointer-events: none;
}
.hb-hero-book::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.28) 50%, transparent 64%);
    transform: translateX(-70%);
    animation: hb-glint 7s ease-in-out var(--delay, 0s) infinite;
    pointer-events: none;
}
.hb-hero-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,.9);
    background: var(--grad-brand-3, linear-gradient(135deg, #8b5a3c, #8f3a24));
}
.hb-hero-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .18);
    transform: rotateX(74deg);
    pointer-events: none;
    animation: hb-orbit 40s linear infinite;
}
.hb-hero-glow {
    position: absolute;
    left: 50%; top: 58%;
    width: 78%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(196, 166, 83, .55), transparent 62%);
    filter: blur(28px);
    pointer-events: none;
}
@keyframes hb-float {
    0%   { transform: translate(-50%, -50%) translate3d(var(--x, 0px), calc(var(--y, 0px) + 10px), var(--z, 0px)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)); }
    100% { transform: translate(-50%, -50%) translate3d(var(--x, 0px), calc(var(--y, 0px) - 14px), var(--z, 0px)) rotateY(calc(var(--ry, 0deg) + 5deg)) rotateX(calc(var(--rx, 0deg) - 3deg)) rotateZ(var(--rz, 0deg)); }
}
@keyframes hb-glint {
    0%, 62% { transform: translateX(-70%); opacity: 0; }
    72%     { opacity: .9; }
    88%,100%{ transform: translateX(70%); opacity: 0; }
}
@keyframes hb-orbit { to { transform: rotateX(74deg) rotate(360deg); } }

/* animated CTA in the hero — qualified so the builder's inline <style>
   (which loads after this file) cannot flatten it back to inline-block */
.hb-hero .hb-hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .3s var(--td-ease-out), box-shadow .3s var(--td-ease);
}
.hb-hero .hb-hero-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--td-ease-out);
}
.hb-hero .hb-hero-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 22px 40px -18px rgba(196, 166, 83, .9);
    background: #7a4c32;
    color: #fff;
}
.hb-hero .hb-hero-btn:hover::after { transform: translateX(120%); }
.hb-hero .hb-hero-btn::before {
    content: '';
    width: 17px; height: 15px;
    flex: none;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
    transition: transform .35s var(--td-ease-out);
}
.hb-hero .hb-hero-btn:hover::before { transform: translateX(5px); }

/* stat / chip row under the hero copy */
.hb-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.hb-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(24px);
    transition: transform .3s var(--td-ease-out), background .3s var(--td-ease);
}
.hb-hero-stat:hover { transform: translateZ(44px) translateY(-3px); background: rgba(255,255,255,.18); }
.hb-hero-stat b { font-weight: 800; }

/* ── 9. Buttons ────────────────────────────────────────────────────────── */
.btn-read, .btn-read-now, .section-link {
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--td-ease-out), box-shadow .3s var(--td-ease);
}
.btn-read::after, .btn-read-now::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform .75s var(--td-ease-out);
}
.btn-read:hover::after, .btn-read-now:hover::after { transform: translateX(130%); }
.btn-read-now:hover { transform: translateY(-3px) scale(1.03); }
.section-link { display: inline-flex; align-items: center; gap: 6px; }
.section-link:hover { transform: translateX(4px); }

/* ── 10. Responsive + reduced motion ───────────────────────────────────── */
@media (max-width: 980px) {
    .hb-hero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        text-align: center;
    }
    .hb-hero-stage { height: clamp(240px, 54vw, 340px); order: -1; }
    .hb-hero-body, .hb-hero--left, .hb-hero--right, .hb-hero--center { text-align: center; }
    .hb-hero-stats { justify-content: center; }
}
@media (max-width: 768px) {
    .book-card::after { width: 5px; right: -4px; }
    .cat-icon { width: 56px; height: 56px; border-radius: 17px; }
    .cat-icon .cat-ico { width: 27px; height: 27px; }
    .cat-icon-lg { width: 74px; height: 74px; }
    .cat-icon-lg .cat-ico { width: 38px; height: 38px; }
    .books-grid--shelf, .hb-books--shelf { --shelf-gap: 18px; row-gap: calc(var(--shelf-gap) + 34px) !important; }
}
@media (max-width: 480px) {
    .book-card::after { display: none; }
    .book-card:hover .book-cover-wrap { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .td-js .td-rise:not(.is-in) { opacity: 1; transform: none; }
    .td-rise.is-in { transition: none; }
    .hb-hero-book { animation: none !important; }
    .hb-hero-book::after { animation: none !important; opacity: 0; }
    .hb-hero-orbit { animation: none !important; }
    .book-card, .category-card, .author-card, .blog-card,
    .p2-author-card, .hb-post { transition: none !important; }
    .book-card:hover, .category-card:hover, .author-card:hover,
    .blog-card:hover, .p2-author-card:hover, .hb-post:hover { transform: none !important; }
    .book-card:hover .book-cover-wrap,
    .author-card:hover .author-avatar,
    .p2-author-card:hover .author-avatar { transform: none !important; }
}