/* Riwaq Obaid — signature motion layer (loads last). Transform/opacity only. */
#gold-letters{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#gold-letters.on{opacity:1}
body.paused #gold-letters{opacity:0}

/* Reading progress: a gold line that fills from the right, like the page being read */
#read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;transform:scaleX(0);transform-origin:100% 50%;background:linear-gradient(270deg,#e2c47f,#a77f3c 60%,#6a1d2a);box-shadow:0 0 10px #e2c47f88;will-change:transform}

/* Answers: the solution unfolds when opened, so the change is visible */
.answer-group[open]>.answer-body,.solution-reveal[open]>.solution-content{animation:ro-unfold .5s cubic-bezier(.16,1,.3,1) both}
@keyframes ro-unfold{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Image viewer: opens with a soft zoom, backdrop fades in */
.question-lightbox[open]{animation:ro-zoom .42s cubic-bezier(.16,1,.3,1) both}
.question-lightbox[open]::backdrop{animation:ro-fade .35s ease both}
@keyframes ro-zoom{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
@keyframes ro-fade{from{opacity:0}to{opacity:1}}

/* Touch feedback on every tappable list row and card */
.unit,.lesson-link,.shelf-open,.word-card summary{transition:transform .18s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .3s}
.unit:active,.lesson-link:active{transform:scale(.985)}
.shelf-open:active{transform:scale(.97)}

@media(prefers-reduced-motion:reduce){#gold-letters{display:none}#read-progress{transition:none}}

/* phones: keep the sunlight entrance but stop the endless drift and card sheens */
@media(pointer:coarse){
 body.library-mode::after{animation-name:light-enter!important}
 .card-surface::after{animation:none!important}
}