/* The cut surface reveals a moving layer, confined to the outer margins. */
body.direct { background: #e8eef0; isolation: isolate; }
.lateral-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lateral-flow { position: absolute; top: -60px; bottom: -60px; width: max(240px, calc((100vw - 1500px) / 2 + 60px)); background: url('/img/lateral-fluxo.svg') center / 100% 100% no-repeat; animation: lateral-current 24s ease-in-out infinite alternate; }
.lateral-flow-left { left: -18px; }
.lateral-flow-right { right: -18px; transform: scaleX(-1); animation-name: lateral-current-right; animation-duration: 30s; }
.direct .site-surface { background: white; position: relative; }
.direct footer { position: relative; background: var(--navy); }
.background-paused .lateral-flow { animation-play-state: paused; }
.motion-toggle { color: #d6eaf5; background: transparent; border: 1px solid #60829c; border-radius: 4px; padding: 8px 12px; min-height: 44px; font-size: 12px; justify-self: start; }
.motion-toggle:hover { color: white; border-color: var(--sky); }
@keyframes lateral-current { to { transform: translateY(28px); } }
@keyframes lateral-current-right { to { transform: scaleX(-1) translateY(-28px); } }
@media (min-width: 1101px) {
  .direct .site-surface { width: calc(100% - 120px); max-width: 1500px; margin: 0 auto; border-radius: 28px 28px 0 0; overflow: hidden; }
  .direct .hero-direct > .hero-copy { padding: 68px clamp(40px, 5vw, 80px) 72px; }
  .direct .form-panel { padding: 68px clamp(40px, 5vw, 80px) 72px; }
  .direct .hero-direct h1 { font-size: clamp(46px, 3.6vw, 60px); }
  .direct .section { padding-left: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
}
@media (max-width: 1100px) {
  .lateral-background { display: none; }
  .motion-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral-flow { animation: none; }
  .motion-toggle { display: none; }
}