/* ============================================================ BOOK.os — closed-book.css The 3D hardcover landing state. Sits on index.html before the existing cover spread. User clicks → cover rotates open → fades into the inside. Aesthetic per Fox 2026-05-18: occult × cyberpunk × nostalgic × organic × TACTILE Reference register: Spiderwick / Dragonology / Goosebumps / D&D first-edition rulebook — heavy ornament, big serif title, you can almost feel the embossing. Idle motion rule (Fox, same turn): NOTHING THAT TILTS. No whole- body rotation/translation. Motion budget is opacity + gradient position only — glow pulse on the sigil + slow foil shimmer on the title + a single drifting CRT scanline. ============================================================ */ /* ---------- Stage ---------- */ .book-stage { position: fixed; inset: 0; z-index: 90; /* below viewport frame (50/51 are inside .spread context); above the spread */ display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 55%, rgba(20, 14, 38, 0.6) 0%, transparent 70%), radial-gradient(ellipse at 50% 100%, rgba(123, 44, 191, 0.25) 0%, transparent 60%), #050308; perspective: 2400px; perspective-origin: 50% 45%; cursor: pointer; user-select: none; /* Opacity-only transition. The previous `visibility 0s linear 0.6s` rule caused a 600ms blackout when bringing the stage BACK on Esc — visibility stayed `hidden` for the transition-delay window. `pointer-events: none` in the hidden state provides the same click-pass-through behavior without the visibility-transition trap. */ transition: opacity 0.6s ease-out; } .book-stage--open { opacity: 0; pointer-events: none; } /* Anti-flash gate for returning visitors. The inline script in index.html adds `book-intro-seen` to BEFORE the body renders if the user has opened the book before — so the stage never paints visibly. closed-book.js removes this class once `book-stage--open` is in place, restoring the smooth transition for Esc back-out + re-open. */ html.book-intro-seen .book-stage { opacity: 0; pointer-events: none; transition: none; } .book-stage-hint { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.32em; color: rgba(5, 217, 232, 0.55); text-transform: uppercase; text-shadow: 0 0 12px rgba(5, 217, 232, 0.45); pointer-events: none; animation: book-hint-pulse 3.6s ease-in-out infinite; } @keyframes book-hint-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1.0; } } .book-stage-skip { position: absolute; bottom: 22px; right: 26px; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: rgba(181, 186, 206, 0.5); text-transform: uppercase; background: transparent; border: 1px solid rgba(181, 186, 206, 0.18); padding: 6px 12px; cursor: pointer; transition: color 0.18s, border-color 0.18s; } .book-stage-skip:hover { color: var(--naus-magenta); border-color: rgba(255, 42, 109, 0.5); } /* ---------- 3D book root ---------- Bumped 2026-05-19: 540×740 → 760×980. Closer to one open-spread page (--page-w 920px), takes meaningful real estate on the landing instead of floating small. The rotateY(-18deg) static tilt keeps the visible width manageable on standard viewports. 2026-05-23 reality pass: - --bk-thick 84 → 132 (sells "real hardback" — page-block has presence) - rotateY -18deg → -26deg (more fore-edge visible; pages register as stacked instead of as a faint line) - --bk-square (new): cover-overhang past the page-block. Real hardcovers overhang the pages by a few mm; 6px in this scale reads correctly. - --bk-foil-deep (new): darker gold for shadow-side foil details - --bk-gilt (new): page-edge gilt gold (warmer/brighter than cover-foil for the page-block top edge) */ :root { --bk-w: 760px; --bk-h: 980px; --bk-thick: 132px; /* sells the hardback's depth */ --bk-square: 6px; /* cover overhang past page-block (the "squares") */ --bk-cloth-1: #1A0D24; /* deep dyed cloth, warm undertone */ --bk-cloth-2: #2A1138; /* highlight side of the weave */ --bk-edge: #0A0612; /* page-block deep substrate */ --bk-foil: #F2D873; /* aged gold foil for stamping */ --bk-foil-deep: #8C7029; /* shadow-side foil for relief work */ --bk-gilt: #E5C56B; /* page-edge gilt (slightly warmer) */ --bk-gilt-dark: #6E5418; /* gilt's shadow companion */ } .book-3d { position: relative; width: var(--bk-w); height: var(--bk-h); transform-style: preserve-3d; /* Static angle: face-on with a heavier right-side tilt so the fore-edge reads as stacked pages, not a thin line. NO ANIMATION on this transform — Fox said no tilt motion. The book stays still. */ transform: rotateY(-26deg) rotateX(2deg); transform-origin: 50% 50%; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.68)) drop-shadow(0 56px 92px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 70px rgba(255, 42, 109, 0.1)); } /* All faces share these */ .book-face { position: absolute; inset: 0; backface-visibility: hidden; } /* ---------- Front cover ---------- */ .book-3d__front { z-index: 5; transform: translateZ(calc(var(--bk-thick) / 2)); background: /* Directional lighting — key-light from top-left, dropped onto the cloth before everything else. Soft warm sheen + opposing cool shadow at bottom-right. Sells a fixed light source. */ radial-gradient( ellipse 80% 60% at 22% 18%, rgba(255, 240, 220, 0.10) 0%, transparent 55% ), radial-gradient( ellipse 70% 50% at 82% 88%, rgba(0, 0, 0, 0.32) 0%, transparent 60% ), /* warp threads — vertical */ repeating-linear-gradient( 90deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.025) 2px, rgba(255, 255, 255, 0.025) 3px ), /* weft threads — horizontal */ repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 3px ), /* base cloth gradient — warm dark */ radial-gradient( ellipse at 30% 25%, var(--bk-cloth-2) 0%, var(--bk-cloth-1) 55%, #0E0518 100% ); border: 1px solid rgba(0, 0, 0, 0.6); /* Cover-squares + spine-joint groove + corner AO via inset shadows. The 6px inset shadows on top/bottom/right simulate the page-block sitting recessed below the cover (the "squares"). The deeper inset on the left simulates the cover/spine joint groove. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), /* spine-joint groove — left edge */ inset 14px 0 18px -6px rgba(0, 0, 0, 0.7), /* cover-square shadows — top, right, bottom */ inset 0 6px 8px -3px rgba(0, 0, 0, 0.55), inset -6px 0 8px -3px rgba(0, 0, 0, 0.45), inset 0 -6px 8px -3px rgba(0, 0, 0, 0.55), /* deeper interior shadow + top-shading remain */ inset 0 0 60px rgba(0, 0, 0, 0.55), inset 0 12px 24px rgba(0, 0, 0, 0.4); /* Pivot for open animation = spine (left edge) */ transform-origin: left center; transition: transform 1.4s cubic-bezier(0.55, 0, 0.45, 1); } /* Faint circuitry-vein overlay — organic + cyberpunk hybrid. Hand-tuned SVG-as-background of branching lines, like cracked enamel illuminated from below in magenta. */ .book-3d__front::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ "); background-size: 100% 100%; mix-blend-mode: screen; opacity: 0.45; } /* CRT scanline drift — single thin band, very subtle, drifts top-to- bottom over 14s. NO motion of the book itself — just a moving gradient position. Fox-OK because the BOOK doesn't move; only this ambient overlay does. */ .book-3d__front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, transparent 0%, transparent 45%, rgba(5, 217, 232, 0.06) 49%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 42, 109, 0.06) 51%, transparent 55%, transparent 100% ); background-size: 100% 220%; background-position: 0 -120%; animation: book-scanline-drift 14s linear infinite; mix-blend-mode: screen; opacity: 0.5; } @keyframes book-scanline-drift { 0% { background-position: 0 -120%; } 100% { background-position: 0 220%; } } /* ---------- Front cover ornament: decorative frame ---------- */ .book-3d__front .cover-frame { position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; border: 2px solid rgba(242, 216, 115, 0.42); /* outer aged-gold rule */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 0 7px rgba(0, 0, 0, 0.4), inset 0 0 0 8px rgba(242, 216, 115, 0.18), /* inner thin rule */ inset 0 0 0 9px rgba(0, 0, 0, 0.3); pointer-events: none; } .book-3d__front .cover-frame::before, .book-3d__front .cover-frame::after { /* Decorative top + bottom flourishes drawn into the frame inset */ content: "❖ ❖ ❖"; position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Spectral SC', serif; font-size: 11px; letter-spacing: 0.5em; color: rgba(242, 216, 115, 0.5); text-shadow: 0 0 6px rgba(242, 216, 115, 0.25); background: var(--bk-cloth-1); padding: 0 12px; } .book-3d__front .cover-frame::before { top: -8px; } .book-3d__front .cover-frame::after { bottom: -8px; } /* Corner ornaments — small filigree triangles in each frame corner */ .cover-corner { position: absolute; width: 32px; height: 32px; pointer-events: none; } .cover-corner::before, .cover-corner::after { content: ""; position: absolute; background: rgba(242, 216, 115, 0.55); box-shadow: 0 0 6px rgba(242, 216, 115, 0.3); } .cover-corner::before { width: 24px; height: 1.5px; top: 4px; } .cover-corner::after { width: 1.5px; height: 24px; left: 4px; top: 4px; } .cover-corner--tl { top: 38px; left: 38px; } .cover-corner--tr { top: 38px; right: 38px; transform: scaleX(-1); } .cover-corner--bl { bottom: 38px; left: 38px; transform: scaleY(-1); } .cover-corner--br { bottom: 38px; right: 38px; transform: scale(-1, -1); } /* ---------- Front cover content stack ---------- */ .cover-content { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 80px 56px 70px; text-align: center; } /* Top rule + series identifier */ .cover-rule-top { font-family: 'Share Tech Mono', monospace; /* Bumped 10 → 14 per don't-be-shy-with-text rule (closed-book 1.41× upscale) */ font-size: 14px; letter-spacing: 0.42em; color: rgba(242, 216, 115, 0.6); text-transform: uppercase; display: flex; align-items: center; gap: 18px; } .cover-rule-top::before, .cover-rule-top::after { content: ""; display: block; width: 60px; height: 1px; background: rgba(242, 216, 115, 0.45); } /* Big BOOK·OS title — chromatic-aberration glitchpunk lockup */ .cover-title-block { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 30px; } .cover-title-big { font-family: 'Orbitron', sans-serif; /* Bumped 96 → 132 per don't-be-shy-with-text rule. Closed-book is now 760×980; NAUS·OS at 96px was reading small on the bigger cover. */ font-size: 132px; font-weight: 900; letter-spacing: 0.02em; line-height: 0.92; color: var(--naus-yellow); text-shadow: -2px 0 0 var(--naus-magenta), 2px 0 0 var(--naus-cyan), 0 0 18px rgba(249, 240, 2, 0.55), 0 0 42px rgba(255, 42, 109, 0.25), 0 0 80px rgba(0, 0, 0, 0.9); position: relative; } /* Foil shimmer sweep across the title — slow ambient motion, gradient- position only, NO element movement. */ .cover-title-big::after { content: attr(data-title); position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%, transparent 100% ); background-size: 220% 100%; background-position: -120% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: book-foil-shimmer 7s linear infinite; pointer-events: none; mix-blend-mode: screen; } @keyframes book-foil-shimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } } .cover-subtitle { /* Crimson Pro italic for the sentence-case subtitle. */ font-family: 'Crimson Pro', serif; font-style: italic; /* Bumped 14 → 22 per don't-be-shy-with-text rule. */ font-size: 22px; letter-spacing: 0.03em; color: rgba(232, 232, 238, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } .cover-subtitle-rule { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 216, 115, 0.65), transparent); margin: 4px auto; } /* Central embossed crosshair sigil — the load-bearing visual */ .cover-sigil { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; margin: 8px 0; } .cover-sigil::before { /* Outer inset ring — embossed into the cloth */ content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 40%), radial-gradient(circle at 65% 70%, rgba(0, 0, 0, 0.5) 0%, transparent 50%); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.65), inset 0 -2px 4px rgba(255, 255, 255, 0.04), 0 0 28px rgba(249, 240, 2, 0.22); } .cover-sigil-glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--bk-foil); /* Bumped to a generous render size per don't-be-shy-with-text — was a 136px font glyph; the SVG sigil reads loudest at ~180px wide. */ width: 180px; height: auto; } .cover-sigil-glyph .naus-sigil { width: 100%; height: auto; stroke-width: 6; /* Gold-foil glow on the SVG strokes (replaces the prior text-shadow on the ⌖ glyph). Drop-shadow stacks for foil + soft outer halo. */ filter: drop-shadow(0 0 12px rgba(249, 240, 2, 0.6)) drop-shadow(0 0 30px rgba(249, 240, 2, 0.3)); animation: book-sigil-pulse 4.4s ease-in-out infinite; } @keyframes book-sigil-pulse { 0%, 100% { filter: drop-shadow(0 0 12px rgba(249, 240, 2, 0.6)) drop-shadow(0 0 30px rgba(249, 240, 2, 0.3)); } 50% { filter: drop-shadow(0 0 22px rgba(249, 240, 2, 0.85)) drop-shadow(0 0 60px rgba(255, 42, 109, 0.45)); } } /* Bottom seal: Bleeker stamp + edition mark */ .cover-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; } .cover-bottom-rule { width: 100px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 216, 115, 0.55), transparent); } .cover-bottom-stamp { font-family: 'Spectral SC', serif; /* Bumped 11 → 17 per don't-be-shy-with-text rule. THIRD EDITION should read as a confident stamp, not a tiny inscription. */ font-size: 17px; letter-spacing: 0.36em; color: rgba(242, 216, 115, 0.78); text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 10px rgba(242, 216, 115, 0.35); } .cover-bottom-meta { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: rgba(181, 186, 206, 0.55); text-transform: uppercase; } /* ---------- Spine ---------- */ .book-3d__spine { width: var(--bk-thick); height: var(--bk-h); left: calc(-1 * var(--bk-thick) / 2); top: 0; transform: rotateY(-90deg) translateZ(calc(var(--bk-w) / 2 - var(--bk-thick) / 2)); /* Cylindrical curvature: bright highlight strip down the spine center, darker at the edges. Layered with warp-threads + base gradient. */ background: /* cylinder highlight — narrow vertical strip down the center */ linear-gradient( to right, transparent 0%, transparent 38%, rgba(255, 240, 220, 0.08) 47%, rgba(255, 240, 220, 0.14) 50%, rgba(255, 240, 220, 0.08) 53%, transparent 62%, transparent 100% ), /* warp threads */ repeating-linear-gradient( 90deg, transparent 0, transparent 1px, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.25) 2px ), /* cylinder base — deeper darks at the edges, slight warmth in middle */ linear-gradient( to right, #050208 0%, #0A0512 18%, #15091E 38%, #1F0F28 50%, #15091E 62%, #0A0512 82%, #050208 100% ); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.75), inset 8px 0 14px rgba(0, 0, 0, 0.6), inset -8px 0 14px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(0, 0, 0, 0.7); border-bottom: 1px solid rgba(0, 0, 0, 0.7); } /* Raised bands — 5 horizontal ridges across the spine. The single biggest "real hardback" signal. Each band carries a top-highlight + bottom-shadow gradient so it reads as a 3D ridge catching the key-light. */ .spine-band { position: absolute; left: 6px; right: 6px; height: 11px; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 240, 220, 0.03) 0%, rgba(255, 240, 220, 0.15) 18%, rgba(255, 240, 220, 0.22) 35%, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.42) 65%, rgba(0, 0, 0, 0.55) 82%, rgba(0, 0, 0, 0.0) 100% ); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 0 0 0.5px rgba(0, 0, 0, 0.3); } /* Bands span the spine vertically at fifths. Skip the very top and bottom so the headbands have room. */ .spine-band--1 { top: 17%; } .spine-band--2 { top: 33%; } .spine-band--3 { top: 49%; } .spine-band--4 { top: 65%; } .spine-band--5 { top: 81%; } /* Headbands — small striped cloth strips visible at the spine head + foot inside real hardcovers. Tiny detail; big "real book" reading. */ .spine-headband { position: absolute; left: 3px; right: 3px; height: 6px; pointer-events: none; background: repeating-linear-gradient( 90deg, var(--bk-foil-deep) 0, var(--bk-foil-deep) 2px, var(--bk-cloth-1) 2px, var(--bk-cloth-1) 3px, rgba(255, 240, 220, 0.4) 3px, rgba(255, 240, 220, 0.4) 4px, var(--bk-cloth-1) 4px, var(--bk-cloth-1) 5px ); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06); } .spine-headband--top { top: 2px; } .spine-headband--bottom { bottom: 2px; } .spine-text { font-family: 'Spectral SC', serif; /* Bumped 14 → 18 per don't-be-shy-with-text rule (spine is 84px wide now, can carry bolder text). */ font-size: 18px; letter-spacing: 0.42em; color: rgba(242, 216, 115, 0.8); text-transform: uppercase; white-space: nowrap; /* Rotate text to read along the spine (top→bottom) */ transform: rotate(90deg); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 0 8px rgba(242, 216, 115, 0.35); } /* Decorative spine rules — thin gold lines at top and bottom */ .book-3d__spine::before, .book-3d__spine::after { content: ""; position: absolute; left: 8px; right: 8px; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 216, 115, 0.5), transparent); } .book-3d__spine::before { top: 40px; } .book-3d__spine::after { bottom: 40px; } /* ---------- Back cover ---------- */ .book-3d__back { z-index: 1; transform: translateZ(calc(-1 * var(--bk-thick) / 2)) rotateY(180deg); background: repeating-linear-gradient( 90deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 3px ), radial-gradient( ellipse at 50% 50%, var(--bk-cloth-1) 0%, #0A0410 100% ); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: flex-end; padding: 60px; } .back-attrib { text-align: right; font-family: 'Spectral SC', serif; font-size: 11px; letter-spacing: 0.22em; color: rgba(181, 186, 206, 0.5); text-transform: uppercase; line-height: 1.6; } .back-attrib::before { content: "❖"; display: block; font-size: 24px; color: rgba(242, 216, 115, 0.45); margin-bottom: 12px; } /* ---------- Page-block edges (top, bottom, fore) ---------- */ /* The "this is a real book" tell: cut edges of all the pages visible on the three open sides. Subtle iridescent corruption tint. */ /* ---------- TOP edge: GILT page-block ---------- The grimoire-perfect detail. All pages have gold-foil edges on top — warm aged gilt, with the page-striations as darker grain on top. Layered with the key-light from above (slight brightening at the left/cover side, fading toward the spine). The cover slightly overhangs (squares) so the gilt sits recessed; inset shadows on left + right edges simulate the cover's shadow falling on the page-block. */ .book-3d__top { height: var(--bk-thick); width: calc(var(--bk-w) - 2 * var(--bk-square)); top: calc(-1 * var(--bk-thick) / 2); left: var(--bk-square); transform: rotateX(90deg) translateZ(calc(var(--bk-h) / 2 - var(--bk-thick) / 2 - var(--bk-square))); background: /* Page striations — varied widths + opacities for organic feel. Two stacked patterns at different rhythms break up the regularity. */ repeating-linear-gradient( 90deg, transparent 0, transparent 1px, rgba(110, 84, 24, 0.55) 1px, rgba(110, 84, 24, 0.55) 2px, transparent 2px, transparent 4px, rgba(110, 84, 24, 0.32) 4px, rgba(110, 84, 24, 0.32) 5px ), repeating-linear-gradient( 90deg, transparent 0, transparent 7px, rgba(0, 0, 0, 0.18) 7px, rgba(0, 0, 0, 0.18) 8px ), /* directional key-light overlay — brighter toward the front (left side when viewed from above with the static rotate) */ linear-gradient( 90deg, rgba(255, 240, 220, 0.18) 0%, transparent 35%, transparent 100% ), /* the gilt itself — aged gold gradient */ linear-gradient( 180deg, var(--bk-gilt-dark) 0%, var(--bk-gilt) 25%, #F2D873 55%, var(--bk-gilt) 80%, var(--bk-gilt-dark) 100% ); box-shadow: /* AO at the cover/page-block joint (back edge, where the spine sits) */ inset 0 -10px 14px rgba(0, 0, 0, 0.7), /* cover-square shadow on the spine side */ inset 8px 0 10px rgba(0, 0, 0, 0.55), inset -8px 0 10px rgba(0, 0, 0, 0.4); } /* ---------- BOTTOM edge ---------- Bottom of the page-block. No gilt — bottom edges of real books are usually plain or just dusty (we'll go subtle aging). Inset shadows reverse for the bottom view. */ .book-3d__bottom { height: var(--bk-thick); width: calc(var(--bk-w) - 2 * var(--bk-square)); bottom: calc(-1 * var(--bk-thick) / 2); left: var(--bk-square); transform: rotateX(-90deg) translateZ(calc(var(--bk-h) / 2 - var(--bk-thick) / 2 - var(--bk-square))); background: /* Varied page striations */ repeating-linear-gradient( 90deg, transparent 0, transparent 1px, rgba(50, 40, 30, 0.6) 1px, rgba(50, 40, 30, 0.6) 2px, transparent 2px, transparent 5px, rgba(50, 40, 30, 0.38) 5px, rgba(50, 40, 30, 0.38) 6px ), repeating-linear-gradient( 90deg, transparent 0, transparent 9px, rgba(0, 0, 0, 0.16) 9px, rgba(0, 0, 0, 0.16) 10px ), /* slight dust-aging tint toward the bottom */ linear-gradient( 0deg, rgba(80, 65, 45, 0.25) 0%, transparent 30% ), /* base — duller than the top, cooler, page-block substrate */ linear-gradient( 0deg, #18121E 0%, #221830 30%, #2A1F38 60%, #221830 100% ); box-shadow: inset 0 10px 14px rgba(0, 0, 0, 0.65), inset 8px 0 10px rgba(0, 0, 0, 0.55), inset -8px 0 10px rgba(0, 0, 0, 0.4); } /* ---------- FORE edge: the page-block side ---------- The thick-side of the book. Hundreds of page edges visible in striation. With the heavier tilt + thicker book, this is now the most prominent "real book" face. Slight inward smile-curve via radial-gradient simulating page-block bowing. */ .book-3d__fore { width: var(--bk-thick); height: calc(var(--bk-h) - 2 * var(--bk-square)); right: calc(-1 * var(--bk-thick) / 2); top: var(--bk-square); transform: rotateY(90deg) translateZ(calc(var(--bk-w) / 2 - var(--bk-thick) / 2 - var(--bk-square))); background: /* Page-block "smile" — slight inward curve sold via a darker mid-line. Real fore-edges bow slightly inward; this radial-gradient sells it. */ radial-gradient( ellipse 200% 60% at 50% 50%, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.22) 100% ), /* Varied page striations — two rhythms */ repeating-linear-gradient( 0deg, transparent 0, transparent 1px, rgba(60, 50, 40, 0.6) 1px, rgba(60, 50, 40, 0.6) 2px, transparent 2px, transparent 4px, rgba(60, 50, 40, 0.32) 4px, rgba(60, 50, 40, 0.32) 5px ), repeating-linear-gradient( 0deg, transparent 0, transparent 8px, rgba(232, 226, 210, 0.04) 8px, rgba(232, 226, 210, 0.04) 9px ), /* Faint corruption iridescence — magenta at top, cyan at bottom */ linear-gradient( 180deg, rgba(255, 42, 109, 0.14) 0%, transparent 25%, transparent 75%, rgba(5, 217, 232, 0.12) 100% ), /* base — page-block substrate */ linear-gradient( 90deg, #1A0D24 0%, #2A1B3A 30%, #32233F 50%, #2A1B3A 70%, #1A0D24 100% ); box-shadow: inset -8px 0 14px rgba(0, 0, 0, 0.55), /* AO at top + bottom joints with cover */ inset 0 10px 12px rgba(0, 0, 0, 0.6), inset 0 -10px 12px rgba(0, 0, 0, 0.6); } /* ---------- LEAVES — riffle pages ---------- Five page-sheets stacked behind the front cover at staggered Z depths. Closed state: invisible, hidden behind the cover. Opening state: each leaf staggered-rotate around the spine pivot (transform-origin: left center), 80-100ms delay between them — reads as a real book riffling open. They settle at progressively shallower angles so the final pose shows pages fanned to the left of the open spread. Geometry: - Width: bk-w - bk-square (left edge attaches at spine; right edge sits inside the cover's fore-overhang) - Height: bk-h - 2*bk-square (top + bottom inset under cover squares) - Position: top: bk-square, left: 0 (so left edge IS the spine pivot) - z-index: 4 (between front cover at 5 and back cover at 1) */ /* ---------- LEAVES — pages that flip when cover opens ---------- Per real-book opening references (StPageFlip / Sébastien Castiel's CSS 3D book article): the closed book's depth is sold by the page-block edges (top/bottom/fore), NOT by leaf elements visible behind the cover. Leaves only become visible DURING the opening animation, as individual pages turning. Closed state: opacity 0 + occluded by cover. Geometry: full cover width (NO right inset) so they sit exactly under the cover in the closed state and don't peek-out at the rotated angle. The page-block "squares" inset is rendered on the .book-3d__top/ bottom/fore faces only — those are the visible page-block edges. */ .book-3d__leaf { z-index: 4; /* Same dimensions as the cover so the closed state is perfectly clean: leaves are physically positioned identically to the cover in X/Y. */ width: var(--bk-w); height: var(--bk-h); top: 0; left: 0; /* Override .book-face's backface-visibility:hidden — leaves must remain visible after rotating past 90° during the flip. */ backface-visibility: visible; transform-origin: left center; /* Hidden in closed state. Becomes visible during the opening animation (book-stage--opening trigger sets opacity 1 with a fade-in tuned to match each leaf's rotation start). */ opacity: 0; /* Match the actual book paper from base.css: --paper #12152A on a bookplate-purple radial vignette + cloth-weave overlay (same stack .page uses). The riffle pages read as the SAME paper that the cover-spread underneath is printed on. */ background: repeating-linear-gradient( 90deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.022) 2px, rgba(255, 255, 255, 0.022) 3px ), repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.16) 2px, rgba(0, 0, 0, 0.16) 3px ), radial-gradient( ellipse at 50% 35%, #220F32 0%, #14091F 58%, #0A0413 100% ); /* Gilt sliver only on the top edge (matches the page-block top face). Skip side borders to avoid the boxy look — pages curl, they don't have hard rectangular outlines at rest. */ border-top: 1px solid var(--bk-gilt); /* Curl-shadow + ambient depth. The big inset on the spine side (left) sells the page lifting OFF the binding during flip — the inner edge stays anchored, the rest lifts. Drop-shadow gives the impression each leaf has thickness. */ box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.55), inset 16px 0 32px rgba(0, 0, 0, 0.45), inset -3px 3px 8px rgba(229, 197, 107, 0.10), 0 4px 14px rgba(0, 0, 0, 0.6), -4px 0 12px rgba(0, 0, 0, 0.4); /* Compounded transitions: opacity fades in over 0.3s, transform animates over 1.4s with same easing as the cover. */ transition: opacity 0.3s ease-out, transform 1.4s cubic-bezier(0.55, 0, 0.45, 1); } /* Closed positions: each leaf stacked just BEHIND the cover at small Z steps. The cover at translateZ(thick/2) sits in front of all leaves. Since leaves are opacity 0 in this state, they're invisible — these transforms are just their starting position for the open animation. */ .book-3d__leaf--1 { transform: translateZ(calc(var(--bk-thick) / 2 - 4px)); } .book-3d__leaf--2 { transform: translateZ(calc(var(--bk-thick) / 2 - 10px)); } .book-3d__leaf--3 { transform: translateZ(calc(var(--bk-thick) / 2 - 16px)); } .book-3d__leaf--4 { transform: translateZ(calc(var(--bk-thick) / 2 - 22px)); } .book-3d__leaf--5 { transform: translateZ(calc(var(--bk-thick) / 2 - 28px)); } /* ---------- Open animation states ---------- */ /* When the user clicks, the front cover rotates around the spine. The book is still rotated at the static angle, so we layer the open-rotation on top of that base orientation. */ .book-stage--opening .book-3d__front { transform: translateZ(calc(var(--bk-thick) / 2)) rotateY(-152deg); } /* Leaves fade in + staggered-rotate when the cover starts opening. Each leaf's opacity transition delay is tuned to start AT its rotation onset, so leaves appear naturally as the cover sweeps past them. Final rotations progressively shallow so the pages fan on the spine side rather than all snapping flat. */ .book-stage--opening .book-3d__leaf { opacity: 1; } .book-stage--opening .book-3d__leaf--1 { transform: translateZ(calc(var(--bk-thick) / 2 - 4px)) rotateY(-150deg); transition-delay: 0.20s, 0.20s; } .book-stage--opening .book-3d__leaf--2 { transform: translateZ(calc(var(--bk-thick) / 2 - 10px)) rotateY(-138deg); transition-delay: 0.32s, 0.32s; } .book-stage--opening .book-3d__leaf--3 { transform: translateZ(calc(var(--bk-thick) / 2 - 16px)) rotateY(-122deg); transition-delay: 0.44s, 0.44s; } .book-stage--opening .book-3d__leaf--4 { transform: translateZ(calc(var(--bk-thick) / 2 - 22px)) rotateY(-102deg); transition-delay: 0.56s, 0.56s; } .book-stage--opening .book-3d__leaf--5 { transform: translateZ(calc(var(--bk-thick) / 2 - 28px)) rotateY(-78deg); transition-delay: 0.68s, 0.68s; } /* Subtle scale-up on the book during open animation — gives a "rising off the surface" feel without rotating the body. */ .book-stage--opening .book-3d { transition: transform 1.4s cubic-bezier(0.55, 0, 0.45, 1), filter 1.4s ease-out; transform: rotateY(-18deg) rotateX(2deg) scale(1.06); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.75)) drop-shadow(0 80px 120px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 100px rgba(255, 42, 109, 0.18)); } /* The cover spread that lives BEHIND the book stage — hidden initially, fades in as the cover rotates open. The transition handles BOTH the initial hide-state AND the close-flow (Esc back-out): when book-cover-closed re-applies, the spread fades out under the returning stage. */ body.book-cover-closed .spread.v-cover { opacity: 0; visibility: hidden; transition: opacity 0.6s ease-out, visibility 0s linear 0.6s; } body.book-cover-opening .spread.v-cover { opacity: 0; visibility: visible; transition: opacity 0.7s ease-in 0.7s; } body.book-cover-opening.book-cover-open .spread.v-cover { opacity: 1; } /* Hide closed-book stuff in print + during edit mode (we don't want the closed-book intercepting clicks while Fox is editing) */ @media print { .book-stage { display: none !important; } } body.book-editing .book-stage { display: none; }