/* Motion and glow layer (stage "visuals"): additive, transform/opacity/box-shadow only, so it never shifts layout.
   Everything is gated by hover capability and by prefers-reduced-motion. Loaded after readability.css. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--glow:255 114 91}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 /* cover cards: lift, soft accent glow, slow zoom of the artwork */
 html body .anime-card .card-cover{transition:transform .38s var(--ease-out),box-shadow .38s var(--ease-out)!important;will-change:transform}
 html body .anime-card .card-cover img{transition:transform .7s var(--ease-out)}
 html body .anime-card:hover .card-cover,html body .anime-card:focus-within .card-cover{transform:translateY(-6px);box-shadow:0 22px 40px -16px #000a,0 0 0 1px rgb(var(--glow)/.38),0 12px 38px -12px rgb(var(--glow)/.42)!important}
 html body .anime-card:hover .card-cover img{transform:scale(1.045)}
 /* shelf arrows and icon buttons */
 html body .icon-button{transition:background .2s,border-color .2s,box-shadow .25s,transform .2s var(--ease-out)}
 html body .icon-button:hover{box-shadow:0 0 0 1px rgb(var(--glow)/.35),0 6px 22px -8px rgb(var(--glow)/.5);transform:translateY(-1px)}
 /* primary buttons: stronger glow on hover */
 html body .button.primary:hover{box-shadow:0 10px 36px -6px rgb(var(--glow)/.55)}
}

/* press feedback works for touch too */
html body .button:active,html body .icon-button:active,html body .title-watch-button:active{transform:scale(.97)}

/* keyboard focus: one consistent glowing ring */
html body :is(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline:2px solid rgb(var(--glow));outline-offset:3px;box-shadow:0 0 0 5px rgb(var(--glow)/.18)}

/* sections rise into view as they are scrolled to (progressive enhancement: no JS, no layout shift) */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html body #home .portal-section,html body #home .spotlight-shelf{animation:leyvu-rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  @keyframes leyvu-rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
 }
}

/* bottom bar: smooth active-tab change */
@media(max-width:820px){
 html body .bottom-nav .nav-link{transition:color .2s,background-color .2s,transform .2s var(--ease-out)}
 html body .bottom-nav .nav-link.active>svg,html body .bottom-nav .nav-link[aria-current=page]>svg{filter:drop-shadow(0 0 8px rgb(var(--glow)/.55))}
}