/* ========================================
   GALLERY PAGE STYLES
   Clockwise: Egyptian-framed professional
   ENAK: Interactive graffiti blackbook
   ======================================== */

/* ----------------------------------------
   CLOCKWISE GALLERY — Egyptian Frames
   ---------------------------------------- */

.cw-gallery-section {
    padding: 3rem 0 4rem;
}

/* Filter Tabs */
.cw-gallery-filters {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.cw-filter-btn {
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--cw-charcoal);
    background: transparent;
    color: var(--cw-text-muted);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.cw-filter-btn:hover {
    border-color: var(--cw-gold);
    color: var(--cw-gold);
}

.cw-filter-btn.active {
    background: var(--cw-gold);
    border-color: var(--cw-gold);
    color: #fff;
}

body.mode-clockwise .cw-filter-btn.active {
    color: #1a1612;
}

/* Gallery Grid — Masonry-like with Egyptian frames */
.cw-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.cw-gallery-item {
    opacity: 0;
    transform: translateY(30px);
    animation: cwGalleryFadeIn 0.6s ease forwards;
}

.cw-gallery-item:nth-child(1)  { animation-delay: 0.05s; }
.cw-gallery-item:nth-child(2)  { animation-delay: 0.10s; }
.cw-gallery-item:nth-child(3)  { animation-delay: 0.15s; }
.cw-gallery-item:nth-child(4)  { animation-delay: 0.20s; }
.cw-gallery-item:nth-child(5)  { animation-delay: 0.25s; }
.cw-gallery-item:nth-child(6)  { animation-delay: 0.30s; }
.cw-gallery-item:nth-child(7)  { animation-delay: 0.35s; }
.cw-gallery-item:nth-child(8)  { animation-delay: 0.40s; }
.cw-gallery-item:nth-child(9)  { animation-delay: 0.45s; }
.cw-gallery-item:nth-child(10) { animation-delay: 0.50s; }
.cw-gallery-item:nth-child(11) { animation-delay: 0.55s; }
.cw-gallery-item:nth-child(12) { animation-delay: 0.60s; }
.cw-gallery-item:nth-child(n+13) { animation-delay: 0.65s; }

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

.cw-gallery-item.cw-gallery-featured {
    grid-column: span 2;
}

.cw-gallery-item.cw-hidden {
    display: none;
}

/* Egyptian Frame */
.egyptian-frame {
    position: relative;
    background: linear-gradient(145deg, #c9a84c, #a07a2f, #c9a84c, #8b6914, #c9a84c);
    padding: 12px;
    border-radius: 2px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.egyptian-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(184, 150, 12, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Frame corner ornaments */
.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.frame-corner::before,
.frame-corner::after {
    content: '';
    position: absolute;
    background: #d4af37;
}

.frame-tl { top: 4px; left: 4px; }
.frame-tr { top: 4px; right: 4px; }
.frame-bl { bottom: 4px; left: 4px; }
.frame-br { bottom: 4px; right: 4px; }

.frame-tl::before { width: 16px; height: 2px; top: 0; left: 0; }
.frame-tl::after  { width: 2px; height: 16px; top: 0; left: 0; }
.frame-tr::before { width: 16px; height: 2px; top: 0; right: 0; }
.frame-tr::after  { width: 2px; height: 16px; top: 0; right: 0; }
.frame-bl::before { width: 16px; height: 2px; bottom: 0; left: 0; }
.frame-bl::after  { width: 2px; height: 16px; bottom: 0; left: 0; }
.frame-br::before { width: 16px; height: 2px; bottom: 0; right: 0; }
.frame-br::after  { width: 2px; height: 16px; bottom: 0; right: 0; }

/* Frame Inner (where the art goes) */
.frame-inner {
    background: var(--cw-dark, #f0ece4);
    border: 1px solid rgba(184, 150, 12, 0.3);
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
}

.frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.egyptian-frame:hover .frame-inner img {
    transform: scale(1.03);
}

.cw-gallery-featured .frame-inner {
    aspect-ratio: 16/9;
}

/* Gallery Placeholder (fallback if no image) */
.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--cw-darker, #e8e2d8), var(--cw-dark, #f0ece4));
    transition: background 0.3s ease;
}

.placeholder-icon {
    font-size: 2rem;
    color: var(--cw-gold, #b8960c);
    opacity: 0.5;
}

.placeholder-text {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--cw-text-muted, #6b6358);
}

/* Frame Nameplate */
.frame-nameplate {
    background: linear-gradient(135deg, #2a2015, #1a1612, #2a2015);
    padding: 0.5rem 1rem;
    margin-top: 8px;
    border-radius: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nameplate-title {
    font-family: var(--font-heading, 'Bebas Neue', sans-serif);
    color: #d4af37;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.nameplate-detail {
    font-size: 0.7rem;
    color: #8a7a5a;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Responsive: Gallery Grid */
@media (max-width: 900px) {
    .cw-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .cw-gallery-item.cw-gallery-featured {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .cw-gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .cw-gallery-item.cw-gallery-featured {
        grid-column: span 1;
    }
    .egyptian-frame {
        padding: 8px;
    }
    .frame-nameplate {
        flex-direction: column;
        gap: 0.2rem;
        text-align: center;
    }
}


/* ----------------------------------------
   ENAK GALLERY — Graffiti Blackbook
   ---------------------------------------- */

.blackbook-section {
    padding: 2rem 0 4rem;
}

.blackbook-wrapper {
    max-width: 900px;
    margin: 0 auto;
    /* 3D perspective for the whole wrapper */
    perspective: 1500px;
}

/* The Book — fixed height, 3D container */
.blackbook {
    position: relative;
    width: 100%;
    height: 580px;
    /* Subtle 3D tilt for realism */
    transform-style: preserve-3d;
    /* Book shadow — thick bottom edge like a real book */
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6))
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Pages — fixed height to prevent resizing */
.bb-page {
    display: none;
    width: 100%;
    height: 580px;
}

.bb-page.bb-active {
    display: block;
}

/* ==============================================================
   PAGE FLIP ANIMATIONS
   • COVERS: subtle 3D hinge (covers are single-piece, rotation looks right)
   • SPREADS: horizontal slide + crossfade (simulates page turning
     without rotating the whole spread, which looks wrong)
   ============================================================== */

/* --- FRONT COVER: hinges on left (spine), opens right-to-left --- */

.bb-page.bb-cover-flip-out {
    display: block;
    animation: bbCoverOpen 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    transform-origin: left center;
}

.bb-page.bb-cover-flip-in {
    display: block;
    animation: bbCoverClose 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    transform-origin: left center;
}

@keyframes bbCoverOpen {
    0%   { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
    100% { transform: perspective(1800px) rotateY(-75deg); opacity: 0; }
}

@keyframes bbCoverClose {
    0%   { transform: perspective(1800px) rotateY(-75deg); opacity: 0; }
    40%  { opacity: 0.7; }
    100% { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
}

/* --- BACK COVER: hinges on right (spine is right), opens left-to-right --- */

.bb-page.bb-backcover-flip-out {
    display: block;
    animation: bbBackCoverOpen 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    transform-origin: right center;
}

.bb-page.bb-backcover-flip-in {
    display: block;
    animation: bbBackCoverClose 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    transform-origin: right center;
}

@keyframes bbBackCoverOpen {
    0%   { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
    100% { transform: perspective(1800px) rotateY(75deg); opacity: 0; }
}

@keyframes bbBackCoverClose {
    0%   { transform: perspective(1800px) rotateY(75deg); opacity: 0; }
    40%  { opacity: 0.7; }
    100% { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
}

/* --- SPREAD PAGES: slide + crossfade (no rotation) --- */
/* Forward: old page slides left & fades, new page slides in from right */

.bb-page.bb-spread-flip-out-forward {
    display: block;
    animation: bbSlideOutLeft 0.45s cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
}

.bb-page.bb-spread-flip-in-forward {
    display: block;
    animation: bbSlideInRight 0.45s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

/* Backward: old page slides right & fades, new page slides in from left */

.bb-page.bb-spread-flip-out-backward {
    display: block;
    animation: bbSlideOutRight 0.45s cubic-bezier(0.4, 0.0, 0.6, 1) forwards;
}

.bb-page.bb-spread-flip-in-backward {
    display: block;
    animation: bbSlideInLeft 0.45s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

@keyframes bbSlideOutLeft {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-6%); opacity: 0; }
}

@keyframes bbSlideInRight {
    0%   { transform: translateX(6%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes bbSlideOutRight {
    0%   { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(6%); opacity: 0; }
}

@keyframes bbSlideInLeft {
    0%   { transform: translateX(-6%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Page Inner — fixed height */
.bb-page-inner {
    width: 100%;
    height: 580px;
    border-radius: 3px 6px 6px 3px;
    overflow: hidden;
}

/* Front cover — left edge is spine */
.bb-cover .bb-page-inner {
    border-radius: 3px 6px 6px 3px;
}

/* Back cover — right edge is spine (mirrored) */
.bb-back-cover .bb-page-inner {
    border-radius: 6px 3px 3px 6px;
}

/* =====  FRONT COVER — Realistic book look  ===== */
.bb-cover-front {
    background: #0d0d0d;
    border: 2px solid #222;
    border-left: 4px solid #111;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Worn black cover texture */
    background-image:
        /* Subtle leather grain */
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.015) 0%, transparent 50%),
        /* Horizontal fiber lines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.008) 3px,
            rgba(255, 255, 255, 0.008) 4px
        );
}

/* Spine crease / binding shadow on cover */
.bb-cover-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(0, 0, 0, 0.15) 70%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Spine edge highlight */
.bb-cover-front::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 2px;
    width: 2px;
    height: 90%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.06) 80%,
        transparent
    );
    z-index: 3;
    border-radius: 1px;
    pointer-events: none;
}

/* Book edge (right side thickness) */
.bb-cover-front {
    box-shadow:
        /* Page edges visible on right */
        3px 0 0 0 #1a1a1a,
        4px 0 0 0 #151515,
        5px 1px 0 0 #111,
        /* Depth shadow */
        6px 3px 8px rgba(0, 0, 0, 0.4),
        /* Inner shadow for recessed cover */
        inset 0 0 60px rgba(0, 0, 0, 0.3),
        inset 40px 0 40px -20px rgba(0, 0, 0, 0.2);
}

/* Cover corner wear */
.bb-cover-front .bb-cover-art {
    position: relative;
    z-index: 4;
}

.bb-cover-art {
    text-align: center;
    position: relative;
    z-index: 1;
}

.bb-cover-stickers {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.bb-sticker {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: var(--font-heading, 'Permanent Marker', cursive);
    font-size: 0.9rem;
    border-radius: 2px;
    transform: rotate(-3deg);
    letter-spacing: 0.05em;
}

.bb-sticker-1 {
    background: #39ff14;
    color: #050505;
    transform: rotate(-5deg);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
}

.bb-sticker-2 {
    background: #ff1493;
    color: #050505;
    transform: rotate(3deg);
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.4);
}

.bb-sticker-3 {
    background: #00d4ff;
    color: #050505;
    transform: rotate(-2deg);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    font-size: 0.75rem;
}

.bb-cover-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bb-cover-label {
    font-family: var(--font-heading, 'Permanent Marker', cursive);
    font-size: 3rem;
    color: #e0e0e0;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.2);
}

.bb-cover-vol {
    font-family: var(--font-body, 'Orbitron', sans-serif);
    font-size: 0.9rem;
    color: #555;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* Spread Pages */
.bb-spread .bb-page-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #111;
    border: 2px solid #1a1a1a;
    position: relative;
    /* Page edges on right like a real book */
    box-shadow:
        3px 0 0 0 #1a1a1a,
        4px 0 0 0 #151515,
        5px 1px 0 0 #111,
        6px 3px 8px rgba(0, 0, 0, 0.4);
    border-radius: 3px 6px 6px 3px;
}

/* Center binding crease — realistic spine shadow */
.bb-spread .bb-page-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 20%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.4) 48%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(0, 0, 0, 0.4) 52%,
        rgba(0, 0, 0, 0.35) 60%,
        rgba(0, 0, 0, 0.2) 80%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
}

/* Spine stitching dots */
.bb-spread .bb-page-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 18px,
        rgba(255, 255, 255, 0.05) 18px,
        rgba(255, 255, 255, 0.05) 22px
    );
    z-index: 4;
    pointer-events: none;
}

/* Spread halves */
.bb-spread-left,
.bb-spread-right {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bb-spread-left {
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    /* Subtle paper gradient — darker near spine */
    background: linear-gradient(to right, #0c0c0c 0%, #111 30%, #121212 100%);
}

.bb-spread-right {
    /* Subtle paper gradient — darker near spine */
    background: linear-gradient(to left, #0c0c0c 0%, #111 30%, #121212 100%);
}

/* Artwork Placeholders */
.bb-artwork-placeholder {
    flex: 1;
    min-height: 200px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px dashed rgba(57, 255, 20, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bb-artwork-placeholder:hover {
    border-color: rgba(57, 255, 20, 0.4);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

.bb-placeholder-color {
    background: linear-gradient(135deg, #0a001a, #1a002e, #0a0a2a);
    border-color: rgba(255, 20, 147, 0.15);
}

.bb-placeholder-color:hover {
    border-color: rgba(255, 20, 147, 0.4);
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.1);
}

.bb-placeholder-dark {
    background: linear-gradient(135deg, #0f0f0f, #050505, #0a0a0a);
    border-color: rgba(0, 212, 255, 0.15);
}

.bb-placeholder-dark:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

.bb-placeholder-label {
    font-family: var(--font-body, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    color: #444;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 1;
}

/* Blackbook images */
.bb-has-image {
    border-style: solid;
    border-color: rgba(57, 255, 20, 0.1);
    padding: 0;
}

.bb-has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: contrast(1.05) saturate(0.9);
    /* Dark background visible behind contained images */
    background: #0a0a0a;
}

.bb-has-image:hover img {
    transform: scale(1.02);
    filter: contrast(1.1) saturate(1);
}

/* Sketch lines overlay */
.bb-sketch-lines {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 18px,
            rgba(57, 255, 20, 0.04) 18px,
            rgba(57, 255, 20, 0.04) 19px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 18px,
            rgba(57, 255, 20, 0.02) 18px,
            rgba(57, 255, 20, 0.02) 19px
        );
    opacity: 0.6;
}

/* Page notes — handwritten feel */
.bb-page-notes {
    padding: 0.25rem 0;
}

.bb-note {
    font-family: var(--font-heading, 'Permanent Marker', cursive);
    font-size: 0.8rem;
    color: #555;
    font-style: italic;
}

/* Page tags */
.bb-page-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bb-tag {
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(57, 255, 20, 0.2);
    border-radius: 2px;
    font-family: var(--font-body, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    color: #39ff14;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* =====  BACK COVER — Mirrored: spine on RIGHT side (book is closed)  ===== */
.bb-cover-back {
    background: #050505;
    border: 2px solid #1a1a1a;
    border-right: 4px solid #111;
    border-radius: 6px 3px 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Same worn texture as front */
    background-image:
        radial-gradient(ellipse at 70% 60%, rgba(255,255,255,0.015) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.008) 3px,
            rgba(255, 255, 255, 0.008) 4px
        );
    /* Page edges on LEFT (opposite of front cover) */
    box-shadow:
        -3px 0 0 0 #1a1a1a,
        -4px 0 0 0 #151515,
        -5px 1px 0 0 #111,
        -6px 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.3),
        inset -40px 0 40px -20px rgba(0, 0, 0, 0.2);
}

/* Spine crease on back cover — RIGHT side */
.bb-cover-back::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 40px;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(0, 0, 0, 0.15) 70%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Spine edge highlight on back cover — RIGHT side */
.bb-cover-back::after {
    content: '';
    position: absolute;
    top: 5%;
    right: 2px;
    left: auto;
    width: 2px;
    height: 90%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.06) 80%,
        transparent
    );
    z-index: 3;
    border-radius: 1px;
    pointer-events: none;
}

.bb-back-content {
    text-align: center;
    position: relative;
    z-index: 4;
}

.bb-back-tag {
    display: block;
    font-family: var(--font-heading, 'Permanent Marker', cursive);
    font-size: 2rem;
    color: #39ff14;
    text-shadow: 0 0 30px rgba(57, 255, 20, 0.4);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.bb-back-text {
    display: block;
    font-family: var(--font-body, 'Orbitron', sans-serif);
    font-size: 0.8rem;
    color: #555;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* Side Arrow Navigation — overlaid on the book */
.bb-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(57, 255, 20, 0.15);
    color: #39ff14;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bb-side-prev {
    left: -1px;
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.bb-side-next {
    right: -1px;
    border-radius: 6px 0 0 6px;
    border-right: none;
}

.bb-side-arrow:hover:not(:disabled) {
    background: rgba(57, 255, 20, 0.12);
    border-color: rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.15);
    color: #39ff14;
}

.bb-side-arrow:hover:not(:disabled) svg {
    filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.6));
}

.bb-side-arrow:disabled {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

.bb-side-arrow svg {
    width: 28px;
    height: 28px;
    transition: filter 0.3s ease, transform 0.2s ease;
}

.bb-side-arrow:active:not(:disabled) svg {
    transform: scale(0.85);
}

/* Page Indicator Dots — below the book */
.bb-page-indicator {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

.bb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 1px solid #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bb-dot-active {
    background: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

/* Responsive: Blackbook */
@media (max-width: 700px) {
    .blackbook {
        height: 450px;
    }
    .bb-page {
        height: 450px;
    }
    .bb-page-inner {
        height: 450px;
    }
    .bb-spread .bb-page-inner {
        grid-template-columns: 1fr;
    }
    .bb-spread-left {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .bb-spread .bb-page-inner::before {
        /* Horizontal binding line on mobile */
        top: 50%;
        left: 0;
        transform: translateX(0) translateY(-50%);
        width: 100%;
        height: 2px;
    }
    .bb-spread .bb-page-inner::after {
        /* Horizontal stitching on mobile */
        top: calc(50% - 1px);
        left: 0;
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(
            to right,
            transparent 0px,
            transparent 18px,
            rgba(255, 255, 255, 0.05) 18px,
            rgba(255, 255, 255, 0.05) 22px
        );
    }
    .bb-cover-label {
        font-size: 2rem;
    }
    .bb-side-arrow {
        width: 36px;
        height: 60px;
    }
    .bb-side-arrow svg {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .blackbook {
        height: 380px;
    }
    .bb-page {
        height: 380px;
    }
    .bb-page-inner {
        height: 380px;
    }
    .bb-spread-left,
    .bb-spread-right {
        padding: 1rem;
    }
    .bb-artwork-placeholder {
        min-height: 120px;
    }
    .bb-cover-label {
        font-size: 1.5rem;
    }
    .bb-sticker {
        font-size: 0.75rem;
        padding: 0.3rem 0.7rem;
    }
}