/* Smooth, top-down page load (2026-10-05, Emilio: "no up and down jumps on the page").
   Only opacity and transform move, so nothing here can shift the layout. The `sl-js` class is set by
   smooth-load.js before the page paints; without JS every rule below is inert and the page shows as-is. */

/* The browser's default 8px body margin would otherwise show for a moment before the page's own CSS. */
body { margin: 0; }

/* Reveal: blocks fade up into place, top first. Transitions only (never a held animation), so nothing
   stays on its own layer afterwards and the glass badges keep their backdrop blur. */
html.sl-js .sl-in { opacity: 0; transform: translate3d(0, 18px, 0); }
html.sl-js .sl-in.sl-on {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1) var(--sl-d, 0s),
              transform .7s cubic-bezier(.22, .61, .36, 1) var(--sl-d, 0s);
}

/* Hero video/photo fades in over the section's own navy instead of popping in. */
html.sl-js .sl-media { opacity: 0; transition: opacity 1s ease; }
html.sl-js .sl-media.sl-on { opacity: 1; }

/* Hero form: held at its final height from the first paint, a quiet placeholder shows while it loads,
   and the real form fades in only once it has stopped resizing. */
.sl-hold { position: relative; overflow: hidden; }
.sl-hold > iframe { position: relative; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.sl-hold.sl-ready > iframe { opacity: 1; }
.sl-hold::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 28px; right: 28px; top: 32px; bottom: 32px;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%) 0 0 / 200% 100% no-repeat,
    repeating-linear-gradient(to bottom, #eef2f6 0 46px, transparent 46px 78px);
  border-radius: 10px;
  animation: sl-shimmer 1.4s linear infinite;
  transition: opacity .4s ease;
}
.sl-hold.sl-ready::before { opacity: 0; animation: none; }
@keyframes sl-shimmer { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html.sl-js .sl-in, html.sl-js .sl-media { opacity: 1; transform: none; transition: none; }
  .sl-hold::before { animation: none; }
}