@keyframes cover-arrive{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}
@keyframes photo-place{from{opacity:0;translate:0 15px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes stroke-write{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes sticker-light{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes living-ink{0%,100%{translate:0 0}50%{translate:0 -4px}}
.motion-enabled .book-object{animation:cover-arrive 1.1s cubic-bezier(.2,.8,.2,1) both}
/* The cover's foil palette and two independent reflection cycles, clipped to live text. */
@property --title-foil-position{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --title-sheen-position{syntax:'<percentage>';inherits:true;initial-value:100%}
@property --title-sheen-opacity{syntax:'<number>';inherits:true;initial-value:0}
@keyframes title-foil{0%,100%{--title-foil-position:0%}50%{--title-foil-position:100%}}
@keyframes title-sheen{0%,15%{--title-sheen-position:100%;--title-sheen-opacity:0}25%,70%{--title-sheen-opacity:1}85%,100%{--title-sheen-position:0%;--title-sheen-opacity:0}}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .folio :is(h2,h3){
    --title-foil:linear-gradient(115deg,#3b335d 5%,#476f7f 22%,#706399 35%,#a13a78 47%,#4b6f80 59%,#72649b 72%,#a75488 85%,#3b335d 100%);
    --title-sheen:linear-gradient(110deg,transparent 39%,rgb(103 216 223 / calc(var(--title-sheen-opacity)*.08)) 44%,rgb(185 166 237 / calc(var(--title-sheen-opacity)*.14)) 48%,rgb(249 225 236 / calc(var(--title-sheen-opacity)*.18)) 50%,rgb(171 220 220 / calc(var(--title-sheen-opacity)*.14)) 52%,rgb(196 133 177 / calc(var(--title-sheen-opacity)*.08)) 56%,transparent 61%);
  }
  .folio :is(h2,h3),.folio h2 em{
    background-image:var(--title-sheen),var(--title-foil);
    background-size:330% 100%,230% 100%;
    background-position:var(--title-sheen-position) 50%,var(--title-foil-position) 50%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .motion-enabled .book-open .folio.is-active :is(h2,h3){animation:title-foil 10s ease-in-out infinite,title-sheen 7s cubic-bezier(.45,0,.55,1) infinite}
}
.motion-enabled .book-open .folio.is-active .taped-photo{animation:photo-place .85s .15s cubic-bezier(.2,.8,.2,1) both}
.motion-enabled .book-open .folio.is-active .photo-pair{animation:photo-place .9s .3s cubic-bezier(.2,.8,.2,1) both}
.drawn-arrow path{stroke-dasharray:300;stroke-dashoffset:0}
.motion-enabled .book-open .folio.is-active .drawn-arrow path{animation:stroke-write 1.5s .3s cubic-bezier(.2,.8,.2,1) both}
.motion-enabled .book-open .folio.is-active .chile-sticker{animation:sticker-light 8s ease-in-out infinite}
.motion-enabled .book-open .folio.is-active .maikol-sticker{animation:living-ink 6s ease-in-out infinite}
.motion-suspended *,.motion-suspended *:before,.motion-suspended *:after{animation-play-state:paused!important}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.book-cover,.folio,.paper-button{border:1px solid CanvasText}.cover-front h1{filter:none}.cover-front,.folio{background:Canvas;color:CanvasText}.folio :is(h2,h3),.folio h2 em{background:none;-webkit-text-fill-color:currentColor}}