/* QuranFree FX layer: animated hero, 3D Quran, lanterns, tilt cards, scroll reveal */
.hero{position:relative;overflow:hidden}
.hero>*:not(.fx-decor){position:relative;z-index:2}
.fx-decor{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-pattern{position:absolute;inset:-100px;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M45 5 L56 24 L77 20 L66 39 L85 50 L64 56 L65 77 L45 67 L25 77 L26 56 L5 50 L24 39 L13 20 L34 24 Z'/%3E%3Ccircle cx='45' cy='45' r='9'/%3E%3C/g%3E%3C/svg%3E");animation:fxdrift 60s linear infinite}
@keyframes fxdrift{to{background-position:90px 90px}}
.fx-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;animation:fxfloat 9s ease-in-out infinite}
.fx-orb.a{width:280px;height:280px;background:#D4AF37;left:-60px;top:10%;opacity:.22}
.fx-orb.b{width:340px;height:340px;background:#5fd0b4;right:10%;bottom:-120px;opacity:.25;animation-delay:-4s}
@keyframes fxfloat{50%{transform:translate(30px,-26px) scale(1.08)}}
.fx-moon{position:absolute;top:26px;left:6%;width:64px;height:64px;filter:drop-shadow(0 0 14px #D4AF37aa);animation:fxpulse 4s ease-in-out infinite}
@keyframes fxpulse{50%{transform:scale(1.08) rotate(-4deg);filter:drop-shadow(0 0 26px #D4AF37)}}
.fx-lantern{position:absolute;top:0;width:44px;transform-origin:50% 0;animation:fxswing 5s ease-in-out infinite}
.fx-lantern.l1{right:9%;animation-delay:-1s}.fx-lantern.l2{right:16%;width:34px;animation-delay:-2.5s}.fx-lantern.l3{right:24%;width:26px;animation-delay:-3.5s}
@keyframes fxswing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
.fx-lantern .gl{animation:fxglow 2.4s ease-in-out infinite}@keyframes fxglow{50%{opacity:.55}}
.fx-skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(50px,9vw,110px);display:block}
.fx-scene{position:absolute;right:5%;top:50%;margin-top:-150px;width:220px;height:300px;perspective:1000px;display:none}
@media(min-width:1280px){.fx-scene{display:block}}
.fx-book{position:relative;width:190px;height:260px;margin:20px auto;transform-style:preserve-3d;animation:fxspin 9s ease-in-out infinite}
@keyframes fxspin{0%,100%{transform:rotateY(-32deg) rotateX(6deg)}50%{transform:rotateY(28deg) rotateX(-4deg)}}
.fx-f{position:absolute;inset:0;border-radius:6px 12px 12px 6px}
.fx-front{background:linear-gradient(135deg,#0d3b27,#1B5E3F 55%,#2D7A6F);border:3px solid #D4AF37;transform:translateZ(22px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#D4AF37;box-shadow:inset 0 0 0 8px #0d3b27,inset 0 0 0 10px #D4AF3788}
.fx-front b{font:700 1.7rem Amiri,serif;text-align:center;line-height:1.5}.fx-front i{font-size:2.6rem}
.fx-back{background:#0d3b27;transform:translateZ(-22px)}
.fx-pages{inset:6px 0 6px auto;width:44px;transform:rotateY(90deg) translateZ(0) translateX(22px);transform-origin:right;background:repeating-linear-gradient(90deg,#fff7df 0 3px,#e6d9ae 3px 4px);border-radius:2px;right:0;left:auto}
.fx-spine{inset:0 auto 0 0;width:44px;transform:rotateY(-90deg) translateX(-22px);transform-origin:left;background:linear-gradient(#0d3b27,#1B5E3F);border-radius:6px 0 0 6px}
.fx-shadow{position:absolute;left:50%;bottom:-6px;width:150px;height:22px;margin-left:-75px;background:radial-gradient(#0008,transparent 70%);animation:fxsh 9s ease-in-out infinite}
@keyframes fxsh{50%{transform:scaleX(.8);opacity:.7}}
html.fx-js .fx-r{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s ease}
html.fx-js .fx-r.in{opacity:1;translate:0 0}
.fx-t{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
.fx-t.tilting{transition:none}
.btn,.btn-register,.hx-btn,.btn-primary{position:relative;overflow:hidden}
.btn::after,.btn-register::after,.hx-btn::after,.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);transform:skewX(-20deg);animation:fxshine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes fxshine{0%,60%{left:-80%}100%{left:140%}}
.band{background-size:200% 200%;animation:fxbg 14s ease infinite}@keyframes fxbg{50%{background-position:100% 50%}}
.ar{animation:fxglowt 4s ease-in-out infinite}@keyframes fxglowt{50%{text-shadow:0 0 18px #D4AF37aa}}
.logo i{transition:transform .6s}.logo:hover i{transform:rotateY(360deg)}
@media(prefers-reduced-motion:reduce){.fx-pattern,.fx-orb,.fx-moon,.fx-lantern,.fx-book,.fx-shadow,.band,.ar,.btn::after,.btn-register::after,.hx-btn::after,.btn-primary::after{animation:none!important}html.fx-js .fx-r{opacity:1;translate:none;transition:none}.fx-t{transform:none!important}}
/* ---- FX v2: letters, kaaba, spotlight, parallax, word flip, progress ---- */
.fx-prog{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,#D4AF37,#FFE27A);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:2000;pointer-events:none}
.fx-spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,40%),rgba(255,226,122,.22),transparent 60%);opacity:0;transition:opacity .4s}
.hero.fx-in .fx-spot{opacity:1}
.fx-pattern{transform:translate3d(calc(var(--mx,0)*-16px),calc(var(--my,0)*-16px + var(--scr,0)*.22px),0)}
.fx-orb.a{translate:calc(var(--mx,0)*30px) calc(var(--my,0)*24px)}.fx-orb.b{translate:calc(var(--mx,0)*-40px) calc(var(--my,0)*-30px)}
.fx-lantern.l1{translate:calc(var(--mx,0)*-14px) 0}.fx-lantern.l2{translate:calc(var(--mx,0)*-8px) 0}.fx-moon{translate:calc(var(--mx,0)*12px) calc(var(--my,0)*10px)}
.fx-skyline{transform:translateY(calc(var(--scr,0)*-.05px))}
.fx-letter{position:absolute;bottom:-70px;font-family:Amiri,serif;font-weight:700;color:rgba(255,255,255,.2);animation:fxrise var(--d,20s) linear infinite;animation-delay:var(--dl,0s);text-shadow:0 0 14px rgba(212,175,55,.4)}
@keyframes fxrise{0%{transform:translateY(0) rotateY(0) rotateZ(0);opacity:0}10%{opacity:1}85%{opacity:.8}100%{transform:translateY(-640px) rotateY(540deg) rotateZ(14deg);opacity:0}}
.hero h1{perspective:700px}
.fx-w{display:inline-block;opacity:0;transform:translateY(34px) rotateX(-80deg);transform-origin:50% 100%;animation:fxword .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--wd,0s)}
@keyframes fxword{to{opacity:1;transform:none}}
.fx-book.follow{animation:none;transform:rotateY(calc(var(--mx,0)*60deg)) rotateX(calc(var(--my,0)*-24deg));transition:transform .15s ease-out}
.fx-kscene{position:absolute;left:5%;bottom:90px;width:110px;height:130px;perspective:700px;display:none;animation:fxbob 6s ease-in-out infinite}
@media(min-width:1280px){.fx-kscene{display:block}}
@keyframes fxbob{50%{translate:0 -14px}}
.fx-k{position:relative;width:90px;height:90px;margin:20px;transform-style:preserve-3d;animation:fxkspin 18s linear infinite}
@keyframes fxkspin{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.fx-kf{position:absolute;inset:0;background:linear-gradient(#1c1c1c 0 26%,#D4AF37 26% 30%,#101010 30%);border:1px solid #333;box-shadow:inset 0 0 20px #000}
.fx-kf.f{transform:translateZ(45px)}.fx-kf.b{transform:rotateY(180deg) translateZ(45px)}.fx-kf.r{transform:rotateY(90deg) translateZ(45px)}.fx-kf.l{transform:rotateY(-90deg) translateZ(45px)}
.fx-kf.t{background:#0a0a0a;transform:rotateX(90deg) translateZ(45px)}
.fx-kf.f:after{content:"";position:absolute;left:55%;bottom:0;width:18px;height:34px;background:#D4AF37;border-radius:8px 8px 0 0;opacity:.85}
.fx-t i{transition:transform .3s}.fx-t:hover i{transform:translateZ(40px) scale(1.15) rotate(-6deg)}
html.fx-js .fx-r{scale:.96;transition:opacity .7s ease,translate .7s ease,scale .7s ease}html.fx-js .fx-r.in{scale:1}
@media(prefers-reduced-motion:reduce){.fx-letter,.fx-kscene,.fx-k,.fx-w{animation:none!important}.fx-w{opacity:1;transform:none}.fx-prog{display:none}.fx-book.follow{transition:none}}
/* ---- layout fixes: skyline no longer covers hero content, moon/kaaba moved clear of text, button font ---- */
.hero{padding-bottom:calc(2.5rem + clamp(50px,9vw,110px))}
.fx-moon{left:auto;right:32%;top:18px}
.fx-kscene{left:auto;right:21%;bottom:120px;scale:.85}
.btn,button,input,select,textarea{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}
@media(max-width:700px){.fx-moon{right:8%;width:44px;height:44px;top:12px}}
@media(min-width:1280px) and (max-width:1439px){.fx-scene,.fx-kscene{display:none}}