/* hero-fx.css — حركة الواجهة الأولى وقسم الخدمات (EasyBac) */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;animation:ebBlob 14s ease-in-out infinite}
.hero::before{width:420px;height:420px;top:-140px;right:-100px;background:color-mix(in srgb,var(--brand) 32%,transparent)}
.hero::after{width:340px;height:340px;bottom:-140px;left:-80px;background:color-mix(in srgb,var(--gold) 38%,transparent);animation-delay:-6s}

.hero-text h1 .underline{background-image:linear-gradient(90deg,var(--brand),var(--gold),var(--brand));background-size:200% auto;background-repeat:repeat-x;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:ebShimmer 6s linear infinite}
.hero-text>*{animation:ebUp .8s cubic-bezier(.22,.9,.3,1) both}
.hero-text>:nth-child(2){animation-delay:.12s}.hero-text>:nth-child(3){animation-delay:.22s}
.hero-text>:nth-child(4){animation-delay:.32s}.hero-text>:nth-child(5){animation-delay:.42s}

.hero .primary-btn{position:relative;overflow:hidden}
.hero .primary-btn::after{content:"";position:absolute;top:0;bottom:0;width:50px;left:-70px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:ebShine 3.2s ease-in-out 1.2s infinite}
.primary-btn i{transition:transform .2s ease}.primary-btn:hover i{transform:translateX(-4px)}

.hero-visual{position:relative;padding:18px 0}
.hero-orbit{position:absolute;z-index:0;inset:-34px;width:calc(100% + 68px);height:calc(100% + 68px);color:var(--brand);opacity:.4;animation:ebSpin 46s linear infinite;pointer-events:none}
.hero-orbit .dot{fill:var(--gold)}.hero-orbit .dot2{fill:var(--c3)}
.hero-stats-card{position:relative;z-index:1;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);animation:ebFloatSm 7s ease-in-out infinite}

.float-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:30px;padding:8px 14px;font-size:.82rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-md);animation:ebFloat 5s ease-in-out infinite}
.float-chip i{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:#fff;background:var(--accent,var(--c3))}
.chip-1{top:-6px;right:12px;--accent:var(--c3)}
.chip-2{top:44%;left:-14px;--accent:var(--c2);animation-delay:-1.6s;animation-duration:6s}
.chip-3{bottom:-6px;right:22px;--accent:var(--c4);animation-delay:-3s;animation-duration:5.5s}
@media(max-width:768px){.chip-2{display:none}.float-chip{font-size:.76rem;padding:6px 11px}}

/* شريط المواد */
.subjects-strip{overflow:hidden;direction:ltr;background:var(--brand-deep);border-block:1px solid var(--header-line);padding:14px 0}
.subjects-track{display:flex;width:max-content;animation:ebMarquee 34s linear infinite}
.subjects-strip:hover .subjects-track{animation-play-state:paused}
.subjects-track span{display:inline-flex;align-items:center;gap:22px;padding-inline:11px;direction:rtl;white-space:nowrap;color:#fff;font-weight:700;font-size:.95rem}
.subjects-track span::after{content:"\2726";color:var(--gold);font-size:.8rem}

/* الخدمات */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.card:hover::after{opacity:1}
#features .card-icon{animation:ebRing 3.2s ease-out infinite}
#features .card:nth-child(2n) .card-icon{animation-delay:-1.1s}
#features .card:nth-child(3n) .card-icon{animation-delay:-2.2s}
#features .section-title h2::after{content:"";display:block;width:64px;height:5px;border-radius:5px;margin:14px auto 0;background:linear-gradient(90deg,var(--brand),var(--gold))}

@keyframes ebUp{from{opacity:0;transform:translateY(22px)}}
@keyframes ebBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}}
@keyframes ebShimmer{to{background-position:200% 0}}
@keyframes ebShine{0%{left:-70px}40%,100%{left:120%}}
@keyframes ebFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ebFloatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ebRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent)}70%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes ebSpin{to{transform:rotate(360deg)}}
@keyframes ebMarquee{to{transform:translateX(-50%)}}