/* Separate camera, pointer rig and leaf transforms: no flattening filter on 3D ancestors. */
[data-mode=reading] .book{cursor:grab;user-select:none}[data-mode=reading] .book.dragging{cursor:grabbing}
#interactions{position:absolute;inset:0;transform:translateZ(6px);pointer-events:none;transform-style:preserve-3d}#interactions button{pointer-events:auto}.turning-leaf{translate:0 0 4px}
.brand img{display:block;width:144px;height:26px}.pill img{width:14px;height:14px;flex:none}.stage{perspective:2400px;inset:108px 0 120px;overflow:visible}.book-size{width:min(81.4vw,calc((100svh - 270px)*1.903),1400px);aspect-ratio:2192/1152;container-type:inline-size;position:relative;perspective:2400px}.book-pose{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}.book{width:100%;height:100%;filter:none;container-type:normal;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:none;will-change:transform}.base-pages{transform-style:preserve-3d;transform:translateZ(2px)}.page{box-shadow:none;border:0;backface-visibility:hidden}.page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#ffffff08,transparent 40%,#00000008);border-radius:inherit}.page.left{box-shadow:inset -14px 0 18px -18px #251109b3}.page.right{box-shadow:inset 14px 0 18px -18px #251109b3}.book-board{position:absolute;top:-.5%;width:50.4%;height:101.5%;background:#bc8d69;box-shadow:0 3px 0 #614731,0 7px 0 #30261e,0 22px 40px #0005;transform:translateZ(-10px)}.left-board{left:-.4%;border-radius:7% 0 0 7%}.right-board{right:-.4%;border-radius:0 7% 7% 0}.paper-block{position:absolute;left:50%;top:0;width:50%;height:100%;border-radius:0 7% 7% 0;transform:translateZ(-3px);box-shadow:1px 1px 0 #f1dec2,2px 3px 0 #b5a088,3px 5px 0 #ead3b2,4px 7px 0 #b49c7b,5px 9px 0 #e4c5a2;background:#e5cda9}.spine{transform:translateZ(3px);width:1.4%;left:49.3%;background:linear-gradient(90deg,transparent,#29160f26,#fff2,transparent)}.cover{left:50%;width:50%;height:100%;background:none;transform:none;transform-style:preserve-3d;backface-visibility:visible;box-shadow:none;border-radius:0;transition:none;padding:0}.cover-front,.cover-inside{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.cover-front{background:url('assets/cover.webp') center/100% 100%;border-radius:1% 7% 7% 1%;transform:translateZ(3px);box-shadow:3px 0 0 #efd3ad,5px 1px 0 #8d654b,6px 2px 0 #d0a480}.cover-front:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,#ffffff18,transparent 35%,#0001);box-shadow:inset 7px 0 10px #0003,inset -2px 0 2px #fff6;pointer-events:none}.cover-inside{transform:rotateY(180deg) translateZ(2px);border-radius:7% 0 0 7%;background:url('assets/spread-1.webp') left/200% 100%;box-shadow:-3px 0 0 #ecd0a9}.cover-inside .page-copy{text-align:left}.cover-title{z-index:1;pointer-events:none}.turning-leaf{transform-style:preserve-3d}.face{transform:translateZ(1px)}.turning-leaf .face.back{transform:rotateY(180deg) translateZ(1px)}
[data-mode=intro] .book-pose{transform:translateY(35px) scale(.64)}[data-mode=intro] .book{transform:translateX(-25%) rotateX(calc(27deg + var(--rx,0deg))) rotateY(calc(-8deg + var(--ry,0deg))) rotateZ(-16deg);transform-origin:75% 50%}[data-mode=intro] .base-pages{opacity:1}[data-mode=intro] .base-pages .left,[data-mode=opening] .base-pages .left,[data-mode=unfolding] .base-pages .left{visibility:hidden}[data-mode=intro] .left-board,[data-mode=opening] .left-board,[data-mode=unfolding] .left-board,[data-mode=intro] .spine,[data-mode=opening] .spine{visibility:hidden}[data-mode=opening] .book-pose{transform:scale(.94)}[data-mode=opening] .book{transform:translateX(-25%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:75% 50%}[data-mode=unfolding] .book{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1.55s cubic-bezier(.4,0,.2,1)}[data-mode=unfolding] .book-pose{transform:scale(1)}[data-mode=reading] .book{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}[data-mode=end] .book{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}[data-mode=end] .book-pose{transform:scale(.72) translateY(35px)}
.hero-title,.ending h2{animation:none!important;filter:none;isolation:isolate}.hero-title{top:14%;font-size:clamp(38px,5vw,80px);transition:opacity .3s,visibility .3s}.has-started .hero-title,.has-started .intro-action{opacity:0!important;visibility:hidden!important;pointer-events:none!important}.blur-letter{display:inline-block;white-space:pre;filter:blur(var(--blur));transform:translateZ(0)}.intro-action{top:auto;bottom:17%}.ending h2{top:10%}.hint{bottom:91px;color:#d4d3cd}.page-copy{transform:translateZ(.1px)}.hotspot:after{content:'✦';width:24px;height:24px;background:#10110e33;border:1px solid #fff6;font-size:14px;animation:hotspot-breathe 3s ease-in-out infinite}.hotspot:hover:after{background:#10110ecc}.book.shadow-light .page{filter:brightness(1.12) saturate(.8);transition:filter 1s}.page{transition:filter 1s}.ambient-sheen{position:absolute;inset:0;border-radius:4%;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,40%),#fff9dc12,transparent 60%);mix-blend-mode:screen;pointer-events:none;transform:translateZ(5px)}.book-spark{position:absolute;left:var(--x);top:var(--y);color:#fff0cb;font-size:20px;pointer-events:none;animation:float-spark 1.5s ease-out forwards;transform:translateZ(24px)}@keyframes float-spark{from{opacity:1;translate:0 0;scale:.6}to{opacity:0;translate:var(--dx) -70px;scale:1.2}}@keyframes hotspot-breathe{50%{box-shadow:0 0 0 6px #ffffff0d}}
@media(max-width:700px){.book-size{width:92vw}.stage{inset:120px 0 190px}[data-mode=intro] .book-pose{transform:translateY(10px) scale(.95)}[data-mode=intro] .book{transform:translateX(-25%) rotateX(22deg) rotateZ(-12deg)}.hero-title{top:20%;font-size:11vw}.intro-action{top:auto;bottom:23%}[data-mode=reading] .stage{inset:100px 0 290px}[data-mode=end] .book-pose{transform:scale(.94)}.ending h2{top:15%}.brand img{width:132px;height:auto}}
@media(prefers-reduced-motion:reduce){.book{transform:none!important}[data-mode=intro] .book,[data-mode=opening] .book{transform:translateX(-25%)!important}.book-spark{display:none}.hotspot:after{animation:none}}
