/* Motion only: no resting-state layout or palette changes. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
::view-transition-group(root){animation:none}
::view-transition-image-pair(root){isolation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;display:block}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
html.theme-transitioning *,html.theme-transitioning *::before,html.theme-transitioning *::after{transition:none!important}

@keyframes panel-arrive{from{opacity:0;translate:var(--arrive-x,0) var(--arrive-y,18px)}to{opacity:1;translate:0 0}}
.enter{animation:panel-arrive .7s var(--motion-ease) backwards}
.enter-top{--arrive-y:-14px}
.enter-left{--arrive-x:-16px;--arrive-y:0px}
.delay-1{animation-delay:.10s}.delay-2{animation-delay:.18s}.delay-3{animation-delay:.26s}
.post-card{transition:translate .32s var(--motion-ease),box-shadow .32s,border-color .32s,background .2s}
.post-thumb{transition:transform .5s var(--motion-ease),filter .4s}
.post-mascot{transition:translate .4s var(--motion-ease),rotate .4s var(--motion-ease);transform-origin:65% 100%}
.profile-avatar img,.brand-mark{transition:transform .4s var(--motion-ease)}
.icon-btn,.hero-arrow,.music-controls button{transition:transform .25s var(--motion-ease),color .2s,background .2s,box-shadow .25s}
.icon-btn svg{transition:transform .4s var(--motion-ease)}
.side-nav a{transition:translate .25s var(--motion-ease),background .2s,color .2s}
.desktop-nav a svg,.side-nav a svg{transition:transform .3s var(--motion-ease)}
.desktop-nav a::after{animation:nav-underline .3s var(--motion-ease)}
@keyframes nav-underline{from{scale:.25 1;opacity:0}to{scale:1;opacity:1}}
.searchbox{transition:border-color .25s,box-shadow .25s,background .25s}
.searchbox:focus-within{border-color:#ffb390;box-shadow:0 0 0 3px #ff8c5520}
.hero-dots button{transition:width .32s var(--motion-ease),background .25s,transform .25s}
.posts-head>a b{display:inline-block;transition:translate .3s var(--motion-ease)}
.progress i{transition:width .6s linear}
.icon-btn:active,.hero-arrow:active,.music-controls button:active{transform:scale(.90)}
.icon-btn,.music-controls button{position:relative}
.tap-wave{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;background:currentColor;pointer-events:none;animation:tap-wave .55s ease-out forwards}
@keyframes tap-wave{from{transform:scale(.15);opacity:.24}to{transform:scale(2.2);opacity:0}}
@media(hover:hover) and (pointer:fine){
 .post-card:hover{translate:0 -5px;border-color:#ffbd97;box-shadow:0 12px 25px #8f452d24}
 body[data-theme="night"] .post-card:hover{border-color:#ffad8066;box-shadow:0 14px 30px #0006}
 .post-card:hover .post-thumb{transform:scale(1.025);filter:saturate(1.06)}
 .post-card:hover .post-mascot{translate:0 -5px;rotate:-3deg}
 .profile-card:hover .profile-avatar img{transform:translateY(-3px) rotate(-4deg)}
 .brand:hover .brand-mark{transform:rotate(-7deg) scale(1.06)}
 .icon-btn:hover,.music-controls button:hover{transform:translateY(-2px)}
 #themeToggle:hover svg{transform:rotate(-18deg)}
 #settingsBtn:hover svg{transform:rotate(60deg)}
 #notificationsBtn:hover svg{animation:bell-swing .55s ease-in-out}
 .hero-arrow:hover{transform:translateX(3px);box-shadow:0 4px 14px #61372430}
 .desktop-nav a:hover svg,.side-nav a:hover svg{transform:translateY(-2px)}
 .side-nav a:hover{translate:3px 0}
 .hero-dots button:hover{transform:scale(1.2)}
 .posts-head>a:hover b{translate:4px 0}
}
@keyframes bell-swing{0%,100%{rotate:0deg}25%{rotate:12deg}65%{rotate:-9deg}}
@media(prefers-reduced-motion:reduce){
 .enter,.tap-wave,.desktop-nav a::after,#notificationsBtn:hover svg{animation:none!important}
 .post-card:hover,.post-card:hover .post-mascot,.side-nav a:hover{translate:none;rotate:none}
}
/* Release temporary entrance compositing layers before any theme snapshots. */
.enter.is-entered{animation:none}