/* word-rotator.css — كلمة كبيرة بتظهر وتختفي (مدرسين / كورسات / فيديوهات / PDF)
   للتعديل: الألوان والسرعة والحجم من المتغيرات دي بس. */
:root{
  --wr-color-1:#E4574B;   /* مدرسين */
  --wr-color-2:#2F9E8A;   /* كورسات */
  --wr-color-3:#4C5A94;   /* فيديوهات */
  --wr-color-4:#E0A030;   /* PDF */
  --wr-size:clamp(44px,13vw,84px);
  --wr-speed:.55s;
  --wr-font:var(--font-display,inherit);
}
.word-rotator{display:grid;place-items:center;text-align:center;line-height:1.25;padding:6px 0}
.wr-word{
  grid-area:1/1;font-family:var(--wr-font);font-weight:800;font-size:var(--wr-size);
  color:var(--wr-color,var(--brand));
  opacity:0;transform:translateY(.35em) scale(.96);
  transition:opacity var(--wr-speed) ease,transform var(--wr-speed) ease;
  pointer-events:none;
}
.wr-word.is-active{opacity:1;transform:none}
.wr-word.is-leaving{opacity:0;transform:translateY(-.35em) scale(.96)}
.wr-word:nth-child(1){--wr-color:var(--wr-color-1)}
.wr-word:nth-child(2){--wr-color:var(--wr-color-2)}
.wr-word:nth-child(3){--wr-color:var(--wr-color-3)}
.wr-word:nth-child(4){--wr-color:var(--wr-color-4)}
html[data-theme="dark"] .wr-word:nth-child(3){--wr-color:#8FA0E6}
@media (prefers-reduced-motion:reduce){.wr-word{transition:none}}