/* The canvas contains alpha-cut botanical art only. Page paper and type stay still. */
@media(min-width:641px) and (max-width:999px){
 #readView .runhead{padding:42px 34px 0;}
 #readView .pgInner{padding-left:40px;padding-right:40px;}
}
#readView .chHead .bkname,#readView .chHead .chlabel{color:inherit;}
#readView .chHead .chlabel{opacity:.72;}
#readerGarden {
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  transition:none;contain:strict;
}
body.readerGardenReady.reading #readerGarden {opacity:1;}
/* The painted crown replaces the thin swash only while the desktop canvas is
   available. Preserve its measured box and the original fallback engraving. */
@media(min-width:1000px) and (min-height:601px) and (hover:hover) and (pointer:fine){
 body.readerGardenReady .chFlour[data-garden-flourish]>svg{visibility:hidden;}
}
/* Desktop panels pause the existing garden; they do not replace or hide it.
   Coarse-pointer/mobile surfaces remain excluded by the media gate below. */
.readerGardenSnapshot {position:absolute;inset:0;z-index:5;pointer-events:none;}
/* No extra alpha canvas on the handheld/fullscreen rendering path. */
@media(max-width:999px),(max-height:600px),(pointer:coarse){#readerGarden{opacity:0!important;}}
@media(prefers-reduced-motion:reduce){#readerGarden{transition:none;}}

@media(min-width:1000px) and (min-height:601px) and (hover:hover) and (pointer:fine){
  #readView .pgInner{padding-left:54px!important;padding-right:54px!important;}
}

/* Reading light belongs to the paper, not to the room behind the book. */
@media(min-width:1000px) and (min-height:601px){
  body.reading #readView,body.reading #spread,
  body.hasWash:not(.night).reading #readView,
  body.hasWash:not(.night).reading #spread{background-color:transparent!important;}
}
body:not(.night):not(.ownRoom)::after{content:none!important;}

/* Keep the owner's colored bands beneath the engraving and living foliage. */
@media(min-width:1000px) and (min-height:601px) and (hover:hover) and (pointer:fine){
  #readView .pframe .pfEdge{
    --reader-band:linear-gradient(180deg,rgba(var(--garden-a,228,186,105),.32),rgba(var(--garden-b,137,182,124),.36) 48%,rgba(var(--garden-a,228,186,105),.23));
    --reader-band-line:inset 0 0 0 1px rgba(var(--garden-a,228,186,105),.25);
  }
  #readView .pframe .pfEdge.el,#readView .pframe .pfEdge.er{
    --reader-band:linear-gradient(90deg,rgba(var(--garden-a,228,186,105),.32),rgba(var(--garden-b,137,182,124),.36) 48%,rgba(var(--garden-a,228,186,105),.23));
  }
  #readView .pframe .pfPatina>i{background:linear-gradient(105deg,rgba(var(--garden-b,137,182,124),.45),rgb(var(--garden-a,228,186,105)) 21%,#fff4d5 38%,rgb(var(--garden-b,137,182,124)) 56%,rgb(var(--garden-a,228,186,105)) 79%,rgba(var(--garden-b,137,182,124),.45));}
  #readView .pframe .pfEdge.el .pfPatina>i,#readView .pframe .pfEdge.er .pfPatina>i{background:linear-gradient(0deg,rgba(var(--garden-b,137,182,124),.45),rgb(var(--garden-a,228,186,105)) 21%,#fff4d5 38%,rgb(var(--garden-b,137,182,124)) 56%,rgb(var(--garden-a,228,186,105)) 79%,rgba(var(--garden-b,137,182,124),.45));}
}

/* The painted frame belongs to the physical page, including its turn clones.
   The complete destination canvas stays beneath keep/turn snapshots, paused
   throughout a turn. No incomplete plate or late fade replaces it. */
.readerFramePlate{position:absolute;inset:9px;z-index:3;pointer-events:none;box-sizing:border-box;
 border:var(--frame-corner,80px) solid transparent;border-image-slice:30%;border-image-width:var(--frame-corner,80px);border-image-repeat:round;
 clip-path:polygon(0 0,100% 0,100% 100%,calc(50% + 48px) 100%,calc(50% + 48px) calc(100% - 38px),calc(50% - 48px) calc(100% - 38px),calc(50% - 48px) 100%,0 100%);}
body.readerGardenReady #pageL>.readerFramePlate,body.readerGardenReady #pageR>.readerFramePlate{opacity:0;}

@media(max-width:999px),(max-height:600px),(pointer:coarse){.readerFramePlate{opacity:0!important;}}


/* The running labels sit below the top vines; their enamel takes the theme's colors. */
@media(min-width:1000px) and (min-height:601px) and (hover:hover) and (pointer:fine){
 #readView .runhead{padding:58px 108px 0!important;}
 #readView .runhead span{isolation:isolate;background:linear-gradient(135deg,rgba(var(--washA,48,42,24),.95),rgba(var(--washB,20,18,10),.96));color:#fff0c9;border-color:rgba(var(--garden-a,205,175,110),.7);text-shadow:0 1px 3px #000;overflow:hidden;}
 #readView .runhead span::before{content:"";position:absolute;inset:-100% -65%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 24% 35%,rgba(var(--garden-a,205,175,110),.45),transparent 42%),radial-gradient(ellipse at 72% 65%,rgba(var(--garden-b,122,90,48),.65),transparent 46%),linear-gradient(125deg,transparent 25%,rgba(var(--garden-a,205,175,110),.25) 47%,transparent 64%);animation:readerEnamel 19s ease-in-out infinite alternate;will-change:transform;}
 #pageL .runhead span:last-child::before{animation-duration:23s;animation-delay:-11s;}
 #pageR .runhead span:first-child::before{animation-duration:29s;animation-delay:-17s;}
 #pageR .runhead span:last-child::before{animation-duration:31s;animation-delay:-7s;}
 #readView .runhead span[data-enamel-frozen]::before{animation:none!important;transform:var(--reader-enamel-pose)!important;}
 body:has(#lightbox.on) #readView .runhead span::before,body.pageTurning #readView .runhead span::before,body.studyOpen #readView .runhead span::before,body.sheetUp #readView .runhead span::before,html.lite #readView .runhead span::before{animation-play-state:paused;}
}
@keyframes readerEnamel{
 0%{transform:translate3d(-13%,-8%,0) rotate(-8deg);}
 27%{transform:translate3d(9%,12%,0) rotate(6deg);}
 61%{transform:translate3d(-3%,-13%,0) rotate(-3deg);}
 100%{transform:translate3d(16%,4%,0) rotate(12deg);}
}
@media(prefers-reduced-motion:reduce){#readView .runhead span::before{animation:none!important;}}

/* Air belongs inside each isolated paper leaf, below .pgInner (z-index:2).
   Only small sprites move; the paper, text and artwork never animate. */
.readerPageAir{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:strict;}
.pageAirParticle{position:absolute;left:0;top:0;display:block;opacity:0;background-repeat:no-repeat;transform-origin:center;pointer-events:none;}
.readerPageAir[data-family="moon"] .pageAirParticle.leaf{filter:grayscale(.6) sepia(.2) hue-rotate(145deg) saturate(.65);}
.pageAirParticle.light{border-radius:50%;background:radial-gradient(circle,#fff9df 0%,rgba(var(--garden-a),.82) 12%,rgba(var(--garden-b),.26) 35%,transparent 70%);}
body:not(.night) .readerPageAir{opacity:.72;}
body:not(.livingBorders) .readerPageAir{visibility:hidden;}
@media(min-width:1000px) and (min-height:601px) and (hover:hover) and (pointer:fine){
 body.readerGardenReady #readView .pframe .pfMedal{top:-2px;width:152px;height:38px;}
}
@media(max-width:999px),(max-height:600px),(pointer:coarse),(prefers-reduced-motion:reduce){.readerPageAir{display:none;}}