/* =========================================================================
   Teach Quran Online - motion layer
   Only transform / opacity are animated so scrolling stays smooth.
   ========================================================================= */

/* ---------- keyframes ---------- */
@keyframes tqoFadeUp   { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes tqoFadeLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes tqoFadeRight{ from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes tqoZoomIn   { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes tqoFloat    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes tqoFloatSm  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tqoPulseRing{ 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tqoShine    { 0% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(230%) skewX(-20deg); } }
@keyframes tqoDrift    { from { background-position: 0 0; } to { background-position: 160px 160px; } }
@keyframes tqoTicker   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tqoTwinkle  { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes tqoOrbit    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tqoWiggle   { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
@keyframes tqoPopIn    { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes tqoDash     { to { stroke-dashoffset: 0; } }
@keyframes tqoGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes tqoScrollHint { 0%, 100% { transform: translate(-50%, 0); opacity: .9; } 50% { transform: translate(-50%, 10px); opacity: .4; } }

/* ---------- scroll reveal (elements get .reveal via JS, .is-visible when in view) ---------- */
.reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.reveal.from-left { transform: translate3d(-44px, 0, 0); }
.reveal.from-right { transform: translate3d(44px, 0, 0); }
.reveal.zoom { transform: scale(.88); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.home-banner { overflow: hidden; }
.home-banner::before { content: ''; position: absolute; inset: -20%; background: url(../images/ornament/pattern-light.svg); opacity: .18; filter: invert(1); animation: tqoDrift 40s linear infinite; pointer-events: none; }
.home-banner .banner-center-container { z-index: 2; }
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-particles span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #e0b63c; box-shadow: 0 0 12px 2px rgba(224,182,60,.6); animation: tqoTwinkle var(--t, 4s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.hero-particles span:nth-child(even) { background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.5); }
.banner-heading h3, .banner-heading h1, .banner-heading p, .banner-form, .banner-mini-text { opacity: 0; animation: tqoFadeUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.banner-heading h3 { animation-delay: .15s; }
.banner-heading h1 { animation-delay: .3s; }
.banner-heading p { animation-delay: .45s; }
.banner-form { animation-delay: .6s; }
.banner-mini-text { animation-delay: .75s; }
.home-banner-side { opacity: 0; animation: tqoFadeRight 1s .5s cubic-bezier(.2,.7,.2,1) forwards, tqoFloat 6s 1.5s ease-in-out infinite; }
.banner-heading h1 .hl { background: linear-gradient(90deg, #fff 0%, #e0b63c 40%, #fff 60%, #e0b63c 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tqoGradient 6s linear infinite; }
.button.enrollformbtn { position: relative; overflow: hidden; }
.button.enrollformbtn::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: tqoShine 3s 1.5s ease-in-out infinite; }
.scroll-hint { position: absolute; bottom: 18px; left: 50%; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; z-index: 2; animation: tqoScrollHint 2s ease-in-out infinite; }
.scroll-hint::after { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #e0b63c; }

/* ---------- ticker strip ---------- */
.ticker { background: var(--green); color: #fff; overflow: hidden; white-space: nowrap; padding: 12px 0; position: relative; z-index: 3; box-shadow: 0 8px 20px rgba(9,138,70,.25); }
.ticker-track { display: inline-flex; animation: tqoTicker 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { padding: 0 34px; font-weight: 500; font-size: 14px; letter-spacing: .3px; }
.ticker-track span::before { content: '\f005'; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #e0b63c; margin-right: 12px; font-size: 11px; }

/* ---------- headings / ornaments ---------- */
.section-heading h2::before { transform-origin: center; transition: transform .8s cubic-bezier(.2,.7,.2,1) .2s, opacity .8s .2s; }
.section-heading.reveal:not(.is-visible) h2::before { transform: scaleX(0); opacity: 0; }
.section-heading.text-center.reveal:not(.is-visible) h2::before { transform: translateX(-50%) scaleX(0); }
.section-heading.text-center.is-visible h2::before { transform: translateX(-50%) scaleX(1); }
.heading-ayat { transition: letter-spacing .9s ease, opacity .9s ease; }
.reveal:not(.is-visible) .heading-ayat { letter-spacing: 6px; opacity: 0; }

/* ---------- cards & hover ---------- */
.single-service, .single-course, .single-testi, .courseplan, .inner-side-course-area, .pl-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s, color .3s; }
.single-service:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(9,138,70,.22); }
.single-service:hover .service-img img { animation: tqoWiggle .6s ease; }
.single-course:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.single-course img { transition: transform .6s ease; }
.single-course:hover img { transform: scale(1.04); }
.single-testi:hover { transform: translateY(-6px); }
.courseplan > img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.courseplan:hover > img { transform: translateY(-8px) rotate(-3deg); }
.single-pricing { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.single-pricing:hover { box-shadow: 0 24px 44px rgba(0,0,0,.14); }
.single-pricing-head img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.single-pricing:hover .single-pricing-head img { transform: translate(-50%, -58%) scale(1.15); }
.single-pricing .ribbon { animation: tqoFloatSm 3s ease-in-out infinite; }
.pricing-top-tabs .nav-item .nav-link img { transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .3s, opacity .3s; }
.pricing-top-tabs .nav-item .nav-link:hover img, .pricing-top-tabs .nav-item .nav-link.active img { transform: translateY(-6px) scale(1.08); }
.pricing-top-tabs .nav-item .nav-link { transition: transform .3s, background .3s, color .3s, border-color .3s; }
.pricing-top-tabs .nav-item .nav-link:hover { transform: translateY(-3px); }
.course-side-img, .why-tutor-side-img, .illus-float { animation: tqoFloat 7s ease-in-out infinite; }
.tab-pane.active .single-inner-course-area { animation: tqoFadeUp .6s cubic-bezier(.2,.7,.2,1); }
.tab-pane.active .pricing-row { animation: tqoFadeUp .5s cubic-bezier(.2,.7,.2,1); }

/* ---------- buttons ---------- */
.center-link-area a, .filled-link, .contact-form-submit, input.step-form-submit, .offer-form-submit, .second-form-submit, .btn-green { position: relative; overflow: hidden; }
.center-link-area a::after, .filled-link::after { content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-130%) skewX(-20deg); transition: none; }
.center-link-area a:hover::after, .filled-link:hover::after { animation: tqoShine .9s ease; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: tqoPulseRing .6s ease-out forwards; pointer-events: none; }
a.whatsapp-popup-btn::before, a.whatsapp-popup-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: tqoPulseRing 2s ease-out infinite; }
a.whatsapp-popup-btn::after { animation-delay: 1s; }
a.whatsapp-popup-btn { transition: transform .3s; }
a.whatsapp-popup-btn:hover { transform: scale(1.1) rotate(8deg); }

/* ---------- nav ---------- */
.header-menu > ul > li > a > p { position: relative; }
.header-menu > ul > li > a > p::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 0; height: 2px; background: var(--green); transition: width .3s, left .3s; }
.header-menu > ul > li:hover > a > p::after, .header-menu > ul > li.active > a > p::after { width: 100%; left: 0; }
.header-menu > ul > li > a > i { transition: transform .3s; }
.header-menu > ul > li:hover > a > i { transform: translateY(-3px) scale(1.2); }
.menu-drop { transform: translateY(100%) translateY(10px); }
.header-menu > ul > li:hover > .menu-drop { transform: translateY(100%); }
.menu-drop > ul > li > a { transition: background .25s, color .25s, padding-left .25s; }
.menu-drop > ul > li:hover > a { padding-left: 20px; }
.header-logo img { transition: transform .4s; }
.header-logo:hover img { transform: scale(1.04); }

/* ---------- stats ---------- */
.stats-section { position: relative; overflow: hidden; }
.stats-section::before { content: ''; position: absolute; inset: -30%; background: url(../images/ornament/pattern-light.svg); opacity: .12; filter: invert(1); animation: tqoDrift 50s linear infinite reverse; pointer-events: none; }
.single-stats { position: relative; }
.single-stats h3 { display: inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.single-stats:hover h3 { transform: scale(1.12); }

/* ---------- dark sections ---------- */
.vision-mission-section, .pricing-top-section, .inner-banner, .big-inner-banner { position: relative; overflow: hidden; }
.vision-mission-section::before, .inner-banner::before, .big-inner-banner::before { content: ''; position: absolute; inset: -20%; background: url(../images/ornament/pattern-light.svg); opacity: .14; filter: invert(1); animation: tqoDrift 45s linear infinite; pointer-events: none; }
.vision-mission-section > .container, .inner-banner > .container, .big-inner-banner > .container { position: relative; z-index: 2; }
.orbit { position: absolute; width: 520px; height: 520px; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; right: -160px; top: -160px; animation: tqoOrbit 60s linear infinite; pointer-events: none; }
.orbit::after { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: #e0b63c; box-shadow: 0 0 16px 4px rgba(224,182,60,.5); }
.orbit.small { width: 300px; height: 300px; right: auto; left: -100px; top: auto; bottom: -120px; animation-duration: 40s; animation-direction: reverse; }

/* ---------- steps connector ---------- */
.steps-connector { position: absolute; left: 16%; right: 16%; top: 84px; height: 40px; pointer-events: none; }
.steps-connector path { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 10 10; stroke-dashoffset: 1200; opacity: .55; }
.is-visible ~ .steps-connector path, .steps-connector.is-visible path { animation: tqoDash 3s linear forwards; }
.why-qm-section .row.steps-row { position: relative; }

/* ---------- popups ---------- */
.signup-popup.show-popup, .offer-popup.show-popup { animation: tqoPopIn .5s cubic-bezier(.2,.7,.2,1); }
.signup-popup-bg, .offer-bg { backdrop-filter: blur(3px); }

/* ---------- forms ---------- */
.contact-form-input input, .contact-form-textarea, .offer-form-input, .second-form-input input, .step-input { transition: border-color .3s, box-shadow .3s, transform .3s; }
.contact-form-input input:focus, .contact-form-textarea:focus, .offer-form-input:focus, .second-form-input input:focus, .step-input:focus { box-shadow: 0 0 0 4px rgba(9,138,70,.12); transform: translateY(-1px); }

/* ---------- footer ---------- */
.footer-absolute-img img { animation: tqoFadeUp 1.2s ease both; }
.footer-social-links li a { transition: transform .3s, background .3s; }
.footer-social-links li a:hover { transform: translateY(-4px) rotate(-6deg); }
.footer-links li a { transition: color .3s, transform .3s; display: inline-block; }
.footer-links li a:hover { transform: translateY(-2px); }

/* ---------- play & learn ---------- */
.pl-card:hover { transform: translateY(-4px); }

/* ---------- FAQ ---------- */
.faq-accordion > .card > .card-header > a { transition: background .3s, color .3s, padding-left .3s; }
.faq-accordion > .card > .card-header > a:hover { padding-left: 26px; }

/* ---------- page load ---------- */
.page-loader { position: fixed; inset: 0; background: #0c2a1e; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity .5s, visibility .5s; animation: tqoLoaderOut .4s ease 1.2s forwards; }
@keyframes tqoLoaderOut { to { opacity: 0; visibility: hidden; } }
.page-loader.done { opacity: 0; visibility: hidden; }
.page-loader .ring { width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: #e0b63c; animation: tqoOrbit 1s linear infinite; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}
@media (max-width: 991px) {
  .orbit { display: none; }
  .steps-connector { display: none; }
  .home-banner-side { animation: none; }
}