:root {
   /* Landing gold — always references the permanent --gold-effect token from global.css.
      The #d4af37 fallback keeps it working if global.css hasn't loaded yet. */
   --gold: var(--gold-effect, #d4af37);
   --bg: #020202;
   --cell-bg: #110f0a;         /* warm dark parchment — amber-tinted, not cold black */
   /* Curtain panels are intentionally mid-dark (not black) for contrast */
   --curtain-dark: #181818;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 /* Landing page is always dark — never inherits light themes from global.css */
 body { background: #020202; font-family: 'Cormorant Garamond', serif; overflow: hidden; color: white; }

 /* Fullscreen background particles */
 .bg-particles {
   position: fixed;
   top: 0; left: 0; width: 100%; height: 100%;
   pointer-events: none;
   z-index: 1;
 }


 /* SCRAPE CANVAS — replaces fragile CSS Grid cell overlay with a
    pixel-perfect canvas.  Guaranteed solid coverage on every screen
    size, DPI, and browser/GPU combination. */
 .scrape-canvas {
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     width: 100%; height: 100%;
     z-index: 10;
     pointer-events: none;
 }

 /* Gold-flash particle layer — sits above the scrape canvas */
 .fx-canvas {
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     width: 100%; height: 100%;
     z-index: 11;
     pointer-events: none;
 }


 /* LANDING LAYER */
 #landing-page {
     position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
     justify-content: center; align-items: center; z-index: 100;
     transition: opacity 1.5s ease;
 }
 .book-frame {
     position: relative;
     width: 90vw; height: 75vh;
     max-width: 900px;
     max-height: 80vh;
     /* warm dark parchment — matches cell-visual base colour */
     background: #100d08;
     border: 1px solid rgba(212, 175, 55, 0.22);
     /* Create explicit stacking context so child z-indices resolve
        reliably across all browsers/GPUs (fixes large-screen overlay bug) */
     isolation: isolate;
     /* soft glow — same intensity as coming-soon book stage */
     box-shadow:
         0 0 18px rgba(212, 175, 55, 0.18),
         0 0 50px rgba(212, 175, 55, 0.08);
     overflow: hidden;
 }

 /* Breathing glow — gently pulses the halo to draw the eye to the scrape box (off for reduced-motion) */
 @media (prefers-reduced-motion: no-preference) {
   .book-frame { animation: frameBreath 4.5s ease-in-out infinite; }
 }
 @keyframes frameBreath {
   0%, 100% { box-shadow: 0 0 16px rgba(212,175,55,0.15), 0 0 46px rgba(212,175,55,0.07); }
   50%      { box-shadow: 0 0 28px rgba(212,175,55,0.34), 0 0 66px rgba(212,175,55,0.15); }
 }
 /* Corner accents — frame the box so its margin is unmistakable */
 .frame-corner { position: absolute; width: 24px; height: 24px; border: 2px solid var(--gold); z-index: 15; pointer-events: none; opacity: 0.55; }
 .frame-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
 .frame-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
 .frame-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
 .frame-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

 /* CSS-only fallback cover — hides content before JS loads the canvas overlay.
    Removed by JS once the canvas is ready (.scrape-ready). */
 .book-frame::after {
     content: '';
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     background: var(--cell-bg, #110f0a);
     z-index: 5;
     pointer-events: none;
 }
 .book-frame.scrape-ready::after {
     display: none;
 }

 /* Mosaic border — canvas behind frame content */
 .frame-mosaic-border {
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }
.content-layer {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   z-index: 1;
}

.landing-instruction {
    margin-bottom: 1.2rem;            /* space above the book frame */
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.875rem, 0.5vw + 0.65rem, 1.0625rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold, #b38d47);
    text-align: center;
    animation: pulse 3s infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (max-width: 480px) {
    .landing-instruction {
        letter-spacing: 0.15em;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

.landing-quote-block {
    max-width: 80%;                    /* allow wide text, still inside frame */
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;             /* ensure both lines align to the right edge */
    gap: 2.8rem;                       /* ~3 text rows of vertical space */
}

.landing-quote-text {
    /* no italic – clean, steady tone */
    color: var(--color-text-secondary, #b0b0b0);
    line-height: 1.6;
    font-size: 1.1rem;                /* fallback for old browsers */
    font-size: clamp(1rem, 1.1vw + 0.9rem, 1.45rem);
}

.landing-quote-author {
    color: var(--gold);
    letter-spacing: 0.18em;
    font-size: 1rem;                   /* fallback for old browsers */
    font-size: clamp(0.9rem, 0.9vw + 0.6rem, 1.15rem);
}

@media (max-width: 768px) {
    .book-frame {
        width: 92vw;
        height: 72vh;
    }
    .content-layer {
        padding: 0 10%;
        justify-content: center;
        align-items: flex-end;
    }
    .landing-quote-block {
        max-width: 95%;
    }
    .landing-quote-text {
        /* On small screens, allow wrapping and shrink slightly so text is never clipped */
        white-space: normal;
        font-size: 1rem;               /* fallback on small screens */
        font-size: clamp(0.875rem, 2.8vw + 0.55rem, 1.15rem);
        line-height: 1.6;
    }
 }

/* Extra safety for small phones */
@media (max-width: 480px) {
    .landing-quote-text {
        font-size: 1rem;               /* extra-small fallback */
        font-size: clamp(0.875rem, 3.3vw + 0.45rem, 1rem);
    }
    .landing-quote-author {
        font-size: 1rem;               /* extra-small fallback */
        font-size: clamp(0.875rem, 2.5vw + 0.45rem, 1rem);
    }
}


 /* BUTTONS */
 .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 90vw; max-width: 500px; margin-top: 30px; }
 .btn-ui { background: transparent; border: 1px solid var(--gold); color: var(--gold); padding: 18px; cursor: pointer; font-family: 'Cormorant Garamond', serif; text-transform: uppercase; letter-spacing: 0.12em; }
 

 /* CINEMATIC CURTAIN REVEAL – full screen, lighter than background */
 .curtain-left,
 .curtain-right {
     position: fixed;
     top: 0;
     width: 50vw;
     height: 100vh;
     /* charcoal, clearly lighter than #000 but still dark */
     background: var(--curtain-dark, #181818);
     z-index: var(--z-overlay, 10000);
     will-change: transform;
     animation: curtain-part 2.5s cubic-bezier(0.77, 0, 0.175, 1) 0.3s forwards;
 }

 .curtain-left {
     left: 0;
     transform-origin: left center;
 }

 .curtain-right {
     right: 0;
     transform-origin: right center;
 }

 @keyframes curtain-part {
     to { transform: scaleX(0); }
 }

 .curtain-left::before,
 .curtain-right::before {
     content: '';
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     background-image: 
         repeating-linear-gradient(
             0deg,
             transparent,
             transparent 2px,
             rgba(255, 255, 255, 0.05) 2px,
             rgba(255, 255, 255, 0.05) 4px
         );
     opacity: 0.5;
 }