@view-transition{navigation:auto}
::view-transition-old(root){animation:zf-page-out .18s ease both}
::view-transition-new(root){animation:zf-page-in .4s ease both}
@keyframes zf-page-out{to{opacity:0}}
@keyframes zf-page-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@keyframes zf-drift{0%{translate:0 0;rotate:-3deg}50%{translate:9px -22px;rotate:4deg}100%{translate:-8px -8px;rotate:-1deg}}
@keyframes zf-wing{0%,100%{scale:1 1}45%{scale:.74 1}60%{scale:.87 1}}
@keyframes zf-branch{0%,100%{rotate:-1deg}50%{rotate:2deg}}
@keyframes zf-glow{0%,100%{opacity:.45;scale:.96}50%{opacity:.85;scale:1.06}}
@keyframes zf-orbit{0%,100%{rotate:-2deg}50%{rotate:3deg}}
@keyframes zf-firefly{0%,100%{translate:0 0;opacity:.12}40%{opacity:.8}60%{translate:12px -28px;opacity:.5}}
@media(prefers-reduced-motion:no-preference){
 .nav-wrap{animation:zf-page-in .8s ease both}
 .butterfly{animation:zf-drift 10s ease-in-out infinite alternate}
 .butterfly-two{animation-duration:13s;animation-delay:-5s}
 .butterfly-three{animation-duration:8s;animation-delay:-3s}
 .butterfly>path{transform-origin:75px 65px;animation:zf-wing 3.1s ease-in-out infinite}
 .butterfly-two>path{animation-duration:2.4s}
 .branch{transform-origin:30% 90%;animation:zf-branch 18s ease-in-out infinite}
 .hero:before{animation:zf-glow 10s ease-in-out infinite}
 .hero-orbit{animation:zf-orbit 24s ease-in-out infinite}
 .particle{animation:zf-firefly 9s ease-in-out infinite}
 .hero-eyebrow i{animation:zf-glow 4s ease-in-out infinite}
 .motion-pending{opacity:0;translate:0 22px}
 .button:active{transform:translateY(0) scale(.97)}
 .nav-links.open{animation:zf-page-in .25s ease both}
 .hero-bottom>a svg{animation:zf-drift 3.5s ease-in-out infinite;animation-name:zf-scroll-cue}
 @keyframes zf-scroll-cue{50%{translate:0 5px}}
}
.poem-card,.book-card,.channel-card,.news-message,.telegram-banner{position:relative;isolation:isolate;transition:border-color .3s,box-shadow .3s,transform .3s}
.poem-card:before,.book-card:before,.channel-card:before,.news-message:before,.telegram-banner:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;background:radial-gradient(260px circle at var(--glow-x,50%) var(--glow-y,50%),#adca7a19,transparent 75%);transition:opacity .35s}
@media(hover:hover) and (pointer:fine){.poem-card:hover:before,.book-card:hover:before,.channel-card:hover:before,.news-message:hover:before,.telegram-banner:hover:before{opacity:1}.news-message:hover{border-color:#a3bc6e66;transform:translateY(-3px)}.button:hover svg,.section-heading>a:hover svg,.channel-card:hover .channel-link svg{translate:2px -2px}}
.button svg,.section-heading>a svg,.channel-link svg{transition:translate .25s ease}
@media(prefers-reduced-motion:reduce){
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .motion-pending{opacity:1!important;translate:none!important}
 .butterfly>path,.branch,.particle,.hero-orbit,.hero:before,.hero-eyebrow i,.hero-bottom>a svg,.nav-wrap,.nav-links.open{animation:none!important}
 .button,.poem-card,.book-card,.channel-card,.news-message{transform:none!important;transition:none!important}
 .button svg,.section-heading>a svg,.channel-link svg{translate:none!important;transition:none!important}
}
