#magazine-reader-overlay { position: fixed; inset: 0; z-index: 100010; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; }
#magazine-reader-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(30,30,30,0.7); backdrop-filter: blur(1.5rem); -webkit-backdrop-filter: blur(1.5rem); z-index: -1; pointer-events: none; }
#magazine-reader-overlay .close-minus { color: white; }
#magazine-cover-container { 
    position: relative; padding: 3rem 2rem 4rem; 
    background-color: rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); 
    box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08); transform: rotate(3deg); transition: 0.3s; width: 100%; max-height: 60vh; box-sizing: border-box; cursor: pointer; 
}
#magazine-cover-container::after {
    content: ""; position: absolute; inset: 0;
    background-image: url('../assets/textures/texture%20crumbled%20bag%20.jpg'); background-size: cover;
    opacity: 0.45; pointer-events: none; z-index: 15; border-radius: inherit;
}

/* DO NOT OPEN — rubber stamp style */
.vac-stamp {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    z-index: 20;
    width: auto;
    padding: 0.45rem 0.9rem;
    border: 0.2rem solid #B24F44;
    outline: 0.08rem solid #B24F44;
    outline-offset: 0.2rem;
    color: #B24F44;
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.18rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.82;
    mix-blend-mode: multiply;
    pointer-events: none;
    /* Slightly uneven/worn ink feel */
    filter: contrast(1.1);
}
.vac-release { 
    position: absolute; 
    bottom: 0.5rem; 
    right: 0.3rem; 
    z-index: 20; 
    font-family: monospace; 
    font-size: 0.66rem; 
    letter-spacing: 0.05rem; 
    color: #111; 
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 0.4; 
    white-space: nowrap;
    max-height: 85%;
    overflow: hidden;
}

/* Barcode — larger, anchored to bottom-left corner of the packaging */
.vac-barcode {
    position: absolute;
    bottom: 1rem;
    left: 0.8rem;
    z-index: 20;
    width: 7rem;
    height: 2rem;
    background: repeating-linear-gradient(
        to right,
        #111 0px, #111 2px,
        transparent 2px, transparent 5px,
        #111 5px, #111 7px,
        transparent 7px, transparent 11px,
        #111 11px, #111 14px,
        transparent 14px, transparent 17px,
        #111 17px, #111 20px,
        transparent 20px, transparent 22px,
        #111 22px, #111 24px,
        transparent 24px, transparent 28px,
        #111 28px, #111 31px,
        transparent 31px, transparent 35px,
        #111 35px, #111 38px,
        transparent 38px, transparent 40px,
        #111 40px, #111 42px,
        transparent 42px, transparent 46px,
        #111 46px, #111 50px,
        transparent 50px, transparent 52px,
        #111 52px, #111 55px,
        transparent 55px, transparent 58px,
        #111 58px, #111 61px,
        transparent 61px, transparent 64px,
        #111 64px, #111 68px,
        transparent 68px, transparent 70px,
        #111 70px, #111 73px,
        transparent 73px, transparent 77px,
        #111 77px, #111 80px,
        transparent 80px, transparent 83px,
        #111 83px, #111 86px,
        transparent 86px, transparent 89px,
        #111 89px, #111 92px,
        transparent 92px, transparent 96px,
        #111 96px, #111 100px,
        transparent 100px, transparent 104px,
        #111 104px, #111 107px,
        transparent 107px, transparent 110px,
        #111 110px, #111 112px
    );
    opacity: 0.5;
}

/* Vacuum-seal weld effect: pushed out close to packaging edges */
.vac-weld {
    position: absolute;
    inset: 0.4rem;
    z-index: 16;
    border-radius: 0.2rem;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 0.18rem rgba(255,255,255,0.55),
        inset 0 0 0 0.38rem rgba(200,195,180,0.22),
        inset 0 0 0 0.55rem rgba(255,255,255,0.12),
        0 0 0 0.12rem rgba(180,170,150,0.3);
    mix-blend-mode: screen;
}

#magazine-cover-container img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; mix-blend-mode: multiply; opacity: 0.9; }

/* Magazine bottom chapter and audio links */
.magazine-footer { position: fixed; bottom: 4rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; z-index: 100003; pointer-events: auto; }
.magazine-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 90rem; }
.magazine-chapters .highlight-link { background: transparent; backdrop-filter: none; position: relative; z-index: 100004; pointer-events: auto; box-shadow: none; padding: 0.4rem 0.2rem; }
.magazine-chapters .highlight-link::before { left: -0.2rem; }
.magazine-chapters .highlight-link::after { right: -0.2rem; }

.desktop-chapter-group {
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-chapter-group .mag-chapter-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #000;
    box-sizing: border-box;
    cursor: pointer;
    max-width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: visible;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, transform 0.2s ease, background 0.2s;
}
.desktop-chapter-group .mag-chapter-dot:hover {
    transform: scale(1.2);
}
.desktop-chapter-group .mag-chapter-dot.active-swipe-tag {
    background: #000;
}
.desktop-chapter-group .mag-chapter-dot.active-swipe-tag::before {
    content: "[";
    position: absolute;
    left: -0.4rem;
    font-size: 1rem;
    color: #111;
}
.desktop-chapter-group .mag-chapter-dot.active-swipe-tag::after {
    content: "]";
    position: absolute;
    right: -0.4rem;
    font-size: 1rem;
    color: #111;
}
.desktop-chapter-group.active-group .mag-chapter-dot,
.desktop-chapter-group:hover .mag-chapter-dot {
    max-width: 2rem;
    opacity: 1;
    margin: 0 0.4rem; /* Reduced margin to make the spacer half as wide */
    pointer-events: auto;
    visibility: visible;
    transition-delay: calc(var(--stagger-idx) * 0.05s);
}

.magazine-audio-controls {
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.magazine-audio-btn { 
    font-size: 1rem; 
    padding: 0; 
    background: transparent; 
    backdrop-filter: none; 
    border-radius: 0; 
    cursor: pointer; 
    transition: 0.2s; 
    border: none; 
    box-shadow: none; 
    text-transform: lowercase; 
    color: #111; 
    white-space: nowrap; 
}
.magazine-scene { perspective: 250rem; width: 70vw; height: 70vh; position: relative; display: flex; align-items: center; justify-content: center; }
.book-leaf { position: absolute; width: 50%; height: 100%; right: 0; transform-origin: left center; transform-style: preserve-3d; transition: 0.8s; cursor: pointer; }
.book-leaf.flipped { transform: rotateY(-180deg); }
.page-front, .page-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: none; box-shadow: none; display: flex; align-items: center; justify-content: flex-start; padding: 0; box-sizing: border-box; }
.page-back { transform: rotateY(180deg); }

.page-img-wrapper {
    position: relative;
    max-width: 100%;
    max-height: calc(100% - 3rem); /* Leave room for audio button */
    display: flex; /* Flex tightly wraps the image */
    justify-content: flex-start;
    align-items: center;
    /* Very thin paper edge to show individual pages without a dark halo */
    box-shadow: 0.1rem 0.1rem 0 rgba(0,0,0,0.03);
}

/* Sharp, hard table shadows applied ONLY to the bottom-most pages to prevent stacking halos */
.book-leaf:last-child .page-front .page-img-wrapper::before,
.book-leaf:first-child .page-back .page-img-wrapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* Soft but crisp blur, no giant rounded corners */
    box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,0.2);
}

/* Right side bottom-most page */
.book-leaf:last-child .page-front .page-img-wrapper::before {
    top: 1rem; 
    bottom: -0.2rem; /* Straight shadow dropping slightly below the page */
    left: 0.5rem; 
    right: 0.1rem; /* Very narrow right edge */
}

/* Left side bottom-most page (mirrored coords: left=spine, right=outer edge) */
.book-leaf:first-child .page-back .page-img-wrapper::before {
    top: 1rem; 
    bottom: -0.2rem; 
    left: 0.5rem; /* Spine */
    right: -0.2rem; /* Narrow left edge */
}

.page-img-wrapper img { 
    display: block;
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
    object-fit: contain; 
}

/* Subtle inner spine shadows perfectly matching the image bounds */
.page-front .page-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.03) 4%, transparent 12%);
}
.page-back .page-img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.03) 4%, transparent 12%);
}