/* Motion is an enhancement: all content stays visible without JavaScript. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
nav{transition:box-shadow .35s,background .35s}
nav.is-scrolled{background:rgba(250,247,240,.94);box-shadow:0 8px 28px #30251c0a}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--wine);transform:scaleX(0);transform-origin:left;pointer-events:none}
nav ul a{position:relative;transition:color .2s}
nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--motion-ease)}
nav ul a:hover::after,nav ul a[aria-current]::after{transform:scaleX(1)}
.nav-listen{border-bottom:0}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 68% 30%,#fffdf5b0,transparent 55%);transform:translate(var(--light-x,0px),var(--light-y,0px));transition:transform 1.6s var(--motion-ease)}
.hero-photo{transform:translateY(var(--portrait-shift,0px))}
.hero-photo img{box-shadow:0 18px 45px -28px #38251c80}
.hero h1{position:relative}
.btn{transition:background .25s,color .25s,box-shadow .3s,transform .35s var(--motion-ease)}
.btn span{transition:transform .35s var(--motion-ease)}
.btn:hover span{transform:translate(3px,-3px)}
.btn:active{transform:translateY(1px)}
.single-art{transition:transform .65s var(--motion-ease),filter .6s,box-shadow .6s;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-origin:center}
.single-meta{align-items:center}
.equalizer{display:inline-flex;align-items:center;gap:3px;height:13px;margin-left:auto;margin-right:10px;opacity:0;transition:opacity .25s}
.equalizer i{display:block;width:2px;height:11px;background:var(--wine);transform:scaleY(.35)}
.single.is-playing .equalizer{opacity:1}
.single.is-playing .equalizer i{animation:music-bars .85s ease-in-out infinite alternate}
.equalizer i:nth-child(2){animation-delay:-.5s!important}.equalizer i:nth-child(3){animation-delay:-.2s!important}.equalizer i:nth-child(4){animation-delay:-.7s!important}
@keyframes music-bars{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.single.is-playing .single-art{box-shadow:0 12px 28px -15px #701e2966;filter:saturate(1.05)}
.play{transition:transform .3s var(--motion-ease),background .2s,box-shadow .3s}
.play:active{transform:scale(.94)}
.playing .play{box-shadow:0 0 0 5px #701e2910}
.ct .ic{transition:transform .4s var(--motion-ease),background .3s}.ct{transition:border-color .3s}.ct:hover{border-color:var(--wine)}
@media(hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px -10px #701e2970}.play:hover{transform:scale(1.07)}.single:hover .single-art{filter:saturate(1);box-shadow:0 18px 30px -20px #38251c80}.ct:hover .ic{transform:rotate(-8deg) translateY(-2px)}}
@media(max-width:760px){.hero-photo{transform:none}.hero::before{transform:none}.single-art{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-photo,.hero::before,.single-art{transform:none!important}.equalizer i{animation:none!important;transform:scaleY(.65)}*,*::before,*::after{transition:none!important}}
