/* =========================================================
   OTHER FLAGS — PREPARE DOCUMENTS SECTION
   Continuous animation ONLY for this section
   ========================================================= */

.ofs-docs-motion{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.ofs-docs-motion > *{
  position:relative;
  z-index:2;
}

/* soft ambient moving glow */
.ofs-docs-motion::before{
  content:"";
  position:absolute;
  inset:-18% -10% -18% -10%;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(circle at 18% 30%, rgba(76,187,234,.15) 0%, transparent 28%),
    radial-gradient(circle at 78% 34%, rgba(100,215,247,.11) 0%, transparent 24%),
    radial-gradient(circle at 60% 78%, rgba(47,140,190,.12) 0%, transparent 26%);

  animation: ofsDocsGlowFloat 14s ease-in-out infinite alternate;
}

/* slow sheen sweep */
.ofs-docs-motion::after{
  content:"";
  position:absolute;
  top:-10%;
  left:-25%;
  width:42%;
  height:140%;
  pointer-events:none;
  z-index:1;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.00) 20%,
      rgba(255,255,255,.06) 48%,
      rgba(255,255,255,.00) 72%,
      transparent 100%
    );

  transform:skewX(-20deg);
  animation: ofsDocsShineSweep 12s ease-in-out infinite;
}

/* grid holding the 2 boxes */
.ofs-docs-motion-grid{
  position:relative;
  z-index:2;
}

/* the 2 main inner cards only */
.ofs-docs-motion-card{
  position:relative !important;
  overflow:hidden !important;

  animation: ofsDocsCardFloat 7.5s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.ofs-docs-motion-card:nth-child(2){
  animation-delay:1.2s;
}

.ofs-docs-motion-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(circle at 14% 18%, rgba(118,214,246,.10) 0%, transparent 34%);

  animation: ofsDocsInnerGlow 6.5s ease-in-out infinite alternate;
}

.ofs-docs-motion-card::after{
  content:"";
  position:absolute;
  left:-22%;
  bottom:0;
  width:55%;
  height:1px;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(132,220,247,.00) 15%,
      rgba(132,220,247,.70) 50%,
      rgba(132,220,247,.00) 85%,
      transparent 100%
    );

  animation: ofsDocsLineMove 5.8s ease-in-out infinite;
  opacity:.72;
}

/* keep motion subtle */
@keyframes ofsDocsGlowFloat{
  0%{
    transform:translate3d(-1.2%, 0, 0) scale(1);
    opacity:.88;
  }
  100%{
    transform:translate3d(1.4%, -1.2%, 0) scale(1.04);
    opacity:1;
  }
}

@keyframes ofsDocsShineSweep{
  0%{
    left:-30%;
    opacity:.18;
  }
  45%{
    opacity:.34;
  }
  100%{
    left:105%;
    opacity:.14;
  }
}

@keyframes ofsDocsCardFloat{
  0%,100%{
    transform:translateY(0);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  50%{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(5,39,59,.10);
  }
}

@keyframes ofsDocsInnerGlow{
  0%{
    opacity:.35;
    transform:scale(1);
  }
  100%{
    opacity:.75;
    transform:scale(1.03);
  }
}

@keyframes ofsDocsLineMove{
  0%{
    left:-26%;
    opacity:.10;
  }
  30%{
    opacity:.75;
  }
  100%{
    left:92%;
    opacity:.08;
  }
}

@media (prefers-reduced-motion: reduce){
  .ofs-docs-motion::before,
  .ofs-docs-motion::after,
  .ofs-docs-motion-card,
  .ofs-docs-motion-card::before,
  .ofs-docs-motion-card::after{
    animation:none !important;
  }
}