/* حركة آفاق — CSS فقط، مربوط بالتمرير صعوداً ونزولاً، بدون JS */
/* أسماء الأنيميشن nxm* حتى لا تتعارض مع nxRise في الهيرو */

html {
  scroll-behavior: smooth;
}

@keyframes nxmHeroIn {
  from { opacity: 0; transform: translateY(46px); }
  to { opacity: 1; transform: none; }
}
@keyframes nxmHeroSide {
  from { opacity: 0; transform: translateX(-64px); }
  to { opacity: 1; transform: none; }
}
@keyframes nxmRise {
  from { opacity: 0; transform: translateY(52px); }
  to { opacity: 1; transform: none; }
}
@keyframes nxmRiseSoft {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@keyframes nxmInStart {
  from { opacity: 0; translate: 22px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes nxmInEnd {
  from { opacity: 0; translate: -22px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes nxmScaleIn {
  from { opacity: 0; transform: translateY(48px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes nxmFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nxmDriftY {
  from { translate: 0 24px; }
  to { translate: 0 -8px; }
}
@keyframes nxmLineReveal {
  from { clip-path: inset(0 0 0 100%); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes nxmHeaderIn {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-header {
    animation: nxmHeaderIn 0.45s cubic-bezier(.16, 1, .3, 1) both;
  }
  .nx-hero .nx-kicker { animation: nxmHeroIn .7s cubic-bezier(.16, 1, .3, 1) .05s both; }
  .nx-hero .nx-title { animation: nxmHeroIn .85s cubic-bezier(.16, 1, .3, 1) .14s both; }
  .nx-hero .nx-lead,
  .nx-hero .nx-note { animation: nxmHeroIn .8s cubic-bezier(.16, 1, .3, 1) .26s both; }
  .nx-hero .nx-hero-actions { animation: nxmHeroIn .75s cubic-bezier(.16, 1, .3, 1) .4s both; }
  .nx-hero-mark-wrap { animation: nxmHeroSide .95s cubic-bezier(.16, 1, .3, 1) .08s both; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nx-intro-copy,
    .nx-courses-head,
    .nx-courses-chips,
    .nx-courses-foot,
    .nx-path-head,
    .nx-path-go,
    .nx-foot-brand,
    .nx-foot-col,
    .nx-foot-partners,
    .rf-page-hero-inner,
    .rf-head,
    .cg-head,
    .cg-tools,
    .page-hero-copy,
    .page-hero h1,
    .page-hero-lead,
    .rf-cert-text,
    .rf-cert-visual {
      animation: nxmRise 1s linear both;
      animation-timeline: view();
      animation-range-start: entry 40%;
      animation-range-end: cover 20%;
    }

    .nx-intro-art {
      animation: nxmInEnd 0.95s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .nx-intro-point {
      animation: nxmRise 0.85s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
    }
    .nx-intro-point--1 { animation-range-start: entry 40%; animation-range-end: cover 18%; }
    .nx-intro-point--2 { animation-range-start: entry 55%; animation-range-end: cover 26%; }
    .nx-intro-point--3 { animation-range-start: entry 70%; animation-range-end: cover 34%; }
    .nx-intro-art img {
      animation: nxmDriftY linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .nx-courses-rail {
      animation: nxmInStart 0.85s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }

    /* خط زمني للقسم نفسه؛ السلايدر overflow:hidden يوقف view() على البطاقة */
    .nx-courses {
      view-timeline-name: --nx-courses-in;
      view-timeline-axis: block;
    }
    .nx-courses-page .nx-mcard,
    .nx-courses-mob-track .nx-mcard {
      animation: nxmRise 1s linear both;
      animation-timeline: --nx-courses-in;
      animation-range: entry 30% entry 52%;
    }
    .nx-courses-page .nx-mcard:nth-child(2),
    .nx-courses-mob-track .nx-mcard:nth-child(2) { animation-range: entry 44% entry 66%; }
    .nx-courses-page .nx-mcard:nth-child(3),
    .nx-courses-mob-track .nx-mcard:nth-child(3) { animation-range: entry 58% entry 80%; }
    .nx-courses-page .nx-mcard:nth-child(4) { animation-range: entry 70% entry 92%; }

    .nx-feat {
      animation: nxmRise 1s linear both;
      animation-timeline: view();
      animation-range: entry 38% entry 72%;
    }
    .nx-feat:nth-child(2) { animation-range: entry 50% entry 84%; }
    .nx-feat:nth-child(3) { animation-range: entry 62% entry 96%; }
    .nx-feat:nth-child(4) { animation-range: entry 74% cover 12%; }

    .cg-grid > .nx-mcard {
      animation: nxmRiseSoft 0.8s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }
    .cg-grid > .nx-mcard:nth-child(3n+2) { animation-range: entry 10% cover 32%; }
    .cg-grid > .nx-mcard:nth-child(3n+3) { animation-range: entry 16% cover 36%; }

    .nx-courses-trust li:nth-child(1) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    .nx-courses-trust li:nth-child(2) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
    .nx-courses-trust li:nth-child(3) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 14% cover 30%; }

    .nx-path-line {
      animation: nxmLineReveal 0.9s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 8% cover 40%;
    }

    .nx-step {
      animation: nxmRise 0.85s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
    }
    .nx-step--1 { animation-range-start: entry 35%; animation-range-end: entry 68%; }
    .nx-step--2 { animation-range-start: entry 50%; animation-range-end: entry 82%; }
    .nx-step--3 { animation-range-start: entry 64%; animation-range-end: entry 96%; }
    .nx-step--4 { animation-range-start: entry 78%; animation-range-end: cover 14%; }

    .nx-final-card {
      animation: nxmScaleIn 0.9s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range-start: entry 35%;
      animation-range-end: cover 22%;
    }
    .nx-final-copy {
      animation: nxmRiseSoft 0.85s cubic-bezier(.22, 1, .36, 1) both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    .nx-final-art,
    .nx-final-tail,
    .nx-foot-deco {
      animation: nxmDriftY linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .nx-foot-brand { animation-range-start: entry 0%; animation-range-end: entry 28%; }
    .nx-foot-inner > .nx-foot-col:nth-of-type(1) { animation-range-start: entry 0%; animation-range-end: entry 32%; }
    .nx-foot-inner > .nx-foot-col:nth-of-type(2) { animation-range-start: entry 4%; animation-range-end: entry 36%; }
    .nx-foot-partners { animation-range-start: entry 8%; animation-range-end: entry 40%; }

    .nx-foot-logo-card:nth-child(1) { animation: nxmScaleIn 1s linear both; animation-timeline: view(); animation-range: entry 0% entry 36%; }
    .nx-foot-logo-card:nth-child(2) { animation: nxmScaleIn 1s linear both; animation-timeline: view(); animation-range: entry 6% entry 42%; }
    .nx-foot-logo-card:nth-child(3) { animation: nxmScaleIn 1s linear both; animation-timeline: view(); animation-range: entry 12% entry 48%; }
    .nx-foot-logo-card:nth-child(4) { animation: nxmScaleIn 1s linear both; animation-timeline: view(); animation-range: entry 18% entry 54%; }

    .rf-faq details:nth-child(1) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    .rf-faq details:nth-child(2) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 6% cover 24%; }
    .rf-faq details:nth-child(3) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 12% cover 28%; }
    .rf-faq details:nth-child(n+4) { animation: nxmRiseSoft 0.75s cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 16% cover 32%; }
  }
}

@media (max-width: 700px) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .nx-intro-art img,
      .nx-final-art,
      .nx-final-tail,
      .nx-foot-deco {
        animation: none;
      }
      .nx-intro-copy,
      .nx-intro-point,
      .nx-courses-head,
      .nx-path-head,
      .nx-final-copy,
      .nx-step,
      .cg-grid > .nx-mcard,
      .nx-foot-brand,
      .nx-foot-col,
      .nx-foot-partners,
      .nx-foot-logo-card {
        animation: none;
      }
    }
  }
}

/* overflow:hidden يحوّل القسم لصندوق تمرير ويوقف animation-timeline */
.nx-hero,
.nx-intro,
.nx-courses,
.nx-path,
.nx-foot,
.nx-final-card,
.rf-page-hero {
  overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nx-header,
  .nx-hero .nx-kicker,
  .nx-hero .nx-title,
  .nx-hero .nx-lead,
  .nx-hero .nx-note,
  .nx-hero .nx-hero-actions,
  .nx-hero-mark-wrap,
  .nx-intro-copy,
  .nx-intro-point,
  .nx-intro-art,
  .nx-intro-art img,
  .nx-courses-head,
  .nx-courses-chips,
  .nx-courses-board,
  .nx-courses-rail,
  .nx-courses-foot,
  .nx-courses-trust,
  .nx-courses-trust li,
  .nx-mcard,
  .nx-path-head,
  .nx-path-line,
  .nx-path-go,
  .nx-step,
  .nx-feat,
  .nx-mcard,
  .nx-final-card,
  .nx-final-copy,
  .nx-final-art,
  .nx-final-tail,
  .nx-foot-deco,
  .nx-foot-brand,
  .nx-foot-col,
  .nx-foot-partners,
  .nx-foot-logo-card,
  .nx-foot-bar,
  .rf-page-hero-inner,
  .rf-head,
  .rf-faq details,
  .rf-cert-text,
  .rf-cert-visual,
  .cg-head,
  .cg-tools {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    scale: none !important;
    clip-path: none !important;
  }
}