/* assets/oya_fx.css — طبقة الحركة والتفاعل في الموقع الرسمي (أويا أكاديمي)
   كل شيء هنا تجميلي: لو لم يُحمَّل الملف يعمل الموقع كما هو. يحترم «تقليل الحركة». */

/* ── شريط تقدّم القراءة ── */
.fx-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,#E6B24E,#C8466E 45%,#8E1140);transform-origin:right center;transform:scaleX(0)}

/* ── البطل: جسيمات تفاعلية + وهج يتبع المؤشر ── */
.hero .fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero .fx-canvas.on{opacity:1}
.fx-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(200,70,110,.20),transparent 62%)}
.fx-glow.on{opacity:1}
.hero .hero-grid,.method .wrap,.contact .wrap{position:relative;z-index:1}

/* كلمة متبدّلة في العنوان */
.fx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-rot{display:inline-block;position:relative;vertical-align:bottom;min-width:var(--rw,auto);text-align:start}
.fx-rot .w{display:inline-block;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease}
.fx-rot .w.out{transform:translateY(-.55em);opacity:0;filter:blur(6px)}
.fx-rot .w.pre{transform:translateY(.55em);opacity:0;filter:blur(6px);transition:none}
.fx-rot::after{content:"";position:absolute;right:0;left:0;bottom:.06em;height:.09em;border-radius:3px;
  background:linear-gradient(90deg,#E6B24E,#C8466E);transform-origin:right;animation:fxLine 2.8s ease-in-out infinite}
@keyframes fxLine{0%{transform:scaleX(0)}35%,75%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:left}}

/* لوحة البطل ثلاثية الأبعاد + شارات تطفو */
.panel-wrap{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.panel-wrap .chip{animation:fxBob 5s ease-in-out infinite}
.panel-wrap .chip.bl{animation-delay:-2.5s}
@keyframes fxBob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.panel-wrap .p-row{transition:transform .35s ease,background .35s ease,border-color .35s}
.panel-wrap .p-row:hover{transform:translateX(-6px);background:rgba(255,255,255,.07);border-color:rgba(200,70,110,.35)}
.hero-tag .dot{animation:fxPulse 2s ease-out infinite}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(200,70,110,.55)}100%{box-shadow:0 0 0 12px rgba(200,70,110,0)}}

/* ── بطاقات: ضوء يتبع المؤشر + ميلان خفيف ── */
.inst,.quote,.stat,.pillar,.oc-card{position:relative}
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(200,70,110,.13),transparent 65%)}
.fx-hot>.fx-spot{opacity:1}
.fx-tilt{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .25s,background .25s}

/* ── أزرار مغناطيسية + تموّج ── */
.btn,.oc-btn{position:relative;overflow:hidden}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:fxRip .65s ease-out forwards}
@keyframes fxRip{to{transform:scale(1);opacity:0}}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:fxShine 5.5s ease-in-out infinite}
@keyframes fxShine{0%,70%{left:-60%}100%{left:130%}}

/* ── شريط الشركاء المتحرك ── */
.partners .logos.fx-marq{flex-wrap:nowrap;overflow:hidden;max-width:min(760px,100%);justify-content:flex-start;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-track{display:flex;gap:2.6rem;flex:none;direction:rtl;animation:fxMarq var(--dur,26s) linear infinite;padding-inline-end:2.6rem}
.partners .logos.fx-marq:hover .fx-track{animation-play-state:paused}
@keyframes fxMarq{from{transform:translateX(0)}to{transform:translateX(var(--shift,-50%))}}

/* ── عناوين الأقسام: خط ذهبي يُرسم عند الظهور ── */
.sec-head h2{position:relative;display:block;width:fit-content;max-width:100%}
.sec-head h2::after{content:"";position:absolute;right:0;bottom:-.35em;height:3px;width:64px;border-radius:3px;
  background:linear-gradient(90deg,#E6B24E,#C8466E);transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.2,.8,.2,1) .25s}
.sec-head.in h2::after{transform:scaleX(1)}

/* ظهور متتابع لعناصر الشبكات */
.fx-stag.reveal.in{transition-delay:calc(var(--i,0) * 90ms)}
.fx-stag.reveal.in.fx-settled{transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .fx-canvas,.fx-glow,.fx-progress{display:none!important}
  .fx-rot::after,.btn-primary::after,.panel-wrap .chip,.fx-track,.hero-tag .dot{animation:none!important}
}
@media (max-width:640px){
  .fx-glow{display:none}
  .partners .logos.fx-marq{max-width:100%}
}

/* ── قمر ليلًا / شمس نهارًا في البطل ── */
.hero .fx-sky{position:absolute;top:clamp(76px,9vh,104px);left:clamp(14px,5vw,80px);width:clamp(70px,7vw,100px);height:clamp(70px,7vw,100px);z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hero .fx-sky.on{opacity:1}
.fx-sky.fx-par{will-change:transform}
.fx-sky svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.fx-sun .rays{transform-origin:50% 50%;animation:fxSpin 140s linear infinite;will-change:transform}
.fx-sun .bloom{animation:fxBloom 7s ease-in-out infinite;will-change:opacity}
@keyframes fxBloom{0%,100%{opacity:.88}50%{opacity:1}}
.fx-sky.idle .rays,.fx-sky.idle .bloom{animation-play-state:paused}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@media (max-width:700px){.hero .fx-sky{width:56px;height:56px;top:88px}.hero .fx-sky.on{opacity:.8}}
@media (prefers-reduced-motion:reduce){.fx-sun .rays,.fx-sun .bloom{animation:none}.hero .fx-sky{transition:none}}