/* Jemadari AI Academy — motion add-ons (additive; reuses existing --gold emerald vars) */
.hero{position:relative;overflow:hidden}
.hero > .container{position:relative;z-index:2}
#fx{position:absolute;inset:0;z-index:0;opacity:.6;pointer-events:none}

/* headline word reveal + emerald shimmer */
.fx-words .w{display:inline-block;opacity:0;transform:translateY(20px);animation:fxWordUp .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--wd,0ms)}
@keyframes fxWordUp{to{opacity:1;transform:none}}
.fx-shimmer{background:linear-gradient(100deg,var(--gold) 14%,var(--gold-hi) 46%,#BFFBD0 54%,var(--gold) 82%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;background-size:230% auto;animation:fxSh 5s linear infinite}
@keyframes fxSh{to{background-position:-230% center}}

/* rotating word */
.fx-rotator{color:var(--gold-hi);font-weight:600}
.fx-rotator .r{display:inline-block;animation:fxRi .5s ease}
@keyframes fxRi{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* marquee ribbon */
.fx-marquee{overflow:hidden;background:linear-gradient(180deg,#0d130d,#0a0f0a);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}
.fx-marquee .fx-track{display:flex;align-items:center;gap:30px;width:max-content;animation:fxScroll 34s linear infinite}
.fx-marquee:hover .fx-track{animation-play-state:paused}
.fx-marquee b{font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.fx-marquee i{color:#3c5a44;font-style:normal}
@keyframes fxScroll{to{transform:translateX(-50%)}}

/* counting numbers stay steady; subtle emerald glow-lift on cards */
.num[data-count]{font-variant-numeric:tabular-nums}
.card,.pillar{transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease}
.card:hover,.pillar:hover{box-shadow:0 20px 55px -26px rgba(32,194,74,.55)}

@media (prefers-reduced-motion: reduce){
  .fx-words .w,.fx-shimmer,.fx-marquee .fx-track,.fx-rotator .r{animation:none!important;opacity:1!important;transform:none!important}
}

/* Subdued rotating corner logo — spins around the vertical (north–south) axis, west→east */
.spin-logo{position:fixed;top:12px;right:16px;width:56px;height:56px;z-index:70;opacity:.22;pointer-events:none;perspective:340px}
.spin-logo img{width:100%;height:100%;object-fit:contain;transform-style:preserve-3d;
  animation:spinNS 16s linear infinite;filter:drop-shadow(0 0 6px rgba(32,194,74,.4))}
@keyframes spinNS{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}   /* west→east; use -360deg to reverse */
@media (max-width:640px){.spin-logo{width:42px;height:42px;top:9px;right:11px;opacity:.16}}
@media (prefers-reduced-motion:reduce){.spin-logo img{animation:none}}