@keyframes sheen { to { transform: translateX(-340%) skewX(20deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ringIn { from { opacity: 0; transform: scale(.7) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes beamSway { 0%, 100% { translate: -1.5vw 0; } 50% { translate: 1.5vw 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cardOut { to { opacity: 0; transform: translateY(-18px) scale(.98); } }
@keyframes ansIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes nudge { 0%, 100% { translate: 0; } 25% { translate: -5px; } 75% { translate: 5px; } }
@keyframes okGlow { 0% { box-shadow: inset 0 0 60px rgba(80, 120, 200, .12); } 35% { box-shadow: inset 0 0 90px rgba(93, 219, 164, .3); } 100% { box-shadow: inset 0 0 60px rgba(80, 120, 200, .12); } }
@keyframes screenIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes screenOut { to { opacity: 0; transform: scale(1.015); } }
@keyframes logoPulse { 0%, 100% { filter: drop-shadow(0 0 22px rgba(232, 191, 98, .25)); } 50% { filter: drop-shadow(0 0 38px rgba(232, 191, 98, .45)); } }

.screen.entering { animation: screenIn .5s var(--ease) both; }
.screen.leaving { animation: screenOut .25s var(--ease-soft) both; }

.stage-beams i { animation: beamSway 14s ease-in-out infinite; }
.stage-beams i:nth-child(2) { animation-duration: 19s; animation-delay: -6s; }
.stage-beams i:nth-child(3) { animation-duration: 16s; animation-delay: -11s; }

/* الافتتاح السينمائي: يعمل مرة واحدة لكل جلسة */
#screen-home.intro .logo-wrap { animation: ringIn 1.1s var(--ease) .5s both; }
#screen-home.intro .rv-2 { animation: rise .9s var(--ease) 1.3s both; }
#screen-home.intro .rv-3 { animation: rise .8s var(--ease) 1.65s both; }
#screen-home.intro .rv-4 { animation: rise .8s var(--ease) 1.95s both; }
#screen-home.intro .rv-5 { animation: rise .8s var(--ease) 2.3s both; }
#screen-home.intro .rv-6 { animation: fadeIn 1s var(--ease) 2.8s both; }
#screen-home.intro .home-tools { animation: fadeIn 1s ease 2.4s both; }
#screen-home .logo { animation: logoPulse 5s ease-in-out infinite; }
#screen-home.intro .btn-primary::after { animation: sheen 1.1s var(--ease) 3s 1; }

.qcard.in { animation: cardIn .6s var(--ease) both; }
.qcard.leaving { animation: cardOut .32s var(--ease-soft) both; }
.answers.in .ans { animation: ansIn .5s var(--ease) var(--d, 0ms) both; }
.answers.leaving:not(.in) { opacity: 0; }
.answers.leaving .ans { opacity: 0; transition: opacity .3s; }
.ans.correct, .ans.wrong { animation-delay: 0s; }
body[data-screen='results'] .res-hero > * { animation: rise .8s var(--ease) both; }
body[data-screen='results'] .res-hero > :nth-child(2) { animation-delay: .15s; }
body[data-screen='results'] .res-hero > :nth-child(3) { animation-delay: .3s; }
body[data-screen='results'] .res-hero > :nth-child(4) { animation-delay: .45s; }

/* مستوى الحركة */
body[data-motion='high'] .stage-beams i { opacity: .7; }
body[data-motion='high'] .btn-primary::after { animation: sheen 3.4s var(--ease) 1s infinite; }
body[data-motion='low'] *, body[data-motion='low'] *::before, body[data-motion='low'] *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}
body[data-motion='low'] .answers.in .ans { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}