/* Learneo FX layer — loader, micro-interactions, kinetic type, ambient motion */

/* ---------- Page loader ---------- */
#ln-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--ln-bg);transition:opacity .55s ease,visibility .55s ease}
#ln-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.ln-loader-in{display:flex;flex-direction:column;align-items:center;gap:18px}
.ln-loader-plane{color:var(--ln-accent);animation:lnLoaderFly 1.6s ease-in-out infinite}
.ln-loader-plane svg{filter:drop-shadow(0 6px 18px rgba(94,159,232,.45))}
@keyframes lnLoaderFly{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}
.ln-loader-trail{width:120px;height:10px;position:relative}
.ln-loader-trail::before{content:"";position:absolute;inset:0;border-bottom:2.5px dashed var(--ln-border);border-radius:50%;opacity:.7;animation:lnTrail 1.2s linear infinite}
@keyframes lnTrail{to{transform:translateX(-14px)}}
.ln-loader-word{font-weight:800;font-size:1.35rem;letter-spacing:.4px;color:var(--ln-text);direction:ltr}
.ln-loader-word i{font-style:normal;color:var(--ln-accent)}
.ln-loader-bar{width:190px;height:6px;border-radius:99px;background:var(--ln-border);overflow:hidden}
.ln-loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--ln-accent),#BF8EDA,var(--ln-accent));background-size:200% 100%;animation:lnLoadSlide 1.15s ease-in-out infinite}
@keyframes lnLoadSlide{0%{transform:translateX(220%)}100%{transform:translateX(-160%)}}
.ln-loader-txt{font-size:.85rem;color:var(--ln-muted)}

/* ---------- Scroll progress ---------- */
#ln-scrollbar{position:fixed;top:0;right:0;height:3px;width:0;z-index:1300;background:linear-gradient(90deg,#5E9FE8,#BF8EDA,#46A171);border-radius:0 0 0 4px;transition:width .12s linear}

/* ---------- Kinetic hero words ---------- */
.ln-w{display:inline-block;opacity:0;transform:translateY(26px) rotate(2deg);animation:lnWordUp .65s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes lnWordUp{to{opacity:1;transform:translateY(0) rotate(0)}}
.ln-hero h1 em{background:linear-gradient(90deg,#5E9FE8,#BF8EDA,#E8A54B,#5E9FE8);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lnGradFlow 6s linear infinite}
@keyframes lnGradFlow{to{background-position:300% 0}}

/* ---------- Custom hero text (متن دلخواه) ---------- */
.ln-hero-custom{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:0 0 14px;padding:9px 16px;border-radius:14px;font-size:.95rem;line-height:1.9;color:var(--ln-text);background:var(--ln-surface);border:1px solid transparent;background-clip:padding-box;position:relative;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.ln-hero-custom::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:15px;background:linear-gradient(120deg,#5E9FE8,#BF8EDA,#46A171,#5E9FE8);background-size:300% 100%;animation:lnGradFlow 8s linear infinite}
.ln-hero-custom p{margin:0}

/* ---------- Button micro-interactions ---------- */
.ln-btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.ln-btn:hover{transform:translateY(-2px)}
.ln-btn:active{transform:translateY(0) scale(.97)}
.ln-btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:44px;transform:skewX(-20deg) translateX(-160%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:none}
.ln-btn-primary:hover::after{animation:lnShine .8s ease}
@keyframes lnShine{to{transform:skewX(-20deg) translateX(420px)}}
.ln-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:lnRipple .55s ease-out forwards}
@keyframes lnRipple{to{transform:scale(2.6);opacity:0}}

/* ---------- Card hover glow + tilt ---------- */
.ln-tilt{transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.ln-tilt:hover{box-shadow:0 18px 44px rgba(0,0,0,.22)}
.ln-card{position:relative}
.ln-card.ln-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--ln-accent) 14%,transparent),transparent 65%)}
.ln-card.ln-glow:hover::before{opacity:1}

/* ---------- Shooting stars (dark theme only) ---------- */
.ln-shoot{position:fixed;top:0;left:0;width:120px;height:2px;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);border-radius:99px;transform:rotate(-35deg);animation:lnShoot 1.1s ease-out forwards}
@keyframes lnShoot{0%{opacity:0;transform:translate(0,0) rotate(-35deg)}12%{opacity:.9}100%{opacity:0;transform:translate(-260px,180px) rotate(-35deg)}}
[data-theme="light"] .ln-shoot{display:none}

/* ---------- Page enter ---------- */
.ln-main{animation:lnPageIn .5s ease both}
@keyframes lnPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
	.ln-w{animation:none;opacity:1;transform:none}
	.ln-hero h1 em{animation:none}
	.ln-loader-plane,.ln-loader-trail::before,.ln-loader-bar i,.ln-hero-custom::before{animation:none}
	.ln-shoot{display:none}
	.ln-main{animation:none}
	.ln-btn,.ln-tilt{transition:none}
}