/* ==========================================================================
   Reflectors Shelf — modal that opens from the lifetime word count
   in the home greeting. Visual brief: a quiet bookshelf in a dark room.
   No charts, no progress bars, no glow effects. The user's book joins
   a curated lineage of historical reflectors. See reflectors.json.
   ========================================================================== */

#reflectorsShelfModal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(ellipse at center, #14111e 0%, #0a0810 70%);
    opacity: 0;
    transition: opacity 480ms ease;
}

#reflectorsShelfModal.is-open {
    display: flex;
    opacity: 1;
}

/* Subtle paper-grain noise overlay on the backdrop */
#reflectorsShelfModal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.012) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.008) 0%, transparent 50%);
    opacity: 0.6;
}

.reflectors-shelf-content {
    position: relative; /* anchor for the absolutely-positioned floating book */
    width: 100%;
    max-width: 1080px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #e8e0c8;
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px 24px;
}

.reflectors-shelf-content::-webkit-scrollbar {
    width: 6px;
}
.reflectors-shelf-content::-webkit-scrollbar-thumb {
    background: rgba(232, 224, 200, 0.1);
    border-radius: 3px;
}

/* Close button — minimal, top-right */
.reflectors-shelf-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(232, 224, 200, 0.18);
    border-radius: 50%;
    color: rgba(232, 224, 200, 0.6);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    z-index: 10;
}
.reflectors-shelf-close:hover {
    background: rgba(232, 224, 200, 0.06);
    color: rgba(232, 224, 200, 0.95);
    border-color: rgba(232, 224, 200, 0.35);
}

/* Mute toggle — to the LEFT of the close button, same visual treatment */
.reflectors-shelf-mute {
    position: absolute;
    top: 8px;
    right: 52px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(232, 224, 200, 0.18);
    border-radius: 50%;
    color: rgba(232, 224, 200, 0.55);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    z-index: 10;
}
.reflectors-shelf-mute:hover {
    background: rgba(232, 224, 200, 0.06);
    color: rgba(232, 224, 200, 0.9);
    border-color: rgba(232, 224, 200, 0.35);
}
.reflectors-shelf-mute svg {
    display: block;
}

/* Title (small, set above shelf) */
.reflectors-shelf-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 224, 200, 0.4);
    margin-top: 10px;
    margin-bottom: 18px;
    opacity: 0;
    animation: reflectorsFadeIn 600ms ease 200ms forwards;
}

/* The materializing book — absolutely positioned over the shelf area so it
   doesn't claim layout space. This way, fading it out at the end of the
   reveal doesn't shift the shelf or anything below it upward. Positioned to
   sit in front of the shelf books during the reveal. */
.reflectors-floating-book {
    position: absolute;
    top: 70px;
    left: 50%;
    width: 80px;
    height: 200px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.94);
    transition: opacity 800ms ease, transform 800ms ease;
}
.reflectors-floating-book.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.reflectors-floating-book.is-leaving {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px) scale(0.92);
    transition: opacity 600ms ease, transform 600ms ease;
}

/* Counter sits just below the floating book.
   Centered horizontally via translateX(-50%) so digit-width changes during
   the count tick-up don't push the number sideways. */
.reflectors-floating-counter {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Palatino', 'Palatino Linotype', Georgia, serif;
    font-size: 20px;
    color: rgba(232, 224, 200, 0.92);
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-feature-settings: 'lnum';
    opacity: 0;
    transition: opacity 400ms ease;
}
.reflectors-floating-counter.is-visible {
    opacity: 1;
}

/* The shelf itself */
.reflectors-shelf-stage {
    position: relative;
    width: 100%;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 16px 0;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 800ms ease;
}
.reflectors-shelf-stage.is-visible {
    opacity: 1;
}

/* The wooden line (no 3D, no shadows-on-shadows) */
.reflectors-shelf-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(232, 224, 200, 0.18) 8%,
        rgba(232, 224, 200, 0.28) 50%,
        rgba(232, 224, 200, 0.18) 92%,
        transparent 100%
    );
}

/* Row of book spines */
.reflectors-shelf-books {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Each spine is an SVG with cloth/paper colors */
.reflector-spine {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.42;
    transition: opacity 600ms ease, transform 250ms ease;
    transform-origin: bottom center;
}
.reflector-spine.is-passed {
    opacity: 1;
}
.reflector-spine.is-next {
    opacity: 0.78;
    animation: reflectorPulseNext 3.6s ease-in-out infinite;
}
.reflector-spine.is-user {
    opacity: 1;
}
.reflector-spine:hover {
    transform: translateY(-3px);
    opacity: 1;
}

@keyframes reflectorPulseNext {
    0%, 100% { opacity: 0.78; }
    50% { opacity: 0.95; }
}

/* The user's book in the shelf — slim, pale, plain */
.reflector-spine.is-user .spine-svg {
    filter: drop-shadow(0 0 12px rgba(232, 224, 200, 0.18));
}

/* Spine SVG itself */
.spine-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* HERO area — single focal point below the shelf.
   Default state: reveal sentence centered.
   Hover state (no cover): book backstory in single column.
   Hover state (with cover): book cover (left) + backstory text (right).
   min-height locked to fit worst case (cover + 5 lines of text) so the
   layout never shifts when swapping states. */
.reflectors-reveal-line {
    width: 100%;
    max-width: 800px;
    min-height: 270px;
    margin: 24px auto 0;
    padding: 0 24px;
    text-align: center;
    font-family: 'Palatino', 'Palatino Linotype', Georgia, serif;
    color: rgba(232, 224, 200, 0.95);
    opacity: 0;
    transition: opacity 800ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.reflectors-reveal-line.is-visible {
    opacity: 1;
}

/* When showing a backstory WITH cover, switch to two-column row layout */
.reflectors-reveal-line.is-hovering.has-cover {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 28px;
}

/* HERO — default state: the reveal sentence */
.hero-reveal-text {
    font-size: 26px;
    line-height: 1.45;
    color: rgba(232, 224, 200, 0.95);
    max-width: 680px;
    letter-spacing: 0.005em;
}

/* The cover thumbnail (only shown on hover when cover available) */
.hero-book-cover {
    width: 156px;
    height: 208px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    display: block;
}

/* Text column for the backstory state */
.hero-book-info {
    display: flex;
    flex-direction: column;
    max-width: 460px;
}

/* Single-column hover (no cover) — center the text column */
.reflectors-reveal-line.is-hovering:not(.has-cover) .hero-book-info {
    text-align: center;
    align-items: center;
}

/* HERO — hover state: the book backstory */
.hero-book-author {
    font-size: 14px;
    font-style: italic;
    color: rgba(232, 224, 200, 0.55);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: none;
}
.hero-book-work {
    font-size: 18px;
    font-style: italic;
    color: rgba(232, 224, 200, 0.78);
    margin-bottom: 14px;
}
.hero-book-backstory {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(232, 224, 200, 0.95);
    max-width: 480px;
    margin-bottom: 12px;
}
.hero-book-meta {
    font-size: 12px;
    color: rgba(232, 224, 200, 0.42);
    letter-spacing: 0.05em;
    font-feature-settings: 'lnum';
    font-style: italic;
}

/* Kinship line — verified quote from the featured author. Sits inside the
   hero, immediately below the reveal sentence. Visually quieter than the
   reveal but not invisible — it's the wisdom-handed-down moment, not
   subordinate text. Hidden when the hero is in hover/backstory state. */
.hero-kinship {
    margin-top: 26px;
    max-width: 600px;
    text-align: center;
    font-family: 'Palatino', 'Palatino Linotype', Georgia, serif;
}
.reflectors-reveal-line.is-hovering .hero-kinship {
    display: none;
}
.hero-kinship-quote {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(232, 224, 200, 0.78);
    font-style: italic;
    margin-bottom: 8px;
}
.hero-kinship-attribution {
    font-size: 13px;
    color: rgba(232, 224, 200, 0.42);
    letter-spacing: 0.04em;
    font-style: normal;
}

/* Bottom milestone — footer stat. The quietest line, but readable. */
.reflectors-milestone {
    width: 100%;
    max-width: 540px;
    min-height: 56px;
    margin: 24px auto 0;
    padding: 16px 24px 0;
    text-align: center;
    font-family: 'Palatino', 'Palatino Linotype', Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(232, 224, 200, 0.42);
    border-top: 1px solid rgba(232, 224, 200, 0.08);
    font-feature-settings: 'lnum';
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 800ms ease;
}
.reflectors-milestone.is-visible {
    opacity: 1;
}

@keyframes reflectorsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The lifetime word count's hover + click is wired in home.js + index.html
   via the .greeting-words-link wrapper, sharing styles with .greeting-minds-link. */

/* Mobile / narrow viewports */
@media (max-width: 720px) {
    .reflectors-shelf-content {
        max-width: 100%;
        padding: 8px 4px 24px;
    }
    .reflectors-floating-book {
        width: 72px;
        height: 200px;
        margin-bottom: 30px;
    }
    .reflectors-floating-counter {
        font-size: 19px;
        bottom: -34px;
    }
    .reflectors-shelf-books {
        gap: 3px;
    }
    .reflectors-reveal-line {
        font-size: 16px;
    }
    .reflectors-carrot-line {
        font-size: 13px;
    }
    .reflectors-tooltip {
        margin-top: 22px;
        padding: 12px 16px;
    }
    .reflectors-tooltip-backstory {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .reflectors-shelf-content {
        padding: 6px 2px 20px;
    }
    .reflectors-shelf-stage {
        padding: 16px 8px 0;
        min-height: 220px;
    }
    .reflectors-floating-book {
        width: 64px;
        height: 170px;
        margin-bottom: 28px;
    }
}

/* Reduce-motion: skip choreography, show end state immediately */
@media (prefers-reduced-motion: reduce) {
    .reflectors-floating-book,
    .reflectors-floating-book.is-leaving,
    .reflectors-floating-counter,
    .reflectors-shelf-stage,
    .reflectors-reveal-line,
    .reflectors-carrot-line,
    .reflectors-milestone {
        transition: none !important;
        animation: none !important;
    }
    .reflector-spine {
        transition: none !important;
        animation: none !important;
    }
}