/* Keep the shared completion event; only card groups change direction and timing. */
@keyframes scroll-element-in{from{opacity:0;transform:translate(var(--reveal-x,0px),var(--reveal-y,24px))}to{opacity:1;transform:translate(0,0)}}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal{--reveal-x:-32px;--reveal-y:0px;--card-delay:0ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal:nth-child(2){--card-delay:150ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal:nth-child(3){--card-delay:300ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal:nth-child(4){--card-delay:450ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal:nth-child(5){--card-delay:600ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal:nth-child(6){--card-delay:750ms}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal[data-reveal-state="waiting"]{transform:translateX(-32px)}
.personal :is(.three-columns,.home-columns,.book-grid,.footer-banner-grid)>.scroll-reveal[data-reveal-state="entering"]{animation-delay:var(--card-delay)}
@media(max-width:900px){.personal .footer-banner-grid>.scroll-reveal:nth-child(odd){--card-delay:0ms}.personal .footer-banner-grid>.scroll-reveal:nth-child(even){--card-delay:150ms}}
@media(max-width:760px){
 .personal :is(.three-columns,.home-columns)>.scroll-reveal:nth-child(n){--card-delay:0ms}
 .personal .book-grid>.scroll-reveal:nth-child(3n+1){--card-delay:0ms}
 .personal .book-grid>.scroll-reveal:nth-child(3n+2){--card-delay:150ms}
 .personal .book-grid>.scroll-reveal:nth-child(3n){--card-delay:300ms}
}