/* ===== Footer Pro Style ===== */
.jx-footer{
  --bg1:#f3e3c9;
  --bg2:#f7ecd8;
  --ink:#7a1f1f;
  --card:#ffffff80;
  --border:#7a1f1f33;

  position:relative;
  overflow:hidden;
  color:var(--ink);
  background: linear-gradient(120deg,var(--bg1),var(--bg2),#f0dcc0);
  background-size: 300% 300%;
  animation: jxGradient 10s ease infinite;
  font-family: inherit;
}

@keyframes jxGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Wave */
.jx-wave{
  position:absolute;
  top:0; left:0; right:0;
  height:120px;
  transform:translateY(-1px);
}
.jx-wave svg{
  width:100%;
  height:120px;
  display:block;
  will-change: transform;
  animation: jxWaveMove 6s ease-in-out infinite;
}
.jx-wave path{ fill:#ffffff70; }

@keyframes jxWaveMove{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(-60px); } /* حركة أوضح */
}

/* Glow bubble */
.jx-footer:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width:420px; height:420px;
  background: radial-gradient(circle at 30% 30%, #ffffff80, transparent 60%);
  filter: blur(2px);
  animation: jxFloat 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes jxFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-18px,18px)}
}

/* Layout */
.jx-container{
  max-width:1200px;
  margin:0 auto;
  padding:140px 18px 28px;

  display:grid;
  grid-template-columns: 1.15fr .85fr 1.2fr;
  gap:28px;
  align-items:start;
}

@media (max-width: 980px){
  .jx-container{
    grid-template-columns: 1fr;
    padding-top:120px;
  }
}

.jx-col{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px #00000010;
}

/* Brand */
.jx-brand{ display:flex; gap:12px; align-items:center; }
.jx-logo{
  width:54px; height:54px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  padding:6px;
  border:1px solid var(--border);
}
.jx-title{ font-size:18px; font-weight:800; letter-spacing:.2px; }
.jx-subtitle{ font-size:13px; opacity:.85; margin-top:4px; }

/* App */
.jx-appbox{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:#ffffff70;
  border:1px dashed var(--border);
}
.jx-app-title{ font-weight:800; margin-bottom:10px; }
.jx-app-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.jx-badge{
  display:inline-flex;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  transition:.25s;
  background:#fff;
  transform: translateZ(0);
}
.jx-badge img{ height:42px; width:auto; display:block; }
.jx-badge:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 22px #00000012;
}
.jx-app-note{ font-size:12px; opacity:.85; margin-top:10px; }

/* Headings */
.jx-h{ font-weight:900; font-size:16px; margin-bottom:12px; }

/* Links */
.jx-links{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.jx-links a{
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff60;
  transition:.25s;
}
.jx-links a:hover{
  transform: translateX(-4px);
  background:#fff;
  box-shadow:0 10px 18px #00000010;
}

/* Info */
.jx-info{ display:grid; gap:12px; }
.jx-row{ display:flex; gap:12px; align-items:flex-start; }
.jx-ic{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--border);
  background:#ffffff70;
  flex:0 0 40px;
  animation: jxPulse 1.6s ease-in-out infinite;
}
@keyframes jxPulse{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.06) }
}
.jx-strong{ font-weight:900; margin-bottom:3px; }

.jx-footer a{ color:var(--ink); text-decoration:none; font-weight:700; }
.jx-footer a:hover{ text-decoration:underline; }

.jx-ltr{ direction:ltr; unicode-bidi:bidi-override; display:inline-block; }

/* Social */
.jx-social{
  display:flex;
  gap:10px;
  margin-top:14px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.jx-s{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  background:#ffffff70;
  transition:.25s;
}
.jx-s:hover{
  transform: translateY(-3px) rotate(-4deg);
  background:#fff;
  box-shadow:0 10px 18px #00000010;
}

/* Bottom bar */
.jx-bottom{
  margin-top:22px;
  border-top:1px solid var(--border);
  background:#00000008;
}
.jx-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
}
@media (max-width: 680px){
  .jx-bottom-inner{
    flex-direction:column;
    gap:8px;
  }
}

/* ===== Reveal + Float ===== */
.jx-reveal{
  opacity:0;
  transform: translateY(34px) scale(.98);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}
.jx-reveal.is-visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Stagger */
.jx-container > .jx-col:nth-child(1){ transition-delay: .05s; }
.jx-container > .jx-col:nth-child(2){ transition-delay: .18s; }
.jx-container > .jx-col:nth-child(3){ transition-delay: .32s; }

/* Float cards after visible */
.jx-col.is-visible{
  animation: jxCardFloat 5.5s ease-in-out infinite;
  will-change: transform;
}
.jx-container > .jx-col:nth-child(2).is-visible{ animation-delay: .4s; }
.jx-container > .jx-col:nth-child(3).is-visible{ animation-delay: .8s; }

@keyframes jxCardFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-12px) scale(1); } /* حركة أوضح */
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .jx-footer, .jx-footer *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}